Merge pull request #14189 from strapi/relation-input/proptype-fix

[RelationInput] Proptypes update

packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js

@@ -36,6 +36,7 @@ export const RelationInput = ({
   onSearchNextPage,
   onSearch,
   placeholder,
+  publicationStateTranslations,
   searchResults,
 }) => {
   return (
@@ -46,7 +47,7 @@ export const RelationInput = ({
             <FieldLabel>{label}</FieldLabel>
             <ReactSelect
               components={{ Option }}
-              options={searchResults}
+              options={searchResults.data.pages.flat()}
               isDisabled={disabled}
               error={error}
               inputId={id}
@@ -71,9 +72,9 @@ export const RelationInput = ({
       >
         <RelationList height={listHeight}>
           {relations.isSuccess &&
-            relations.data.pages.flatMap((relation) => {
-              const { isDraft, href, title, id } = relation;
-              const badgeColor = isDraft ? 'secondary' : 'success';
+            relations.data.pages.flat().map((relation) => {
+              const { publicationState, href, mainField, id } = relation;
+              const badgeColor = publicationState === 'draft' ? 'secondary' : 'success';
 
               return (
                 <RelationItem
@@ -92,21 +93,21 @@ export const RelationInput = ({
                   <Box paddingTop={1} paddingBottom={1}>
                     {href ? (
                       <BaseLink disabled={disabled} href={href}>
-                        {title}
+                        {mainField}
                       </BaseLink>
                     ) : (
-                      title
+                      mainField
                     )}
                   </Box>
 
-                  {isDraft !== undefined && (
+                  {publicationState && (
                     <Badge
                       borderSize={1}
                       borderColor={`${badgeColor}200`}
                       backgroundColor={`${badgeColor}100`}
                       textColor={`${badgeColor}700`}
                     >
-                      {isDraft ? 'Draft' : 'Published'}
+                      {publicationStateTranslations[publicationState]}
                     </Badge>
                   )}
                 </RelationItem>
@@ -125,28 +126,35 @@ export const RelationInput = ({
 const ReactQueryRelationResult = PropTypes.shape({
   data: PropTypes.shape({
     pages: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.number.isRequired,
-        isDraft: PropTypes.bool,
-        href: PropTypes.string,
-        title: PropTypes.string.isRequired,
-      })
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          href: PropTypes.string,
+          id: PropTypes.number.isRequired,
+          publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+          mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        })
+      )
     ),
   }),
   isLoading: PropTypes.bool.isRequired,
   isSuccess: PropTypes.bool.isRequired,
 });
 
-const ReactQuerySearchResult = PropTypes.arrayOf(
-  PropTypes.shape({
-    label: PropTypes.string,
-    value: {
-      id: PropTypes.number,
-      name: PropTypes.string,
-      publishedAt: PropTypes.string,
-    },
-  })
-);
+const ReactQuerySearchResult = PropTypes.shape({
+  data: PropTypes.shape({
+    pages: PropTypes.arrayOf(
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.number.isRequired,
+          mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+          publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        })
+      )
+    ),
+  }),
+  isLoading: PropTypes.bool.isRequired,
+  isSuccess: PropTypes.bool.isRequired,
+});
 
 RelationInput.defaultProps = {
   description: undefined,
@@ -174,6 +182,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

@@ -21,52 +21,72 @@ WIP
   <Story name="base">
     <Box padding={8}>
       <RelationInput
+        id="relations-1"
         label="Relations"
         labelLoadMore="Load More"
         listHeight="200px"
         name="options"
-        searchResults={[
-          {
-            label: 'Relation 6',
-            value: {
-              id: 6,
-              name: 'Relation 6',
-              publishedAt: 'something'
-            }
-          }
-        ]}
+        publicationStateTranslations={{ draft: 'Draft', published: 'Published' }}
+        searchResults={{
+          data: {
+            pages: [
+              [
+                {
+                  id: 6
+                  mainField: 'Relation 6',
+                  publicationState: 'draft',
+                },
+                {
+                  id: 7,
+                  mainField: 'Relation 7',
+                  publicationState: 'published',
+                },
+                {
+                  id: 8,
+                  mainField: 'Relation 8',
+                  publicationState: false,
+                },
+              ],
+            ],
+            isLoading: false,
+            isSuccess: true,
+          },
+        }}
         relations={{
           data: {
             pages: [
-              {
-                id: 1,
-                href: '/',
-                title: 'Relation 1',
-              },
-              {
-                id: 2,
-                href: '',
-                title: 'Relation 2',
-                isDraft: true,
-              },
-              {
-                id: 3,
-                href: '',
-                title: 'Relation 3',
-                isDraft: false,
-              },
-              {
-                id: 4,
-                href: '',
-                title: 'Relation 4',
-                isDraft: false,
-              },
-              {
-                id: 5,
-                href: '',
-                title: 'Relation 5',
-                isDraft: true,
-              },
+              [
+                {
+                  id: 1,
+                  href: '/',
+                  mainField: 'Relation 1',
+                  publicationState: 'draft',
+                },
+                {
+                  id: 2,
+                  href: '',
+                  mainField: 'Relation 2',
+                  publicationState: false,
+                },
+                {
+                  id: 3,
+                  href: '',
+                  mainField: 'Relation 3',
+                  publicationState: 'published',
+                },
+                {
+                  id: 4,
+                  href: '',
+                  mainField: 'Relation 4',
+                  publicationState: 'draft',
+                },
+                {
+                  id: 5,
+                  href: '',
+                  mainField: 'Relation 5',
+                  publicationState: false,
+                },
+              ],
             ],
           },
           isLoading: 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, isEmpty } from 'lodash';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
 
@@ -22,10 +21,10 @@ const StyledBullet = styled.div`
 export const Option = (props) => {
   const { formatMessage } = useIntl();
   const Component = components.Option;
-  const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
+  const { publicationState, mainField } = props.data;
 
-  if (hasDraftAndPublish) {
-    const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
+  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',
@@ -42,29 +41,20 @@ export const Option = (props) => {
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.label || '-'}</Typography>
+          <Typography ellipsis>{mainField ?? '-'}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.label || '-'}</Component>;
-};
-
-Option.defaultProps = {
-  label: '',
+  return <Component {...props}>{mainField ?? '-'}</Component>;
 };
 
 Option.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isFocused: PropTypes.bool.isRequired,
-  selectProps: PropTypes.shape({
-    hasDraftAndPublish: PropTypes.bool,
-    mainField: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      schema: PropTypes.shape({
-        type: PropTypes.string.isRequired,
-      }).isRequired,
-    }).isRequired,
+  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: [{ value: { id: 1, publishedAt: 'something' }, label: 'relation 1' }] });
+    setup({ options: [{ mainField: 'relation 1', publicationState: 'published' }] });
 
     act(() => {
       fireEvent.mouseDown(screen.getByRole('button'));
@@ -27,8 +27,8 @@ describe('RelationInput || Option', () => {
     expect(screen.getByTitle('State: Published')).toBeInTheDocument();
   });
 
-  it('should render custom Option with published state title', () => {
-    setup({ options: [{ value: { id: 1, publishedAt: null }, label: 'relation 1' }] });
+  it('should render custom Option with draft state title', () => {
+    setup({ options: [{ mainField: 'relation 1', publicationState: 'draft' }] });
 
     act(() => {
       fireEvent.mouseDown(screen.getByRole('button'));