WIP: feat: use separate store for record selection storeKeys

Author: mikhail-fedosenko

packages/ra-core/src/controller/button/useDeleteWithConfirmController.spec.tsx

@@ -125,12 +125,22 @@ describe('useDeleteWithConfirmController', () => {
             <TestMemoryRouter>
                 <CoreAdminContext store={store} dataProvider={dataProvider}>
                     <StoreSetter
-                        name="posts.selectedIds"
-                        value={{ ['']: [123, 456], ['bar']: [456] }}
+                        name="posts.selectedIds.storeKeys"
+                        value={['bar.selectedIds']}
                     >
-                        <Routes>
-                            <Route path="/" element={<MockComponent />} />
-                        </Routes>
+                        <StoreSetter
+                            name="posts.selectedIds"
+                            value={[123, 456]}
+                        >
+                            <StoreSetter name="bar.selectedIds" value={[456]}>
+                                <Routes>
+                                    <Route
+                                        path="/"
+                                        element={<MockComponent />}
+                                    />
+                                </Routes>
+                            </StoreSetter>
+                        </StoreSetter>
                     </StoreSetter>
                 </CoreAdminContext>
             </TestMemoryRouter>
@@ -139,11 +149,10 @@ describe('useDeleteWithConfirmController', () => {
         const button = await screen.findByText('Delete');
         fireEvent.click(button);
         await waitFor(
-            () =>
-                expect(store.getItem('posts.selectedIds')).toEqual({
-                    ['']: [123],
-                    ['bar']: [],
-                }),
+            () => {
+                expect(store.getItem('posts.selectedIds')).toEqual([123]);
+                expect(store.getItem('bar.selectedIds')).toEqual([]);
+            },
             {
                 timeout: 1000,
             }

packages/ra-core/src/controller/field/useReferenceManyFieldController.spec.tsx

@@ -362,9 +362,10 @@ describe('useReferenceManyFieldController', () => {
 
         fireEvent.click(await screen.findByText('Toggle'));
         await waitFor(() => {
-            expect(setStore).toHaveBeenCalledWith('books.selectedIds', {
-                ['authors.123']: [456],
-            });
+            expect(setStore).toHaveBeenCalledWith(
+                'authors.123.books.selectedIds',
+                [456]
+            );
         });
     });
 
@@ -399,9 +400,9 @@ describe('useReferenceManyFieldController', () => {
 
         fireEvent.click(await screen.findByText('Toggle'));
         await waitFor(() => {
-            expect(setStore).toHaveBeenCalledWith('books.selectedIds', {
-                ['customKey']: [456],
-            });
+            expect(setStore).toHaveBeenCalledWith('customKey.selectedIds', [
+                456,
+            ]);
         });
     });
 

packages/ra-core/src/controller/field/useReferenceManyFieldController.ts

@@ -93,7 +93,7 @@ export const useReferenceManyFieldController = <
     // selection logic
     const [selectedIds, selectionModifiers] = useRecordSelection({
         resource: reference,
-        storeKey: props.storeKey ?? `${resource}.${record?.id}`,
+        storeKey: props.storeKey ?? `${resource}.${record?.id}.${reference}`,
     });
 
     const onUnselectItems = useCallback(

packages/ra-core/src/controller/list/useRecordSelection.spec.tsx

@@ -23,26 +23,6 @@ describe('useRecordSelection', () => {
     });
 
     it('should use the stored value', () => {
-        const { result } = renderHook(
-            () => useRecordSelection({ resource: 'foo' }),
-            {
-                wrapper: ({ children }) => (
-                    <StoreContextProvider value={memoryStore()}>
-                        <StoreSetter
-                            name="foo.selectedIds"
-                            value={{ ['']: [123, 456] }}
-                        >
-                            {children}
-                        </StoreSetter>
-                    </StoreContextProvider>
-                ),
-            }
-        );
-        const [selected] = result.current;
-        expect(selected).toEqual([123, 456]);
-    });
-
-    it('should use the stored value in previous format', () => {
         const { result } = renderHook(
             () => useRecordSelection({ resource: 'foo' }),
             {
@@ -78,9 +58,7 @@ describe('useRecordSelection', () => {
         select([123, 456, 7]);
         await waitFor(() => {
             const stored = store.getItem('foo.selectedIds');
-            expect(stored).toEqual({
-                ['']: [123, 456, 7],
-            });
+            expect(stored).toEqual([123, 456, 7]);
         });
     });
 
@@ -444,8 +422,8 @@ describe('useRecordSelection', () => {
                     wrapper: ({ children }) => (
                         <StoreContextProvider value={memoryStore()}>
                             <StoreSetter
-                                name="foo.selectedIds"
-                                value={{ bar: [123, 456] }}
+                                name="bar.selectedIds"
+                                value={[123, 456]}
                             >
                                 {children}
                             </StoreSetter>
@@ -533,5 +511,74 @@ describe('useRecordSelection', () => {
                 expect(selected2).toEqual([]);
             });
         });
+
+        describe('using stored storeKeys', () => {
+            it('should keep final storeKey in the store', async () => {
+                const store = memoryStore();
+                renderHook(
+                    () =>
+                        useRecordSelection({
+                            resource: 'foo',
+                            storeKey: 'bar',
+                        }),
+                    {
+                        wrapper: ({ children }) => (
+                            <StoreContextProvider value={store}>
+                                {children}
+                            </StoreContextProvider>
+                        ),
+                    }
+                );
+
+                await waitFor(() => {
+                    const storeKeys = store.getItem(
+                        'foo.selectedIds.storeKeys'
+                    );
+                    expect(storeKeys).toEqual(['bar.selectedIds']);
+                });
+            });
+
+            it('should check all storeKeys listed in store when `fromAllStoreKeys` is `true`', async () => {
+                const store = memoryStore();
+                const { result } = renderHook(
+                    () => {
+                        return useRecordSelection({
+                            resource: 'foo',
+                            storeKey: 'bar1',
+                        });
+                    },
+                    {
+                        wrapper: ({ children }) => (
+                            <StoreContextProvider value={store}>
+                                <StoreSetter
+                                    name={'foo.selectedIds.storeKeys'}
+                                    value={['bar2.selectedIds']}
+                                >
+                                    <StoreSetter
+                                        name={'bar1.selectedIds'}
+                                        value={[123]}
+                                    >
+                                        <StoreSetter
+                                            name={'bar2.selectedIds'}
+                                            value={[123]}
+                                        >
+                                            {children}
+                                        </StoreSetter>
+                                    </StoreSetter>
+                                </StoreSetter>
+                            </StoreContextProvider>
+                        ),
+                    }
+                );
+
+                const [, { clearSelection }] = result.current;
+                clearSelection(true);
+
+                await waitFor(() => {
+                    expect(store.getItem('bar1.selectedIds')).toEqual([]);
+                    expect(store.getItem('bar2.selectedIds')).toEqual([]);
+                });
+            });
+        });
     });
 });