feedback fixes

packages/core/upload/admin/src/components/TableList/PreviewCell.js

@@ -54,7 +54,7 @@ export const PreviewCell = ({ alternativeText, fileExtension, mime, thumbnailURL
 PreviewCell.defaultProps = {
   alternativeText: null,
   fileExtension: '',
-  mime: null,
+  mime: '',
   thumbnailURL: null,
   url: null,
 };

packages/core/upload/admin/src/components/TableList/TableRows.js

@@ -5,10 +5,10 @@ import { getFileExtension } from '@strapi/helper-plugin';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Tbody, Td, Tr } from '@strapi/design-system/Table';
-import { Typography } from '@strapi/design-system/Typography';
 import Pencil from '@strapi/icons/Pencil';
 
 import { PreviewCell } from './PreviewCell';
+import { TextCell } from './TextCell';
 import { AssetDefinition, FolderDefinition } from '../../constants';
 import { formatBytes, getTrad } from '../../utils';
 
@@ -30,7 +30,7 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
           mime,
           formats,
           type,
-        } = element || {};
+        } = element;
 
         const isSelected = !!selected.find((currentRow) => currentRow.id === id);
 
@@ -61,19 +61,19 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
               />
             </Td>
             <Td>
-              <Typography>{name}</Typography>
+              <TextCell content={name} />
             </Td>
             <Td>
-              <Typography>{ext ? getFileExtension(ext).toUpperCase() : '-'}</Typography>
+              <TextCell content={ext && getFileExtension(ext).toUpperCase()} />
             </Td>
             <Td>
-              <Typography>{size ? formatBytes(size) : '-'}</Typography>
+              <TextCell content={size && formatBytes(size)} />
             </Td>
             <Td>
-              <Typography>{formatDate(new Date(createdAt))}</Typography>
+              <TextCell content={formatDate(new Date(createdAt))} />
             </Td>
             <Td>
