fix(admin-ui): Inventory and order UI fixes and tweaks (#3461)

This PR aims to tackle a few different small fixes and tweaks related to inventory and order details UI, in connection to multiwarehousing features.

- Successfully deleting an allocation should now only present one toast
- Updated copy in allocation editing toasts
- Inventory table search should now be the same height as the location selection trigger
- Inventory table rows should now correctly visually indicate that they are clickable
- Removed Filters from Inventory table for the time being
- Added actions to Inventory table rows for adjusting availability (same action as clicking the row, which remains) and going to the product detail page for the inventory item

Resolves CORE-1229, CORE-1228, CORE-1227, CORE-1233, CORE-1230

.changeset/brown-wombats-jam.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Inventory and order UI fixes and tweaks

packages/admin-ui/ui/src/components/molecules/table/index.tsx

@@ -11,6 +11,7 @@ type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
   forceDropdown?: boolean
   actions?: ActionType[]
   linkTo?: string
+  clickable?: boolean
 }
 
 type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & {
@@ -28,6 +29,7 @@ export type TableProps = {
   filteringOptions?: FilteringOptionProps[] | React.ReactNode
   tableActions?: React.ReactNode
   enableSearch?: boolean
+  searchClassName?: string
   immediateSearchFocus?: boolean
   searchPlaceholder?: string
   searchValue?: string
@@ -55,6 +57,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       children,
       tableActions,
       enableSearch,
+      searchClassName,
       immediateSearchFocus,
       searchPlaceholder,
       searchValue,
@@ -89,6 +92,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
                 placeholder={searchPlaceholder}
                 searchValue={searchValue}
                 onSearch={handleSearch!}
+                className={searchClassName}
               />
             )}
           </div>
@@ -217,15 +221,28 @@ Table.Cell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
 )
 
 Table.Row = React.forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ className, actions, children, linkTo, forceDropdown, ...props }, ref) => {
+  (
+    {
+      className,
+      actions,
+      children,
+      linkTo,
+      forceDropdown,
+      clickable,
+      ...props
+    },
+    ref
+  ) => {
     const navigate = useNavigate()
     return (
       <tr
         ref={ref}
         className={clsx(
           "inter-small-regular border-grey-20 text-grey-90 border-t border-b",
           className,
-          { "hover:bg-grey-5 cursor-pointer": linkTo !== undefined }
+          {
+            "hover:bg-grey-5 cursor-pointer": linkTo !== undefined || clickable,
+          }
         )}
         {...props}
         {...(linkTo && {

packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx

@@ -17,7 +17,6 @@ import Button from "../../fundamentals/button"
 import ImagePlaceholder from "../../fundamentals/image-placeholder"
 import InputField from "../../molecules/input"
 import InputHeader from "../../fundamentals/input-header"
-import InventoryFilter from "../../../domain/inventory/filter-dropdown"
 import Modal from "../../molecules/modal"
 import { NextSelect } from "../../molecules/select/next-select"
 import Spinner from "../../atoms/spinner"
@@ -28,7 +27,7 @@ import { isEmpty } from "lodash"
 import qs from "qs"
 import { useInventoryFilters } from "./use-inventory-filters"
 import useInventoryTableColumn from "./use-inventory-column"
-import { useLocation } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router-dom"
 import useNotification from "../../../hooks/use-notification"
 import useToggleState from "../../../hooks/use-toggle-state"
 
@@ -237,19 +236,8 @@ const InventoryTable: React.FC<InventoryTableProps> = () => {
       isLoading={isLoading}
     >
       <Table
-        filteringOptions={
-          <InventoryFilter
-            filters={filters}
-            submitFilters={setFilters}
-            clearFilters={clearFilters}
-            tabs={filterTabs}
-            onTabClick={setTab}
-            activeTab={activeFilterTab}
-            onRemoveTab={removeTab}
-            onSaveTab={saveTab}
-          />
-        }
         enableSearch
+        searchClassName="h-[40px]"
         handleSearch={setQuery}
         searchValue={query}
         tableActions={
@@ -313,16 +301,46 @@ const InventoryRow = ({
 } & TableRowProps) => {
   const inventory = row.original
 
+  const navigate = useNavigate()
+
   const {
     state: isShowingAdjustAvailabilityModal,
     open: showAdjustAvailabilityModal,
     close: closeAdjustAvailabilityModal,
   } = useToggleState()
+
+  const getRowActionables = () => {
+    const productId = inventory.variants?.length
+      ? inventory.variants[0].product_id
+      : null
+
+    const actions = [
+      {
+        label: "Adjust Availability",
+        onClick: showAdjustAvailabilityModal,
+      },
+    ]
+
+    if (productId) {
+      return [
+        {
+          label: "View Product",
+          onClick: () => navigate(`/a/products/${productId}`),
+        },
+        ...actions,
+      ]
+    }
+
+    return actions
+  }
+
   return (
     <Table.Row
       color={"inherit"}
       onClick={showAdjustAvailabilityModal}
+      clickable
       forceDropdown
+      actions={getRowActionables()}
       {...rest}
     >
       {row.cells.map((cell: Cell, index: number) => {

packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx

@@ -72,11 +72,15 @@ const EditAllocationDrawer = ({
   const handleDelete = () => {
     deleteReservation(undefined, {
       onSuccess: () => {
-        notification("Success", "Allocation deleted successfully", "success")
+        notification(
+          "Allocation was deleted",
+          "The allocated items have been released.",
+          "success"
+        )
         close()
       },
       onError: () => {
-        notification("Errors", "Failed to deleted ", "success")
+        notification("Error", "Failed to delete the allocation ", "error")
       },
     })
   }
@@ -119,7 +123,11 @@ const EditAllocationDrawer = ({
       },
       {
         onSuccess: () => {
-          notification("Success", "Allocation updated successfully", "success")
+          notification(
+            "Allocation was updated",
+            "The allocation change was saved.",
+            "success"
+          )
           close()
         },
         onError: () => {
@@ -265,6 +273,7 @@ const EditAllocationDrawer = ({
                 className="my-1 w-full border text-rose-50"
                 size="small"
                 onClick={handleDelete}
+                type="button"
               >
                 Delete allocation
               </Button>