Improve PluginLeftMenu library

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

@@ -5,7 +5,7 @@
 */
 
 import React from 'react';
-import { includes, startCase } from 'lodash';
+import { startCase } from 'lodash';
 import styles from 'components/TableList/styles.scss';
 import { router } from 'app';
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -23,7 +23,7 @@ class LiTableList extends React.Component { // eslint-disable-line react/prefer-
     console.log('delete', this.props.rowItem.name);
   }
 
-  goTo = (e) => {
+  goTo = () => {
     router.push(`/plugins/content-type-builder/${this.props.rowItem.name}`);
   }
 

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

@@ -5,7 +5,7 @@
 */
 
 import React from 'react';
-import { get, forEach, filter, has, map, size } from 'lodash';
+import { has, map, size } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import ButtonPrimaryHotline from 'components/Button';
 import AttributeRow from 'components/AttributeRow';

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

@@ -1,50 +1,44 @@
+/*
+*
+* PluginLeftMenu
+*
+*   - Required props :
+*     - {array} sections : Menu section
+*
+*   - Optionnal props :
+*     - {function} addCustomSection : Allows to add the menu a custom section
+*     - {function} renderCustomLink : Overrides the link behavior
+*
+*/
+
+
+
 import React from 'react';
 import { map } from 'lodash';
-import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
 import PluginLeftMenuSection from 'components/PluginLeftMenuSection';
 import styles from './styles.scss';
 
 class PluginLeftMenu extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
+    const customSection = this.props.addCustomSection(styles) || '';
     return (
       <div className={`${styles.pluginLeftMenu} col-md-3`}>
         {map(this.props.sections, (section, index) => (
           <PluginLeftMenuSection
             key={index}
             section={section}
+            renderCustomLink={this.props.renderCustomLink}
           />
         ))}
-        <div className={styles.pluginLeftMenuSection}>
+        {customSection}
-          <p>
-            <FormattedMessage id={'menu.section.documentation.name'} />
-          </p>
-          <ul>
-            <li>
-              <FormattedMessage id={'menu.section.documentation.guide'} />&nbsp;
-              <FormattedMessage id={'menu.section.documentation.guideLink'}>
-                {(message) => (
-                  <Link to="#" target="_blank">{message}</Link>
-                )}
-              </FormattedMessage>
-            </li>
-            <li>
-              <FormattedMessage id={'menu.section.documentation.tutorial'} />&nbsp;
-              <FormattedMessage id={'menu.section.documentation.tutorialLink'}>
-                {(mess) => (
-                  <Link to="#" target="_blank">{mess}</Link>
-                )}
-              </FormattedMessage>
-            </li>
-
-          </ul>
-        </div>
       </div>
     );
   }
 }
 
 PluginLeftMenu.propTypes = {
+  addCustomSection: React.PropTypes.func,
+  renderCustomLink: React.PropTypes.func,
   sections: React.PropTypes.array.isRequired,
 };
 

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

@@ -1,42 +1,29 @@
 /**
 *
 * PluginLeftMenuLink
+*   - Required props:
+*     - {object} Link
+*
+*   - Optionnal props:
+*     - {function} renderCustomLink : overrides the behavior of the link
 *
 */
 
 import React from 'react';
-import { startCase } from 'lodash';
 import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
 import styles from './styles.scss';
 
 class PluginLeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  /* eslint-disable jsx-a11y/no-static-element-interactions */
