diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js index 7d89fc97c8..f52352a2f9 100644 --- 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 = ({ handleClickFolderCard(folder.id)} + onClick={() => handleClickFolderCard(folder.id, folder.path)} cardActions={ onEditFolder && ( - handleClickFolderCard(folder.id)}> + handleClickFolderCard(folder.id, folder.path)} + > {folder.name} diff --git a/packages/core/upload/admin/src/components/AssetDialog/index.js b/packages/core/upload/admin/src/components/AssetDialog/index.js index ce93f40b4a..db452e7291 100644 --- 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 ( diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js index 1c72a6bf78..e3176a0049 100644 --- 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} diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js b/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js index 1eaf42d9ce..07b506931c 100644 --- 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 onChangeFolder(ascendant.id)} + onClick={() => onChangeFolder(ascendant.id, ascendant.path)} key={ascendant.id} > {ascendant.label} diff --git a/packages/core/upload/admin/src/hooks/tests/useModalQueryParams.test.js b/packages/core/upload/admin/src/hooks/tests/useModalQueryParams.test.js index 03dcc22b9b..3e7408f86b 100644 --- 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 ( - - - - - - - {children} - - - - - - - ); -} - +/** + * 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 ( + + + + + + {children} + + + + + + ); + }, + }); } 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 }); diff --git a/packages/core/upload/admin/src/hooks/useModalQueryParams.js b/packages/core/upload/admin/src/hooks/useModalQueryParams.js index d7b7f03ab5..42c458dc32 100644 --- 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 [ diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js index 4947951c87..7cea8d4317 100644 --- 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, }); } diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js index 28cc719c39..92d9611a4d 100644 --- 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 ", + }, + ] + `); }); });