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

2025-11-01 10:23:34 +00:00 · 2022-12-13 15:22:46 +01:00 · 2022-12-13 15:22:46 +01:00 · dc055b4371
commit dc055b4371
parent b81486c8c9
8 changed files with 61 additions and 32 deletions
--- a/packages/core/upload/admin/src/components/TableList/CellContent.js
+++ b/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>
+      );
  }
 };

--- a/packages/core/upload/admin/src/components/TableList/index.js
+++ b/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>
--- a/packages/core/upload/admin/src/components/TableList/tests/CellContent.test.js
+++ b/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();
  });

--- a/packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js
+++ b/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('10/18/2021')).toBeInTheDocument();
-      expect(getByText('10/18/2021')).toBeInTheDocument();
+      expect(getByText('Friday, October 1, 2021')).toBeInTheDocument();
+      expect(getByText('Monday, October 18, 2021')).toBeInTheDocument();
    });

    it('should call onSelectAsset callback', () => {
--- a/packages/core/upload/admin/src/components/TableList/tests/snapshots/CellContent.test.js.snap
+++ b/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"
  >
    -
--- a/packages/core/upload/admin/src/constants.js
+++ b/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',
--- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
@ -312,12 +312,7 @@ export const MediaLibrary = () => {
              onEditFolder={handleEditFolder}
              onSelectOne={selectOne}
              onSelectAll={handleBulkSelect}
-              rows={
-                // 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] : []
-              }
+              rows={[...folders, ...assets]}
              selected={selected}
              shouldDisableBulkSelect={!canUpdate}
              sortQuery={query?.sort ?? ''}
--- a/packages/core/upload/admin/src/translations/en.json
+++ b/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-preview": "preview",
-  "list-table-header-name": "name",
-  "list-table-header-ext": "extension",
-  "list-table-header-size": "size",
-  "list-table-header-createdAt": "created",
-  "list-table-header-updatedAt": "last update",
-  "list-table-header-sort": "Sort on {label}",
+  "list.table.header.actions": "actions",
+  "list.table.header.preview": "preview",
+  "list.table.header.name": "name",
+  "list.table.header.ext": "extension",
+  "list.table.header.size": "size",
+  "list.table.header.createdAt": "created",
+  "list.table.header.updatedAt": "last update",
+  "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.",