From b6a5ae5644966481dba0d25a3602fd1f95210895 Mon Sep 17 00:00:00 2001
From: Virginie Ky <virginie.ky@gmail.com>
Date: Mon, 8 Jul 2019 18:58:29 +0200
Subject: [PATCH] Review apply

---
 .../lib/src/components/HeaderNav/styles.scss  |   2 +-
 .../lib/src/components/ListHeader/Wrapper.js  |  11 +-
 .../lib/src/components/ListHeader/index.js    |  29 +++-
 .../lib/src/components/ListWrapper/index.js   |   2 +-
 .../strapi-helper-plugin/lib/src/index.js     |   1 -
 .../assets/icons/attributes/icon_boolean.png  | Bin
 .../src/assets/icons/attributes/icon_date.png | Bin
 .../assets/icons/attributes/icon_email.png    | Bin
 .../icons/attributes/icon_enumeration.png     | Bin
 .../src/assets/icons/attributes/icon_json.png | Bin
 .../assets/icons/attributes/icon_media.png    | Bin
 .../assets/icons/attributes/icon_number.png   | Bin
 .../assets/icons/attributes/icon_password.png | Bin
 .../assets/icons/attributes/icon_relation.png | Bin
 .../assets/icons/attributes/icon_string.png   | Bin
 .../src/assets/icons/attributes/icon_text.png | Bin
 .../admin/src/components/AttributeLi/index.js |   3 +-
 .../src/components/AttributeOption/index.js   |   2 +-
 .../admin/src/components/ListRow/index.js     |  17 ++-
 .../admin/src/containers/App/actions.js       |  40 -----
 .../admin/src/containers/App/reducer.js       |  22 +--
 .../admin/src/containers/GroupPage/index.js   |  29 ++--
 .../admin/src/containers/HomePage/Tr.js       |   3 +
 .../admin/src/containers/HomePage/index.js    |  12 +-
 .../containers/HomePage/tests/index.test.js   |  34 +++--
 .../src/containers/LeftMenu/StyledLeftMenu.js |   2 +-
 .../admin/src/containers/ModelPage/index.js   | 143 ++++++++++++------
 .../admin/src/translations/en.json            |   2 +
 .../admin}/src/utils/attributeIcons.js        |   0
 .../controllers/Fixtures.js                   |   4 +-
 30 files changed, 205 insertions(+), 153 deletions(-)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_boolean.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_date.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_email.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_enumeration.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_json.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_media.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_number.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_password.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_relation.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_string.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/assets/icons/attributes/icon_text.png (100%)
 rename packages/{strapi-helper-plugin/lib => strapi-plugin-content-type-builder/admin}/src/utils/attributeIcons.js (100%)

