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

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Fix effect check in inventory table and overflow UI

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}

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),
   })
 

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>
   )
 }

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>
           )}