Merge branch 'features/relational-fields' of github.com:strapi/strapi into core/cm-refacto-ediview-container

packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js

@@ -257,7 +257,7 @@ const EditSettingsView = ({
       return (
         <div className="col-6" key={meta}>
           <FormattedMessage
-            id={`${pluginId}.containers.SettingPage.editSettings.entry.title.description`}
+            id={`${pluginId}.containers.SettingPage.editSettings.relation-field.description`}
           >
             {description => (
               <FormattedMessage

packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js

@@ -7,12 +7,12 @@ import {
   // contexts
   useGlobalContext,
 } from 'strapi-helper-plugin';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useDrop } from 'react-dnd';
 import { DropdownItem } from 'reactstrap';
 import { Inputs as Input } from '@buffetjs/custom';
 import pluginId from '../../pluginId';
-import { ItemTypes, getRequestUrl } from '../../utils';
+import { checkIfAttributeIsDisplayable, ItemTypes, getRequestUrl } from '../../utils';
 import PopupForm from '../../components/PopupForm';
 import SettingsViewWrapper from '../../components/SettingsViewWrapper';
 import SortWrapper from '../../components/SortWrapper';
@@ -30,6 +30,7 @@ const ListSettingsView = ({ deleteLayout, slug }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isModalFormOpen, setIsModalFormOpen] = useState(false);
   const [isDraggingSibling, setIsDraggingSibling] = useState(false);
+  const { formatMessage } = useIntl();
 
   const { emitEvent } = useGlobalContext();
 
@@ -84,9 +85,7 @@ const ListSettingsView = ({ deleteLayout, slug }) => {
 
     return Object.keys(metadatas)
       .filter(key => {
-        const type = get(attributes, [key, 'type'], '');
-
-        return !['json', 'component', 'richtext', 'relation'].includes(type) && !!type;
+        return checkIfAttributeIsDisplayable(get(attributes, key, {}));
       })
       .filter(field => {
         return !displayedFields.includes(field);
@@ -157,44 +156,43 @@ const ListSettingsView = ({ deleteLayout, slug }) => {
 
   const [, drop] = useDrop({ accept: ItemTypes.FIELD });
 
-  const renderForm = () => (
-    <>
-      <div className="col-6" style={{ marginBottom: 4 }}>
-        <FormattedMessage id={`${pluginId}.form.Input.label`}>
-          {label => (
-            <FormattedMessage id={`${pluginId}.form.Input.label.inputDescription`}>
-              {description => (
+  const renderForm = () => {
+    const type = get(attributes, [labelToEdit, 'type'], 'text');
+    const shouldDisplaySortToggle = !['media', 'relation'].includes(type);
+    const label = formatMessage({ id: `${pluginId}.form.Input.label` });
+    const description = formatMessage({ id: `${pluginId}.form.Input.label.inputDescription` });
+
+    return (
+      <>
+        <div className="col-6" style={{ marginBottom: 4 }}>
+          <Input
+            description={description}
+            label={label}
+            type="text"
+            name="label"
+            onBlur={() => {}}
+            value={get(labelForm, 'label', '')}
+            onChange={handleChangeEditLabel}
+          />
+        </div>
+        {shouldDisplaySortToggle && (
+          <div className="col-6" style={{ marginBottom: 4 }}>
+            <FormattedMessage id={`${pluginId}.form.Input.sort.field`}>
+              {label => (
                 <Input
-                  description={description}
                   label={label}
-                  type="text"
-                  name="label"
-                  onBlur={() => {}}
-                  value={get(labelForm, 'label', '')}
+                  type="bool"
+                  name="sortable"
+                  value={get(labelForm, 'sortable', false)}
                   onChange={handleChangeEditLabel}
                 />
               )}
             </FormattedMessage>
-          )}
-        </FormattedMessage>
-      </div>
-      {get(attributes, [labelToEdit, 'type'], 'text') !== 'media' && (
-        <div className="col-6" style={{ marginBottom: 4 }}>
-          <FormattedMessage id={`${pluginId}.form.Input.sort.field`}>
-            {label => (
-              <Input
-                label={label}
-                type="bool"
-                name="sortable"
-                value={get(labelForm, 'sortable', false)}
-                onChange={handleChangeEditLabel}
-              />
-            )}
-          </FormattedMessage>
-        </div>
-      )}
-    </>
-  );
+          </div>
+        )}
+      </>
+    );
+  };
 
   return (
     <LayoutDndProvider

packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js

@@ -16,7 +16,12 @@ import {
 } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 import pluginPermissions from '../../permissions';
-import { generatePermissionsObject, getRequestUrl, getTrad } from '../../utils';
+import {
+  checkIfAttributeIsDisplayable,
+  generatePermissionsObject,
+  getRequestUrl,
+  getTrad,
+} from '../../utils';
 
 import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
 import Container from '../../components/Container';
@@ -244,12 +249,9 @@ function ListView({
 
     return sortBy(
       Object.keys(filteredMetadatas)
-        .filter(
-          key =>
-            !['json', 'component', 'dynamiczone', 'relation', 'richtext'].includes(
-              get(listSchema, ['attributes', key, 'type'], '')
-            )
-        )
+        .filter(key => {
+          return checkIfAttributeIsDisplayable(get(listSchema, ['attributes', key], {}));
+        })
         .map(label => ({
           name: label,
           value: listLayout.includes(label),

packages/strapi-plugin-content-manager/admin/src/translations/en.json

@@ -85,6 +85,7 @@
   "containers.SettingPage.editSettings.description": "Drag & drop the fields to build the layout",
   "containers.SettingPage.editSettings.entry.title": "Entry title",
   "containers.SettingPage.editSettings.entry.title.description": "Set the displayed field of your entry",
+  "containers.SettingPage.editSettings.relation-field.description": "Set the displayed field in both the edit and list views",
   "containers.SettingPage.editSettings.title": "Edit view (settings)",
   "containers.SettingPage.layout": "Layout",
   "containers.SettingPage.listSettings.description": "Configure the options for this collection type",

packages/strapi-plugin-content-manager/admin/src/utils/checkIfAttributeIsDisplayable.js

@@ -0,0 +1,11 @@
+const checkIfAttributeIsDisplayable = attribute => {
+  const type = attribute.type;
+
+  if (type === 'relation') {
+    return !attribute.relationType.includes('morph');
+  }
+
+  return !['json', 'component', 'richtext'].includes(type) && !!type;
+};
+
+export default checkIfAttributeIsDisplayable;

packages/strapi-plugin-content-manager/admin/src/utils/index.js

@@ -1,3 +1,4 @@
+export { default as checkIfAttributeIsDisplayable } from './checkIfAttributeIsDisplayable';
 export { default as dateFormats } from './dateFormats';
 export { default as generatePermissionsObject } from './generatePermissionsObject';
 export { default as getFieldName } from './getFieldName';