fix(dashboard): export with filters not working (#13711)

* fix(dashboard): export with filters not working

* page size

* own cr

* Create tiny-beans-poke.md

packages/admin/dashboard/src/components/modals/hooks/use-state-aware-to.tsx

@@ -4,6 +4,7 @@ import { Path, useLocation } from "react-router-dom"
 /**
  * Checks if the current location has a restore_params property.
  * If it does, it will return a new path with the params added to it.
+ * Otherwise, it will check if the current location has search params and preserve them.
  * Otherwise, it will return the previous path.
  *
  * This is useful if the modal needs to return to the original path, with
@@ -15,12 +16,17 @@ export const useStateAwareTo = (prev: string | Partial<Path>) => {
   const to = useMemo(() => {
     const params = location.state?.restore_params
 
-    if (!params) {
-      return prev
+    if (params) {
+      return `${prev}?${params.toString()}`
     }
 
-    return `${prev}?${params.toString()}`
-  }, [location.state, prev])
+    // If no restore_params in state, check if the current URL has search params
+    if (location.search) {
+      return `${prev}${location.search}`
+    }
+
+    return prev
+  }, [location.state, location.search, prev])
 
   return to
 }

packages/admin/dashboard/src/routes/products/product-export/product-export.tsx

@@ -3,6 +3,7 @@ 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"
 
 export const ProductExport = () => {
   const { t } = useTranslation()
@@ -24,24 +25,23 @@ export const ProductExport = () => {
 
 const ProductExportContent = () => {
   const { t } = useTranslation()
-  const { mutateAsync } = useExportProducts()
+  const { searchParams } = useProductTableQuery({})
+
+  const { mutateAsync } = useExportProducts({ ...searchParams })
   const { handleSuccess } = useRouteModal()
 
   const handleExportRequest = async () => {
-    await mutateAsync(
-      {},
-      {
-        onSuccess: () => {
-          toast.info(t("products.export.success.title"), {
-            description: t("products.export.success.description"),
-          })
-          handleSuccess()
-        },
-        onError: (err) => {
-          toast.error(err.message)
-        },
-      }
-    )
+    await mutateAsync(searchParams, {
+      onSuccess: () => {
+        toast.info(t("products.export.success.title"), {
+          description: t("products.export.success.description"),
+        })
+        handleSuccess()
+      },
+      onError: (err) => {
+        toast.error(err.message)
+      },
+    })
   }
 
   return (

packages/admin/dashboard/src/routes/products/product-list/components/product-list-table/configurable-product-list-table.tsx

@@ -16,11 +16,11 @@ export const ConfigurableProductListTable = () => {
         heading={t("products.domain")}
         actions={[
           { label: t("actions.export"), to: `export${location.search}` },
-          { label: t("actions.import"), to: "import" },
-          { label: t("actions.create"), to: "create" }
+          { label: t("actions.import"), to: `import${location.search}` },
+          { label: t("actions.create"), to: "create" },
         ]}
       />
       <Outlet />
     </>
   )
-}
+}

packages/admin/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx

@@ -74,7 +74,7 @@ export const ProductListTable = () => {
             <Link to={`export${location.search}`}>{t("actions.export")}</Link>
           </Button>
           <Button size="small" variant="secondary" asChild>
-            <Link to="import">{t("actions.import")}</Link>
+            <Link to={`import${location.search}`}>{t("actions.import")}</Link>
           </Button>
           <Button size="small" variant="secondary" asChild>
             <Link to="create">{t("actions.create")}</Link>