Created NoTableWarning component and implemented it in content type builder

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

@@ -0,0 +1,41 @@
+/*
+*
+* NoTableWarning
+*
+*/
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import WarningLogo from 'assets/icons/icon_warning.svg';
+import styles from './styles.scss';
+
+function NoTableWarning({ modelName }) {
+  return (
+    <div className={styles.noTableWarning}>
+      <div className={styles.contentContainer}>
+        <img src={WarningLogo} alt="warning_logo" />
+        <FormattedMessage id="content-type-builder.noTableWarning.description" values={{ modelName }} />
+      </div>
+      <div className={styles.buttonContainer}>
+        <a href="https://strapi.io/documentation/guides/models.html#bookshelf" target="_blank">
+          <button>
+
+            More info
+          </button>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+NoTableWarning.propTypes = {
+  modelName: PropTypes.string,
+};
+
+NoTableWarning.defaultProps = {
+  modelName: '',
+};
+
+export default NoTableWarning;

packages/strapi-plugin-content-type-builder/admin/src/components/NoTableWarning/styles.scss

@@ -0,0 +1,36 @@
+.noTableWarning {
+  display: flex;
+  margin-top: 3.6rem;
+  padding: 0 2.8rem;
+  justify-content: space-between;
+  background-color: #FFFFFF;
+  box-shadow: 0 0.2rem 0.4rem 0 #E3E9F3;
+  min-height: 5.3rem;
+  line-height: 5.3rem;
+  font-size: 1.3rem;
+}
+
+.buttonContainer {
+  > a {
+    > button {
+      cursor: pointer;
+      background: #F6F6F6;
+      height: 3rem;
+      border-radius: 0.3rem;
+      text-transform: capitalize;
+      color: #323740;
+      line-height: 1.6rem;
+      border: 0.1rem solid #DFE0E1;
+      font-weight: 500;
+      font-size: 1.3rem;
+      padding-left: 1.6rem;
+      padding-right: 1.6rem;
+    }
+  }
+}
+
+.contentContainer {
+  > img {
+    margin-right: 2.5rem;
+  }
+}

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

@@ -23,6 +23,7 @@ import ContentHeader from 'components/ContentHeader';
 import EmptyAttributesView from 'components/EmptyAttributesView';
 import Form from 'containers/Form';
 import List from 'components/List';
+import NoTableWarning from 'components/NoTableWarning';
 import PluginLeftMenu from 'components/PluginLeftMenu';
 
 import injectSaga from 'utils/injectSaga';
@@ -252,7 +253,7 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
     // Url to redirects the user if he modifies the temporary content type name
     const redirectRoute = replace(this.props.match.path, '/:modelName', '');
     const addButtons  = get(storeData.getContentType(), 'name') === this.props.match.params.modelName && size(get(storeData.getContentType(), 'attributes')) > 0 || this.props.modelPage.showButtons;
-
+    const showNoTableWarning = this.props.modelPage.tableExists ? '' : <NoTableWarning modelName={this.props.modelPage.model.name} />;
     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} /> :
@@ -289,6 +290,7 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
 
                 />
                 {content}
+                {showNoTableWarning}
               </div>
             </div>
           </div>

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

@@ -88,7 +88,7 @@
   "modelPage.contentType.list.relationShipTitle.singular": "relationship",
   "modelPage.attribute.relationWith": "Relation with",
 
-
+  "noTableWarning.description": "Don't forget to create `{modelName}` in your database",
   "notification.error.message": "An error occured",
   "notification.info.contentType.creating.notSaved": "Please save your current Content Type before creating a new one",
   "notification.success.message.contentType.edit": "Your content type has been updated",

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

@@ -89,6 +89,8 @@
 
   "modelPage.attribute.relationWith": "Relation avec",
 
+  "noTableWarning.description": "N'oubliez pas de créer `{modelName}` dans votre database",
+
   "notification.error.message": "Une erreur est survenue",
   "notification.info.contentType.creating.notSaved": "Sauvegardez votre Modèle en cours avant d'en créer un nouveau",
   "notification.success.message.contentType.edit": "Votre modèle a bien été modifié",