Display empty block when no fields in the editPage

packages/strapi-admin/admin/src/translations/en.json

@@ -8,6 +8,8 @@
   "app.components.DownloadInfo.download": "Download in progress...",
   "app.components.DownloadInfo.text": "This could take a minute. Thanks for your patience.",
 
+  "app.components.EmptyAttributes.title": "There are no fields yet",
+
   "app.components.HomePage.welcome": "Welcome on board!",
   "app.components.HomePage.welcome.again": "Welcome ",
   "app.components.HomePage.cta": "CONFIRM",

packages/strapi-admin/admin/src/translations/fr.json

@@ -7,6 +7,7 @@
 
   "app.components.DownloadInfo.download": "Téléchargement en cours...",
   "app.components.DownloadInfo.text": "Cela peut prendre une minute. Merci de patienter.",
+  "app.components.EmptyAttributes.title": "Il n'y a pas encore de champ",
 
   "app.components.HomePage.welcome": "Bienvenue à bord!",
   "app.components.HomePage.welcome.again": "Bienvenue ",

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

@@ -0,0 +1,49 @@
+/**
+*
+* EmptyAttributesBlock
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Button from 'components/Button';
+import styles from './styles.scss';
+
+function EmptyAttributesBlock({ description, label, onClick, title }) {
+  return (
+    <div className={styles.emptyAttributesBlock}>
+      <div>
+        <FormattedMessage id={title}>
+          {(msg) => <div className={styles.title}>{msg}</div>}
+        </FormattedMessage>
+        <FormattedMessage id={description}>
+          {(msg) => <div className={styles.description}>{msg}</div>}
+        </FormattedMessage>
+        <div className={styles.buttonContainer}>
+          <Button
+            onClick={onClick}
+            primaryAddShape
+            label={label}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+EmptyAttributesBlock.defaultProps = {
+  description: 'app.utils.defaultMessage',
+  label: 'app.utils.defaultMessage',
+  onClick: () => {},
+  title: 'app.components.EmptyAttributes.title',
+};
+
+EmptyAttributesBlock.propTypes = {
+  description: PropTypes.string,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  title: PropTypes.string,
+};
+
+export default EmptyAttributesBlock;

packages/strapi-helper-plugin/lib/src/components/EmptyAttributesBlock/styles.scss

@@ -1,8 +1,8 @@
-.emptyAttributesView { /* stylelint-disable */
+.emptyAttributesBlock { /* stylelint-disable */
   height: 22.1rem;
   margin-top: -.1rem;
   padding-top: 5.8rem;
-  background-image: url('../../assets/images/background_empty.svg');
+  background-image: url('../../assets/images/background-empty-attributes.svg');
   background-color: #FFFFFF;
   background-repeat: repeat;
   text-align: center;

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

@@ -12,30 +12,25 @@ import { createStructuredSelector } from 'reselect';
 import PropTypes from 'prop-types';
 import { cloneDeep, findIndex, get, includes, isEmpty, isObject, toNumber, toString, replace } from 'lodash';
 import cn from 'classnames';
-
 // You can find these components in either
 // ./node_modules/strapi-helper-plugin/lib/src
 // or strapi/packages/strapi-helper-plugin/lib/src
 import BackHeader from 'components/BackHeader';
+import EmptyAttributesBlock from 'components/EmptyAttributesBlock';
 import LoadingIndicator from 'components/LoadingIndicator';
 import PluginHeader from 'components/PluginHeader';
 import PopUpWarning from 'components/PopUpWarning';
-
 // Plugin's components
 import Edit from 'components/Edit';
 import EditRelations from 'components/EditRelations';
-
 // App selectors
 import { makeSelectSchema } from 'containers/App/selectors';
-
 import injectReducer from 'utils/injectReducer';
 import injectSaga from 'utils/injectSaga';
 import getQueryParameters from 'utils/getQueryParameters';
 import { bindLayout } from 'utils/bindLayout';
 import inputValidations from 'utils/inputsValidations';
-
 import { checkFormValidity } from 'utils/formValidations';
-
 import {
   changeData,
   getData,
@@ -46,7 +41,6 @@ import {
   setFormErrors,
   submit,
 } from './actions';
-
 import reducer from './reducer';
 import saga from './saga';
 import makeSelectEditPage from './selectors';
@@ -239,6 +233,10 @@ export class EditPage extends React.Component {
     return this.getDisplayedRelations().length > 0;
   }
 
+  hasDisplayedFields = () => {
+    return get(this.getModel(), ['editDisplay', 'fields'], []).length > 0;
+  }
+
   isCreating = () => this.props.match.params.id === 'create';
 
   isRelationComponentNull = () => (
@@ -286,6 +284,63 @@ export class EditPage extends React.Component {
 
   toggle = () => this.setState(prevState => ({ showWarning: !prevState.showWarning }));
 
+  renderEdit = () => {
+    const { editPage, location: { search } } = this.props;
+    const source = getQueryParameters(search, 'source');
+    const basePath = '/plugins/content-manager/ctm-configurations';
+    const pathname = source !== 'content-manager'
+      ? `${basePath}/plugins/${source}/${this.getModelName()}`
+      : `${basePath}/${this.getModelName()}`;
+
+    const Wrapper = ({ children }) => (
+      <div className={!this.hasDisplayedRelations() ? 'col-lg-12' : 'col-lg-9'}>
+        {children}
+      </div>
+    );
+    
+    if (this.showLoaders()) {
+      return (
+        <Wrapper>
+          <div className={styles.main_wrapper}>  
+            <LoadingIndicator />
+          </div>
+        </Wrapper>
+      );
+    }
+
+    if (!this.hasDisplayedFields()) {
+      return (
+        <Wrapper>
+          <EmptyAttributesBlock
+            description="content-manager.components.EmptyAttributesBlock.description"
+            label="content-manager.components.EmptyAttributesBlock.button"
+            onClick={() => this.props.history.push(pathname)}
+          />
+        </Wrapper>
+      );
+    }
+
+    return (
+      <Wrapper>
+        <div className={styles.main_wrapper}>
+          <Edit
+            attributes={this.getModelAttributes()}
+            didCheckErrors={editPage.didCheckErrors}
+            formValidations={editPage.formValidations}
+            formErrors={editPage.formErrors}
+            layout={this.getLayout()}
+            modelName={this.getModelName()}
+            onBlur={this.handleBlur}
+            onChange={this.handleChange}
+            record={editPage.record}
+            resetProps={editPage.resetProps}
+            schema={this.getSchema()}
+          />
+        </div>
+      </Wrapper>
+    );
+  }
+
   render() {
     const { editPage } = this.props;
     const { showWarning } = this.state;
@@ -312,27 +367,7 @@ export class EditPage extends React.Component {
               onConfirm={this.handleConfirm}
             />
             <div className="row">
-              <div className={!this.hasDisplayedRelations() ? 'col-lg-12' : 'col-lg-9'}>
-                <div className={styles.main_wrapper}>
-                  {this.showLoaders() ? (
-                    <LoadingIndicator />
-                  ) : (
-                    <Edit
-                      attributes={this.getModelAttributes()}
-                      didCheckErrors={editPage.didCheckErrors}
-                      formValidations={editPage.formValidations}
-                      formErrors={editPage.formErrors}
-                      layout={this.getLayout()}
-                      modelName={this.getModelName()}
-                      onBlur={this.handleBlur}
-                      onChange={this.handleChange}
-                      record={editPage.record}
-                      resetProps={editPage.resetProps}
-                      schema={this.getSchema()}
-                    />
-                  )}
-                </div>
-              </div>
+              {this.renderEdit()}
               {this.hasDisplayedRelations() && (
                 <div className={cn('col-lg-3')}>
                   <div className={styles.sub_wrapper}>

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

@@ -37,6 +37,9 @@
 
   "components.DraggableAttr.edit": "Click to edit",
 
+  "components.EmptyAttributesBlock.description": "You can change your settings",
+  "components.EmptyAttributesBlock.button": "Go to settings page",
+
   "components.FiltersPickWrapper.PluginHeader.actions.apply": "Apply",
   "components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Clear all",
   "components.FiltersPickWrapper.PluginHeader.description": "Set the conditions to apply to filter the entries",

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

@@ -37,6 +37,9 @@
 
   "components.DraggableAttr.edit": "Clicquez pour modifier",
 
+  "components.EmptyAttributesBlock.description": "Vous pouvez modifiez vos paramètres",
+  "components.EmptyAttributesBlock.button": "Voir la page des configurations",
+
   "components.FiltersPickWrapper.PluginHeader.actions.apply": "Appliquer",
   "components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Tout supprimer",
   "components.FiltersPickWrapper.PluginHeader.description": "Définissez les conditions des filtres à appliquer",

packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/index.js

@@ -1,41 +0,0 @@
-/**
-*
-* EmptyAttributesView
-*
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import Button from 'components/Button';
-import styles from './styles.scss';
-
-class EmptyAttributesView extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <div className={styles.emptyAttributesView}>
-        <div>
-          <FormattedMessage id="content-type-builder.home.emptyAttributes.title">
-            {(title) => <div className={styles.title}>{title}</div>}
-          </FormattedMessage>
-          <FormattedMessage id="content-type-builder.home.emptyAttributes.description">
-            {(description) => <div className={styles.description}>{description}</div>}
-          </FormattedMessage>
-          <div className={styles.buttonContainer}>
-            <Button
-              onClick={this.props.onClickAddAttribute}
-              primaryAddShape
-              label="content-type-builder.button.attributes.add"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-EmptyAttributesView.propTypes = {
-  onClickAddAttribute: PropTypes.func.isRequired,
-};
-
-export default EmptyAttributesView;

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js

@@ -20,7 +20,7 @@ import { makeSelectContentTypeUpdated } from 'containers/Form/selectors';
 
 import AttributeRow from 'components/AttributeRow';
 import ContentHeader from 'components/ContentHeader';
-import EmptyAttributesView from 'components/EmptyAttributesView';
+import EmptyAttributesBlock from 'components/EmptyAttributesBlock';
 import Form from 'containers/Form';
 import List from 'components/List';
 import PluginLeftMenu from 'components/PluginLeftMenu';
@@ -265,7 +265,7 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
     const addButtons  = get(storeData.getContentType(), 'name') === this.props.match.params.modelName && size(get(storeData.getContentType(), 'attributes')) > 0 || this.props.modelPage.showButtons;
     const contentHeaderDescription = this.props.modelPage.model.description || 'content-type-builder.modelPage.contentHeader.emptyDescription.description';
     const content = size(this.props.modelPage.model.attributes) === 0 ?
-      <EmptyAttributesView onClickAddAttribute={this.handleClickAddAttribute} /> :
+      <EmptyAttributesBlock title="content-type-builder.home.emptyAttributes.title" description="content-type-builder.home.emptyAttributes.description" label="content-type-builder.button.attributes.add" onClick={this.handleClickAddAttribute} /> :
       <List
         listContent={this.props.modelPage.model}
         renderCustomListTitle={this.renderListTitle}