LeftMenu with helper-plugin compos

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

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+
+function LeftMenuLink({ children, to }) {
+  return <NavLink to={to}>{children}</NavLink>;
+}
+
+LeftMenuLink.defaultProps = {
+  children: null,
+};
+
+LeftMenuLink.propTypes = {
+  children: PropTypes.node,
+  to: PropTypes.string.isRequired,
+};
+
+export default memo(LeftMenuLink);
+export { LeftMenuLink };

packages/strapi-helper-plugin/lib/src/components/LeftMenuList/List.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from 'strapi-helper-plugin';
+import colors from '../../assets/styles/colors';
 
 const List = styled.ul`
   padding-left: 15px;
@@ -30,10 +30,17 @@ const List = styled.ul`
   }
   a {
     display: block;
+    &.active {
+      p {
+        font-weight: 600;
+      }
+    }
     p {
       color: ${colors.leftMenu.black};
       font-size: 13px;
       line-height: 16px;
+      display: flex;
+      justify-content: space-between;
     }
     &:hover {
       text-decoration: none;

packages/strapi-helper-plugin/lib/src/components/LeftMenuList/Search.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from 'strapi-helper-plugin';
+import colors from '../../assets/styles/colors';
 
 const Search = styled.input`
   width: 100%;

packages/strapi-helper-plugin/lib/src/components/LeftMenuList/Wrapper.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from 'strapi-helper-plugin';
+import colors from '../../assets/styles/colors';
 
 const Wrapper = styled.div`
   margin-bottom: 25px;

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

@@ -4,16 +4,14 @@ import { FormattedMessage } from 'react-intl';
 import { isEmpty } from 'lodash';
 import matchSorter from 'match-sorter';
 
-import pluginId from '../../pluginId';
-
 import Wrapper from './Wrapper';
 import List from './List';
 import Search from './Search';
-import LeftMenuLink from '../../components/LeftMenuLink';
 
+import LeftMenuLink from '../LeftMenuLink';
 import LeftMenuSubList from '../LeftMenuSubList';
 
-function LeftMenuList({ customLink, name, links }) {
+function LeftMenuList({ customLink, links, title }) {
   const [search, setSearch] = useState('');
   const [showSearch, setShowSearch] = useState(false);
 
@@ -59,14 +57,11 @@ function LeftMenuList({ customLink, name, links }) {
     return links.length;
   };
 
-  const getTitle = () => {
-    const base = `${pluginId}.menu.section.${name}.name.`;
-
-    return getCount() > 1 ? `${base}plural` : `${base}singular`;
-  };
+  const getTitle = () =>
+    getCount() > 1 ? `${title.id}plural` : `${title.id}singular`;
 
   const renderCompo = (link, i) => {
-    const { links, name } = link;
+    const { links, name, title } = link;
 
     if (links) {
       const isFiltered = !isEmpty(search) ? true : false;
@@ -83,7 +78,7 @@ function LeftMenuList({ customLink, name, links }) {
 
     return (
       <li key={name}>
-        <LeftMenuLink {...link} />
+        <LeftMenuLink {...link}>{title}</LeftMenuLink>
       </li>
     );
   };
@@ -133,7 +128,7 @@ LeftMenuList.defaultProps = {
     },
   },
   links: [],
-  name: 'models',
+  title: 'models',
 };
 
 LeftMenuList.propTypes = {
@@ -145,7 +140,7 @@ LeftMenuList.propTypes = {
     }),
   }),
   links: PropTypes.array,
-  name: PropTypes.string,
+  title: PropTypes.string,
 };
 
 export default LeftMenuList;

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Collapse } from 'reactstrap';
 
 import Dropdown from './Dropdown';
