diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
index 40f025d784..867d381081 100644
--- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
@@ -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 && }
+ {folderCount === 0 && assetCount === 0 && (
+ }
+ onClick={toggleUploadAssetDialog}
+ >
+ {formatMessage({
+ id: getTrad('header.actions.add-assets'),
+ defaultMessage: 'Add new assets',
+ })}
+
+ )
+ }
+ 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 && (
- {folders?.length > 0 && !isFiltering && (
+ {folderCount > 0 && (
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 && (
<>
{
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 = () => {
)}
>
- ) : (
- }
- onClick={toggleUploadAssetDialog}
- >
- {formatMessage({
- id: getTrad('header.actions.add-assets'),
- defaultMessage: 'Add new assets',
- })}
-
- )
- }
- 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',
- })
- }
- />
)}
)}
diff --git a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
index 4fa5db069b..9ae5becfac 100644
--- a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
+++ b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
@@ -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(