diff --git a/packages/strapi-helper-plugin/lib/src/components/HeaderNav/styles.scss b/packages/strapi-helper-plugin/lib/src/components/HeaderNav/styles.scss
index 1eafbe3f78..59c871de95 100644
--- a/packages/strapi-helper-plugin/lib/src/components/HeaderNav/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/HeaderNav/styles.scss
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
-  margin-top: 4.3rem;
+  margin-top: 3.8rem;
   border-radius: 2px;
   box-shadow: 0 2px 4px #e3e9f3;
   > a {
diff --git a/packages/strapi-helper-plugin/lib/src/components/ListHeader/Wrapper.js b/packages/strapi-helper-plugin/lib/src/components/ListHeader/Wrapper.js
index 9e7ff137e6..70d7249e2e 100644
--- a/packages/strapi-helper-plugin/lib/src/components/ListHeader/Wrapper.js
+++ b/packages/strapi-helper-plugin/lib/src/components/ListHeader/Wrapper.js
@@ -10,9 +10,18 @@ const Wrapper = styled.div`
   padding: 1.9rem 3rem 1.8rem 3rem;
   position: relative;
   background-color: white;
+  div {
+    p {
+      width: fit-content;
+      display: inline-block;
+    }
+  }
+  p {
+    margin-bottom: 0;
+  }
   button {
     position: absolute;
-    top: 1.7rem;
+    top: 1.9rem;
     right: 1rem;
     outline: 0;
   }
diff --git a/packages/strapi-helper-plugin/lib/src/components/ListHeader/index.js b/packages/strapi-helper-plugin/lib/src/components/ListHeader/index.js
index ee0b956bf8..8f9ee4b975 100644
--- a/packages/strapi-helper-plugin/lib/src/components/ListHeader/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/ListHeader/index.js
@@ -6,13 +6,23 @@ import SubTitle from './SubTitle';
 import Title from './Title';
 import Wrapper from './Wrapper';
 
-function ListHeader({ button, subtitle, subtitleValues, title, titleValues }) {
+function ListHeader({ button, subtitle, subtitleValues, title }) {
   return (
     <Wrapper>
       {button && <Button {...button} />}
-      <FormattedMessage id={title} values={titleValues}>
-        {msg => <Title>{msg}</Title>}
-      </FormattedMessage>
+      <div>
+        {title.map(item => {
+          return (
+            <FormattedMessage
+              key={item.label}
+              id={item.label}
+              values={item.values}
+            >
+              {msg => <Title>{msg}&nbsp;</Title>}
+            </FormattedMessage>
+          );
+        })}
+      </div>
       <FormattedMessage id={subtitle} values={subtitleValues}>
         {msg => <SubTitle>{msg}</SubTitle>}
       </FormattedMessage>
@@ -24,16 +34,19 @@ ListHeader.defaultProps = {
   button: null,
   subtitle: 'app.utils.defaultMessage',
   subtitleValues: {},
-  title: 'app.utils.defaultMessage',
-  titleValues: {},
+  title: null,
 };
 
 ListHeader.propTypes = {
   button: PropTypes.object,
   subtitle: PropTypes.string,
   subtitleValues: PropTypes.object,
-  title: PropTypes.string,
-  titleValues: PropTypes.object,
+  title: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      values: PropTypes.object,
+    })
+  ),
 };
 
 export default ListHeader;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js b/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js
index 93b585049d..76e917b8ba 100644
--- a/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js
@@ -13,7 +13,7 @@ const ListWrapper = styled.div`
     overflow-x: scroll;
   }
   .list-button {
-    padding: 1rem 3rem 2.5rem 3rem;
+    padding: 1.3rem 3rem 2.5rem 3rem;
     button {
       width: 100%;
     }
diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js
index a9cd2e2203..738395c2bf 100644
--- a/packages/strapi-helper-plugin/lib/src/index.js
+++ b/packages/strapi-helper-plugin/lib/src/index.js
@@ -93,7 +93,6 @@ export { default as PopUpWarning } from './components/PopUpWarning';
 
 // Utils
 export { default as auth } from './utils/auth';
-export { default as attributeIcons } from './utils/attributeIcons';
 export { default as cleanData } from './utils/cleanData';
 export { darken } from './utils/colors';
 export { default as getQueryParameters } from './utils/getQueryParameters';
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_boolean.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_boolean.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_boolean.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_boolean.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_date.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_date.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_date.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_date.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_email.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_email.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_email.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_email.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_enumeration.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_enumeration.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_enumeration.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_enumeration.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_json.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_json.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_json.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_json.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_media.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_media.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_media.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_media.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_number.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_number.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_number.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_number.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_password.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_password.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_password.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_password.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_relation.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_relation.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_relation.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_relation.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_string.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_string.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_string.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_string.png
diff --git a/packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_text.png b/packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_text.png
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/assets/icons/attributes/icon_text.png
rename to packages/strapi-plugin-content-type-builder/admin/src/assets/icons/attributes/icon_text.png
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeLi/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeLi/index.js
index 60df3242d3..110d2de412 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeLi/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeLi/index.js
@@ -8,8 +8,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { capitalize } from 'lodash';
-import { attributeIcons, IcoContainer } from 'strapi-helper-plugin';
+import { IcoContainer } from 'strapi-helper-plugin';
 
+import attributeIcons from '../../utils/attributeIcons';
 import pluginId from '../../pluginId';
 
 import styles from './styles.scss';
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeOption/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeOption/index.js
index 2f600f08d3..348d186c67 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeOption/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/AttributeOption/index.js
@@ -7,8 +7,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { attributeIcons } from 'strapi-helper-plugin';
 
+import attributeIcons from '../../utils/attributeIcons';
 import pluginId from '../../pluginId';
 
 import styles from './styles.scss';
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js
index 8f805d830f..2a9a365c24 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js
@@ -3,12 +3,15 @@ import PropTypes from 'prop-types';
 
 import { FormattedMessage } from 'react-intl';
 
-import { attributeIcons, PopUpWarning } from 'strapi-helper-plugin';
+import { PopUpWarning } from 'strapi-helper-plugin';
+
+import attributeIcons from '../../utils/attributeIcons';
 import pluginId from '../../pluginId';
 
 import StyledListRow from './StyledListRow';
 
 function ListRow({
+  attributeId,
   canOpenModal,
   deleteAttribute,
   isTemporary,
@@ -47,9 +50,14 @@ function ListRow({
               )}
             </FormattedMessage>
           )}
-          &nbsp; &nbsp; &nbsp;
+
           {isTemporary && (
-            <FormattedMessage id={`${pluginId}.contentType.temporaryDisplay`} />
+            <FormattedMessage
+              id={`${pluginId}.contentType.temporaryDisplay`}
+              style={{
+                paddingLeft: '15px',
+              }}
+            />
           )}
         </p>
       </td>
@@ -95,7 +103,7 @@ function ListRow({
               type="danger"
               onConfirm={() => {
                 setIsOpen(false);
-                deleteAttribute(name);
+                deleteAttribute(attributeId);
               }}
             />
           </>
@@ -112,6 +120,7 @@ ListRow.defaultProps = {
 };
 
 ListRow.propTypes = {
+  attributeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   canOpenModal: PropTypes.bool,
   deleteAttribute: PropTypes.func,
   isTemporary: PropTypes.bool.isRequired,
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js
index b0b08e752f..cd32c65709 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js
@@ -43,10 +43,6 @@ import {
   SUBMIT_CONTENT_TYPE_SUCCEEDED,
   SUBMIT_TEMP_CONTENT_TYPE,
   SUBMIT_TEMP_CONTENT_TYPE_SUCCEEDED,
-  SUBMIT_GROUP,
-  SUBMIT_GROUP_SUCCEEDED,
-  SUBMIT_TEMP_GROUP,
-  SUBMIT_TEMP_GROUP_SUCCEEDED,
   UPDATE_TEMP_CONTENT_TYPE,
   ON_CHANGE_EXISTING_CONTENT_TYPE_MAIN_INFOS,
 } from './constants';
@@ -438,42 +434,6 @@ export function updateTempContentType() {
   };
 }
 
-export function submitGroup(oldGroupName, data, context, source) {
-  const attributes = formatGroupAttributes(data.attributes);
-  const body = Object.assign(cloneDeep(data), { attributes });
-
-  return {
-    type: SUBMIT_GROUP,
-    oldGroupName,
-    body,
-    source,
-    context,
-  };
-}
-
-export function submitGroupSucceeded() {
-  return {
-    type: SUBMIT_GROUP_SUCCEEDED,
-  };
-}
-
-export function submitTempGroup(data, context) {
-  const attributes = formatGroupAttributes(data.attributes);
-  const body = Object.assign(cloneDeep(data), { attributes });
-
-  return {
-    type: SUBMIT_TEMP_GROUP,
-    body,
-    context,
-  };
-}
-
-export function submitTempGroupSucceeded() {
-  return {
-    type: SUBMIT_TEMP_GROUP_SUCCEEDED,
-  };
-}
-
 // utils
 export const buildModelAttributes = attributes => {
   const formattedAttributes = attributes.reduce((acc, current) => {
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/reducer.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/reducer.js
index 8758d6c062..cbe65009e6 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/reducer.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/reducer.js
@@ -259,27 +259,9 @@ function appReducer(state = initialState, action) {
           )
         )
         .update('newGroupClone', () => state.get('newGroup'));
-    case DELETE_GROUP_ATTRIBUTE: {
-      const pathToAttributes = action.keys
-        .slice()
-        .reverse()
-        .splice(1)
-        .reverse();
-      const attributes = state.getIn(pathToAttributes);
-      const attributeName = action.keys.pop();
-      const attributeToDelete = attributes.findIndex(
-        attribute => attribute.get('name') === attributeName
-      );
-
-      return state.removeIn([...pathToAttributes, attributeToDelete]);
-    }
+    case DELETE_GROUP_ATTRIBUTE:
+      return state.removeIn(action.keys);
     case DELETE_GROUP_SUCCEEDED:
-      console.log({
-        st: state
-          .get('groups')
-          .findIndex(group => group.get('uid') === action.uid),
-        action,
-      });
       return state.removeIn([
         'groups',
         state.get('groups').findIndex(group => group.get('uid') === action.uid),
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js
index 182ec9a293..f84908b2e9 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js
@@ -16,9 +16,9 @@ import {
   Button,
   EmptyAttributesBlock,
   getQueryParameters,
-  ListWrapper,
-  ListHeader,
   List,
+  ListHeader,
+  ListWrapper,
 } from 'strapi-helper-plugin';
 
 import { deleteGroupAttribute } from '../App/actions';
@@ -132,9 +132,15 @@ export class GroupPage extends React.Component {
 
     const attributes = this.getFeatureAttributes();
     const attributesNumber = this.getFeatureAttributesLength();
-    const listTitle = `${pluginId}.table.attributes.title.${
-      attributesNumber > 1 ? 'plural' : 'singular'
-    }`;
+
+    const title = [
+      {
+        label: `${pluginId}.table.attributes.title.${
+          attributesNumber > 1 ? 'plural' : 'singular'
+        }`,
+        values: { number: attributesNumber },
+      },
+    ];
 
     const buttonProps = {
       kind: 'secondaryHotlineAdd',
@@ -153,26 +159,21 @@ export class GroupPage extends React.Component {
         >
           {attributesNumber === 0 ? (
             <EmptyAttributesBlock
-              description={`${pluginId}.home.emptyAttributes.description.${
-                this.featureType
-              }`}
+              description={`${pluginId}.home.emptyAttributes.description.${this.featureType}`}
               id="openAddAttr"
               label="content-type-builder.button.attributes.add"
               title="content-type-builder.home.emptyAttributes.title"
             />
           ) : (
             <ListWrapper>
-              <ListHeader
-                title={listTitle}
-                titleValues={{ number: attributesNumber }}
-                button={{ ...buttonProps }}
-              />
+              <ListHeader title={title} button={{ ...buttonProps }} />
               <List>
                 <table>
                   <tbody>
-                    {attributes.map(attribute => (
+                    {attributes.map((attribute, index) => (
                       <ListRow
                         key={attribute.name}
+                        attributeId={index}
                         {...attribute}
                         canOpenModal={canOpenModal}
                         context={this.context}
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/Tr.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/Tr.js
index 702c514e71..81184c8ea4 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/Tr.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/Tr.js
@@ -24,6 +24,9 @@ const Tr = styled.tr`
   button {
     cursor: pointer;
   }
+  p {
+    margin-bottom: 0;
+  }
 `;
 
 export default Tr;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/index.js
index 0ab1f3cbf4..50f7543fc5 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/index.js
@@ -106,9 +106,14 @@ class HomePage extends React.Component {
     const displayedData = type === 'groups' ? groups : models;
     const availableNumber = type === 'groups' ? groups.length : models.length;
     const titleType = type === 'groups' ? type : 'contentType';
-    const title = `${pluginId}.table.${titleType}.title.${
-      availableNumber > 1 ? 'plural' : 'singular'
-    }`;
+    const title = [
+      {
+        label: `${pluginId}.table.${titleType}.title.${
+          availableNumber > 1 ? 'plural' : 'singular'
+        }`,
+        values: { number: availableNumber },
+      },
+    ];
 
     return (
       <div className={styles.homePage}>
@@ -132,7 +137,6 @@ class HomePage extends React.Component {
           <ListWrapper>
             <ListHeader
               title={title}
-              titleValues={{ number: availableNumber }}
               button={{
                 kind: 'secondaryHotlineAdd',
                 label: `${pluginId}.button.${type}.create`,
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/tests/index.test.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/tests/index.test.js
index fcb3efc12b..6d28cd961d 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/tests/index.test.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/HomePage/tests/index.test.js
@@ -107,9 +107,12 @@ describe('CTB <HomePage />', () => {
       const list = wrapper.find(ListHeader);
 
       expect(list).toHaveLength(1);
-      expect(list.prop('title')).toBe(
-        `${pluginId}.table.contentType.title.plural`
-      );
+      expect(list.prop('title')).toMatchObject([
+        {
+          label: `${pluginId}.table.contentType.title.plural`,
+          values: { number: 4 },
+        },
+      ]);
     });
 
     it('Should handle the listheader title correctly if there is more than 1 group', () => {
@@ -120,7 +123,12 @@ describe('CTB <HomePage />', () => {
       const list = wrapper.find(ListHeader);
 
       expect(list).toHaveLength(1);
-      expect(list.prop('title')).toBe(`${pluginId}.table.groups.title.plural`);
+      expect(list.prop('title')).toMatchObject([
+        {
+          label: `${pluginId}.table.groups.title.plural`,
+          values: { number: 4 },
+        },
+      ]);
     });
 
     it('Should handle the listheader title correctly if there is less than 2 groups', () => {
@@ -140,9 +148,12 @@ describe('CTB <HomePage />', () => {
       const list = wrapper.find(ListHeader);
 
       expect(list).toHaveLength(1);
-      expect(list.prop('title')).toBe(
-        `${pluginId}.table.groups.title.singular`
-      );
+      expect(list.prop('title')).toMatchObject([
+        {
+          label: `${pluginId}.table.groups.title.singular`,
+          values: { number: 1 },
+        },
+      ]);
     });
 
     it('Should handle the listheader title correctly if there is less than 2 models', () => {
@@ -161,9 +172,12 @@ describe('CTB <HomePage />', () => {
       const list = wrapper.find(ListHeader);
 
       expect(list).toHaveLength(1);
-      expect(list.prop('title')).toBe(
-        `${pluginId}.table.contentType.title.singular`
-      );
+      expect(list.prop('title')).toMatchObject([
+        {
+          label: `${pluginId}.table.contentType.title.singular`,
+          values: { number: 1 },
+        },
+      ]);
     });
   });
 
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/StyledLeftMenu.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/StyledLeftMenu.js
index 9b7a7de640..207bfb8ad8 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/StyledLeftMenu.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/StyledLeftMenu.js
@@ -84,7 +84,7 @@ const StyledLeftMenu = styled.div`
         i {
           font-size: 11px;
           top: calc(50% - ${sizes.margin * 0.5}px);
-          color: ${colors.grey};
+          color: ${colors.leftMenu.grey};
         }
         &.active {
           background-color: ${colors.leftMenu.lightGrey};
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
index dc8c2a649c..af32009141 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
@@ -17,6 +17,9 @@ import {
   BackHeader,
   Button,
   EmptyAttributesBlock,
+  List,
+  ListHeader,
+  ListWrapper,
   PopUpWarning,
   routerPropTypes,
   getQueryParameters,
@@ -539,6 +542,34 @@ export class ModelPage extends React.Component {
     const attributeType = this.getAttributeType();
     const actionType = this.getActionType();
 
+    // const attributes = this.getModelAttributes();
+    const attributesNumber = this.getModelAttributesLength();
+    const relationsNumber = this.getModelRelationShipsLength();
+
+    let title = [
+      {
+        label: `${pluginId}.table.attributes.title.${
+          attributesNumber > 1 ? 'plural' : 'singular'
+        }`,
+        values: { number: attributesNumber },
+      },
+    ];
+
+    if (relationsNumber > 0) {
+      title.push({
+        label: `${pluginId}.table.relations.title.${
+          attributesNumber > 1 ? 'plural' : 'singular'
+        }`,
+        values: { number: relationsNumber },
+      });
+    }
+
+    const buttonProps = {
+      kind: 'secondaryHotlineAdd',
+      label: `${pluginId}.button.attributes.add`,
+      onClick: () => this.handleClickOpenModalChooseAttributes(),
+    };
+
     return (
       <div className={styles.modelpage}>
         <BackHeader onClick={this.handleGoBack} />
@@ -559,7 +590,7 @@ export class ModelPage extends React.Component {
           pluginHeaderActions={this.getPluginHeaderActions()}
           onClickIcon={this.handleClickEditModelMainInfos}
         >
-          {this.getModelAttributesLength() === 0 ? (
+          {attributesNumber === 0 ? (
             <EmptyAttributesBlock
               description="content-type-builder.home.emptyAttributes.description"
               id="openAddAttr"
@@ -568,51 +599,75 @@ export class ModelPage extends React.Component {
               title="content-type-builder.home.emptyAttributes.title"
             />
           ) : (
-            <Block>
-              <Flex>
-                <ListTitle>
-                  {this.getModelAttributesLength()}
-                  &nbsp;
-                  <FormattedMessage
-                    id={`${listTitleMessageIdBasePrefix}.${
-                      this.getModelAttributesLength() > 1
-                        ? 'plural'
-                        : 'singular'
-                    }`}
-                  />
-                  {this.getModelRelationShipsLength() > 0 && (
-                    <React.Fragment>
-                      &nbsp;
-                      <FormattedMessage
-                        id={`${listTitleMessageIdBasePrefix}.including`}
+            <ListWrapper>
+              <ListHeader title={title} button={{ ...buttonProps }} />
+              {/* <List>
+                <table>
+                  <tbody>
+                    {attributes.map(attribute => (
+                      <ListRow
+                        key={attribute.name}
+                        {...attribute}
+                        canOpenModal={canOpenModal}
+                        context={this.context}
+                        deleteAttribute={this.handleDeleteGroupAttribute}
+                        isTemporary={false}
+                        type={attribute.type}
                       />
-                      &nbsp;
-                      {this.getModelRelationShipsLength()}
-                      &nbsp;
-                      <FormattedMessage
-                        id={`${pluginId}.modelPage.contentType.list.relationShipTitle.${
-                          this.getModelRelationShipsLength() > 1
-                            ? 'plural'
-                            : 'singular'
-                        }`}
-                      />
-                    </React.Fragment>
-                  )}
-                </ListTitle>
-                <div>
-                  <Button
-                    label={`${pluginId}.button.attributes.add`}
-                    onClick={this.handleClickOpenModalChooseAttributes}
-                    secondaryHotlineAdd
-                  />
-                </div>
-              </Flex>
-              <div>
-                <Ul id="attributesList">
-                  {Object.keys(this.getModelAttributes()).map(this.renderLi)}
-                </Ul>
+                    ))}
+                  </tbody>
+                </table>
+              </List> */}
+              <div className="list-button">
+                <Button {...buttonProps} />
               </div>
-            </Block>
+
+              <Block>
+                <Flex>
+                  <ListTitle>
+                    {this.getModelAttributesLength()}
+                    &nbsp;
+                    <FormattedMessage
+                      id={`${listTitleMessageIdBasePrefix}.${
+                        this.getModelAttributesLength() > 1
+                          ? 'plural'
+                          : 'singular'
+                      }`}
+                    />
+                    {this.getModelRelationShipsLength() > 0 && (
+                      <React.Fragment>
+                        &nbsp;
+                        <FormattedMessage
+                          id={`${listTitleMessageIdBasePrefix}.including`}
+                        />
+                        &nbsp;
+                        {this.getModelRelationShipsLength()}
+                        &nbsp;
+                        <FormattedMessage
+                          id={`${pluginId}.modelPage.contentType.list.relationShipTitle.${
+                            this.getModelRelationShipsLength() > 1
+                              ? 'plural'
+                              : 'singular'
+                          }`}
+                        />
+                      </React.Fragment>
+                    )}
+                  </ListTitle>
+                  <div>
+                    <Button
+                      label={`${pluginId}.button.attributes.add`}
+                      onClick={this.handleClickOpenModalChooseAttributes}
+                      secondaryHotlineAdd
+                    />
+                  </div>
+                </Flex>
+                <div>
+                  <Ul id="attributesList">
+                    {Object.keys(this.getModelAttributes()).map(this.renderLi)}
+                  </Ul>
+                </div>
+              </Block>
+            </ListWrapper>
           )}
         </ViewContainer>
 
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
index 46ae11fb91..a1727f0334 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
+++ b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
@@ -193,5 +193,7 @@
   "table.groups.title.singular": "{number} Group is available",
   "table.attributes.title.plural": "{number} fields",
   "table.attributes.title.singular": "{number} field",
+  "table.relations.title.plural": "including {number} relationships",
+  "table.relations.title.singular": "including {number} relationship",
   "prompt.content.unsaved": "Are you sure you want to leave this content type? All your modifications will be lost."
 }
diff --git a/packages/strapi-helper-plugin/lib/src/utils/attributeIcons.js b/packages/strapi-plugin-content-type-builder/admin/src/utils/attributeIcons.js
similarity index 100%
rename from packages/strapi-helper-plugin/lib/src/utils/attributeIcons.js
rename to packages/strapi-plugin-content-type-builder/admin/src/utils/attributeIcons.js
diff --git a/packages/strapi-plugin-content-type-builder/controllers/Fixtures.js b/packages/strapi-plugin-content-type-builder/controllers/Fixtures.js
index ec18c0dc7e..032b240b6c 100644
--- a/packages/strapi-plugin-content-type-builder/controllers/Fixtures.js
+++ b/packages/strapi-plugin-content-type-builder/controllers/Fixtures.js
@@ -25,7 +25,7 @@ module.exports = {
                 model: 'file',
                 via: 'related',
                 plugin: 'upload',
-                type: 'media',
+                type: 'relation',
               },
             },
           },
@@ -51,7 +51,7 @@ module.exports = {
                 model: 'file',
                 via: 'related',
                 plugin: 'upload',
-                type: 'media',
+                type: 'relation',
               },
             },
           },