-import LeftMenuLink from '../../components/LeftMenuLink';
+import LeftMenuLink from '../LeftMenuLink';
 
 const LeftMenuSubList = ({ name, links, isFiltered, isFirstItem }) => {
   const [collapse, setCollapse] = useState(isFiltered || isFirstItem);
@@ -34,10 +34,10 @@ const LeftMenuSubList = ({ name, links, isFiltered, isFirstItem }) => {
         <Collapse isOpen={filtered}>
           <ul>
             {links.map(link => {
-              const { name, to } = link;
+              const { name, title } = link;
               return (
                 <li key={name}>
-                  <LeftMenuLink name={name} to={to} />
+                  <LeftMenuLink {...link}>{title}</LeftMenuLink>
                 </li>
               );
             })}

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

@@ -76,6 +76,7 @@ export {
 } from './components/InputToggleWithErrors';
 
 export { default as Label } from './components/Label';
+export { default as LeftMenuList } from './components/LeftMenuList';
 export { default as LiLink } from './components/LiLink';
 export { default as List } from './components/List';
 export { default as ListRow } from './components/ListRow';

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

@@ -1,35 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { NavLink } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-
-import pluginId from '../../pluginId';
-
-function LeftMenuLink({ isTemporary, name, to }) {
-  return (
-    <NavLink to={to}>
-      <p>
-        {name}
-        {isTemporary && (
-          <FormattedMessage id={`${pluginId}.contentType.temporaryDisplay`}>
-            {msg => <span>{msg}</span>}
-          </FormattedMessage>
-        )}
-      </p>
-    </NavLink>
-  );
-}
-
-LeftMenuLink.defaultProps = {
-  isTemporary: false,
-  name: null,
-};
-
-LeftMenuLink.propTypes = {
-  isTemporary: PropTypes.bool,
-  name: PropTypes.string,
-  to: PropTypes.string.isRequired,
-};
-
-export default memo(LeftMenuLink);
-export { LeftMenuLink };

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

@@ -5,15 +5,15 @@
  */
 
 import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { groupBy } from 'lodash';
 
+import { LeftMenuList } from 'strapi-helper-plugin';
+
 import pluginId from '../../pluginId';
 
 import MenuContext from '../../containers/MenuContext';
-
 import CustomLink from '../../components/CustomLink';
-import LeftMenuList from '../../components/LeftMenuList';
-
 import Wrapper from './Wrapper';
 
 const displayNotificationCTNotSaved = () => {
@@ -29,6 +29,9 @@ function LeftMenu() {
     const data = [
       {
         name: 'models',
+        title: {
+          id: `${pluginId}.menu.section.models.name.`,
+        },
         searchable: true,
         customLink: {
           Component: CustomLink,
@@ -41,6 +44,9 @@ function LeftMenu() {
       },
       {
         name: 'components',
+        title: {
+          id: `${pluginId}.menu.section.components.name.`,
+        },
         searchable: true,
         customLink: {
           Component: CustomLink,
@@ -59,7 +65,11 @@ function LeftMenu() {
   const getModels = () => {
     return [
       ...models.map(model => {
-        return { ...model, to: model.name };
+        return {
+          ...model,
+          to: getLinkRoute('models', model),
+          title: getLinkTitle(model),
+        };
       }),
     ];
   };
@@ -71,7 +81,11 @@ function LeftMenu() {
     return Object.keys(componentsObj).map(key => {
       const links = [
         ...componentsObj[key].map(compo => {
-          return { ...compo, to: `${key}/${compo.name}` };
+          return {
+            ...compo,
+            to: getLinkRoute('components', compo, key),
+            title: getLinkTitle(compo),
+          };
         }),
       ];
 
@@ -79,6 +93,30 @@ function LeftMenu() {
     });
   };
 
+  const notSavedLabel = () => {
+    return <FormattedMessage id={`${pluginId}.contentType.temporaryDisplay`} />;
+  };
+
+  const getLinkRoute = (param, item, category = null) => {
+    const { name, source, uid } = item;
+
+    const cat = category ? `${category}/` : '';
+    const base = `/plugins/${pluginId}/${param}/${cat}${uid || name}`;
+    const to = source ? `${base}&source=${source}` : base;
+
+    return to;
+  };
+
+  const getLinkTitle = item => {
+    const { name, isTemporary } = item;
+    return (
+      <p>
+        <span>{name}</span>
+        {isTemporary && notSavedLabel()}
+      </p>
+    );
+  };
+
   const openCreateModal = type => {
     if (canOpenModal) {
       push({