Update general section link shape

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/admin-test-utils/lib/fixtures/store/index.js

@@ -9,39 +9,37 @@ const reducers = {
     generalSectionLinks: [
       {
         icon: 'list',
-        label: {
+        intlLabel: {
           id: 'app.components.LeftMenuLinkContainer.listPlugins',
           defaultMessage: 'Plugins',
         },
-        destination: '/list-plugins',
+        to: '/list-plugins',
-        isDisplayed: false,
         permissions: [
           { action: 'admin::marketplace.read', subject: null },
           { action: 'admin::marketplace.plugins.install', subject: null },
           { action: 'admin::marketplace.plugins.uninstall', subject: null },
         ],
-        notificationsCount: 0,
       },
       {
         icon: 'shopping-basket',
-        label: {
+        intlLabel: {
           id: 'app.components.LeftMenuLinkContainer.installNewPlugin',
           defaultMessage: 'Marketplace',
         },
-        destination: '/marketplace',
+        to: '/marketplace',
-        isDisplayed: false,
         permissions: [
           { action: 'admin::marketplace.read', subject: null },
           { action: 'admin::marketplace.plugins.install', subject: null },
           { action: 'admin::marketplace.plugins.uninstall', subject: null },
         ],
-        notificationsCount: 0,
       },
       {
         icon: 'cog',
-        label: { id: 'app.components.LeftMenuLinkContainer.settings', defaultMessage: 'Settings' },
+        intlLabel: {
-        isDisplayed: true,
+          id: 'app.components.LeftMenuLinkContainer.settings',
-        destination: '/settings',
+          defaultMessage: 'Settings',
+        },
+        to: '/settings',
         // Permissions of this link are retrieved in the init phase
         // using the settings menu
         permissions: [],

packages/core/admin/admin/src/components/LeftMenu/compos/Link/index.js

@@ -12,26 +12,29 @@ import Link from './Link';
 import LeftMenuIcon from './LeftMenuIcon';
 import NotificationCount from './NotificationCount';
 
-const LeftMenuLink = ({ destination, iconName, label, notificationsCount }) => {
+const LeftMenuLink = ({ to, icon, intlLabel, notificationsCount }) => {
   return (
-    <Link to={destination}>
+    <Link to={to}>
-      <LeftMenuIcon icon={iconName} />
+      <LeftMenuIcon icon={icon} />
       {/* TODO change with new DS */}
-      <FormattedMessage {...label}>{message => <LinkLabel>{message}</LinkLabel>}</FormattedMessage>
+      <FormattedMessage {...intlLabel}>
+        {message => <LinkLabel>{message}</LinkLabel>}
+      </FormattedMessage>
       {notificationsCount > 0 && <NotificationCount count={notificationsCount} />}
     </Link>
   );
 };
 
 LeftMenuLink.propTypes = {
-  destination: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired,
-  iconName: PropTypes.string,
+  icon: PropTypes.string,
-  label: PropTypes.object.isRequired,
+  intlLabel: PropTypes.object.isRequired,
-  notificationsCount: PropTypes.number.isRequired,
+  notificationsCount: PropTypes.number,
 };
 
 LeftMenuLink.defaultProps = {
-  iconName: 'circle',
+  icon: 'circle',
+  notificationsCount: 0,
 };
 
 export default LeftMenuLink;

packages/core/admin/admin/src/components/LeftMenu/compos/LinksSection/index.js

@@ -3,20 +3,12 @@ import PropTypes from 'prop-types';
 import LeftMenuLink from '../Link';
 import LeftMenuListLink from './LeftMenuListLink';
 
-const LeftMenuLinksSection = ({ location, links }) => {
+const LeftMenuLinksSection = ({ links }) => {
   return (
     <>
       <LeftMenuListLink>
         {links.map(link => (
-          <LeftMenuLink
+          <LeftMenuLink {...link} key={link.to} />
-            location={location}
-            key={link.destination}
-            iconName={link.icon}
-            label={link.label}
-            destination={link.destination}
-            notificationsCount={link.notificationsCount || 0}
-            search={link.search}
-          />
         ))}
       </LeftMenuListLink>
     </>
@@ -24,9 +16,6 @@ const LeftMenuLinksSection = ({ location, links }) => {
 };
 
 LeftMenuLinksSection.propTypes = {
-  location: PropTypes.shape({
-    pathname: PropTypes.string,
-  }).isRequired,
   links: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 

packages/core/admin/admin/src/components/LeftMenu/index.js

@@ -1,13 +1,10 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { useLocation } from 'react-router-dom';
 import { Footer, Header, LinksContainer, LinksSection, SectionTitle } from './compos';
 import Wrapper from './Wrapper';
 
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
-  const location = useLocation();
-
   return (
     <Wrapper>
       <Header />
@@ -22,7 +19,6 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
             </SectionTitle>
             <LinksSection
               links={pluginsSectionLinks}
-              location={location}
               searchable={false}
               emptyLinksListMessage="app.components.LeftMenuLinkContainer.noPluginsInstalled"
             />
@@ -36,7 +32,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                 defaultMessage="General"
               />
             </SectionTitle>
-            <LinksSection links={generalSectionLinks} location={location} searchable={false} />
+            <LinksSection links={generalSectionLinks} searchable={false} />
           </>
         )}
       </LinksContainer>

packages/core/admin/admin/src/components/LeftMenu/reducer.js

@@ -7,37 +7,29 @@ const initialState = {
   generalSectionLinks: [
     {
       icon: 'list',
-      label: {
+      intlLabel: {
         id: 'app.components.LeftMenuLinkContainer.listPlugins',
         defaultMessage: 'Plugins',
       },
-      destination: '/list-plugins',
+      to: '/list-plugins',
-      // TODO
-      isDisplayed: false,
       permissions: adminPermissions.marketplace.main,
-      notificationsCount: 0,
     },
     {
       icon: 'shopping-basket',
-      label: {
+      intlLabel: {
         id: 'app.components.LeftMenuLinkContainer.installNewPlugin',
         defaultMessage: 'Marketplace',
       },
-      destination: '/marketplace',
+      to: '/marketplace',
-      // TODO
-      isDisplayed: false,
       permissions: adminPermissions.marketplace.main,
-      notificationsCount: 0,
     },
     {
       icon: 'cog',
-      label: {
+      intlLabel: {
         id: 'app.components.LeftMenuLinkContainer.settings',
         defaultMessage: 'Settings',
       },
-      // TODO
+      to: '/settings',
-      isDisplayed: true,
-      destination: '/settings',
       // Permissions of this link are retrieved in the init phase
       // using the settings menu
       permissions: [],

packages/core/admin/admin/src/components/LeftMenu/utils/getGeneralLinks.js

@@ -9,9 +9,7 @@ const getGeneralLinks = async (permissions, generalSectionRawLinks, shouldUpdate
     (_, index) => generalSectionLinksPermissions[index]
   );
 
-  const settingsLinkIndex = authorizedGeneralSectionLinks.findIndex(
+  const settingsLinkIndex = authorizedGeneralSectionLinks.findIndex(obj => obj.to === '/settings');
-    obj => obj.destination === '/settings'
-  );
 
   if (settingsLinkIndex === -1) {
     return [];

packages/core/admin/admin/src/components/LeftMenu/utils/tests/getGeneralLinks.test.js

@@ -60,7 +60,7 @@ describe('getGeneralLinks', () => {
       {
         icon: 'list',
         label: 'app.components.LeftMenuLinkContainer.listPlugins',
-        destination: '/list-plugins',
+        to: '/list-plugins',
         isDisplayed: false,
         permissions: [
           {
@@ -81,7 +81,7 @@ describe('getGeneralLinks', () => {
       {
         icon: 'shopping-basket',
         label: 'app.components.LeftMenuLinkContainer.installNewPlugin',
-        destination: '/marketplace',
+        to: '/marketplace',
         isDisplayed: false,
         permissions: [
           {
@@ -103,7 +103,7 @@ describe('getGeneralLinks', () => {
         icon: 'cog',
         label: 'app.components.LeftMenuLinkContainer.settings',
         isDisplayed: true,
-        destination: '/settings',
+        to: '/settings',
         permissions: [],
         notificationsCount: 0,
       },
@@ -113,7 +113,7 @@ describe('getGeneralLinks', () => {
       {
         icon: 'list',
         label: 'app.components.LeftMenuLinkContainer.listPlugins',
-        destination: '/list-plugins',
+        to: '/list-plugins',
         isDisplayed: false,
         permissions: [
           {
@@ -134,7 +134,7 @@ describe('getGeneralLinks', () => {
       {
         icon: 'shopping-basket',
         label: 'app.components.LeftMenuLinkContainer.installNewPlugin',
-        destination: '/marketplace',
+        to: '/marketplace',
         isDisplayed: false,
         permissions: [
           {
@@ -156,7 +156,7 @@ describe('getGeneralLinks', () => {
         icon: 'cog',
         label: 'app.components.LeftMenuLinkContainer.settings',
         isDisplayed: true,
-        destination: '/settings',
+        to: '/settings',
         permissions: [],
         notificationsCount: 0,
       },
@@ -166,7 +166,7 @@ describe('getGeneralLinks', () => {
     expect(actual).toEqual(expected);
   });
 
-  it('resolves an empty array when the destination (/settings) is not in the authorized links', async () => {
+  it('resolves an empty array when the to (/settings) is not in the authorized links', async () => {
     hasPermissions.mockImplementation(() => Promise.resolve(false));
 
     const permissions = [
@@ -222,7 +222,7 @@ describe('getGeneralLinks', () => {
       {
         icon: 'list',
         label: 'app.components.LeftMenuLinkContainer.listPlugins',
-        destination: '/list-plugins',
+        to: '/list-plugins',
         isDisplayed: false,
         permissions: [],
         notificationsCount: 0,
@@ -230,7 +230,7 @@ describe('getGeneralLinks', () => {
       {
         icon: 'shopping-basket',
         label: 'app.components.LeftMenuLinkContainer.installNewPlugin',
-        destination: '/marketplace',
+        to: '/marketplace',
         isDisplayed: false,
         permissions: [],
         notificationsCount: 0,
@@ -239,7 +239,7 @@ describe('getGeneralLinks', () => {
         icon: 'cog',
         label: 'app.components.LeftMenuLinkContainer.settings',
         isDisplayed: false,
-        destination: '/settings',
+        to: '/settings',
         permissions: [],
         notificationsCount: 0,
       },

packages/core/admin/admin/src/core/apis/Plugin.js

@@ -9,7 +9,7 @@ class Plugin {
     this.isRequired = pluginConf.isRequired;
     this.mainComponent = pluginConf.mainComponent || null;
     // TODO
-    this.menu = pluginConf.menu || null;
+    // this.menu = pluginConf.menu || null;
     this.name = pluginConf.name;
     this.pluginId = pluginConf.id;
     this.pluginLogo = pluginConf.pluginLogo;