From 1e180f1961012a17707d178fbfee23862ec2c9e5 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Wed, 2 Nov 2022 13:33:46 +0100 Subject: [PATCH 1/3] CM: Replace custom State component with the DS Status component --- .../components/DynamicTable/index.js | 25 +++++++++++-- .../content-manager/components/State/index.js | 37 ------------------- 2 files changed, 21 insertions(+), 41 deletions(-) delete mode 100644 packages/core/admin/admin/src/content-manager/components/State/index.js diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js index 4a5422c13b1..1c41eb7eda7 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js @@ -3,15 +3,22 @@ import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin'; import { useSelector } from 'react-redux'; -import isEmpty from 'lodash/isEmpty'; +import styled from 'styled-components'; + +import { Status } from '@strapi/design-system/Status'; +import { Typography } from '@strapi/design-system/Typography'; + import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks'; import { selectDisplayedHeaders } from '../../pages/ListView/selectors'; import { getTrad } from '../../utils'; -import State from '../State'; import TableRows from './TableRows'; import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll'; import ConfirmDialogDelete from './ConfirmDialogDelete'; +const StyledStatus = styled(Status)` + width: min-content; +`; + const DynamicTable = ({ canCreate, canDelete, @@ -87,9 +94,19 @@ const DynamicTable = ({ sortable: true, }, cellFormatter(cellData) { - const isPublished = !isEmpty(cellData.publishedAt); + const isPublished = cellData.publishedAt; + const variant = isPublished ? 'success' : 'secondary'; - return ; + return ( + + + {formatMessage({ + id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`), + defaultMessage: isPublished ? 'Published' : 'Draft', + })} + + + ); }, }, ]; diff --git a/packages/core/admin/admin/src/content-manager/components/State/index.js b/packages/core/admin/admin/src/content-manager/components/State/index.js deleted file mode 100644 index cc12b4f3dd4..00000000000 --- a/packages/core/admin/admin/src/content-manager/components/State/index.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useIntl } from 'react-intl'; -import { Typography } from '@strapi/design-system/Typography'; -import { Box } from '@strapi/design-system/Box'; -import { getTrad } from '../../utils'; - -const State = ({ isPublished }) => { - const { formatMessage } = useIntl(); - const content = formatMessage({ - id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`), - }); - const background = isPublished ? 'success100' : 'secondary100'; - const textColor = isPublished ? 'success700' : 'secondary700'; - - return ( - - - {content} - - - ); -}; - -State.propTypes = { - isPublished: PropTypes.bool.isRequired, -}; - -export default State; From ff35857c96aba6505105dccff4c79736ed5335ef Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 3 Nov 2022 15:34:54 +0100 Subject: [PATCH 2/3] RelationInput: Replace Badge with Status --- .../components/RelationInput/RelationInput.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js index 78b9496371d..268a172950b 100644 --- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js +++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { FixedSizeList as List } from 'react-window'; import { ReactSelect } from '@strapi/helper-plugin'; -import { Badge } from '@strapi/design-system/Badge'; +import { Status } from '@strapi/design-system/Status'; import { Box } from '@strapi/design-system/Box'; import { Link } from '@strapi/design-system/Link'; import { Icon } from '@strapi/design-system/Icon'; @@ -281,7 +281,7 @@ const RelationInput = ({ > {({ data, index, style }) => { const { publicationState, href, mainField, id } = data[index]; - const badgeColor = publicationState === 'draft' ? 'secondary' : 'success'; + const statusColor = publicationState === 'draft' ? 'secondary' : 'success'; return ( {publicationState && ( - - {publicationStateTranslations[publicationState]} - + + + {publicationStateTranslations[publicationState]} + + )} ); From 55227eb94c00b6a671d8e723bc0aaad3435b16af Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 3 Nov 2022 15:42:02 +0100 Subject: [PATCH 3/3] Chore: Update snapshot tests --- .../__snapshots__/RelationInput.test.js.snap | 85 ++++++++----------- 1 file changed, 34 insertions(+), 51 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap index a706af1c16a..fd83951650f 100644 --- a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap +++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Content-Manager || RelationInput should render and match snapshot 1`] = ` -.c36 { +.c37 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -97,6 +97,13 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] = margin-top: 4px; } +.c26 { + font-weight: 600; + color: #006096; + font-size: 0.875rem; + line-height: 1.43; +} + .c31 { color: #4945ff; display: block; @@ -107,6 +114,13 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] = line-height: 1.43; } +.c34 { + font-weight: 600; + color: #2f6846; + font-size: 0.875rem; + line-height: 1.43; +} + .c7 { padding-right: 12px; } @@ -122,7 +136,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] = padding-left: 16px; } -.c34 { +.c35 { padding-top: 8px; } @@ -156,7 +170,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] = line-height: 1.33; } -.c35 { +.c36 { color: #666687; font-size: 0.75rem; line-height: 1.33; @@ -193,63 +207,32 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] = .c24 { background: #eaf5ff; - padding: 4px; + padding-top: 4px; + padding-right: 8px; + padding-bottom: 4px; + padding-left: 8px; border-radius: 4px; border-color: #b8e1ff; border: 1px solid #b8e1ff; - min-width: 20px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; } .c32 { background: #eafbe7; - padding: 4px; + padding-top: 4px; + padding-right: 8px; + padding-bottom: 4px; + padding-left: 8px; border-radius: 4px; border-color: #c6f0c2; border: 1px solid #c6f0c2; - min-width: 20px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; } -.c25 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c26 { - color: #006096; - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; +.c25 .sc-URNzB { + color: #0c75af; } -.c33 { - color: #2f6846; - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; +.c33 .sc-URNzB { + color: #328048; } .c23 { @@ -684,10 +667,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
Published @@ -774,10 +757,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =

this is a description @@ -785,7 +768,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =