Add editable option to left menu component

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

@@ -70,14 +70,18 @@ function LeftMenuList({ customLink, links, title }) {
     getCount() > 1 ? `${title.id}plural` : `${title.id}singular`;
 
   const renderCompo = (link, i) => {
-    const { links, name, title } = link;
+    const { links, name, title, ...rest } = link;
+    console.log({ link });
 
     if (links) {
       const isSearching = !isEmpty(search);
 
+      console.log({ links });
+
       return (
         <LeftMenuSubList
           key={name}
+          {...rest}
           {...link}
           isSearching={isSearching}
           isFirstItem={i === 0}

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

@@ -45,6 +45,22 @@ const Dropdown = styled.div`
       margin-bottom: 0px;
     }
   }
+  .editable {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    > svg {
+      color: #b3b5b9;
+      z-index: -1;
+    }
+
+    &:hover {
+      > svg {
+        z-index: 1;
+      }
+    }
+  }
 `;
 
 export default Dropdown;

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

@@ -1,11 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Collapse } from 'reactstrap';
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Dropdown from './Dropdown';
 import LeftMenuLink from '../LeftMenuLink';
 
-const LeftMenuSubList = ({ name, links, isSearching, isFirstItem }) => {
+const LeftMenuSubList = ({
+  isEditable,
+  isFirstItem,
+  isSearching,
+  links,
+  name,
+  onClickEdit,
+}) => {
   const [collapse, setCollapse] = useState(isFirstItem);
 
   const toggle = () => {
@@ -24,8 +31,19 @@ const LeftMenuSubList = ({ name, links, isSearching, isFirstItem }) => {
   return (
     links.length > 0 && (
       <Dropdown>
-        <button onClick={toggle} className={collapse ? 'is-open' : ''}>
+        <button
+          onClick={toggle}
+          className={`editable ${collapse ? 'is-open' : ''}`}
+        >
           {name}
+          {isEditable && (
+            <FontAwesomeIcon
+              icon="pencil-alt"
+              onClick={e => {
+                onClickEdit(e, { name, links, isFirstItem, isSearching });
+              }}
+            />
+          )}
         </button>
         <Collapse isOpen={collapse}>
           <ul>
@@ -45,17 +63,21 @@ const LeftMenuSubList = ({ name, links, isSearching, isFirstItem }) => {
 };
 
 LeftMenuSubList.defaultProps = {
-  name: null,
-  links: [],
-  isSearching: false,
+  isEditable: false,
   isFirstItem: false,
+  isSearching: false,
+  links: [],
+  name: null,
+  onClickEdit: () => {},
 };
 
 LeftMenuSubList.propTypes = {
-  name: PropTypes.string,
-  links: PropTypes.array,
-  isSearching: PropTypes.bool,
+  isEditable: PropTypes.bool,
   isFirstItem: PropTypes.bool,
+  isSearching: PropTypes.bool,
+  links: PropTypes.array,
+  name: PropTypes.string,
+  onClickEdit: PropTypes.func,
 };
 
 export default LeftMenuSubList;

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

@@ -357,9 +357,6 @@ const DataManagerProvider = ({ allIcons, children }) => {
         <>
           {children}
           <FormModal />
-          <button type="button" onClick={() => dispatch({ type: 'TEST' })}>
-            click
-          </button>
         </>
       )}
     </DataManagerContext.Provider>

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

@@ -33,6 +33,12 @@ function LeftMenu() {
     Object.keys(componentsGroupedByCategory).map(category => ({
       name: category,
       title: category,
+      isEditable: true,
+      onClickEdit: (e, data) => {
+        e.stopPropagation();
+
+        console.log({ data });
+      },
       links: sortBy(
         componentsGroupedByCategory[category].map(compo => ({
           name: compo.uid,