diff --git a/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js b/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js index 81134de13d..e34e2fd15a 100644 --- a/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js +++ b/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js @@ -36,10 +36,9 @@ export const RelationInput = ({ onSearchNextPage, onSearch, placeholder, + publicationStateTranslations, searchResults, }) => { - const { data } = searchResults; - return ( {label} {relations.isSuccess && relations.data.pages.flatMap((relation) => { - const { isDraft, href, mainField, id } = relation; - const badgeColor = isDraft ? 'secondary' : 'success'; + const { publicationState, href, mainField, id } = relation; + const badgeColor = publicationState === 'draft' ? 'secondary' : 'success'; return ( - {/* TO FIX: not showing badge if D&P is not activated */} - - {isDraft ? 'Draft' : 'Published'} - + {publicationState && ( + + {publicationStateTranslations[publicationState]} + + )} ); })} @@ -129,7 +129,7 @@ const ReactQueryRelationResult = PropTypes.shape({ PropTypes.shape({ href: PropTypes.string, id: PropTypes.number.isRequired, - isDraft: PropTypes.bool, + publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }) ), @@ -144,6 +144,7 @@ const ReactQuerySearchResult = PropTypes.shape({ PropTypes.shape({ isDraft: PropTypes.bool, mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), }) ), }), @@ -177,6 +178,10 @@ RelationInput.propTypes = { onSearch: PropTypes.func.isRequired, onSearchNextPage: PropTypes.func.isRequired, placeholder: PropTypes.string.isRequired, + publicationStateTranslations: PropTypes.shape({ + draft: PropTypes.string.isRequired, + published: PropTypes.string.isRequired, + }).isRequired, searchResults: ReactQuerySearchResult, relations: ReactQueryRelationResult, }; diff --git a/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx b/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx index 5982f0b7dd..dfbb78021e 100644 --- a/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx +++ b/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx @@ -26,16 +26,24 @@ WIP labelLoadMore="Load More" listHeight="200px" name="options" + publicationStateTranslations={{ draft: 'Draft', published: 'Published' }} searchResults={{ data: { pages: [ { isDraft: true, mainField: 'Relation 6', + publicationState: 'draft', }, { isDraft: false, mainField: 'Relation 7', + publicationState: 'published', + }, + { + isDraft: false, + mainField: 'Relation 8', + publicationState: false, }, ], isLoading: false, @@ -49,30 +57,31 @@ WIP id: 1, href: '/', mainField: 'Relation 1', + publicationState: 'draft', }, { id: 2, href: '', mainField: 'Relation 2', - isDraft: true, + publicationState: false, }, { id: 3, href: '', mainField: 'Relation 3', - isDraft: false, + publicationState: 'published', }, { id: 4, href: '', mainField: 'Relation 4', - isDraft: false, + publicationState: 'draft', }, { id: 5, href: '', mainField: 'Relation 5', - isDraft: true, + publicationState: false, }, ], }, diff --git a/packages/core/helper-plugin/lib/src/components/RelationInput/components/Option.js b/packages/core/helper-plugin/lib/src/components/RelationInput/components/Option.js index 7fee276eb5..ac481fcca9 100644 --- a/packages/core/helper-plugin/lib/src/components/RelationInput/components/Option.js +++ b/packages/core/helper-plugin/lib/src/components/RelationInput/components/Option.js @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { components } from 'react-select'; import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; -import { get, has } from 'lodash'; import { Flex } from '@strapi/design-system/Flex'; import { Typography } from '@strapi/design-system/Typography'; @@ -20,12 +19,12 @@ const StyledBullet = styled.div` `; export const Option = (props) => { - console.log(props); const { formatMessage } = useIntl(); const Component = components.Option; - const hasDraftAndPublish = has(get(props, 'data'), 'isDraft'); + const { publicationState, mainField } = props.data; - if (hasDraftAndPublish) { + if (publicationState) { + const isDraft = publicationState === 'draft'; // To fix: use getTrad utils from CM once component is migrated into CM components const draftMessage = { id: 'content-manager.components.Select.draft-info-title', @@ -36,20 +35,19 @@ export const Option = (props) => { id: 'content-manager.components.Select.publish-info-title', defaultMessage: 'State: Published', }; - const { isDraft } = props.data; const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage); return ( - {props.data.mainField || '-'} + {mainField ?? '-'} ); } - return {props.data.mainField || '-'}; + return {mainField ?? '-'}; }; Option.propTypes = { @@ -57,5 +55,6 @@ Option.propTypes = { data: PropTypes.shape({ isDraft: PropTypes.bool, mainField: PropTypes.string, + publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), }).isRequired, }; diff --git a/packages/core/helper-plugin/lib/src/components/RelationInput/components/tests/Option.test.js b/packages/core/helper-plugin/lib/src/components/RelationInput/components/tests/Option.test.js index c6b3443148..301c9437cd 100644 --- a/packages/core/helper-plugin/lib/src/components/RelationInput/components/tests/Option.test.js +++ b/packages/core/helper-plugin/lib/src/components/RelationInput/components/tests/Option.test.js @@ -17,7 +17,7 @@ const setup = (props) => describe('RelationInput || Option', () => { it('should render custom Option with published state title', () => { - setup({ options: [{ mainField: 'relation 1', isDraft: false }] }); + setup({ options: [{ mainField: 'relation 1', publicationState: 'published' }] }); act(() => { fireEvent.mouseDown(screen.getByRole('button')); @@ -28,7 +28,7 @@ describe('RelationInput || Option', () => { }); it('should render custom Option with draft state title', () => { - setup({ options: [{ mainField: 'relation 1', isDraft: true }] }); + setup({ options: [{ mainField: 'relation 1', publicationState: 'draft' }] }); act(() => { fireEvent.mouseDown(screen.getByRole('button'));