Update general section link shape

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2021-06-16 11:08:40 +02:00
parent d1ab463bd2
commit 13eef9671c
8 changed files with 42 additions and 66 deletions

View File

@ -9,39 +9,37 @@ const reducers = {
generalSectionLinks: [
{
icon: 'list',
label: {
intlLabel: {
id: 'app.components.LeftMenuLinkContainer.listPlugins',
defaultMessage: 'Plugins',
},
destination: '/list-plugins',
isDisplayed: false,
to: '/list-plugins',
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',
isDisplayed: false,
to: '/marketplace',
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' },
isDisplayed: true,
destination: '/settings',
intlLabel: {
id: 'app.components.LeftMenuLinkContainer.settings',
defaultMessage: 'Settings',
},
to: '/settings',
// Permissions of this link are retrieved in the init phase
// using the settings menu
permissions: [],

View File

@ -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}>
<LeftMenuIcon icon={iconName} />
<Link to={to}>
<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,
iconName: PropTypes.string,
label: PropTypes.object.isRequired,
notificationsCount: PropTypes.number.isRequired,
to: PropTypes.string.isRequired,
icon: PropTypes.string,
intlLabel: PropTypes.object.isRequired,
notificationsCount: PropTypes.number,
};
LeftMenuLink.defaultProps = {
iconName: 'circle',
icon: 'circle',
notificationsCount: 0,
};
export default LeftMenuLink;

View File

@ -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
location={location}
key={link.destination}
iconName={link.icon}
label={link.label}
destination={link.destination}
notificationsCount={link.notificationsCount || 0}
search={link.search}
/>
<LeftMenuLink {...link} key={link.to} />
))}
</LeftMenuListLink>
</>
@ -24,9 +16,6 @@ const LeftMenuLinksSection = ({ location, links }) => {
};
LeftMenuLinksSection.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string,
}).isRequired,
links: PropTypes.arrayOf(PropTypes.object).isRequired,
};

View File

@ -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>

View File

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

View File

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

View File

@ -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,
},

View File

@ -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;