Fix displayed field on remove

packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { isFunction, isObject } from 'lodash';
+import { isEmpty, isFunction, isObject } from 'lodash';
 
 import LoadingBar from 'components/LoadingBar';
 
@@ -20,7 +20,7 @@ function PluginHeaderTitle({ description, title, titleId, withDescriptionAnim })
   return (
     <div>
       <h1 className={styles.pluginHeaderTitleName} id={titleId}>
-        {contentTitle}
+        {contentTitle}&nbsp;
       </h1>
       {withDescriptionAnim ? (
         <LoadingBar />
@@ -32,8 +32,9 @@ function PluginHeaderTitle({ description, title, titleId, withDescriptionAnim })
 }
 
 const formatData = data => {
-  if (isObject(data) && data.id) {
+  
-    return <FormattedMessage id={data.id} defaultMessage={data.id} values={data.values} />;
+  if (isObject(data)) {
+    return isEmpty(data.id) ? null : <FormattedMessage id={data.id} defaultMessage={data.id} values={data.values} />;
   }
 
   if (isFunction(data)) {

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

@@ -169,12 +169,11 @@ export class EditPage extends React.Component {
     if (this.isCreating()) {
       return toString(this.props.editPage.pluginHeaderTitle);
     }
-    const primaryKey = this.getModel().primaryKey;
-    const { match: { params: { id } } } = this.props;
-    const title = get(this.getSchema(), 'editDisplay.displayedField', primaryKey);
-    const valueToDisplay = get(this.props.editPage, ['initialRecord', title], id);
 
-    return isEmpty(valueToDisplay) ? id : truncate(valueToDisplay, { length: '24', separator: '.' });
+    const title = get(this.getSchema(), 'editDisplay.displayedField');
+    const valueToDisplay = get(this.props.editPage, ['initialRecord', title], null);
+
+    return isEmpty(valueToDisplay) ? null : truncate(valueToDisplay, { length: '24', separator: '.' });
   };
 
   /**

packages/strapi-plugin-content-manager/config/functions/bootstrap.js

@@ -5,6 +5,7 @@ const {
   getApisKeys,
   getApisUploadRelations,
   getEditDisplayAvailableFieldsPath,
+  getEditDisplayDisplayedField,
   getEditDisplayFieldsPath
 } = require('./utils/getters');
 const splitted = str => str.split('.');
@@ -302,6 +303,9 @@ module.exports = async cb => {
       const defaultSortPath = apiPath.concat('defaultSort');
       const currentAttr = attrPath.slice(-1);
       const defaultSort = _.get(prevSchema.models, defaultSortPath);
+      const displayedFieldPath = getEditDisplayDisplayedField(attrPath);
+      const displayedField = _.get(prevSchema.models, displayedFieldPath, null);
+      const primaryKey = _.get(prevSchema.models, [...apiPath, 'primaryKey'], null);
 
       // If the user has deleted the default sort attribute in the content type builder
       // Replace it by new generated one from the current schema
@@ -309,6 +313,12 @@ module.exports = async cb => {
         _.set(prevSchema.models, defaultSortPath, _.get(schema.models, defaultSortPath));
       }
 
+      // If the user has deleted the edit view displayed field (name in the header)
+      // Replace it by the model's primary key.
+      if (_.includes(currentAttr, displayedField)) {
+        _.set(prevSchema.models, displayedFieldPath, primaryKey);
+      }
+      
       // Update the displayed fields
       const updatedListDisplay = prevListDisplay.filter(obj => obj.name !== currentAttr.join());
 

packages/strapi-plugin-content-manager/config/functions/utils/getters.js

@@ -54,6 +54,7 @@ const getApisUploadRelations = (data, sameArray) => sameArray.map(apiPath => {
  * @returns {Array}
  */
 const getEditDisplayAvailableFieldsPath = attrPath => [..._.take(attrPath, attrPath.length -2), 'editDisplay', 'availableFields', attrPath[attrPath.length - 1]];
+const getEditDisplayDisplayedField = attrPath => [..._.take(attrPath, attrPath.length -2), 'editDisplay', 'displayedField'];
 const getEditDisplayFieldsPath = attrPath => [..._.take(attrPath, attrPath.length -2), 'editDisplay', 'fields'];
 
 
@@ -63,5 +64,6 @@ module.exports = {
   getApisKeys,
   getApisUploadRelations,
   getEditDisplayAvailableFieldsPath,
+  getEditDisplayDisplayedField,
   getEditDisplayFieldsPath
 };