From 15f9b9094a553e06f0b3038e4df4cc53d756c92a Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Wed, 24 Aug 2022 12:39:38 +0200
Subject: [PATCH 1/4] update proptypes for searchResult and relations

---
 .../components/RelationInput/RelationInput.js | 55 ++++++++++---------
 .../RelationInput/RelationInput.stories.mdx   | 37 ++++++++-----
 .../RelationInput/components/Option.js        | 27 +++------
 .../components/tests/Option.test.js           |  6 +-
 4 files changed, 63 insertions(+), 62 deletions(-)

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 550307eb41..81134de13d 100644
--- a/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js
+++ b/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js
@@ -38,6 +38,8 @@ export const RelationInput = ({
   placeholder,
   searchResults,
 }) => {
+  const { data } = searchResults;
+
   return (
     <Field error={error} name={name} hint={description} id={id}>
       <Relation
@@ -46,7 +48,7 @@ export const RelationInput = ({
             <FieldLabel>{label}</FieldLabel>
             <ReactSelect
               components={{ Option }}
-              options={searchResults}
+              options={data?.pages || []}
               isDisabled={disabled}
               error={error}
               inputId={id}
@@ -72,7 +74,7 @@ export const RelationInput = ({
         <RelationList height={listHeight}>
           {relations.isSuccess &&
             relations.data.pages.flatMap((relation) => {
-              const { isDraft, href, title, id } = relation;
+              const { isDraft, href, mainField, id } = relation;
               const badgeColor = isDraft ? 'secondary' : 'success';
 
               return (
@@ -92,23 +94,22 @@ export const RelationInput = ({
                   <Box paddingTop={1} paddingBottom={1}>
                     {href ? (
                       <BaseLink disabled={disabled} href={href}>
-                        {title}
+                        {mainField}
                       </BaseLink>
                     ) : (
-                      title
+                      mainField
                     )}
                   </Box>
 
-                  {isDraft !== undefined && (
-                    <Badge
-                      borderSize={1}
-                      borderColor={`${badgeColor}200`}
-                      backgroundColor={`${badgeColor}100`}
-                      textColor={`${badgeColor}700`}
-                    >
-                      {isDraft ? 'Draft' : 'Published'}
-                    </Badge>
-                  )}
+                  {/* 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>
                 </RelationItem>
               );
             })}
@@ -126,10 +127,10 @@ const ReactQueryRelationResult = PropTypes.shape({
   data: PropTypes.shape({
     pages: PropTypes.arrayOf(
       PropTypes.shape({
+        href: PropTypes.string,
         id: PropTypes.number.isRequired,
         isDraft: PropTypes.bool,
-        href: PropTypes.string,
-        title: PropTypes.string.isRequired,
+        mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       })
     ),
   }),
@@ -137,16 +138,18 @@ const ReactQueryRelationResult = PropTypes.shape({
   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.shape({
+        isDraft: PropTypes.bool,
+        mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      })
+    ),
+  }),
+  isLoading: PropTypes.bool.isRequired,
+  isSuccess: PropTypes.bool.isRequired,
+});
 
 RelationInput.defaultProps = {
   description: undefined,
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 f54992b644..5982f0b7dd 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
@@ -21,50 +21,57 @@ 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'
-            }
-          }
-        ]}
+        searchResults={{
+          data: {
+            pages: [
+              {
+                isDraft: true,
+                mainField: 'Relation 6',
+              },
+              {
+                isDraft: false,
+                mainField: 'Relation 7',
+              },
+            ],
+            isLoading: false,
+            isSuccess: true,
+          },
+        }}
         relations={{
           data: {
             pages: [
               {
                 id: 1,
                 href: '/',
-                title: 'Relation 1',
+                mainField: 'Relation 1',
               },
               {
                 id: 2,
                 href: '',
-                title: 'Relation 2',
+                mainField: 'Relation 2',
                 isDraft: true,
               },
               {
                 id: 3,
                 href: '',
-                title: 'Relation 3',
+                mainField: 'Relation 3',
                 isDraft: false,
               },
               {
                 id: 4,
                 href: '',
-                title: 'Relation 4',
+                mainField: 'Relation 4',
                 isDraft: false,
               },
               {
                 id: 5,
                 href: '',
-                title: 'Relation 5',
+                mainField: 'Relation 5',
                 isDraft: true,
               },
             ],
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 db1a89e0a8..7fee276eb5 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,7 @@ 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 { get, has } from 'lodash';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
 
@@ -20,12 +20,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.value'), 'publishedAt');
+  const hasDraftAndPublish = has(get(props, 'data'), 'isDraft');
 
   if (hasDraftAndPublish) {
-    const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
     // 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,35 +36,26 @@ 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.label || '-'}</Typography>
+          <Typography ellipsis>{props.data.mainField || '-'}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.label || '-'}</Component>;
-};
-
-Option.defaultProps = {
-  label: '',
+  return <Component {...props}>{props.data.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,
   }).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 6510b3d1b0..c6b3443148 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: [{ value: { id: 1, publishedAt: 'something' }, label: 'relation 1' }] });
+    setup({ options: [{ mainField: 'relation 1', isDraft: false }] });
 
     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', isDraft: true }] });
 
     act(() => {
       fireEvent.mouseDown(screen.getByRole('button'));

From 94eb2c631a6476e9d6c249665c00b32c76be111d Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Wed, 24 Aug 2022 15:29:02 +0200
Subject: [PATCH 2/4] publicationState and translations

---
 .../components/RelationInput/RelationInput.js | 35 +++++++++++--------
 .../RelationInput/RelationInput.stories.mdx   | 17 ++++++---
 .../RelationInput/components/Option.js        | 13 ++++---
 .../components/tests/Option.test.js           |  4 +--
 4 files changed, 41 insertions(+), 28 deletions(-)

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 (
     <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,
 };
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 (
       <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,
 };
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'));

From 54c41cf84006dac402f4872e188a305460103f26 Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Wed, 24 Aug 2022 16:05:13 +0200
Subject: [PATCH 3/4] fix pages proptypes

---
 .../components/RelationInput/RelationInput.js | 28 +++---
 .../RelationInput/RelationInput.stories.mdx   | 94 ++++++++++---------
 2 files changed, 65 insertions(+), 57 deletions(-)

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 e34e2fd15a..fcfa6a4438 100644
--- a/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js
+++ b/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js
@@ -72,7 +72,7 @@ export const RelationInput = ({
       >
         <RelationList height={listHeight}>
           {relations.isSuccess &&
-            relations.data.pages.flatMap((relation) => {
+            relations.data.pages.flat().map((relation) => {
               const { publicationState, href, mainField, id } = relation;
               const badgeColor = publicationState === 'draft' ? 'secondary' : 'success';
 
@@ -126,12 +126,14 @@ export const RelationInput = ({
 const ReactQueryRelationResult = PropTypes.shape({
   data: PropTypes.shape({
     pages: 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]),
-      })
+      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,
@@ -141,11 +143,13 @@ const ReactQueryRelationResult = PropTypes.shape({
 const ReactQuerySearchResult = PropTypes.shape({
   data: PropTypes.shape({
     pages: PropTypes.arrayOf(
-      PropTypes.shape({
-        isDraft: PropTypes.bool,
-        mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-      })
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          isDraft: PropTypes.bool,
+          mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+          publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        })
+      )
     ),
   }),
   isLoading: PropTypes.bool.isRequired,
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 dfbb78021e..8f0d86c80d 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
@@ -30,21 +30,23 @@ WIP
         searchResults={{
           data: {
             pages: [
-              {
-                isDraft: true,
-                mainField: 'Relation 6',
-                publicationState: 'draft',
-              },
-              {
-                isDraft: false,
-                mainField: 'Relation 7',
-                publicationState: 'published',
-              },
-              {
-                isDraft: false,
-                mainField: 'Relation 8',
-                publicationState: false,
-              },
+              [
+                {
+                  isDraft: true,
+                  mainField: 'Relation 6',
+                  publicationState: 'draft',
+                },
+                {
+                  isDraft: false,
+                  mainField: 'Relation 7',
+                  publicationState: 'published',
+                },
+                {
+                  isDraft: false,
+                  mainField: 'Relation 8',
+                  publicationState: false,
+                },
+              ],
             ],
             isLoading: false,
             isSuccess: true,
@@ -53,36 +55,38 @@ WIP
         relations={{
           data: {
             pages: [
-              {
-                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,
-              },
+              [
+                {
+                  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,

From 9cdf50e75731cd1003a955c7b73ef48664bd9f64 Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Thu, 25 Aug 2022 10:46:01 +0200
Subject: [PATCH 4/4] remove isDraft from proptypes, added id

---
 .../lib/src/components/RelationInput/RelationInput.js       | 2 +-
 .../src/components/RelationInput/RelationInput.stories.mdx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

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 fcfa6a4438..f95b3aa2be 100644
--- a/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js
+++ b/packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.js
@@ -145,7 +145,7 @@ const ReactQuerySearchResult = PropTypes.shape({
     pages: PropTypes.arrayOf(
       PropTypes.arrayOf(
         PropTypes.shape({
-          isDraft: PropTypes.bool,
+          id: PropTypes.number.isRequired,
           mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
           publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
         })
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 8f0d86c80d..2c9ebe85ca 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
@@ -32,17 +32,17 @@ WIP
             pages: [
               [
                 {
-                  isDraft: true,
+                  id: 6
                   mainField: 'Relation 6',
                   publicationState: 'draft',
                 },
                 {
-                  isDraft: false,
+                  id: 7,
                   mainField: 'Relation 7',
                   publicationState: 'published',
                 },
                 {
-                  isDraft: false,
+                  id: 8,
                   mainField: 'Relation 8',
                   publicationState: false,
                 },