Apply sort for relations in edit view

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

@@ -7,7 +7,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import { get, map } from 'lodash';
+import { get } from 'lodash';
 
 // Components.
 import SelectOne from 'components/SelectOne';
@@ -15,29 +15,20 @@ import SelectMany from 'components/SelectMany';
 
 import styles from './styles.scss';
 
-const filterRelationsUpload = (data) => Object.keys(data).reduce((acc, current) => {
-  if (get(data, [current, 'plugin']) !== 'upload') {
-    acc[current] = data[current];
-  }
-
-  return acc;
-}, {});
-
 function EditRelations(props) {
   return (
     <div className={styles.editFormRelations}>
       <FormattedMessage id="content-manager.EditRelations.title">
         {(message) => <h3>{message}</h3>}
       </FormattedMessage>
-      {map(filterRelationsUpload(props.schema.relations), (relation, key) => {
+      {props.displayedRelations.map(relationName => {
-        if (relation.nature.toLowerCase().includes('morph') && relation[key]) return '';
+        const relation = get(props.schema, ['relations', relationName], {});
-
         const Select = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(relation.nature) ? SelectOne : SelectMany;
 
         return (
           <Select
             currentModelName={props.currentModelName}
-            key={key}
+            key={relationName}
             record={props.record}
             relation={relation}
             schema={props.schema}
@@ -51,6 +42,7 @@ function EditRelations(props) {
 }
 
 EditRelations.defaultProps = {
+  displayedRelations: [],
   record: {},
   schema: {},
 };
@@ -58,6 +50,7 @@ EditRelations.defaultProps = {
 EditRelations.propTypes = {
   changeData: PropTypes.func.isRequired,
   currentModelName: PropTypes.string.isRequired,
+  displayedRelations: PropTypes.array,
   location: PropTypes.object.isRequired,
   record: PropTypes.object,
   schema: PropTypes.object,

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

@@ -129,6 +129,7 @@ class SelectMany extends React.Component {
     );
 
     const value = get(this.props.record, this.props.relation.alias);
+
     /* eslint-disable jsx-a11y/label-has-for */
     return (
       <div className={`form-group ${styles.selectMany}`}>
@@ -147,6 +148,7 @@ class SelectMany extends React.Component {
             isNull(value) || isUndefined(value) || value.size === 0
               ? null
               : value.map(item => {
+
                 if (item) {
                   return {
                     value: get(item, 'value') || item,
@@ -154,7 +156,7 @@ class SelectMany extends React.Component {
                         get(item, 'label') ||
                         templateObject({ mainField: this.props.relation.displayedAttribute }, item)
                           .mainField ||
-                        item.value.id,
+                        item.id,
                   };
                 }
               })

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

@@ -108,8 +108,16 @@ export class EditPage extends React.Component {
   }
 
   /**
-   * Retrive the model's custom layout
+   * Retrieve the model's displayed relations
-   * @return {[type]} [description]
+   * @return {Array}
+   */
+  getDisplayedRelations = () => {
+    return get(this.getSchema(), ['editDisplay', 'relations'], []);
+  }
+
+  /**
+   * Retrieve the model's custom layout
+   *
    */
   getLayout = () => (
     bindLayout.call(this, get(this.props.editPage, ['layout', this.getModelName()], {}))
@@ -223,6 +231,10 @@ export class EditPage extends React.Component {
     this.props.setFormErrors(formErrors);
   }
 
+  hasDisplayedRelations = () => {
+    return this.getDisplayedRelations().length > 0;
+  }
+
   isCreating = () => this.props.match.params.id === 'create';
 
   isRelationComponentNull = () => (
@@ -299,7 +311,7 @@ export class EditPage extends React.Component {
               }}
             />
             <div className="row">
-              <div className={this.isRelationComponentNull() ? 'col-lg-12' : 'col-lg-9'}>
+              <div className={!this.hasDisplayedRelations() ? 'col-lg-12' : 'col-lg-9'}>
                 <div className={styles.main_wrapper}>
                   {this.showLoaders() ? (
                     <LoadingIndicator />
@@ -320,12 +332,13 @@ export class EditPage extends React.Component {
                   )}
                 </div>
               </div>
-              {!this.isRelationComponentNull() && (
+              {this.hasDisplayedRelations() && (
                 <div className={cn('col-lg-3')}>
                   <div className={styles.sub_wrapper}>
-                    {!this.isRelationComponentNull() && (
+                    {this.hasDisplayedRelations() && (
                       <EditRelations
                         currentModelName={this.getModelName()}
+                        displayedRelations={this.getDisplayedRelations()}
                         location={this.props.location}
                         changeData={this.props.changeData}
                         record={editPage.record}