Merge pull request #11173 from marmelab/saved-queries-disableSyncWithLocation

update SavedQueryFilterListItem to update listContext state

Author: WiXSL

packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx

@@ -133,7 +133,7 @@ const Aside = () => (
     </Root>
 );
 
-const SongList = () => (
+const SongList = (
     <List aside={<Aside />}>
         <DataTable rowClick="edit">
             <DataTable.Col source="title" />
@@ -307,3 +307,34 @@ const dataProvider = fakeRestProvider(
     },
     true
 );
+
+export const WithDisableSyncWithLocation = () => {
+    return (
+        <TestMemoryRouter>
+            <Admin dataProvider={dataProvider}>
+                <Resource
+                    name="songs"
+                    list={props => (
+                        <List
+                            {...props}
+                            disableSyncWithLocation
+                            aside={<Aside />}
+                        >
+                            <DataTable rowClick="edit">
+                                <DataTable.Col source="title" />
+                                <DataTable.Col source="artist" />
+                                <DataTable.Col source="writer" />
+                                <DataTable.Col source="producer" />
+                                <DataTable.Col source="recordCompany" />
+                                <DataTable.NumberCol source="rank" />
+                                <DataTable.Col source="released">
+                                    <DateField source="released" />
+                                </DataTable.Col>
+                            </DataTable>
+                        </List>
+                    )}
+                />
+            </Admin>
+        </TestMemoryRouter>
+    );
+};

packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.spec.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import expect from 'expect';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ListContextProvider, ListControllerResult } from 'ra-core';
+
+import { SavedQueryFilterListItem } from './SavedQueryFilterListItem';
+
+const defaultListContext: ListControllerResult = {
+    data: [],
+    displayedFilters: {},
+    filterValues: {},
+    hasNextPage: false,
+    hasPreviousPage: false,
+    hideFilter: () => {},
+    isFetching: false,
+    isLoading: false,
+    onSelect: () => {},
+    onToggleItem: () => {},
+    onUnselectItems: () => {},
+    page: 1,
+    perPage: 10,
+    refetch: () => {},
+    resource: 'posts',
+    selectedIds: [],
+    setFilters: () => {},
+    setPage: () => {},
+    setPerPage: () => {},
+    setSort: () => {},
+    showFilter: () => {},
+    sort: { field: 'id', order: 'ASC' },
+    total: 0,
+    error: null,
+    isPending: false,
+    onSelectAll: () => {},
+};
+
+const savedQuery = {
+    label: 'My Saved Query',
+    value: {
+        filter: { status: 'published' },
+        displayedFilters: [],
+        sort: { field: 'title', order: 'ASC' as const },
+        perPage: 25,
+    },
+};
+
+describe('<SavedQueryFilterListItem />', () => {
+    it('should display the item label', () => {
+        render(
+            <ListContextProvider value={defaultListContext}>
+                <SavedQueryFilterListItem
+                    label={savedQuery.label}
+                    value={savedQuery.value}
+                />
+            </ListContextProvider>
+        );
+        expect(screen.queryByText('My Saved Query')).not.toBeNull();
+    });
+
+    it('should call setFilters and setPage when the item is clicked and not selected', () => {
+        const setFilters = jest.fn();
+        const setPage = jest.fn();
+
+        render(
+            <ListContextProvider
+                value={{ ...defaultListContext, setFilters, setPage }}
+            >
+                <SavedQueryFilterListItem
+                    label={savedQuery.label}
+                    value={savedQuery.value}
+                />
+            </ListContextProvider>
+        );
+
+        fireEvent.click(screen.getByText('My Saved Query'));
+        expect(setFilters).toHaveBeenCalledWith(
+            savedQuery.value.filter,
+            savedQuery.value.displayedFilters
+        );
+        expect(setPage).toHaveBeenCalledWith(1);
+    });
+
+    it('should call setFilters with empty objects and setPage when the item is clicked and already selected', () => {
+        const setFilters = jest.fn();
+        const setPage = jest.fn();
+
+        render(
+            <ListContextProvider
+                value={{
+                    ...defaultListContext,
+                    filterValues: savedQuery.value.filter,
+                    sort: savedQuery.value.sort,
+                    perPage: savedQuery.value.perPage,
+                    displayedFilters: savedQuery.value.displayedFilters,
+                    setFilters,
+                    setPage,
+                }}
+            >
+                <SavedQueryFilterListItem
+                    label={savedQuery.label}
+                    value={savedQuery.value}
+                />
+            </ListContextProvider>
+        );
+
+        fireEvent.click(screen.getByText('My Saved Query'));
+        expect(setFilters).toHaveBeenCalledWith({}, {});
+        expect(setPage).toHaveBeenCalledWith(1);
+    });
+});

packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx

@@ -12,8 +12,7 @@ import {
 } from '@mui/material';
 import CancelIcon from '@mui/icons-material/CancelOutlined';
 import isEqual from 'lodash/isEqual.js';
-import { stringify } from 'query-string';
-import { useListContext, SavedQuery, useNavigate } from 'ra-core';
+import { useListContext, SavedQuery } from 'ra-core';
 
 const arePropsEqual = (
     prevProps: SavedQueryFilterListItemProps,
@@ -29,9 +28,14 @@ export const SavedQueryFilterListItem = memo(
             name: PREFIX,
         });
         const { className, label, sx, value } = props;
-        const { filterValues, sort, perPage, displayedFilters } =
-            useListContext();
-        const navigate = useNavigate();
+        const {
+            filterValues,
+            sort,
+            perPage,
+            displayedFilters,
+            setFilters,
+            setPage,
+        } = useListContext();
 
         const isSelected = isEqual(value, {
             filter: filterValues,
@@ -41,24 +45,13 @@ export const SavedQueryFilterListItem = memo(
         });
 
         const addFilter = (): void => {
-            navigate({
-                search: stringify({
-                    filter: JSON.stringify(value.filter),
-                    sort: value.sort?.field,
-                    order: value.sort?.order,
-                    page: 1,
-                    perPage: value.perPage ?? perPage,
-                    displayedFilters: JSON.stringify(value.displayedFilters),
-                }),
-            });
+            setFilters(value.filter, value.displayedFilters);
+            setPage(1);
         };
 
         const removeFilter = (): void => {
-            navigate({
-                search: stringify({
-                    filter: JSON.stringify({}),
-                }),
-            });
+            setFilters({}, {});
+            setPage(1);
         };
 
         const toggleFilter = (): void =>