moved RelationInput to CM/components

packages/core/admin/admin/src/content-manager/components/RelationInput/components/Option.js

@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import { components } from 'react-select';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+
+import { pxToRem } from '@strapi/helper-plugin';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
 
-import pxToRem from '../../../utils/pxToRem';
+import { getTrad } from '../../../utils';
 
 const StyledBullet = styled.div`
   flex-shrink: 0;
@@ -25,14 +27,12 @@ export const Option = (props) => {
 
   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',
+      id: getTrad('components.Select.draft-info-title'),
       defaultMessage: 'State: Draft',
     };
-    // To fix: use getTrad utils from CM once component is migrated into CM components
     const publishedMessage = {
-      id: 'content-manager.components.Select.publish-info-title',
+      id: getTrad('components.Select.publish-info-title'),
       defaultMessage: 'State: Published',
     };
     const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/Option.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { render, screen, fireEvent, act } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
+
+import { ReactSelect } from '@strapi/helper-plugin';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 
-import ReactSelect from '../../../ReactSelect';
 import { Option } from '../Option';
 
 const setup = (props) =>
@@ -15,7 +16,7 @@ const setup = (props) =>
     </ThemeProvider>
   );
 
-describe('RelationInput || Option', () => {
+describe('Content-Manager || RelationInput || Option', () => {
   it('should render custom Option with published state title', () => {
     setup({ options: [{ mainField: 'relation 1', publicationState: 'published' }] });
 

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/RelationItem.test.js

@@ -11,7 +11,7 @@ const setup = ({ endAction }) =>
     </ThemeProvider>
   );
 
-describe('RelationItem', () => {
+describe('Content-Manager || RelationInput || RelationItem', () => {
   it('should render and match snapshot', () => {
     const { container } = setup({});
 

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/RelationList.test.js

@@ -14,7 +14,7 @@ const setup = ({ endAction }) =>
     </ThemeProvider>
   );
 
-describe('RelationList', () => {
+describe('Content-Manager || RelationInput || RelationList', () => {
   it('should render and match snapshot', () => {
     const { container } = setup({});
 

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationItem.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RelationItem should render and match snapshot 1`] = `
+exports[`Content-Manager || RelationInput || RelationItem should render and match snapshot 1`] = `
 .c3 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationList.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RelationList should render and match snapshot 1`] = `
+exports[`Content-Manager || RelationInput || RelationList should render and match snapshot 1`] = `
 .c6 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);

packages/core/admin/admin/src/content-manager/components/RelationInput/index.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 
+import { ReactSelect } from '@strapi/helper-plugin';
 import { Badge } from '@strapi/design-system/Badge';
 import { Box } from '@strapi/design-system/Box';
 import { BaseLink } from '@strapi/design-system/BaseLink';
@@ -19,15 +20,13 @@ import { RelationItem } from './components/RelationItem';
 import { RelationList } from './components/RelationList';
 import { Option } from './components/Option';
 
-import ReactSelect from '../ReactSelect';
-
 const RelationItemCenterChildren = styled(RelationItem)`
   div {
     justify-content: center;
   }
 `;
 
-export const RelationInput = ({
+const RelationInput = ({
   description,
   disabled,
   error,
@@ -212,3 +211,5 @@ RelationInput.propTypes = {
   searchResults: ReactQuerySearchResult,
   relations: ReactQueryRelationResult,
 };
+
+export default RelationInput;

packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx

@@ -1,105 +0,0 @@
-<!--- RelationInput.stories.mdx --->
-
-import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { BaseLink } from '@strapi/design-system/BaseLink';
-import { Badge } from '@strapi/design-system/Badge';
-import { Icon } from '@strapi/design-system/Icon';
-import { Box } from '@strapi/design-system/Box';
-import Cross from '@strapi/icons/Cross';
-import { RelationInput } from './RelationInput';
-import { relations } from './relationsDataMock';
-
-<Meta title="components/RelationInput" />
-
-# RelationInput
-
-WIP
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    <Box padding={8}>
-      <RelationInput
-        id="relations-1"
-        label="Relations"
-        labelLoadMore="Load More"
-        listHeight="200px"
-        loadingMessage='Relations are loading'
-        name="options"
-        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: '/',
-                  mainField:
-                    'Relation 1 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
-                  publicationState: 'draft',
-                },
-                {
-                  id: 2,
-                  href: '',
-                  mainField:
-                    'Relation 2 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
-                  publicationState: 'published',
-                },
-                {
-                  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,
-          isSuccess: true,
-        }}
-      />
-    </Box>
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable of={RelationItem} />

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

@@ -1,3 +0,0 @@
-import { RelationInput } from './RelationInput';
-
-export default RelationInput;

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

@@ -1,42 +0,0 @@
-export const relations = [
-  {
-    title: 'This is my first article relation',
-    status: 'published',
-    id: 1,
-  },
-  {
-    title: 'This is my second article relation',
-    status: 'draft',
-    id: 2,
-  },
-  {
-    title: 'This is my third article relation',
-    status: 'published',
-    id: 3,
-  },
-  {
-    title: 'This is my fourth article relation',
-    status: 'published',
-    id: 4,
-  },
-  {
-    title: 'This is my fifth article relation',
-    status: 'published',
-    id: 5,
-  },
-  {
-    title: 'This is my sixth article relation',
-    status: 'draft',
-    id: 6,
-  },
-  {
-    title: 'This is my seventh article relation',
-    status: 'published',
-    id: 7,
-  },
-  {
-    title: 'This is my eighth article relation',
-    status: 'published',
-    id: 8,
-  },
-];

packages/core/helper-plugin/lib/src/index.js

@@ -68,7 +68,6 @@ export { default as ReactSelect } from './components/ReactSelect';
 export { default as ReactSelectAsync } from './components/ReactSelect/Async';
 export { default as Link } from './components/Link';
 export { default as LinkButton } from './components/LinkButton';
-export { default as RelationInput } from './components/RelationInput';
 
 // New icons
 export { default as SortIcon } from './icons/SortIcon';