fix(dashboard): handle large resource count in tax rule override edit form (medusajs#13297)

* fix(dashboard): handle larege resource count in tax rule override edit form

* fix: typo

* fix: rm log

Author: fPolic

.changeset/quick-goats-exercise.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): handle large resource count in tax rule override edit form

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 (
     <div className="bg-ui-bg-field-component shadow-borders-base flex items-center justify-between gap-2 rounded-md px-2 py-0.5">
       <Text size="small" leading="compact">
-        {label}
+        {label || product?.title}
       </Text>
       <IconButton
         size="small"

packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/components/tax-region-tax-override-edit-form/tax-region-tax-override-edit-form.tsx

@@ -38,6 +38,8 @@ import {
 import { createTaxRulePayload } from "../../../common/utils"
 import { InitialRuleValues } from "../../types"
 
+export const DISPLAY_OVERRIDE_ITEMS_LIMIT = 10
+
 type TaxRegionTaxOverrideEditFormProps = {
   taxRate: HttpTypes.AdminTaxRate
   initialValues: InitialRuleValues
@@ -272,7 +274,7 @@ export const TaxRegionTaxOverrideEditForm = ({
   }
 
   const getFieldHandler = (type: TaxRateRuleReferenceType) => {
-    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 = ({
                                 <div className="flex flex-col gap-y-1.5">
                                   <Divider variant="dashed" />
                                   <div className="flex flex-col gap-y-1.5 px-1.5">
-                                    {fields.map((field, index) => {
-                                      return (
-                                        <TargetItem
-                                          key={field.id}
-                                          index={index}
-                                          label={field.label}
-                                          onRemove={remove}
-                                        />
-                                      )
-                                    })}
+                                    {fields
+                                      .slice(0, DISPLAY_OVERRIDE_ITEMS_LIMIT)
+                                      .map((field, index) => {
+                                        return (
+                                          <TargetItem
+                                            key={field.id}
+                                            index={index}
+                                            label={field.label}
+                                            value={field.value}
+                                            onRemove={remove}
+                                          />
+                                        )
+                                      })}
                                   </div>
+                                  {fields.length >
+                                    DISPLAY_OVERRIDE_ITEMS_LIMIT && (
+                                    <div className="flex flex-col gap-y-1.5 px-1.5">
+                                      {/* <Divider variant="dashed" /> */}
+                                      <div className="text-ui-fg-muted txt-small flex flex-col gap-y-1.5 px-1.5">
+                                        {t("general.plusCountMore", {
+                                          count:
+                                            fields.length -
+                                            DISPLAY_OVERRIDE_ITEMS_LIMIT,
+                                        })}
+                                      </div>
+                                    </div>
+                                  )}
                                 </div>
                               ) : null}
                             </div>

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
   )