search on folder and UI enhancements

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 && <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({
+                  title={
-                    id: getTrad('list.folders.title'),
+                    (((isFiltering && assetCount > 0) || !isFiltering) &&
-                    defaultMessage: 'Folders',
+                      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 &&
+                      ((!isFiltering || (isFiltering && folderCount > 0)) &&
-                      assetsData?.pagination?.page === 1 &&
+                        assetsData?.pagination?.page === 1 &&
-                      formatMessage({
+                        formatMessage({
-                        id: getTrad('list.assets.title'),
+                          id: getTrad('list.assets.title'),
-                        defaultMessage: 'Assets',
+                          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>
           )}

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('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 () => {
@@ -298,8 +298,8 @@ describe('Media library homepage', () => {
 
       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 () => {
@@ -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(