removed unnecessary comment, fixed formatDate, aria-label for empty fields

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import parseISO from 'date-fns/parseISO';
 import { getFileExtension } from '@strapi/helper-plugin';
 import { Typography } from '@strapi/design-system/Typography';
 
@@ -17,7 +18,8 @@ export const CellContent = ({
   thumbnailURL,
   url,
 }) => {
-  const { formatDate } = useIntl();
+  const { formatDate, formatMessage } = useIntl();
+
   switch (cellType) {
     case 'image':
       return (
@@ -31,15 +33,35 @@ export const CellContent = ({
         />
       );
     case 'date':
-      return <Typography>{formatDate(content)}</Typography>;
+      return <Typography>{formatDate(parseISO(content), { dateStyle: 'full' })}</Typography>;
 
     case 'size':
-      if (elementType === 'folder') return <Typography>-</Typography>;
+      if (elementType === 'folder')
+        return (
+          <Typography
+            aria-label={formatMessage({
+              id: 'list.table.content.empty-label',
+              defaultMessage: 'This field is empty',
+            })}
+          >
+            -
+          </Typography>
+        );
 
       return <Typography>{formatBytes(content)}</Typography>;
 
     case 'ext':
-      if (elementType === 'folder') return <Typography>-</Typography>;
+      if (elementType === 'folder')
+        return (
+          <Typography
+            aria-label={formatMessage({
+              id: 'list.table.content.empty-label',
+              defaultMessage: 'This field is empty',
+            })}
+          >
+            -
+          </Typography>
+        );
 
       return <Typography>{getFileExtension(content).toUpperCase()}</Typography>;
 
@@ -47,7 +69,16 @@ export const CellContent = ({
       return <Typography>{content}</Typography>;
 
     default:
-      return <Typography>-</Typography>;
+      return (
+        <Typography
+          aria-label={formatMessage({
+            id: 'list.table.content.empty-label',
+            defaultMessage: 'This field is empty',
+          })}
+        >
+          -
+        </Typography>
+      );
   }
 };
 

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

@@ -61,7 +61,7 @@ export const TableList = ({
             const isUp = sortOrder === 'ASC';
             const tableHeaderLabel = formatMessage(label);
             const sortLabel = formatMessage(
-              { id: 'list-table-header-sort', defaultMessage: 'Sort on {label}' },
+              { id: 'list.table.header.sort', defaultMessage: 'Sort on {label}' },
               { label: tableHeaderLabel }
             );
 
@@ -103,7 +103,7 @@ export const TableList = ({
           <Th>
             <VisuallyHidden>
               {formatMessage({
-                id: getTrad('list-table-header-actions'),
+                id: getTrad('list.table.header.actions'),
                 defaultMessage: 'actions',
               })}
             </VisuallyHidden>

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

@@ -96,7 +96,7 @@ describe('TableList | CellContent', () => {
       content: '2022-11-18T12:08:02.202Z',
     });
 
-    expect(getByText('11/18/2022')).toBeInTheDocument();
+    expect(getByText('Friday, November 18, 2022')).toBeInTheDocument();
     expect(container).toMatchSnapshot();
   });
 

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

@@ -76,9 +76,8 @@ describe('TableList | TableRows', () => {
       expect(getByText('michka')).toBeInTheDocument();
       expect(getByText('JPEG')).toBeInTheDocument();
       expect(getByText('12KB')).toBeInTheDocument();
-      expect(getByText('10/1/2021')).toBeInTheDocument();
+      expect(getByText('Friday, October 1, 2021')).toBeInTheDocument();
-      expect(getByText('10/18/2021')).toBeInTheDocument();
+      expect(getByText('Monday, October 18, 2021')).toBeInTheDocument();
-      expect(getByText('10/18/2021')).toBeInTheDocument();
     });
 
     it('should call onSelectAsset callback', () => {

packages/core/upload/admin/src/components/TableList/tests/__snapshots__/CellContent.test.js.snap

@@ -21,6 +21,7 @@ exports[`TableList | CellContent should render "-" by default when no recognized
 
 <div>
   <span
+    aria-label="This field is empty"
     class="c0"
   >
     -
@@ -73,7 +74,7 @@ exports[`TableList | CellContent should render date cell type 1`] = `
   <span
     class="c0"
   >
-    11/18/2022
+    Friday, November 18, 2022
   </span>
   <div
     class="c1"
@@ -171,6 +172,7 @@ exports[`TableList | CellContent should render extension cell type with "-" when
 
 <div>
   <span
+    aria-label="This field is empty"
     class="c0"
   >
     -
@@ -514,6 +516,7 @@ exports[`TableList | CellContent should render size cell type with "-" when elem
 
 <div>
   <span
+    aria-label="This field is empty"
     class="c0"
   >
     -

packages/core/upload/admin/src/constants.js

@@ -106,7 +106,7 @@ export const tableHeaders = [
     name: 'preview',
     key: 'preview',
     metadatas: {
-      label: { id: getTrad('list-table-header-preview'), defaultMessage: 'preview' },
+      label: { id: getTrad('list.table.header.preview'), defaultMessage: 'preview' },
       isSortable: false,
     },
     type: 'image',
@@ -115,7 +115,7 @@ export const tableHeaders = [
     name: 'name',
     key: 'name',
     metadatas: {
-      label: { id: getTrad('list-table-header-name'), defaultMessage: 'name' },
+      label: { id: getTrad('list.table.header.name'), defaultMessage: 'name' },
       isSortable: true,
     },
     type: 'text',
@@ -124,7 +124,7 @@ export const tableHeaders = [
     name: 'ext',
     key: 'extension',
     metadatas: {
-      label: { id: getTrad('list-table-header-ext'), defaultMessage: 'extension' },
+      label: { id: getTrad('list.table.header.ext'), defaultMessage: 'extension' },
       isSortable: false,
     },
     type: 'ext',
@@ -133,7 +133,7 @@ export const tableHeaders = [
     name: 'size',
     key: 'size',
     metadatas: {
-      label: { id: getTrad('list-table-header-size'), defaultMessage: 'size' },
+      label: { id: getTrad('list.table.header.size'), defaultMessage: 'size' },
       isSortable: false,
     },
     type: 'size',
@@ -142,7 +142,7 @@ export const tableHeaders = [
     name: 'createdAt',
     key: 'createdAt',
     metadatas: {
-      label: { id: getTrad('list-table-header-createdAt'), defaultMessage: 'created' },
+      label: { id: getTrad('list.table.header.createdAt'), defaultMessage: 'created' },
       isSortable: true,
     },
     type: 'date',
@@ -151,7 +151,7 @@ export const tableHeaders = [
     name: 'updatedAt',
     key: 'updatedAt',
     metadatas: {
-      label: { id: getTrad('list-table-header-updatedAt'), defaultMessage: 'last update' },
+      label: { id: getTrad('list.table.header.updatedAt'), defaultMessage: 'last update' },
       isSortable: true,
     },
     type: 'date',

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

@@ -312,12 +312,7 @@ export const MediaLibrary = () => {
               onEditFolder={handleEditFolder}
               onSelectOne={selectOne}
               onSelectAll={handleBulkSelect}
-              rows={
+              rows={[...folders, ...assets]}
-                // TODO: remove when fixed on DS side
-                // 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, ...assets] : []
-              }
               selected={selected}
               shouldDisableBulkSelect={!canUpdate}
               sortQuery={query?.sort ?? ''}

packages/core/upload/admin/src/translations/en.json

@@ -115,14 +115,15 @@
   "sort.name_desc": "Reverse alphabetical order (Z to A)",
   "sort.updated_at_asc": "Oldest updates",
   "sort.updated_at_desc": "Most recent updates",
-  "list-table-header-actions": "actions",
+  "list.table.header.actions": "actions",
-  "list-table-header-preview": "preview",
+  "list.table.header.preview": "preview",
-  "list-table-header-name": "name",
+  "list.table.header.name": "name",
-  "list-table-header-ext": "extension",
+  "list.table.header.ext": "extension",
-  "list-table-header-size": "size",
+  "list.table.header.size": "size",
-  "list-table-header-createdAt": "created",
+  "list.table.header.createdAt": "created",
-  "list-table-header-updatedAt": "last update",
+  "list.table.header.updatedAt": "last update",
-  "list-table-header-sort": "Sort on {label}",
+  "list.table.header.sort": "Sort on {label}",
+  "list.table.content.empty-label": "This field is empty",
   "tabs.title": "How do you want to upload your assets?",
   "window.confirm.close-modal.file": "Are you sure? Your changes will be lost.",
   "window.confirm.close-modal.files": "Are you sure? You have some files that have not been uploaded yet.",