Merge pull request #17253 from strapi/fix/browse-step-query

packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js

@@ -273,7 +273,7 @@ export const BrowseStep = ({
                     <FolderCard
                       ariaLabel={folder.name}
                       id={`folder-${folder.id}`}
-                      onClick={() => handleClickFolderCard(folder.id)}
+                      onClick={() => handleClickFolderCard(folder.id, folder.path)}
                       cardActions={
                         onEditFolder && (
                           <IconButton
@@ -288,7 +288,9 @@ export const BrowseStep = ({
                       }
                     >
                       <FolderCardBody>
-                        <FolderCardBodyAction onClick={() => handleClickFolderCard(folder.id)}>
+                        <FolderCardBodyAction
+                          onClick={() => handleClickFolderCard(folder.id, folder.path)}
+                        >
                           <Flex as="h2" direction="column" alignItems="start" maxWidth="100%">
                             <TypographyMaxWidth fontWeight="semiBold" ellipsis>
                               {folder.name}

packages/core/upload/admin/src/components/AssetDialog/index.js

@@ -216,9 +216,9 @@ export const AssetDialog = ({
     setSelections(nextAssets);
   };
 
-  const handleFolderChange = (folder) => {
+  const handleFolderChange = (folderId, folderPath) => {
-    onChangeFolder(folder);
+    onChangeFolder(folderId);
-    onChangeFolderParam(folder);
+    onChangeFolderParam(folderId, folderPath);
   };
 
   return (

packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js

@@ -37,7 +37,7 @@ export const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...p
               as={onChangeFolder ? 'button' : NavLink}
               type={onChangeFolder && 'button'}
               to={onChangeFolder ? undefined : crumb.href}
-              onClick={onChangeFolder && (() => onChangeFolder(crumb.id))}
+              onClick={onChangeFolder && (() => onChangeFolder(crumb.id, crumb.path))}
             >
               {crumb.label?.id ? formatMessage(crumb.label) : crumb.label}
             </CrumbLink>

packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js

@@ -51,7 +51,7 @@ export const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeF
               <MenuItem
                 as="button"
                 type="button"
-                onClick={() => onChangeFolder(ascendant.id)}
+                onClick={() => onChangeFolder(ascendant.id, ascendant.path)}
                 key={ascendant.id}
               >
                 {ascendant.label}

packages/core/upload/admin/src/hooks/tests/useModalQueryParams.test.js

@@ -5,48 +5,39 @@ import { NotificationsProvider } from '@strapi/helper-plugin';
 import { act, renderHook } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 
 import useModalQueryParams from '../useModalQueryParams';
 
-const refetchQueriesMock = jest.fn();
+/**
-
+ * TODO: we should set up MSW for these tests
-jest.mock('react-query', () => ({
+ */
-  ...jest.requireActual('react-query'),
-  useQueryClient: () => ({
-    refetchQueries: refetchQueriesMock,
-  }),
-}));
-
-const client = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-
-// eslint-disable-next-line react/prop-types
-function ComponentFixture({ children }) {
-  return (
-    <Router>
-      <Route>
-        <QueryClientProvider client={client}>
-          <ThemeProvider theme={lightTheme}>
-            <NotificationsProvider>
-              <IntlProvider locale="en" messages={{}}>
-                {children}
-              </IntlProvider>
-            </NotificationsProvider>
-          </ThemeProvider>
-        </QueryClientProvider>
-      </Route>
-    </Router>
-  );
-}
-
 function setup(...args) {
-  return renderHook(() => useModalQueryParams(...args), { wrapper: ComponentFixture });
+  return renderHook(() => useModalQueryParams(...args), {
+    wrapper({ children }) {
+      const client = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+      });
+
+      return (
+        <MemoryRouter>
+          <QueryClientProvider client={client}>
+            <ThemeProvider theme={lightTheme}>
+              <NotificationsProvider>
+                <IntlProvider locale="en" messages={{}}>
+                  {children}
+                </IntlProvider>
+              </NotificationsProvider>
+            </ThemeProvider>
+          </QueryClientProvider>
+        </MemoryRouter>
+      );
+    },
+  });
 }
 
 const FIXTURE_QUERY = {
@@ -63,12 +54,12 @@ describe('useModalQueryParams', () => {
     jest.clearAllMocks();
   });
 
-  test('setup proper defaults', async () => {
+  test('setup proper defaults', () => {
     const {
       result: {
         current: [{ queryObject, rawQuery }, callbacks],
       },
-    } = await setup();
+    } = setup();
 
     expect(queryObject).toStrictEqual(FIXTURE_QUERY);
     expect(rawQuery).toBe('page=1&sort=updatedAt:DESC&pageSize=10');
@@ -83,18 +74,18 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('set initial state', async () => {
+  test('set initial state', () => {
     const {
       result: { current },
-    } = await setup();
+    } = setup();
 
     expect(current[0].queryObject).toStrictEqual(FIXTURE_QUERY);
   });
 
-  test('handles initial state', async () => {
+  test('handles initial state', () => {
     const {
       result: { current },
-    } = await setup({ state: true });
+    } = setup({ state: true });
 
     expect(current[0].queryObject).toStrictEqual({
       ...FIXTURE_QUERY,
@@ -102,8 +93,8 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('onChangeFilters', async () => {
+  test('onChangeFilters', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
       result.current[1].onChangeFilters([{ some: 'thing' }]);
@@ -122,11 +113,11 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('onChangeFolder', async () => {
+  test('onChangeFolder', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
-      result.current[1].onChangeFolder({ id: 1 });
+      result.current[1].onChangeFolder({ id: 1 }, '/1');
     });
 
     expect(result.current[0].queryObject).toStrictEqual({
@@ -134,11 +125,12 @@ describe('useModalQueryParams', () => {
       folder: {
         id: 1,
       },
+      folderPath: '/1',
     });
   });
 
-  test('onChangePage', async () => {
+  test('onChangePage', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
       result.current[1].onChangePage({ id: 1 });
@@ -152,8 +144,8 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('onChangePageSize', async () => {
+  test('onChangePageSize', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
       result.current[1].onChangePageSize(5);
@@ -165,8 +157,8 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('onChangePageSize - converts string to numbers', async () => {
+  test('onChangePageSize - converts string to numbers', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
       result.current[1].onChangePageSize('5');
@@ -178,8 +170,8 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('onChangeSort', async () => {
+  test('onChangeSort', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
       result.current[1].onChangeSort('something:else');
@@ -191,8 +183,8 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('onChangeSearch', async () => {
+  test('onChangeSearch', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
       result.current[1].onChangeSearch('something');
@@ -204,8 +196,8 @@ describe('useModalQueryParams', () => {
     });
   });
 
-  test('onChangeSearch - empty string resets all values and removes _q and page', async () => {
+  test('onChangeSearch - empty string resets all values and removes _q and page', () => {
-    const { result } = await setup();
+    const { result } = setup();
 
     act(() => {
       result.current[1].onChangePage({ id: 1 });

packages/core/upload/admin/src/hooks/useModalQueryParams.js

@@ -8,7 +8,7 @@ import { useConfig } from './useConfig';
 const useModalQueryParams = (initialState) => {
   const { trackUsage } = useTracking();
   const {
-    config: { isLoading, isError, data: config },
+    config: { data: config },
   } = useConfig();
 
   const [queryObject, setQueryObject] = useState({
@@ -22,15 +22,14 @@ const useModalQueryParams = (initialState) => {
   });
 
   useEffect(() => {
-    if (isLoading || isError) {
+    if (config) {
-      return;
+      setQueryObject((prevQuery) => ({
+        ...prevQuery,
+        sort: config.sort,
+        pageSize: config.pageSize,
+      }));
     }
-    setQueryObject((prevQuery) => ({
+  }, [config]);
-      ...prevQuery,
-      sort: config.sort,
-      pageSize: config.pageSize,
-    }));
-  }, [isLoading, isError, config]);
 
   const handleChangeFilters = (nextFilters) => {
     trackUsage('didFilterMediaLibraryElements', {
@@ -72,8 +71,8 @@ const useModalQueryParams = (initialState) => {
     }
   };
 
-  const handleChangeFolder = (folder) => {
+  const handleChangeFolder = (folder, folderPath) => {
-    setQueryObject((prev) => ({ ...prev, folder: folder ?? null }));
+    setQueryObject((prev) => ({ ...prev, folder: folder ?? null, folderPath }));
   };
 
   return [

packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js

@@ -16,6 +16,7 @@ const getBreadcrumbDataML = (folder) => {
     data.push({
       id: folder.parent.id,
       label: folder.parent.name,
+      path: folder.parent.path,
     });
   }
 
@@ -23,6 +24,7 @@ const getBreadcrumbDataML = (folder) => {
     data.push({
       id: folder.id,
       label: folder.name,
+      path: folder.path,
     });
   }
 

packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js

@@ -3,84 +3,104 @@ import { getBreadcrumbDataCM } from '..';
 const FIXTURE_FOLDER = {
   id: 1,
   name: 'first-level',
+  path: '/1 ',
 };
 
 describe('getBreadcrumbDataCM', () => {
   test('return one item at the root of the media library', () => {
-    expect(getBreadcrumbDataCM(null)).toStrictEqual([
+    expect(getBreadcrumbDataCM(null)).toMatchInlineSnapshot(`
-      {
+      [
-        id: null,
+        {
-        label: {
+          "id": null,
-          id: 'upload.plugin.name',
+          "label": {
-          defaultMessage: 'Media Library',
+            "defaultMessage": "Media Library",
+            "id": "upload.plugin.name",
+          },
         },
-      },
+      ]
-    ]);
+    `);
   });
 
   test('returns two items for the first level of the media library', () => {
-    expect(getBreadcrumbDataCM(FIXTURE_FOLDER)).toStrictEqual([
+    expect(getBreadcrumbDataCM(FIXTURE_FOLDER)).toMatchInlineSnapshot(`
-      {
+      [
-        id: null,
+        {
-        label: {
+          "id": null,
-          id: 'upload.plugin.name',
+          "label": {
-          defaultMessage: 'Media Library',
+            "defaultMessage": "Media Library",
+            "id": "upload.plugin.name",
+          },
         },
-      },
+        {
-      {
+          "id": 1,
-        id: 1,
+          "label": "first-level",
-        label: 'first-level',
+          "path": "/1 ",
-      },
+        },
-    ]);
+      ]
+    `);
   });
 
   test('returns three items for the second level of the media library', () => {
     expect(
-      getBreadcrumbDataCM({ ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level' } })
+      getBreadcrumbDataCM({
-    ).toStrictEqual([
+        ...FIXTURE_FOLDER,
-      {
+        parent: { id: 2, name: 'second-level', path: '/2' },
-        id: null,
+      })
-        label: {
+    ).toMatchInlineSnapshot(`
-          id: 'upload.plugin.name',
+      [
-          defaultMessage: 'Media Library',
+        {
+          "id": null,
+          "label": {
+            "defaultMessage": "Media Library",
+            "id": "upload.plugin.name",
+          },
         },
-      },
+        {
-
+          "id": 2,
-      {
+          "label": "second-level",
-        id: 2,
+          "path": "/2",
-        label: 'second-level',
+        },
-      },
+        {
-
+          "id": 1,
-      {
+          "label": "first-level",
-        id: 1,
+          "path": "/1 ",
-        label: 'first-level',
+        },
-      },
+      ]
-    ]);
+    `);
   });
 
   test('returns four items for the third level of the media library', () => {
     expect(
       getBreadcrumbDataCM({
         ...FIXTURE_FOLDER,
-        parent: { id: 2, name: 'second-level', parent: { id: 3, name: 'third-level' } },
+        parent: {
-      })
+          id: 2,
-    ).toStrictEqual([
+          name: 'second-level',
-      {
+          path: '/2',
-        id: null,
+          parent: { id: 3, name: 'third-level', path: '/3' },
-        label: {
-          id: 'upload.plugin.name',
-          defaultMessage: 'Media Library',
         },
-      },
+      })
-      [],
+    ).toMatchInlineSnapshot(`
-      {
+      [
-        id: 2,
+        {
-        label: 'second-level',
+          "id": null,
-      },
+          "label": {
-      {
+            "defaultMessage": "Media Library",
-        id: 1,
+            "id": "upload.plugin.name",
-        label: 'first-level',
+          },
-      },
+        },
-    ]);
+        [],
+        {
+          "id": 2,
+          "label": "second-level",
+          "path": "/2",
+        },
+        {
+          "id": 1,
+          "label": "first-level",
+          "path": "/1 ",
+        },
+      ]
+    `);
   });
 });