From 87a61baf8fec17929002cc78bb8b4becc7dfd20d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Tue, 26 Aug 2025 10:45:27 +0200 Subject: [PATCH] fix(dashboard): handle large resource count in tax rule override edit form (#13297) * fix(dashboard): handle larege resource count in tax rule override edit form * fix: typo * fix: rm log --- .changeset/quick-goats-exercise.md | 5 ++ .../components/target-item/target-item.tsx | 17 ++++- .../tax-region-tax-override-edit-form.tsx | 42 +++++++++---- .../tax-region-tax-override-edit.tsx | 62 +++++++++++++++---- 4 files changed, 99 insertions(+), 27 deletions(-) create mode 100644 .changeset/quick-goats-exercise.md diff --git a/.changeset/quick-goats-exercise.md b/.changeset/quick-goats-exercise.md new file mode 100644 index 0000000000..d25c7a7518 --- /dev/null +++ b/.changeset/quick-goats-exercise.md @@ -0,0 +1,5 @@ +--- +"@medusajs/dashboard": patch +--- + +fix(dashboard): handle large resource count in tax rule override edit form diff --git a/packages/admin/dashboard/src/routes/tax-regions/common/components/target-item/target-item.tsx b/packages/admin/dashboard/src/routes/tax-regions/common/components/target-item/target-item.tsx index 4f30b0fd4b..4f200288cd 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/common/components/target-item/target-item.tsx +++ b/packages/admin/dashboard/src/routes/tax-regions/common/components/target-item/target-item.tsx @@ -1,17 +1,30 @@ import { XMarkMini } from "@medusajs/icons" import { IconButton, Text } from "@medusajs/ui" +import { useProduct } from "../../../../../hooks/api" type TargetItemProps = { index: number onRemove: (index: number) => void label: string + value: string } -export const TargetItem = ({ index, label, onRemove }: TargetItemProps) => { +export const TargetItem = ({ + index, + label, + onRemove, + value, +}: TargetItemProps) => { + const { product } = useProduct( + value, + { fields: "id,title" }, + { enabled: !label } + ) + return (
- {label} + {label || product?.title} { - const { fields, remove, append } = getControls(type) + const { fields, remove, prepend } = getControls(type) const modalId = getStackedModalId(type) return (references: TaxRateRuleReference[]) => { @@ -296,7 +298,7 @@ export const TaxRegionTaxOverrideEditForm = ({ } } - append(fieldsToAdd) + prepend(fieldsToAdd) // to display newer items first setIsOpen(modalId, false) } } @@ -588,17 +590,33 @@ export const TaxRegionTaxOverrideEditForm = ({
- {fields.map((field, index) => { - return ( - - ) - })} + {fields + .slice(0, DISPLAY_OVERRIDE_ITEMS_LIMIT) + .map((field, index) => { + return ( + + ) + })}
+ {fields.length > + DISPLAY_OVERRIDE_ITEMS_LIMIT && ( +
+ {/* */} +
+ {t("general.plusCountMore", { + count: + fields.length - + DISPLAY_OVERRIDE_ITEMS_LIMIT, + })} +
+
+ )}
) : null}
diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/tax-region-tax-override-edit.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/tax-region-tax-override-edit.tsx index ba7b8e3746..fa03561ca3 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/tax-region-tax-override-edit.tsx +++ b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/tax-region-tax-override-edit.tsx @@ -7,9 +7,13 @@ import { RouteDrawer } from "../../../components/modals" import { useProductTypes } from "../../../hooks/api/product-types" import { useProducts } from "../../../hooks/api/products" import { TaxRateRuleReferenceType } from "../common/constants" -import { TaxRegionTaxOverrideEditForm } from "./components/tax-region-tax-override-edit-form" +import { + DISPLAY_OVERRIDE_ITEMS_LIMIT, + TaxRegionTaxOverrideEditForm, +} from "./components/tax-region-tax-override-edit-form" import { InitialRuleValues } from "./types" import { useShippingOptions, useTaxRate } from "../../../hooks/api" +import { TaxRateRuleReference } from "../common/schemas" export const TaxRegionTaxOverrideEdit = () => { const { t } = useTranslation() @@ -49,7 +53,7 @@ export const TaxRegionTaxOverrideEdit = () => { const useDefaultRulesValues = ( taxRate?: HttpTypes.AdminTaxRate -): { initialValues?: InitialRuleValues; isPending: boolean } => { +): { initialValues: InitialRuleValues; isPending: boolean } => { const rules = taxRate?.rules || [] const idsByReferenceType: { @@ -63,10 +67,12 @@ const useDefaultRulesValues = ( // [TaxRateRuleReferenceType.CUSTOMER_GROUP]: [], } - rules.forEach((rule) => { - const reference = rule.reference as TaxRateRuleReferenceType - idsByReferenceType[reference]?.push(rule.reference_id) - }) + rules + .sort((a, b) => a.created_at.localeCompare(b.created_at)) // preffer newer rules for display + .forEach((rule) => { + const reference = rule.reference as TaxRateRuleReferenceType + idsByReferenceType[reference]?.push(rule.reference_id) + }) const queries = [ { @@ -137,8 +143,21 @@ const useDefaultRulesValues = ( const queryResults = queries.map(({ ids, hook }) => { const enabled = ids.length > 0 + return { - result: hook({ id: ids, limit: ids.length }, { enabled }), + result: hook( + { + /** + * Limit fetch to 10 resources for display + */ + id: + ids.length > DISPLAY_OVERRIDE_ITEMS_LIMIT + ? ids.slice(0, DISPLAY_OVERRIDE_ITEMS_LIMIT) + : ids, + limit: DISPLAY_OVERRIDE_ITEMS_LIMIT, + }, + { enabled } + ), enabled, } }) @@ -162,12 +181,29 @@ const useDefaultRulesValues = ( }) const initialRulesValues: InitialRuleValues = queries.reduce( - (acc, { key, getResult }, index) => ({ - ...acc, - [key]: queryResults[index].enabled - ? getResult(queryResults[index].result) - : [], - }), + (acc, { key, getResult }, index) => { + let initialValues: TaxRateRuleReference[] = [] + + if (queryResults[index].enabled) { + const fetchedEntityList = getResult(queryResults[index].result) + + const entityIdMap = new Map( + fetchedEntityList.map((entity) => [entity.value, entity]) + ) + + const initialIds = idsByReferenceType[key] + + initialValues = initialIds.map((id) => ({ + value: id, + label: entityIdMap.get(id)?.label || "", + })) + } + + return { + ...acc, + [key]: initialValues, + } + }, {} as InitialRuleValues )