yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-16 03:48:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

search on folder and UI enhancements

Browse Source
This commit is contained in:
ronronscelestes 2022-05-31 14:21:05 +02:00
parent 37561b2d3e
commit e7af8bdd26
2 changed files with 72 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
packages/core/upload/admin/src/pages/App/MediaLibrary.js
View File

@ -58,7 +58,7 @@ export const MediaLibrary = () => {
});
const { data: folders, isLoading: foldersLoading, errors: foldersError } = useFolders({
enabled: assetsData?.pagination?.page === 1 && !isFiltering,
enabled: assetsData?.pagination?.page === 1,
query,
});
@ -169,23 +169,64 @@ export const MediaLibrary = () => {
{!canRead && <NoPermissions />}
{folderCount === 0 && assetCount === 0 && (
<EmptyAssets
action={
canCreate &&
!isFiltering && (
<Button
variant="secondary"
startIcon={<Plus />}
onClick={toggleUploadAssetDialog}
>
{formatMessage({
id: getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets',
})}
</Button>
)
}
content={
// eslint-disable-next-line no-nested-ternary
isFiltering
? formatMessage({
id: getTrad('list.assets-empty.title-withSearch'),
defaultMessage: 'There are no assets with the applied filters',
})
: canCreate
? formatMessage({
id: getTrad('list.assets.empty'),
defaultMessage: 'Upload your first assets...',
})
: formatMessage({
id: getTrad('list.assets.empty.no-permissions'),
defaultMessage: 'The asset list is empty',
})
}
/>
)}
{canRead && (
<Stack spacing={8}>
{folders?.length > 0 && !isFiltering && (
{folderCount > 0 && (
<FolderList
folders={folders}
onChangeFolder={handleChangeFolder}
onEditFolder={handleEditFolder}
onSelectFolder={selectOne}
selectedFolders={selected.filter(({ type }) => type === 'folder')}
title={formatMessage({
id: getTrad('list.folders.title'),
defaultMessage: 'Folders',
})}
title={
(((isFiltering && assetCount > 0) || !isFiltering) &&
formatMessage({
id: getTrad('list.folders.title'),
defaultMessage: 'Folders',
})) ||
''
}
/>
)}
{assetCount > 0 ? (
{assetCount > 0 && (
<>
<AssetList
assets={assets}
@ -193,12 +234,13 @@ export const MediaLibrary = () => {
onSelectAsset={selectOne}
selectedAssets={selected.filter(({ type }) => type === 'asset')}
title={
!isFiltering &&
assetsData?.pagination?.page === 1 &&
formatMessage({
id: getTrad('list.assets.title'),
defaultMessage: 'Assets',
})
((!isFiltering || (isFiltering && folderCount > 0)) &&
assetsData?.pagination?.page === 1 &&
formatMessage({
id: getTrad('list.assets.title'),
defaultMessage: 'Assets',
})) ||
''
}
/>
@ -206,41 +248,6 @@ export const MediaLibrary = () => {
<PaginationFooter pagination={assetsData.pagination} />
)}
</>
) : (
<EmptyAssets
action={
canCreate &&
!isFiltering && (
<Button
variant="secondary"
startIcon={<Plus />}
onClick={toggleUploadAssetDialog}
>
{formatMessage({
id: getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets',
})}
</Button>
)
}
content={
// eslint-disable-next-line no-nested-ternary
isFiltering
? formatMessage({
id: getTrad('list.assets-empty.title-withSearch'),
defaultMessage: 'There are no assets with the applied filters',
})
: canCreate
? formatMessage({
id: getTrad('list.assets.empty'),
defaultMessage: 'Upload your first assets...',
})
: formatMessage({
id: getTrad('list.assets.empty.no-permissions'),
defaultMessage: 'The asset list is empty',
})
}
/>
)}
</Stack>
)}

23
packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
View File

@ -284,13 +284,13 @@ describe('Media library homepage', () => {
expect(screen.queryByText('Folder 1')).not.toBeInTheDocument();
});
it('does not display folders if a search is performed', async () => {
it('does display folders if a search is performed', async () => {
useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { _q: 'true' } }, jest.fn()]);
renderML();
expect(screen.queryByText('list.folders.title')).not.toBeInTheDocument();
expect(screen.queryByText('Folder 1')).not.toBeInTheDocument();
expect(screen.queryByText('list.folders.title')).toBeInTheDocument();
expect(screen.queryByText('Folder 1')).toBeInTheDocument();
});
it('does not display folders if the media library is being filtered', async () => {
@ -298,8 +298,8 @@ describe('Media library homepage', () => {
renderML();
expect(screen.queryByText('list.folders.title')).not.toBeInTheDocument();
expect(screen.queryByText('Folder 1')).not.toBeInTheDocument();
expect(screen.queryByText('list.folders.title')).toBeInTheDocument();
expect(screen.queryByText('Folder 1')).toBeInTheDocument();
});
it('does not display folders if the current page !== 1', async () => {
@ -340,7 +340,7 @@ describe('Media library homepage', () => {
expect(screen.queryByText('3874873.jpg')).not.toBeInTheDocument();
});
it('does display empty assets action, if there are no assets', () => {
it('does display empty assets action, if there are no assets and no folders', () => {
useAssets.mockReturnValueOnce({
isLoading: false,
data: {
@ -349,6 +349,11 @@ describe('Media library homepage', () => {
},
});
useFolders.mockReturnValueOnce({
isLoading: false,
data: [],
});
renderML();
expect(screen.queryByText('Upload your first assets...')).toBeInTheDocument();
@ -384,6 +389,12 @@ describe('Media library homepage', () => {
},
});
useFolders.mockReturnValueOnce({
isLoading: false,
error: null,
data: [],
});
renderML();
expect(