yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-16 20:10:05 +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

85
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({ const { data: folders, isLoading: foldersLoading, errors: foldersError } = useFolders({
enabled: assetsData?.pagination?.page === 1 && !isFiltering, enabled: assetsData?.pagination?.page === 1,
query, query,
}); });
@ -169,44 +169,7 @@ export const MediaLibrary = () => {
{!canRead && <NoPermissions />} {!canRead && <NoPermissions />}
{canRead && ( {folderCount === 0 && assetCount === 0 && (
<Stack spacing={8}>
{folders?.length > 0 && !isFiltering && (
<FolderList
folders={folders}
onChangeFolder={handleChangeFolder}
onEditFolder={handleEditFolder}
onSelectFolder={selectOne}
selectedFolders={selected.filter(({ type }) => type === 'folder')}
title={formatMessage({
id: getTrad('list.folders.title'),
defaultMessage: 'Folders',
})}
/>
)}
{assetCount > 0 ? (
<>
<AssetList
assets={assets}
onEditAsset={setAssetToEdit}
onSelectAsset={selectOne}
selectedAssets={selected.filter(({ type }) => type === 'asset')}
title={
!isFiltering &&
assetsData?.pagination?.page === 1 &&
formatMessage({
id: getTrad('list.assets.title'),
defaultMessage: 'Assets',
})
}
/>
{assetsData?.pagination && (
<PaginationFooter pagination={assetsData.pagination} />
)}
</>
) : (
<EmptyAssets <EmptyAssets
action={ action={
canCreate && canCreate &&
@ -242,6 +205,50 @@ export const MediaLibrary = () => {
} }
/> />
)} )}
{canRead && (
<Stack spacing={8}>
{folderCount > 0 && (
<FolderList
folders={folders}
onChangeFolder={handleChangeFolder}
onEditFolder={handleEditFolder}
onSelectFolder={selectOne}
selectedFolders={selected.filter(({ type }) => type === 'folder')}
title={
(((isFiltering && assetCount > 0) || !isFiltering) &&
formatMessage({
id: getTrad('list.folders.title'),
defaultMessage: 'Folders',
})) ||
''
}
/>
)}
{assetCount > 0 && (
<>
<AssetList
assets={assets}
onEditAsset={setAssetToEdit}
onSelectAsset={selectOne}
selectedAssets={selected.filter(({ type }) => type === 'asset')}
title={
((!isFiltering || (isFiltering && folderCount > 0)) &&
assetsData?.pagination?.page === 1 &&
formatMessage({
id: getTrad('list.assets.title'),
defaultMessage: 'Assets',
})) ||
''
}
/>
{assetsData?.pagination && (
<PaginationFooter pagination={assetsData.pagination} />
)}
</>
)}
</Stack> </Stack>
)} )}
</ContentLayout> </ContentLayout>

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(); 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()]); useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { _q: 'true' } }, jest.fn()]);
renderML(); renderML();
expect(screen.queryByText('list.folders.title')).not.toBeInTheDocument(); expect(screen.queryByText('list.folders.title')).toBeInTheDocument();
expect(screen.queryByText('Folder 1')).not.toBeInTheDocument(); expect(screen.queryByText('Folder 1')).toBeInTheDocument();
}); });
it('does not display folders if the media library is being filtered', async () => { it('does not display folders if the media library is being filtered', async () => {
@ -298,8 +298,8 @@ describe('Media library homepage', () => {
renderML(); renderML();
expect(screen.queryByText('list.folders.title')).not.toBeInTheDocument(); expect(screen.queryByText('list.folders.title')).toBeInTheDocument();
expect(screen.queryByText('Folder 1')).not.toBeInTheDocument(); expect(screen.queryByText('Folder 1')).toBeInTheDocument();
}); });
it('does not display folders if the current page !== 1', async () => { 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(); 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({ useAssets.mockReturnValueOnce({
isLoading: false, isLoading: false,
data: { data: {
@ -349,6 +349,11 @@ describe('Media library homepage', () => {
}, },
}); });
useFolders.mockReturnValueOnce({
isLoading: false,
data: [],
});
renderML(); renderML();
expect(screen.queryByText('Upload your first assets...')).toBeInTheDocument(); expect(screen.queryByText('Upload your first assets...')).toBeInTheDocument();
@ -384,6 +389,12 @@ describe('Media library homepage', () => {
}, },
}); });
useFolders.mockReturnValueOnce({
isLoading: false,
error: null,
data: [],
});
renderML(); renderML();
expect( expect(