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

2025-11-03 03:17:11 +00:00 · 2023-07-10 12:35:38 +01:00 · 2023-07-10 12:35:38 +01:00 · d8c46dd17e
commit d8c46dd17e
parent 8e89a3f46b 96d8ebb0c8
8 changed files with 152 additions and 137 deletions
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
+++ b/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}
--- a/packages/core/upload/admin/src/components/AssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/index.js
@ -216,9 +216,9 @@ export const AssetDialog = ({
    setSelections(nextAssets);
  };

-  const handleFolderChange = (folder) => {
-    onChangeFolder(folder);
-    onChangeFolderParam(folder);
+  const handleFolderChange = (folderId, folderPath) => {
+    onChangeFolder(folderId);
+    onChangeFolderParam(folderId, folderPath);
  };

  return (
--- a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
+++ b/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>
--- a/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
+++ b/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}
--- a/packages/core/upload/admin/src/hooks/tests/useModalQueryParams.test.js
+++ b/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();
-
-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>
-  );
-}
-
+/**
+ * TODO: we should set up MSW for these tests
+ */
 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 () => {
-    const { result } = await setup();
+  test('onChangeFilters', () => {
+    const { result } = setup();

    act(() => {
      result.current[1].onChangeFilters([{ some: 'thing' }]);
@ -122,11 +113,11 @@ describe('useModalQueryParams', () => {
    });
  });

-  test('onChangeFolder', async () => {
-    const { result } = await setup();
+  test('onChangeFolder', () => {
+    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 () => {
-    const { result } = await setup();
+  test('onChangePage', () => {
+    const { result } = setup();

    act(() => {
      result.current[1].onChangePage({ id: 1 });
@ -152,8 +144,8 @@ describe('useModalQueryParams', () => {
    });
  });

-  test('onChangePageSize', async () => {
-    const { result } = await setup();
+  test('onChangePageSize', () => {
+    const { result } = setup();

    act(() => {
      result.current[1].onChangePageSize(5);
@ -165,8 +157,8 @@ describe('useModalQueryParams', () => {
    });
  });

-  test('onChangePageSize - converts string to numbers', async () => {
-    const { result } = await setup();
+  test('onChangePageSize - converts string to numbers', () => {
+    const { result } = setup();

    act(() => {
      result.current[1].onChangePageSize('5');
@ -178,8 +170,8 @@ describe('useModalQueryParams', () => {
    });
  });

-  test('onChangeSort', async () => {
-    const { result } = await setup();
+  test('onChangeSort', () => {
+    const { result } = setup();

    act(() => {
      result.current[1].onChangeSort('something:else');
@ -191,8 +183,8 @@ describe('useModalQueryParams', () => {
    });
  });

-  test('onChangeSearch', async () => {
-    const { result } = await setup();
+  test('onChangeSearch', () => {
+    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 () => {
-    const { result } = await setup();
+  test('onChangeSearch - empty string resets all values and removes _q and page', () => {
+    const { result } = setup();

    act(() => {
      result.current[1].onChangePage({ id: 1 });
--- a/packages/core/upload/admin/src/hooks/useModalQueryParams.js
+++ b/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) {
-      return;
+    if (config) {
+      setQueryObject((prevQuery) => ({
+        ...prevQuery,
+        sort: config.sort,
+        pageSize: config.pageSize,
+      }));
    }
-    setQueryObject((prevQuery) => ({
-      ...prevQuery,
-      sort: config.sort,
-      pageSize: config.pageSize,
-    }));
-  }, [isLoading, isError, config]);
+  }, [config]);

  const handleChangeFilters = (nextFilters) => {
    trackUsage('didFilterMediaLibraryElements', {
@ -72,8 +71,8 @@ const useModalQueryParams = (initialState) => {
    }
  };

-  const handleChangeFolder = (folder) => {
-    setQueryObject((prev) => ({ ...prev, folder: folder ?? null }));
+  const handleChangeFolder = (folder, folderPath) => {
+    setQueryObject((prev) => ({ ...prev, folder: folder ?? null, folderPath }));
  };

  return [
--- a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
+++ b/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,
    });
  }

--- a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
+++ b/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([
-      {
-        id: null,
-        label: {
-          id: 'upload.plugin.name',
-          defaultMessage: 'Media Library',
+    expect(getBreadcrumbDataCM(null)).toMatchInlineSnapshot(`
+      [
+        {
+          "id": null,
+          "label": {
+            "defaultMessage": "Media Library",
+            "id": "upload.plugin.name",
+          },
        },
-      },
-    ]);
+      ]
+    `);
  });

  test('returns two items for the first level of the media library', () => {
-    expect(getBreadcrumbDataCM(FIXTURE_FOLDER)).toStrictEqual([
-      {
-        id: null,
-        label: {
-          id: 'upload.plugin.name',
-          defaultMessage: 'Media Library',
+    expect(getBreadcrumbDataCM(FIXTURE_FOLDER)).toMatchInlineSnapshot(`
+      [
+        {
+          "id": null,
+          "label": {
+            "defaultMessage": "Media Library",
+            "id": "upload.plugin.name",
+          },
        },
-      },
-      {
-        id: 1,
-        label: 'first-level',
-      },
-    ]);
+        {
+          "id": 1,
+          "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' } })
-    ).toStrictEqual([
-      {
-        id: null,
-        label: {
-          id: 'upload.plugin.name',
-          defaultMessage: 'Media Library',
+      getBreadcrumbDataCM({
+        ...FIXTURE_FOLDER,
+        parent: { id: 2, name: 'second-level', path: '/2' },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "id": null,
+          "label": {
+            "defaultMessage": "Media Library",
+            "id": "upload.plugin.name",
+          },
        },
-      },
-
-      {
-        id: 2,
-        label: 'second-level',
-      },
-
-      {
-        id: 1,
-        label: 'first-level',
-      },
-    ]);
+        {
+          "id": 2,
+          "label": "second-level",
+          "path": "/2",
+        },
+        {
+          "id": 1,
+          "label": "first-level",
+          "path": "/1 ",
+        },
+      ]
+    `);
  });

  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' } },
-      })
-    ).toStrictEqual([
-      {
-        id: null,
-        label: {
-          id: 'upload.plugin.name',
-          defaultMessage: 'Media Library',
+        parent: {
+          id: 2,
+          name: 'second-level',
+          path: '/2',
+          parent: { id: 3, name: 'third-level', path: '/3' },
        },
-      },
-      [],
-      {
-        id: 2,
-        label: 'second-level',
-      },
-      {
-        id: 1,
-        label: 'first-level',
-      },
-    ]);
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "id": null,
+          "label": {
+            "defaultMessage": "Media Library",
+            "id": "upload.plugin.name",
+          },
+        },
+        [],
+        {
+          "id": 2,
+          "label": "second-level",
+          "path": "/2",
+        },
+        {
+          "id": 1,
+          "label": "first-level",
+          "path": "/1 ",
+        },
+      ]
+    `);
  });
 });