From 478903b55a6f7c276fa2285ee35bf8a2b51a72fb Mon Sep 17 00:00:00 2001 From: Rares Stefan Date: Tue, 14 Mar 2023 10:53:13 +0100 Subject: [PATCH] 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 | 5 ++ .../src/components/molecules/table/index.tsx | 21 ++++++++- .../templates/inventory-table/index.tsx | 46 +++++++++++++------ .../allocations/edit-allocation-modal.tsx | 15 ++++-- 4 files changed, 68 insertions(+), 19 deletions(-) create mode 100644 .changeset/brown-wombats-jam.md diff --git a/.changeset/brown-wombats-jam.md b/.changeset/brown-wombats-jam.md new file mode 100644 index 0000000000..c824472934 --- /dev/null +++ b/.changeset/brown-wombats-jam.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +fix(admin-ui): Inventory and order UI fixes and tweaks diff --git a/packages/admin-ui/ui/src/components/molecules/table/index.tsx b/packages/admin-ui/ui/src/components/molecules/table/index.tsx index e6e681a4de..affcfe3add 100644 --- a/packages/admin-ui/ui/src/components/molecules/table/index.tsx +++ b/packages/admin-ui/ui/src/components/molecules/table/index.tsx @@ -11,6 +11,7 @@ type TableRowProps = React.HTMLAttributes & { forceDropdown?: boolean actions?: ActionType[] linkTo?: string + clickable?: boolean } type TableCellProps = React.TdHTMLAttributes & { @@ -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( children, tableActions, enableSearch, + searchClassName, immediateSearchFocus, searchPlaceholder, searchValue, @@ -89,6 +92,7 @@ const Table = React.forwardRef( placeholder={searchPlaceholder} searchValue={searchValue} onSearch={handleSearch!} + className={searchClassName} /> )} @@ -217,7 +221,18 @@ Table.Cell = React.forwardRef( ) Table.Row = React.forwardRef( - ({ className, actions, children, linkTo, forceDropdown, ...props }, ref) => { + ( + { + className, + actions, + children, + linkTo, + forceDropdown, + clickable, + ...props + }, + ref + ) => { const navigate = useNavigate() return ( ( 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 && { 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 7e8d4ce281..041c0d3861 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 @@ -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 = () => { isLoading={isLoading} > - } 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 ( {row.cells.map((cell: Cell, index: number) => { diff --git a/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx b/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx index d095a5f66f..366617fa59 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx +++ b/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