yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-12 08:08:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Josh 2023-07-10 12:35:38 +01:00 committed by GitHub
commit d8c46dd17e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 152 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
packages/core/upload/admin/src/components/AssetDialog/index.js
View File

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

2
packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
View File

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

2
packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
View File

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

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

@ -5,32 +5,26 @@ import { NotificationsProvider } from '@strapi/helper-plugin';
import { act, renderHook } from '@testing-library/react'; import { act, renderHook } from '@testing-library/react';
import { IntlProvider } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from 'react-query'; 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'; 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'), function setup(...args) {
useQueryClient: () => ({ return renderHook(() => useModalQueryParams(...args), {
refetchQueries: refetchQueriesMock, wrapper({ children }) {
}), const client = new QueryClient({
}));
const client = new QueryClient({
defaultOptions: { defaultOptions: {
queries: { queries: {
retry: false, retry: false,
}, },
}, },
}); });
// eslint-disable-next-line react/prop-types
function ComponentFixture({ children }) {
return ( return (
<Router> <MemoryRouter>
<Route>
<QueryClientProvider client={client}> <QueryClientProvider client={client}>
<ThemeProvider theme={lightTheme}> <ThemeProvider theme={lightTheme}>
<NotificationsProvider> <NotificationsProvider>
@ -40,13 +34,10 @@ function ComponentFixture({ children }) {
</NotificationsProvider> </NotificationsProvider>
</ThemeProvider> </ThemeProvider>
</QueryClientProvider> </QueryClientProvider>
</Route> </MemoryRouter>
</Router>
); );
} },
});
function setup(...args) {
return renderHook(() => useModalQueryParams(...args), { wrapper: ComponentFixture });
} }
const FIXTURE_QUERY = { const FIXTURE_QUERY = {
@ -63,12 +54,12 @@ describe('useModalQueryParams', () => {
jest.clearAllMocks(); jest.clearAllMocks();
}); });
test('setup proper defaults', async () => { test('setup proper defaults', () => {
const { const {
result: { result: {
current: [{ queryObject, rawQuery }, callbacks], current: [{ queryObject, rawQuery }, callbacks],
}, },
} = await setup(); } = setup();
expect(queryObject).toStrictEqual(FIXTURE_QUERY); expect(queryObject).toStrictEqual(FIXTURE_QUERY);
expect(rawQuery).toBe('page=1&sort=updatedAt:DESC&pageSize=10'); 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 { const {
result: { current }, result: { current },
} = await setup(); } = setup();
expect(current[0].queryObject).toStrictEqual(FIXTURE_QUERY); expect(current[0].queryObject).toStrictEqual(FIXTURE_QUERY);
}); });
test('handles initial state', async () => { test('handles initial state', () => {
const { const {
result: { current }, result: { current },
} = await setup({ state: true }); } = setup({ state: true });
expect(current[0].queryObject).toStrictEqual({ expect(current[0].queryObject).toStrictEqual({
...FIXTURE_QUERY, ...FIXTURE_QUERY,
@ -102,8 +93,8 @@ describe('useModalQueryParams', () => {
}); });
}); });
test('onChangeFilters', async () => { test('onChangeFilters', () => {
const { result } = await setup(); const { result } = setup();
act(() => { act(() => {
result.current[1].onChangeFilters([{ some: 'thing' }]); 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(() => { act(() => {
result.current[1].onChangeFolder({ id: 1 }); result.current[1].onChangeFolder({ id: 1 }, '/1');
}); });
expect(result.current[0].queryObject).toStrictEqual({ expect(result.current[0].queryObject).toStrictEqual({
@ -134,11 +125,12 @@ describe('useModalQueryParams', () => {
folder: { folder: {
id: 1, id: 1,
}, },
folderPath: '/1',
}); });
}); });
test('onChangePage', async () => { test('onChangePage', () => {
const { result } = await setup(); const { result } = setup();
act(() => { act(() => {
result.current[1].onChangePage({ id: 1 }); 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(() => { act(() => {
result.current[1].onChangePageSize(5); 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(() => { act(() => {
result.current[1].onChangePageSize('5'); result.current[1].onChangePageSize('5');
@ -178,8 +170,8 @@ describe('useModalQueryParams', () => {
}); });
}); });
test('onChangeSort', async () => { test('onChangeSort', () => {
const { result } = await setup(); const { result } = setup();
act(() => { act(() => {
result.current[1].onChangeSort('something:else'); 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(() => { act(() => {
result.current[1].onChangeSearch('something'); 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(() => { act(() => {
result.current[1].onChangePage({ id: 1 }); result.current[1].onChangePage({ id: 1 });

13
packages/core/upload/admin/src/hooks/useModalQueryParams.js
View File

@ -8,7 +8,7 @@ import { useConfig } from './useConfig';
const useModalQueryParams = (initialState) => { const useModalQueryParams = (initialState) => {
const { trackUsage } = useTracking(); const { trackUsage } = useTracking();
const { const {
config: { isLoading, isError, data: config }, config: { data: config },
} = useConfig(); } = useConfig();
const [queryObject, setQueryObject] = useState({ const [queryObject, setQueryObject] = useState({
@ -22,15 +22,14 @@ const useModalQueryParams = (initialState) => {
}); });
useEffect(() => { useEffect(() => {
if (isLoading || isError) { if (config) {
return;
}
setQueryObject((prevQuery) => ({ setQueryObject((prevQuery) => ({
...prevQuery, ...prevQuery,
sort: config.sort, sort: config.sort,
pageSize: config.pageSize, pageSize: config.pageSize,
})); }));
}, [isLoading, isError, config]); }
}, [config]);
const handleChangeFilters = (nextFilters) => { const handleChangeFilters = (nextFilters) => {
trackUsage('didFilterMediaLibraryElements', { 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 [ return [

2
packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
View File

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

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

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