From dc055b43710f3606b5f450f318f99638d50ae00e Mon Sep 17 00:00:00 2001 From: Julie Plantey Date: Tue, 13 Dec 2022 15:22:46 +0100 Subject: [PATCH] removed unnecessary comment, fixed formatDate, aria-label for empty fields --- .../src/components/TableList/CellContent.js | 41 ++++++++++++++++--- .../admin/src/components/TableList/index.js | 4 +- .../TableList/tests/CellContent.test.js | 2 +- .../TableList/tests/TableRows.test.js | 5 +-- .../__snapshots__/CellContent.test.js.snap | 5 ++- packages/core/upload/admin/src/constants.js | 12 +++--- .../admin/src/pages/App/MediaLibrary.js | 7 +--- .../upload/admin/src/translations/en.json | 17 ++++---- 8 files changed, 61 insertions(+), 32 deletions(-) diff --git a/packages/core/upload/admin/src/components/TableList/CellContent.js b/packages/core/upload/admin/src/components/TableList/CellContent.js index 4d82f9e20f..7915487075 100644 --- 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 {formatDate(content)}; + return {formatDate(parseISO(content), { dateStyle: 'full' })}; case 'size': - if (elementType === 'folder') return -; + if (elementType === 'folder') + return ( + + - + + ); return {formatBytes(content)}; case 'ext': - if (elementType === 'folder') return -; + if (elementType === 'folder') + return ( + + - + + ); return {getFileExtension(content).toUpperCase()}; @@ -47,7 +69,16 @@ export const CellContent = ({ return {content}; default: - return -; + return ( + + - + + ); } }; diff --git a/packages/core/upload/admin/src/components/TableList/index.js b/packages/core/upload/admin/src/components/TableList/index.js index a8e273198f..248bd1d5db 100644 --- 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 = ({ {formatMessage({ - id: getTrad('list-table-header-actions'), + id: getTrad('list.table.header.actions'), defaultMessage: 'actions', })} diff --git a/packages/core/upload/admin/src/components/TableList/tests/CellContent.test.js b/packages/core/upload/admin/src/components/TableList/tests/CellContent.test.js index 7f7e0be414..9745b05df6 100644 --- 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(); }); diff --git a/packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js b/packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js index a58d063746..274e4aaaae 100644 --- 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', () => { diff --git 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 index 7e89fe274a..89512f4df7 100644 --- 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
- @@ -73,7 +74,7 @@ exports[`TableList | CellContent should render date cell type 1`] = ` - 11/18/2022 + Friday, November 18, 2022
- @@ -514,6 +516,7 @@ exports[`TableList | CellContent should render size cell type with "-" when elem
- diff --git a/packages/core/upload/admin/src/constants.js b/packages/core/upload/admin/src/constants.js index 6f9086bd72..d751aedbb1 100644 --- 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', diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index d227fb05f4..e0c50177a3 100644 --- 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 ?? ''} diff --git a/packages/core/upload/admin/src/translations/en.json b/packages/core/upload/admin/src/translations/en.json index 48b33d8289..71f6cd7dec 100644 --- 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.",