From 961ae7cd3579c39d541d3454d20e843766189c69 Mon Sep 17 00:00:00 2001 From: Rares Capilnar Date: Mon, 13 Mar 2023 12:54:48 +0000 Subject: [PATCH 1/4] Small UI fixes and tweaks --- .../src/components/molecules/table/index.tsx | 21 +++++++- .../templates/inventory-table/index.tsx | 52 +++++++++++++------ .../src/domain/inventory/inventory/index.tsx | 4 +- .../allocations/edit-allocation-modal.tsx | 1 + 4 files changed, 57 insertions(+), 21 deletions(-) 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 e6e681a4de1f0..affcfe3add479 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 b9c8d70adf0ab..041c0d3861ed5 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) => { @@ -413,7 +431,7 @@ const AdjustAvailabilityModal = ({ {variant?.product?.thumbnail ? ( ) : ( @@ -422,7 +440,7 @@ const AdjustAvailabilityModal = ({
{variant?.product?.title} - + ({inventory.sku}) @@ -445,7 +463,7 @@ const AdjustAvailabilityModal = ({ -
+
From 5249d81f9bccc826d80962f1dc2e7e356bdc5be9 Mon Sep 17 00:00:00 2001 From: Rares Capilnar Date: Mon, 13 Mar 2023 13:02:52 +0000 Subject: [PATCH 2/4] Update allocation edit toast copy --- .../details/allocations/edit-allocation-modal.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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 fd16661ef085f..8945af47f4eed 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 @@ -69,11 +69,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("Errors", "Failed to delete the allocation ", "error") }, }) } @@ -116,7 +120,11 @@ const EditAllocationDrawer = ({ }, { onSuccess: () => { - notification("Success", "Allocation updated successfully", "success") + notification( + "Allocation was updated", + "The allocation change was saved.", + "success" + ) close() }, onError: () => { From e66f71749f07c103dce10f13c576e9b21d66c193 Mon Sep 17 00:00:00 2001 From: Rares Stefan Date: Mon, 13 Mar 2023 14:03:47 +0100 Subject: [PATCH 3/4] Create brown-wombats-jam.md --- .changeset/brown-wombats-jam.md | 5 +++++ 1 file changed, 5 insertions(+) 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 0000000000000..c8244729346e7 --- /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 From c4edb72ed941cc9fb2d65a1f2a14ec78bee6fe94 Mon Sep 17 00:00:00 2001 From: Rares Capilnar Date: Mon, 13 Mar 2023 23:44:14 +0000 Subject: [PATCH 4/4] Fix toast title on allocation deletion error --- .../domain/orders/details/allocations/edit-allocation-modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cf15735102a6d..366617fa59c01 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 @@ -80,7 +80,7 @@ const EditAllocationDrawer = ({ close() }, onError: () => { - notification("Errors", "Failed to delete the allocation ", "error") + notification("Error", "Failed to delete the allocation ", "error") }, }) }