feat: apply PRs #7501, #7495, #7473

.changeset/add-onparse-to-antd.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/antd": minor
+---
+
+Added `onParse` callback to `useTable` and `useSimpleList` hooks to support custom transformation/mapping of URL-synced filters back into search form fields.

examples/monorepo-module-federation/apps/blog-posts/package.json

@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/blog-posts/vite.config.ts

@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "blog_posts",
-      filename: "blog_posts.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./BlogPostList": "./src/pages/blog-posts/list.tsx",
         "./BlogPostShow": "./src/pages/blog-posts/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",

examples/monorepo-module-federation/apps/categories/package.json

@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/categories/vite.config.ts

@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "categories",
-      filename: "categories.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./CategoryList": "./src/pages/categories/list.tsx",
         "./CategoryShow": "./src/pages/categories/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",

examples/monorepo-module-federation/apps/host/.env.example

@@ -1 +1 @@
-VITE_CATEGORIES_URL="http://localhost:4002/assets/categories.js"
+VITE_CATEGORIES_URL="http://localhost:4002/remoteEntry.js"

examples/monorepo-module-federation/apps/host/package.json

@@ -35,7 +35,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/host/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from "react";
+import React, { Suspense } from "react";
 
 import { Authenticated, GitHubBanner, Refine } from "@refinedev/core";
 import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
@@ -25,7 +25,6 @@ import { ColorModeContextProvider } from "./contexts/color-mode";
 import { ForgotPassword } from "./pages/forgotPassword";
 import { Login } from "./pages/login";
 import { Register } from "./pages/register";
-import type { ExtendedWindow } from "./types";
 
 const BlogPostList = React.lazy(() => import("blog_posts/BlogPostList"));
 const BlogPostShow = React.lazy(() => import("blog_posts/BlogPostShow"));
@@ -37,19 +36,7 @@ const CategoryShow = React.lazy(() => import("categories/CategoryShow"));
 const CategoryEdit = React.lazy(() => import("categories/CategoryEdit"));
 const CategoryCreate = React.lazy(() => import("categories/CategoryCreate"));
 
-declare let window: ExtendedWindow;
-
 function App() {
-  useEffect(() => {
-    // This is not as elegant as production code as we cannot use such in production.
-    // But lets assume these envs are coming from a environment handler.
-    // And this is only for sample case.
-    if (import.meta.env.VITE_CATEGORIES_URL) {
-      // This is where we set the payment remote's URL.
-      window.categoriesUrl = import.meta.env.VITE_CATEGORIES_URL;
-    }
-  }, []);
-
   return (
     <BrowserRouter>
       <GitHubBanner />

examples/monorepo-module-federation/apps/host/vite.config.ts

@@ -1,53 +1,60 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 dns.setDefaultResultOrder("verbatim");
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    federation({
-      name: "host",
-      remotes: [
-        {
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, __dirname, "");
+
+  return {
+    plugins: [
+      react(),
+      federation({
+        name: "host",
+        dts: false,
+        remotes: {
           blog_posts: {
-            external: "http://localhost:4001/assets/blog_posts.js",
-            from: "vite",
-            externalType: "url",
+            type: "module",
+            name: "blog_posts",
+            entry: "http://localhost:4001/remoteEntry.js",
+            entryGlobalName: "blog_posts",
+            shareScope: "default",
           },
-        },
-        {
           categories: {
-            external: "Promise.resolve(window.categoriesUrl)",
-            from: "vite",
-            externalType: "promise",
+            type: "module",
+            name: "categories",
+            entry:
+              env.VITE_CATEGORIES_URL || "http://localhost:4002/remoteEntry.js",
+            entryGlobalName: "categories",
+            shareScope: "default",
           },
         },
-      ],
-      shared: [
-        "react",
-        "react-dom",
-        "react-router-dom",
-        "@refinedev/core",
-        "@refinedev/antd",
-        "antd",
-      ],
-    }),
-    tsconfigPaths({ root: __dirname }),
-  ],
+        filename: "remoteEntry.js",
+        shared: [
+          "react",
+          "react-dom",
+          "react-router",
+          "@refinedev/core",
+          "@refinedev/antd",
+          "antd",
+        ],
+      }),
+      tsconfigPaths({ root: __dirname }),
+    ],
 
-  preview: {
-    host: "localhost",
-    port: 4000,
-    strictPort: true,
-  },
-  build: {
-    target: "esnext",
-    minify: false,
-    cssCodeSplit: false,
-  },
+    preview: {
+      host: "localhost",
+      port: 4000,
+      strictPort: true,
+    },
+    build: {
+      target: "esnext",
+      minify: false,
+      cssCodeSplit: false,
+    },
+  };
 });