-  onClick =  () => {
-    console.log('click');
-  }
-
-  renderAddLink = () => (
-    <li className={styles.pluginLeftMenuLink}>
-      <div className={styles.liInnerContainer} onClick={this.onClick}>
-        <div>
-          <i className={`fa ${this.props.link.icon}`} />
-        </div>
-        <span><FormattedMessage id={this.props.link.name} /></span>
-      </div>
-    </li>
-  )
-
   render() {
-    if (this.props.link.name === 'button.contentType.add') return this.renderAddLink();
+    if (this.props.renderCustomLink) return this.props.renderCustomLink(this.props, styles);
-    
+
     return (
       <li className={styles.pluginLeftMenuLink}>
         <Link className={styles.link} to={`/plugins/content-type-builder/${this.props.link.name}`} activeClassName={styles.linkActive}>
           <div>
             <i className={`fa ${this.props.link.icon}`} />
           </div>
-          <span>{startCase(this.props.link.name)}</span>
+          <span>{this.props.link.name}</span>
         </Link>
       </li>
     );
@@ -45,6 +32,7 @@ class PluginLeftMenuLink extends React.Component { // eslint-disable-line react/
 
 PluginLeftMenuLink.propTypes = {
   link: React.PropTypes.object.isRequired,
+  renderCustomLink: React.PropTypes.func,
 };
 
 export default PluginLeftMenuLink;

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

@@ -2,6 +2,10 @@
 *
 * PluginLeftMenuSection
 *
+*   - Required props:
+*     - {object} section
+*
+*
 */
 
 import React from 'react';
@@ -17,6 +21,7 @@ class PluginLeftMenuSection extends React.Component { // eslint-disable-line rea
       <PluginLeftMenuLink
         key={index}
         link={item}
+        renderCustomLink={this.props.renderCustomLink}
       />
     ));
     return (
@@ -33,6 +38,7 @@ class PluginLeftMenuSection extends React.Component { // eslint-disable-line rea
 }
 
 PluginLeftMenuSection.propTypes = {
+  renderCustomLink: React.PropTypes.func,
   section: React.PropTypes.object.isRequired,
 };
 

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

@@ -26,6 +26,7 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st
   }
 
   renderNavContainer = () => {
+    console.log('ok');
     return (
       <div className={styles.navContainer}>
         <PopUpHeaderNavLink
@@ -83,10 +84,3 @@ PopUpForm.propTypes = {
 }
 
 export default PopUpForm;
-
-// <div>
-//   <FormattedMessage id={'popUpForm.navContainer.base'} />
-// </div>
-// <div>
-//   <FormattedMessage id={'popUpForm.navContainer.advanced'} />
-// </div>

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

@@ -8,6 +8,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import styles from './styles.scss';
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 class PopUpHeaderNavLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
   goTo = () => {
     this.props.handleClick(this.props.name);

packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js

@@ -3,7 +3,7 @@
  * App actions
  *
  */
-import { size, forEach } from 'lodash';
+import { size, map } from 'lodash';
 import { MODELS_FETCH, MODELS_FETCH_SUCCEEDED } from './constants';
 
 export function modelsFetch() {
@@ -14,15 +14,9 @@ export function modelsFetch() {
 
 export function modelsFetchSucceeded(data) {
   const modelNumber = size(data.models) > 1 ? 'plural' : 'singular';
-  const sections = [];
+  const sections = map(data.models, (model) => ({icon: 'fa-caret-square-o-right', name: model.name }));
+  sections.push({ icon: 'fa-plus', name: 'button.contentType.add' });
 
-  forEach(data.models, (model) => {
-    // TODO uncomment if we use icon from the API
-    // sections.push({icon: model.icon, name: model.name});
-    sections.push({icon: 'fa-caret-square-o-right', name: model.name});
-  });
-
-  sections.push({ icon: 'fa-plus', name: 'button.contentType.add' })
   const menu = {
     sections: [
       {

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

@@ -8,7 +8,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { size } from 'lodash';
+import { size, startCase } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
 
 // Global selectors
 import { makeSelectMenu } from 'containers/App/selectors';
@@ -23,6 +25,8 @@ import { modelFetch } from './actions';
 import selectModelPage from './selectors';
 import styles from './styles.scss';
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 export class ModelPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
   componentDidMount() {
     this.props.modelFetch(this.props.params.modelName);
@@ -38,18 +42,76 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
     console.log('click');
   }
 
+  addCustomSection = (sectionStyles) => (
+    <div className={sectionStyles.pluginLeftMenuSection}>
+      <p>
+        <FormattedMessage id={'menu.section.documentation.name'} />
+      </p>
+      <ul>
+        <li>
+          <FormattedMessage id={'menu.section.documentation.guide'} />&nbsp;
+          <FormattedMessage id={'menu.section.documentation.guideLink'}>
+            {(message) => (
+              <Link to="#" target="_blank">{message}</Link>
+            )}
+          </FormattedMessage>
+        </li>
+        <li>
+          <FormattedMessage id={'menu.section.documentation.tutorial'} />&nbsp;
+          <FormattedMessage id={'menu.section.documentation.tutorialLink'}>
+            {(mess) => (
+              <Link to="#" target="_blank">{mess}</Link>
+            )}
+          </FormattedMessage>
+        </li>
+      </ul>
+    </div>
+  )
+
+
+  handleAddLinkClick = () => {
+    console.log('click bla');
+  }
+
+  renderAddLink = (props, customLinkStyles) => (
+    <li className={customLinkStyles.pluginLeftMenuLink}>
+      <div className={customLinkStyles.liInnerContainer} onClick={this.handleAddLinkClick}>
+        <div>
+          <i className={`fa ${props.link.icon}`} />
+        </div>
+        <span><FormattedMessage id={props.link.name} /></span>
+      </div>
+    </li>
+  )
+
+  renderCustomLink = (props, linkStyles) => {
+    if (props.link.name === 'button.contentType.add') return this.renderAddLink(props, linkStyles);
+
+    return (
+      <li className={linkStyles.pluginLeftMenuLink}>
+        <Link className={linkStyles.link} to={`/plugins/content-type-builder/${props.link.name}`} activeClassName={linkStyles.linkActive}>
+          <div>
+            <i className={`fa ${props.link.icon}`} />
+          </div>
+          <span>{startCase(props.link.name)}</span>
+        </Link>
+      </li>
+    );
+  }
+
   render() {
     const content = size(this.props.modelPage.model.attributes) === 0 ?
       <EmptyAttributesView handleClick={this.handleClick} /> :
         <List model={this.props.modelPage.model} />;
 
-        console.log(this.props.modelPage)
     return (
       <div className={styles.modelPage}>
         <div className="container-fluid">
           <div className="row">
             <PluginLeftMenu
               sections={this.props.menu}
+              addCustomSection={this.addCustomSection}
+              renderCustomLink={this.renderCustomLink}
             />
             <div className="col-md-9">
               <div className={styles.componentsContainer}>