publicationState and translations

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 (
     <Field error={error} name={name} hint={description} id={id}>
       <Relation
@@ -48,7 +47,7 @@ export const RelationInput = ({
             <FieldLabel>{label}</FieldLabel>
             <ReactSelect
               components={{ Option }}
-              options={data?.pages || []}
+              options={searchResults.data.pages.flat()}
               isDisabled={disabled}
               error={error}
               inputId={id}
@@ -74,8 +73,8 @@ export const RelationInput = ({
         <RelationList height={listHeight}>
           {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 (
                 <RelationItem
@@ -101,15 +100,16 @@ export const RelationInput = ({
                     )}
                   </Box>
 
-                  {/* TO FIX: not showing badge if D&P is not activated  */}
-                  <Badge
-                    borderSize={1}
-                    borderColor={`${badgeColor}200`}
-                    backgroundColor={`${badgeColor}100`}
-                    textColor={`${badgeColor}700`}
-                  >
-                    {isDraft ? 'Draft' : 'Published'}
-                  </Badge>
+                  {publicationState && (
+                    <Badge
+                      borderSize={1}
+                      borderColor={`${badgeColor}200`}
+                      backgroundColor={`${badgeColor}100`}
+                      textColor={`${badgeColor}700`}
+                    >
+                      {publicationStateTranslations[publicationState]}
+                    </Badge>
+                  )}
                 </RelationItem>
               );
             })}
@@ -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,
 };

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,
               },
             ],
           },

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 (
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.data.mainField || '-'}</Typography>
+          <Typography ellipsis>{mainField ?? '-'}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.data.mainField || '-'}</Component>;
+  return <Component {...props}>{mainField ?? '-'}</Component>;
 };
 
 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,
 };

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'));