@medusajs/dashboard 2.22.0 → 2.22.1

package/src/routes/orders/order-create-return/components/return-create-form/return-item.tsx

@@ -12,6 +12,7 @@ import { ChatBubble, DocumentText, XCircle, XMark } from "@medusajs/icons"
 import { Thumbnail } from "../../../../../components/common/thumbnail"
 import { MoneyAmountCell } from "../../../../../components/table/table-cells/common/money-amount-cell"
 import { Form } from "../../../../../components/common/form"
+import { getReturnableQuantity } from "../../../../../lib/rma"
 import {
   Action,
   ActionMenu,
@@ -79,7 +80,7 @@ function ReturnItem({
                       <Input
                         className="bg-ui-bg-base txt-small w-[67px] rounded-lg"
                         min={1}
-                        max={item.quantity}
+                        max={getReturnableQuantity(item)}
                         type="number"
                         {...field}
                         onChange={(e) => {

package/src/routes/products/product-export/components/configurable-export-filters.spec.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { renderToString } from "react-dom/server"
+import { MemoryRouter } from "react-router-dom"
+import { describe, expect, it, vi } from "vitest"
+
+import { ConfigurableExportFilters } from "./configurable-export-filters"
+
+vi.mock("@medusajs/ui", () => ({
+  Text: ({ children }: { children: React.ReactNode }) => (
+    <span>{children}</span>
+  ),
+}))
+
+vi.mock("../../../../hooks/api/views", () => ({
+  useEntityColumns: () => ({ columns: [] }),
+}))
+
+vi.mock("../../../../hooks/table/use-column-filters", () => ({
+  useColumnFilters: () => ({
+    filters: [
+      {
+        id: "status",
+        label: "Status",
+        type: "multiselect",
+        options: [
+          { label: "Draft", value: "draft" },
+          { label: "Published", value: "published" },
+        ],
+      },
+      {
+        id: "collection.id",
+        label: "Collection",
+        type: "multiselect",
+        options: [{ label: "Summer", value: "pcol_1" }],
+      },
+      { id: "handle", label: "Handle", type: "string" },
+    ],
+    isLoading: false,
+  }),
+}))
+
+vi.mock(
+  "../../product-list/components/product-list-table/product-table-adapter",
+  () => ({
+    useProductTableAdapter: () => ({ entity: "products", queryPrefix: "p" }),
+  })
+)
+
+describe("ConfigurableExportFilters", () => {
+  it("should display the applied product list filters", () => {
+    const params = new URLSearchParams({
+      p_status: JSON.stringify(["draft", "published"]),
+      "p_collection.id": JSON.stringify(["pcol_1"]),
+      p_handle: JSON.stringify(""),
+    })
+
+    const html = renderToString(
+      <MemoryRouter initialEntries={[`/products/export?${params.toString()}`]}>
+        <ConfigurableExportFilters />
+      </MemoryRouter>
+    )
+
+    expect(html).toContain("Status")
+    expect(html).toContain("Draft, Published")
+    expect(html).toContain("Collection")
+    expect(html).toContain("Summer")
+    expect(html).not.toContain("Handle")
+  })
+})

package/src/routes/products/product-export/components/configurable-export-filters.tsx

@@ -0,0 +1,104 @@
+import { DataTableFilter, Text } from "@medusajs/ui"
+import { useMemo } from "react"
+import { useSearchParams } from "react-router-dom"
+import { useEntityColumns } from "../../../../hooks/api/views"
+import { parseFilterParam } from "../../../../hooks/table/query"
+import { useColumnFilters } from "../../../../hooks/table/use-column-filters"
+import { useDate } from "../../../../hooks/use-date"
+import { useProductTableAdapter } from "../../product-list/components/product-list-table/product-table-adapter"
+
+const OPERATOR_LABELS: Record<string, string> = {
+  $eq: "=",
+  $gt: ">",
+  $gte: "≥",
+  $lt: "<",
+  $lte: "≤",
+}
+
+export const ConfigurableExportFilters = () => {
+  const adapter = useProductTableAdapter()
+  const [searchParams] = useSearchParams()
+  const { getFullDate } = useDate()
+
+  const { columns } = useEntityColumns(adapter.entity)
+  const apiColumns = useMemo(() => {
+    return columns && adapter.transformColumns
+      ? adapter.transformColumns(columns)
+      : columns
+  }, [adapter, columns])
+  const { filters } = useColumnFilters(apiColumns)
+
+  const activeFilters = filters.flatMap((filter) => {
+    const value = parseFilterParam(
+      searchParams.get(`${adapter.queryPrefix}_${filter.id}`)
+    )
+
+    if (value === undefined) {
+      return []
+    }
+
+    return [
+      {
+        id: filter.id,
+        label: filter.label,
+        value: formatFilterValue(filter, value, (date) =>
+          getFullDate({ date })
+        ),
+      },
+    ]
+  })
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {activeFilters.map((filter) => (
+        <div
+          key={filter.id}
+          className="bg-ui-bg-field shadow-borders-base text-ui-fg-subtle flex items-stretch overflow-hidden rounded-md"
+        >
+          <Text
+            size="small"
+            weight="plus"
+            leading="compact"
+            className="whitespace-nowrap border-r px-2 py-1"
+          >
+            {filter.label}
+          </Text>
+          <Text
+            size="small"
+            weight="plus"
+            leading="compact"
+            className="truncate px-2 py-1"
+          >
+            {filter.value}
+          </Text>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const formatFilterValue = (
+  filter: DataTableFilter,
+  value: unknown,
+  formatDate: (date: string) => string
+): string => {
+  const options = "options" in filter ? filter.options : undefined
+  const getLabel = (v: unknown) =>
+    options?.find((option) => option.value === v)?.label ?? String(v)
+
+  if (Array.isArray(value)) {
+    return value.map(getLabel).join(", ")
+  }
+
+  if (value && typeof value === "object") {
+    return Object.entries(value)
+      .map(([operator, operand]) => {
+        const formatted =
+          filter.type === "date" ? formatDate(operand) : String(operand)
+        return `${OPERATOR_LABELS[operator] ?? operator} ${formatted}`
+      })
+      .join(", ")
+  }
+
+  return getLabel(value)
+}

package/src/routes/products/product-export/components/export-filters.tsx

@@ -2,10 +2,12 @@ import { Heading, Text } from "@medusajs/ui"
 import { DataTableFilter } from "../../../../components/table/data-table/data-table-filter"
 import { useTranslation } from "react-i18next"
 import { useProductTableFilters } from "../../../../hooks/table/filters"
+import { useFeatureFlag } from "../../../../providers/feature-flag-provider"
+import { ConfigurableExportFilters } from "./configurable-export-filters"
 
 export const ExportFilters = () => {
   const { t } = useTranslation()
-  const filters = useProductTableFilters()
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
 
   return (
     <div>
@@ -15,8 +17,18 @@ export const ExportFilters = () => {
       </Text>
 
       <div className="mt-4">
-        <DataTableFilter filters={filters} readonly />
+        {isViewConfigEnabled ? (
+          <ConfigurableExportFilters />
+        ) : (
+          <LegacyExportFilters />
+        )}
       </div>
     </div>
   )
 }
+
+const LegacyExportFilters = () => {
+  const filters = useProductTableFilters()
+
+  return <DataTableFilter filters={filters} readonly />
+}

package/src/routes/products/product-export/product-export.spec.tsx

@@ -0,0 +1,131 @@
+import React from "react"
+import { renderToString } from "react-dom/server"
+import { MemoryRouter } from "react-router-dom"
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import { ProductExport } from "./product-export"
+
+const mocks = vi.hoisted(() => ({
+  mutateAsync: vi.fn(),
+  isViewConfigEnabled: false,
+  buttonClicks: {} as Record<string, () => unknown>,
+}))
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock("@medusajs/ui", () => ({
+  Button: ({ children, onClick }: React.ComponentProps<"button">) => {
+    if (typeof children === "string" && onClick) {
+      mocks.buttonClicks[children] = onClick as () => unknown
+    }
+    return <button>{children}</button>
+  },
+  Heading: ({ children }: { children: React.ReactNode }) => <h1>{children}</h1>,
+  toast: {
+    info: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+vi.mock("../../../components/modals", () => {
+  const Passthrough = ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  )
+
+  return {
+    RouteDrawer: Object.assign(Passthrough, {
+      Header: Passthrough,
+      Title: Passthrough,
+      Description: Passthrough,
+      Body: Passthrough,
+      Footer: Passthrough,
+      Close: () => null,
+    }),
+    useRouteModal: () => ({ handleSuccess: vi.fn() }),
+  }
+})
+
+vi.mock("./components/export-filters", () => ({
+  ExportFilters: () => null,
+}))
+
+vi.mock("../../../providers/feature-flag-provider", () => ({
+  useFeatureFlag: () => mocks.isViewConfigEnabled,
+}))
+
+vi.mock("../../../hooks/api", () => ({
+  useExportProducts: () => ({ mutateAsync: mocks.mutateAsync }),
+}))
+
+const exportAt = async (url: string) => {
+  renderToString(
+    <MemoryRouter initialEntries={[url]}>
+      <ProductExport />
+    </MemoryRouter>
+  )
+
+  await mocks.buttonClicks["actions.export"]()
+}
+
+describe("ProductExport", () => {
+  afterEach(() => {
+    mocks.mutateAsync.mockReset()
+    mocks.buttonClicks = {}
+    mocks.isViewConfigEnabled = false
+  })
+
+  it("should send the product list filters from the URL with the export request", async () => {
+    await exportAt(
+      "/products/export?status=draft&q=shirt&collection_id=pcol_1&tag_id=ptag_1&created_at=%7B%22%24gte%22%3A%222024-01-01%22%7D"
+    )
+
+    expect(mocks.mutateAsync).toHaveBeenCalledTimes(1)
+    expect(mocks.mutateAsync.mock.calls[0][0]).toEqual({
+      payload: {},
+      query: expect.objectContaining({
+        status: ["draft"],
+        q: "shirt",
+        collection_id: ["pcol_1"],
+        tag_id: ["ptag_1"],
+        created_at: { $gte: "2024-01-01" },
+      }),
+    })
+  })
+
+  it("should not send the list fields with the export request", async () => {
+    await exportAt("/products/export?status=draft")
+
+    expect(mocks.mutateAsync.mock.calls[0][0].query).not.toHaveProperty(
+      "fields"
+    )
+  })
+
+  it("should send the configurable product list filters from the URL with the export request", async () => {
+    mocks.isViewConfigEnabled = true
+    const params = new URLSearchParams({
+      p_status: JSON.stringify(["draft"]),
+      p_q: "shirt",
+      "p_collection.id": JSON.stringify(["pcol_1"]),
+      p_created_at: JSON.stringify({ $gte: "2024-01-01" }),
+      p_handle: JSON.stringify(""),
+      p_order: "-created_at",
+      p_offset: "20",
+    })
+
+    await exportAt(`/products/export?${params.toString()}`)
+
+    expect(mocks.mutateAsync.mock.calls[0][0]).toEqual({
+      payload: {},
+      query: {
+        status: ["draft"],
+        q: "shirt",
+        collection: { id: ["pcol_1"] },
+        created_at: { $gte: "2024-01-01" },
+      },
+    })
+  })
+})

package/src/routes/products/product-export/product-export.tsx

@@ -1,9 +1,15 @@
+import { HttpTypes } from "@medusajs/types"
 import { Button, Heading, toast } from "@medusajs/ui"
+import { useSearchParams } from "react-router-dom"
 import { RouteDrawer, useRouteModal } from "../../../components/modals"
 import { useTranslation } from "react-i18next"
 import { ExportFilters } from "./components/export-filters"
 import { useExportProducts } from "../../../hooks/api"
-import { useProductTableQuery } from "../../../hooks/table/query"
+import {
+  parsePrefixedQueryParams,
+  useProductTableQuery,
+} from "../../../hooks/table/query"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 
 export const ProductExport = () => {
   const { t } = useTranslation()
@@ -25,8 +31,7 @@ export const ProductExport = () => {
 
 const ProductExportContent = () => {
   const { t } = useTranslation()
-  const { searchParams } = useProductTableQuery({ prefix: "p" })
-  delete searchParams.fields
+  const exportQuery = useExportQuery()
 
   const { mutateAsync } = useExportProducts()
   const { handleSuccess } = useRouteModal()
@@ -35,7 +40,7 @@ const ProductExportContent = () => {
     await mutateAsync(
       {
         payload: {},
-        query: searchParams,
+        query: exportQuery,
       },
       {
         onSuccess: () => {
@@ -72,3 +77,18 @@ const ProductExportContent = () => {
     </>
   )
 }
+
+const PRODUCT_TABLE_QUERY_PREFIX = "p"
+
+const useExportQuery = (): HttpTypes.AdminProductListParams => {
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
+  const [urlSearchParams] = useSearchParams()
+  const { searchParams } = useProductTableQuery({})
+
+  if (isViewConfigEnabled) {
+    return parsePrefixedQueryParams(urlSearchParams, PRODUCT_TABLE_QUERY_PREFIX)
+  }
+
+  const { fields: _fields, ...query } = searchParams
+  return query
+}

package/src/routes/products/product-media/components/edit-product-media-form/edit-product-media-form.spec.tsx

@@ -0,0 +1,164 @@
+import { HttpTypes } from "@medusajs/types"
+import { ReactElement } from "react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { EditProductMediaForm } from "./edit-product-media-form"
+
+const mocks = vi.hoisted(() => ({
+  uploadCreate: vi.fn(),
+  mutateAsync: vi.fn(),
+  setError: vi.fn(),
+}))
+
+vi.mock("react", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react")>()),
+  useState: (initial: unknown) => [initial, vi.fn()],
+  useCallback: (fn: unknown) => fn,
+}))
+
+vi.mock("react-hook-form", () => ({
+  useForm: () => ({
+    control: {},
+    handleSubmit: (fn: unknown) => fn,
+    setError: mocks.setError,
+  }),
+  useFieldArray: () => ({
+    fields: [],
+    append: vi.fn(),
+    remove: vi.fn(),
+    update: vi.fn(),
+  }),
+}))
+
+vi.mock("@dnd-kit/core", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@dnd-kit/core")>()),
+  useSensor: vi.fn(),
+  useSensors: vi.fn(),
+}))
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock("@medusajs/ui", () => ({
+  Button: vi.fn(),
+  Checkbox: vi.fn(),
+  clx: vi.fn(),
+  CommandBar: Object.assign(vi.fn(), {
+    Bar: vi.fn(),
+    Value: vi.fn(),
+    Seperator: vi.fn(),
+    Command: vi.fn(),
+  }),
+  Tooltip: vi.fn(),
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+vi.mock("../../../../../components/modals", () => ({
+  RouteFocusModal: {
+    Form: vi.fn(),
+    Header: vi.fn(),
+    Body: vi.fn(),
+    Footer: vi.fn(),
+    Close: vi.fn(),
+  },
+  useRouteModal: () => ({ handleSuccess: vi.fn() }),
+}))
+
+vi.mock("../../../../../components/utilities/keybound-form", () => ({
+  KeyboundForm: vi.fn(),
+}))
+
+vi.mock("../../../../../hooks/api/products", () => ({
+  useUpdateProduct: () => ({
+    mutateAsync: mocks.mutateAsync,
+    isPending: false,
+  }),
+}))
+
+vi.mock("../../../../../lib/client", () => ({
+  sdk: {
+    admin: {
+      upload: { create: mocks.uploadCreate },
+    },
+  },
+}))
+
+vi.mock("../../../common/components/upload-media-form-item", () => ({
+  UploadMediaFormItem: vi.fn(),
+}))
+
+const product = {
+  id: "prod_1",
+  thumbnail: "https://example.com/existing.png",
+  images: [{ id: "img_1", url: "https://example.com/existing.png" }],
+} as unknown as HttpTypes.AdminProduct
+
+const media = [
+  {
+    id: "img_1",
+    url: "https://example.com/existing.png",
+    isThumbnail: true,
+    file: null,
+  },
+  {
+    id: "new_media",
+    url: "blob:new-media",
+    isThumbnail: false,
+    file: new Blob(["<svg />"], { type: "image/svg+xml" }),
+  },
+]
+
+const submit = async () => {
+  const element = EditProductMediaForm({ product }) as ReactElement<{
+    children: ReactElement<{
+      onSubmit: (values: { media: typeof media }) => Promise<void>
+    }>
+  }>
+
+  await element.props.children.props.onSubmit({ media })
+}
+
+describe("EditProductMediaForm", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("should not update the product and should show the server's error when the upload fails", async () => {
+    mocks.uploadCreate.mockRejectedValue(
+      new Error("SVG files are not allowed.")
+    )
+
+    await submit()
+
+    expect(mocks.uploadCreate).toHaveBeenCalledTimes(1)
+    expect(mocks.setError).toHaveBeenCalledWith("media", {
+      type: "invalid_file",
+      message: "SVG files are not allowed.",
+    })
+    expect(mocks.mutateAsync).not.toHaveBeenCalled()
+  })
+
+  it("should update the product with the uploaded file's url when the upload succeeds", async () => {
+    mocks.uploadCreate.mockResolvedValue({
+      files: [{ id: "file_1", url: "https://example.com/uploaded.png" }],
+    })
+
+    await submit()
+
+    expect(mocks.setError).not.toHaveBeenCalled()
+    expect(mocks.mutateAsync).toHaveBeenCalledTimes(1)
+    expect(mocks.mutateAsync.mock.calls[0][0]).toEqual({
+      images: [
+        { id: "img_1", url: "https://example.com/existing.png" },
+        { id: "new_media", url: "https://example.com/uploaded.png" },
+      ],
+      thumbnail: "https://example.com/existing.png",
+    })
+  })
+})

package/src/routes/products/product-media/components/edit-product-media-form/edit-product-media-form.tsx

@@ -109,16 +109,20 @@ export const EditProductMediaForm = ({ product }: ProductMediaViewProps) => {
     let uploaded: HttpTypes.AdminFile[] = []
 
     if (filesToUpload.length) {
-      const { files: uploads } = await sdk.admin.upload
-        .create({ files: filesToUpload.map((m) => m.file) })
-        .catch(() => {
-          form.setError("media", {
-            type: "invalid_file",
-            message: t("products.media.failedToUpload"),
-          })
-          return { files: [] }
+      try {
+        const { files: uploads } = await sdk.admin.upload.create({
+          files: filesToUpload.map((m) => m.file),
         })
-      uploaded = uploads
+        uploaded = uploads
+      } catch (error) {
+        form.setError("media", {
+          type: "invalid_file",
+          message:
+            (error instanceof Error && error.message) ||
+            t("products.media.failedToUpload"),
+        })
+        return
+      }
     }
 
     const withUpdatedUrls = media.map((entry, i) => {