From 95c9fbfdd5f290df0f22115f27b82f0812f8bd67 Mon Sep 17 00:00:00 2001
From: Rares Stefan <rares.capilnar@gmail.com>
Date: Mon, 27 Mar 2023 20:48:47 +0200
Subject: [PATCH] fix(admin-ui): Fix effect check in inventory table and
 overflow UI (#3577)

* Fix effect check in inventory table and overflow UI

* Create ten-berries-rest.md

* Fix edit stock&inventory modal to use the right form

* Fix faulty merge conflict resolution

* Fix inventory item creation

* Add redirect to locations tab if no locations, toast

* Revert redirect and toast, add message in table

---------

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
---
 .changeset/ten-berries-rest.md                         |  5 +++++
 .../admin-ui/ui/src/components/organisms/body-card.tsx |  2 +-
 .../edit-variant-inventory-modal.tsx                   |  7 ++++---
 .../src/components/templates/inventory-table/index.tsx | 10 +++++++++-
 .../ui/src/domain/inventory/locations/index.tsx        |  2 +-
 5 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/ten-berries-rest.md

diff --git a/.changeset/ten-berries-rest.md b/.changeset/ten-berries-rest.md
new file mode 100644
index 0000000000..f648d7ead8
--- /dev/null
+++ b/.changeset/ten-berries-rest.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Fix effect check in inventory table and overflow UI
diff --git a/packages/admin-ui/ui/src/components/organisms/body-card.tsx b/packages/admin-ui/ui/src/components/organisms/body-card.tsx
index 64492ac459..df3e6f1317 100644
--- a/packages/admin-ui/ui/src/components/organisms/body-card.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/body-card.tsx
@@ -52,7 +52,7 @@ const BodyCard: React.FC<BodyCardProps> = ({
         )}
       </div>
       <div
-        className={clsx("flex grow flex-col overflow-y-auto", {
+        className={clsx("flex grow flex-col", {
           "border-grey-20 border-b border-solid": setBorders,
         })}
         onScroll={scrollListener}
diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-inventory-modal.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-inventory-modal.tsx
index 20b6f7c2a9..df1005f62b 100644
--- a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-inventory-modal.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-inventory-modal.tsx
@@ -1,6 +1,6 @@
 import EditFlowVariantForm, {
   EditFlowVariantFormType,
-} from "../../forms/product/variant-form/edit-flow-variant-form"
+} from "../../forms/product/variant-inventory-form/edit-flow-variant-form"
 import LayeredModal, {
   LayeredModalContext,
 } from "../../molecules/modal/layered-modal"
@@ -48,10 +48,10 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
   const { onUpdateVariant, updatingVariant } = useEditProductActions(product.id)
 
   const onSubmit = async (data: EditFlowVariantFormType) => {
-    const locationLevels = data.stock.stock_location || []
+    const locationLevels = data.stock.location_levels || []
     const manageInventory = data.stock.manage_inventory
     delete data.stock.manage_inventory
-    delete data.stock.stock_location
+    delete data.stock.location_levels
 
     let inventoryItemId: string | undefined = itemId
 
@@ -176,6 +176,7 @@ const StockForm = ({
   updatingVariant: boolean
 }) => {
   const form = useForm<EditFlowVariantFormType>({
+    // @ts-ignore
     defaultValues: getEditVariantDefaultValues(variantInventory),
   })
 
diff --git a/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx b/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx
index 6ca1696b05..cc87d69224 100644
--- a/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx
@@ -47,7 +47,7 @@ const LocationDropdown = ({
   const { stock_locations: locations, isLoading } = useAdminStockLocations()
 
   useEffect(() => {
-    if (!selectedLocation && !isLoading && locations) {
+    if (!selectedLocation && !isLoading && locations?.length) {
       onChange(locations[0].id)
     }
   }, [isLoading, locations, onChange, selectedLocation])
@@ -85,6 +85,9 @@ const InventoryTable: React.FC<InventoryTableProps> = () => {
 
   const location = useLocation()
 
+  const { stock_locations, isLoading: locationsLoading } =
+    useAdminStockLocations()
+
   const defaultQuery = useMemo(() => {
     if (store) {
       return {
@@ -284,6 +287,11 @@ const InventoryTable: React.FC<InventoryTableProps> = () => {
           })}
         </Table.Body>
       </Table>
+      {!rows.length && !locationsLoading && !stock_locations?.length && (
+        <div className="text-grey-50 w-full py-8 text-center">
+          You don't have any stock locations. Add one to see inventory.
+        </div>
+      )}
     </TableContainer>
   )
 }
diff --git a/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx b/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx
index b0ef7f5a28..10402dd28f 100644
--- a/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx
@@ -43,7 +43,7 @@ const Locations = () => {
           ) : (
             <div>
               {stock_locations?.map((stockLocation) => (
-                <LocationCard location={stockLocation} />
+                <LocationCard key={stockLocation.id} location={stockLocation} />
               ))}
             </div>
           )}