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(