packages/antd/src/hooks/table/useTable/useTable.spec.tsx

@@ -355,4 +355,62 @@ describe("useTable Hook", () => {
 
     expect(result.current.tableQuery).toEqual(result.current.tableQuery);
   });
+
+  it("should pass form values parsed by onParse to search form from params (syncWithLocation)", async () => {
+    const Component = () => {
+      const { searchFormProps } = useTable({
+        resource: "categories",
+        syncWithLocation: true,
+        onParse: (filters) => {
+          const nameFilter = filters.find(
+            (f) => "field" in f && f.field === "name",
+          );
+          return {
+            name: nameFilter?.value ? `Parsed: ${nameFilter.value}` : "",
+          };
+        },
+      });
+
+      return (
+        <Form {...searchFormProps}>
+          <Form.Item name="name" noStyle>
+            <Input
+              data-test-id="search-name"
+              size="large"
+              placeholder="Search by name"
+            />
+          </Form.Item>
+        </Form>
+      );
+    };
+
+    const { getByDisplayValue } = render(<Component />, {
+      wrapper: TestWrapper({
+        routerProvider: {
+          parse: () => {
+            return () => ({
+              resource: {
+                name: "posts",
+              },
+              params: {
+                filters: [
+                  {
+                    field: "name",
+                    operator: "contains",
+                    value: "Some Name To Look For",
+                  },
+                ],
+              },
+            });
+          },
+        },
+      }),
+    });
+
+    await waitFor(() => {
+      expect(
+        getByDisplayValue("Parsed: Some Name To Look For"),
+      ).toBeInTheDocument();
+    });
+  });
 });

packages/antd/src/hooks/table/useTable/useTable.ts

@@ -29,6 +29,7 @@ import type { FilterValue, SorterResult } from "../../../definitions/table";
 export type useTableProps<TQueryFnData, TError, TSearchVariables, TData> =
   useTablePropsCore<TQueryFnData, TError, TData> & {
     onSearch?: (data: TSearchVariables) => CrudFilters | Promise<CrudFilters>;
+    onParse?: (filters: CrudFilters) => TSearchVariables;
   };
 
 export type useTableReturnType<
@@ -61,6 +62,7 @@ export const useTable = <
   TData extends BaseRecord = TQueryFnData,
 >({
   onSearch,
+  onParse,
   pagination: paginationFromProp,
   filters: filtersFromProp,
   sorters: sortersFromProp,
@@ -126,28 +128,33 @@ export const useTable = <
 
   React.useEffect(() => {
     if (shouldSyncWithLocation) {
-      // get registered fields of form
-      const registeredFields = formSF.form.getFieldsValue() as Record<
-        string,
-        any
-      >;
-      // map `filters` for registered fields
-      const filterFilterMap = Object.keys(registeredFields).reduce(
-        (acc, curr) => {
-          // find filter for current field
-          const filter = filters.find(
-            (filter) => "field" in filter && filter.field === curr,
-          );
-          // if filter exists, set value to filter value
-          if (filter) {
-            acc[curr] = filter?.value;
-          }
-          return acc;
-        },
-        {} as Record<string, any>,
-      );
-      // set values to form
-      formSF.form.setFieldsValue(filterFilterMap as any);
+      if (onParse) {
+        const parsedValues = onParse(filters);
+        formSF.form.setFieldsValue(parsedValues as any);
+      } else {
+        // get registered fields of form
+        const registeredFields = formSF.form.getFieldsValue() as Record<
+          string,
+          any
+        >;
+        // map `filters` for registered fields
+        const filterFilterMap = Object.keys(registeredFields).reduce(
+          (acc, curr) => {
+            // find filter for current field
+            const filter = filters.find(
+              (filter) => "field" in filter && filter.field === curr,
+            );
+            // if filter exists, set value to filter value
+            if (filter) {
+              acc[curr] = filter?.value;
+            }
+            return acc;
+          },
+          {} as Record<string, any>,
+        );
+        // set values to form
+        formSF.form.setFieldsValue(filterFilterMap as any);
+      }
     }
   }, [shouldSyncWithLocation]);