-              <Typography>{formatDate(new Date(updatedAt))}</Typography>
+              <TextCell content={formatDate(new Date(updatedAt))} />
             </Td>
             {((type === 'asset' && onEditAsset) || (type === 'folder' && onEditFolder)) && (
               <Td>
@@ -99,11 +99,12 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
 TableRows.defaultProps = {
   onEditAsset: null,
   onEditFolder: null,
+  rows: [],
   selected: [],
 };
 
 TableRows.propTypes = {
-  rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition).isRequired,
+  rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition),
   onEditAsset: PropTypes.func,
   onEditFolder: PropTypes.func,
   onSelectOne: PropTypes.func.isRequired,

packages/core/upload/admin/src/components/TableList/TextCell.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@strapi/design-system/Typography';
+
+export const TextCell = ({ content }) => {
+  if (content) {
+    return <Typography>{content}</Typography>;
+  }
+
+  return <Typography>-</Typography>;
+};
+
+TextCell.defaultProps = {
+  content: '',
+};
+
+TextCell.propTypes = {
+  content: PropTypes.string,
+};

packages/core/upload/admin/src/components/TableList/index.js

@@ -14,6 +14,7 @@ import { TableRows } from './TableRows';
 export const TableList = ({
   assetCount,
   folderCount,
+  indeterminate,
   onEditAsset,
   onEditFolder,
   onSelectAll,
@@ -34,7 +35,7 @@ export const TableList = ({
                 id: getTrad('bulk.select.label'),
                 defaultMessage: 'Select all folders & assets',
               })}
-              indeterminate={selected?.length > 0 && selected?.length !== assetCount + folderCount}
+              indeterminate={indeterminate}
               onChange={(e) => {
                 if (e.target.checked) {
                   trackUsage('didSelectAllMediaLibraryElements');
@@ -79,6 +80,7 @@ export const TableList = ({
 TableList.defaultProps = {
   assetCount: 0,
   folderCount: 0,
+  indeterminate: false,
   onEditAsset: null,
   onEditFolder: null,
   rows: [],
@@ -88,6 +90,7 @@ TableList.defaultProps = {
 TableList.propTypes = {
   assetCount: PropTypes.number,
   folderCount: PropTypes.number,
+  indeterminate: PropTypes.bool,
   onEditAsset: PropTypes.func,
   onEditFolder: PropTypes.func,
   onSelectAll: PropTypes.func.isRequired,

packages/core/upload/admin/src/components/TableList/tests/PreviewCell.test.js

@@ -29,7 +29,7 @@ const ComponentFixture = (props) => {
 
 const setup = (props) => render(<ComponentFixture {...props} />);
 
-describe('AssetTableList | PreviewCell', () => {
+describe('TableList | PreviewCell', () => {
   describe('rendering images', () => {
     it('should render an image with thumbnail if available', () => {
       const { getByRole } = setup();

packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js

@@ -58,7 +58,7 @@ const ComponentFixture = (props) => {
 
 const setup = (props) => render(<ComponentFixture {...props} />);
 
-describe('AssetTableList | TableRows', () => {
+describe('TableList | TableRows', () => {
   describe('rendering assets', () => {
     it('should properly render every asset attribute', () => {
       const { getByRole, getByText } = setup();

packages/core/upload/admin/src/components/TableList/tests/TextCell.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+
+import { TextCell } from '../TextCell';
+
+const ComponentFixture = (props) => (
+  <ThemeProvider theme={lightTheme}>
+    <TextCell {...props} />
+  </ThemeProvider>
+);
+
+const setup = (props) => render(<ComponentFixture {...props} />);
+
+describe('TableList | TextCell', () => {
+  it('should render content', () => {
+    const { getByText } = setup({ content: 'michka' });
+
+    expect(getByText('michka')).toBeInTheDocument();
+  });
+
+  it('should render a default content', () => {
+    const { getByText } = setup();
+
+    expect(getByText('-')).toBeInTheDocument();
+  });
+});

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -86,7 +86,7 @@ export const MediaLibrary = () => {
   });
 
   const {
-    data: folders,
+    data: foldersData,
     isLoading: foldersLoading,
     errors: foldersError,
   } = useFolders({
@@ -107,8 +107,9 @@ export const MediaLibrary = () => {
     push(pathname);
   }
 
+  const folders = foldersData ?? [];
   const folderCount = folders?.length || 0;
-  const assets = assetsData?.results;
+  const assets = assetsData?.results || [];
   const assetCount = assets?.length ?? 0;
   const isLoading = isCurrentFolderLoading || foldersLoading || permissionsLoading || assetsLoading;
   const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
@@ -116,6 +117,8 @@ export const MediaLibrary = () => {
   const [assetToEdit, setAssetToEdit] = useState(undefined);
   const [folderToEdit, setFolderToEdit] = useState(undefined);
   const [selected, { selectOne, selectAll }] = useSelectionState(['type', 'id'], []);
+  const indeterminateBulkSelect =
+    selected?.length > 0 && selected?.length !== assetCount + folderCount;
   const toggleUploadAssetDialog = () => setShowUploadAssetDialog((prev) => !prev);
   const toggleEditFolderDialog = ({ created = false } = {}) => {
     // folders are only displayed on the first page, therefore
@@ -183,9 +186,7 @@ export const MediaLibrary = () => {
                       id: getTrad('bulk.select.label'),
                       defaultMessage: 'Select all folders & assets',
                     })}
-                    indeterminate={
+                    indeterminate={indeterminateBulkSelect}
-                      selected?.length > 0 && selected?.length !== assetCount + folderCount
-                    }
                     value={
                       (assetCount > 0 || folderCount > 0) &&
                       selected.length === assetCount + folderCount
@@ -196,9 +197,7 @@ export const MediaLibrary = () => {
                       }
                       selectAll([
                         ...assets.map((asset) => ({ ...asset, type: 'asset' })),
-                        ...(folders
+                        ...folders.map((folder) => ({ ...folder, type: 'folder' })),
-                          ? folders.map((folder) => ({ ...folder, type: 'folder' }))
-                          : []),
                       ]);
                     }}
                   />
@@ -243,14 +242,22 @@ export const MediaLibrary = () => {
             <TableList
               assetCount={assetCount}
               folderCount={folderCount}
+              indeterminate={indeterminateBulkSelect}
               onEditAsset={setAssetToEdit}
               onEditFolder={handleEditFolder}
               onSelectOne={selectOne}
               onSelectAll={selectAll}
-              rows={[
+              rows={
-                ...(folders ? folders.map((folder) => ({ ...folder, type: 'folder' })) : []),
+                // TODO: remove when fixed on DS side
-                ...(assets ? assets.map((asset) => ({ ...asset, type: 'asset' })) : []),
+                // when number of rows in Table changes, the keyboard tab from a row to another
-              ]}
+                // is not working for 1st and last column
+                !assetsLoading && !foldersLoading
+                  ? [
+                      ...folders.map((folder) => ({ ...folder, type: 'folder' })),
+                      ...assets.map((asset) => ({ ...asset, type: 'asset' })),
+                    ]
+                  : []
+              }
               selected={selected}
             />
           )}