diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx
index 74c7a3891..c73f7857e 100644
--- a/src/components/AppLayout/MenuList.tsx
+++ b/src/components/AppLayout/MenuList.tsx
@@ -173,6 +173,13 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
});
const intl = useIntl();
+ const configutationMenu = createConfigurationMenu(intl).map(menu => {
+ menu.menuItems.map(item => {
+ return user.permissions
+ .map(perm => perm.code)
+ .includes(item.permission);
+ });
+ });
const handleSubMenu = itemLabel => {
setActiveSubMenu({
isActive:
@@ -304,35 +311,30 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
);
})}
- {renderConfigure &&
- createConfigurationMenu(intl).filter(menuItem =>
- user.permissions
- .map(perm => perm.code)
- .includes(menuItem.permission)
- ).length > 0 && (
- closeSubMenu(configurationMenuUrl, event)}
- >
-
-
-
-
-
-
-
- )}
+ {renderConfigure && configutationMenu.length > 0 && (
+ closeSubMenu(configurationMenuUrl, event)}
+ >
+
+
+
+
+
+
+
+ )}
);
}
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index f4fba52b3..5163272e3 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
@@ -61,8 +61,7 @@ const styles = (theme: Theme) =>
paddingRight: theme.spacing.unit
},
chipLabel: {
- color: theme.palette.common.white,
- fontSize: "16px"
+ color: theme.palette.primary.contrastText
},
container: {
flexGrow: 1,
@@ -276,7 +275,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
{displayValues.map(value => (
-
+
{value.label}
;
- permission: PermissionEnum;
- title: string;
- url?: string;
+ label: string;
+ menuItems: [
+ {
+ description: string;
+ icon: React.ReactElement;
+ permission: PermissionEnum;
+ title: string;
+ url?: string;
+ }
+ ];
}
const styles = (theme: Theme) =>
@@ -70,6 +74,9 @@ const styles = (theme: Theme) =>
configurationLabel: {
paddingBottom: 20
},
+ header: {
+ margin: 0
+ },
icon: {
color: theme.palette.primary.main,
fontSize: 48
@@ -99,191 +106,45 @@ export const ConfigurationPage = withStyles(styles, {
const intl = useIntl();
return (
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Attributes and Product Types",
- description: "configuration category"
- })}
-
-
-
- {menu
- .filter(menuItem =>
- user.permissions
- .map(perm => perm.code)
- .includes(menuItem.permission)
- )
- .map(
- (menuItem, menuItemIndex) =>
- menuItem.category ===
- ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES && (
-
onSectionClick(menuItem.url)}
- key={menuItemIndex}
- >
-
- {menuItem.icon}
-
-
- {menuItem.title}
-
-
- {menuItem.description}
-
-
-
-
- )
- )}
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Product Settings",
- description: "configuration category"
- })}
-
-
-
- {menu
- .filter(menuItem =>
- user.permissions
- .map(perm => perm.code)
- .includes(menuItem.permission)
- )
- .map(
- (menuItem, menuItemIndex) =>
- menuItem.category ===
- ConfigurationCategoryEnum.PRODUCT_SETTINGS && (
-
onSectionClick(menuItem.url)}
- key={menuItemIndex}
- >
-
- {menuItem.icon}
-
-
- {menuItem.title}
-
-
- {menuItem.description}
-
-
-
-
- )
- )}
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Staff Settings",
- description: "configuration category"
- })}
-
-
-
- {menu
- .filter(menuItem =>
- user.permissions
- .map(perm => perm.code)
- .includes(menuItem.permission)
- )
- .map(
- (menuItem, menuItemIndex) =>
- menuItem.category ===
- ConfigurationCategoryEnum.STAFF_SETTINGS && (
-
onSectionClick(menuItem.url)}
- key={menuItemIndex}
- >
-
- {menuItem.icon}
-
-
- {menuItem.title}
-
-
- {menuItem.description}
-
-
-
-
- )
- )}
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Miscellaneous",
- description: "configuration category"
- })}
-
-
-
- {menu
- .filter(menuItem =>
- user.permissions
- .map(perm => perm.code)
- .includes(menuItem.permission)
- )
- .map(
- (menuItem, menuItemIndex) =>
- menuItem.category ===
- ConfigurationCategoryEnum.MISCELLANEOUS && (
-
onSectionClick(menuItem.url)}
- key={menuItemIndex}
- >
-
- {menuItem.icon}
-
-
- {menuItem.title}
-
-
- {menuItem.description}
-
-
-
-
- )
- )}
-
-
+
+ {menu
+ .filter(menu =>
+ menu.menuItems.map(item => hasPermission(item.permission, user))
+ )
+ .map((menu, menuIndex) => (
+
+
+ {menu.label}
+
+
+ {menu.menuItems.map(item => (
+
onSectionClick(item.url)}
+ key={menuIndex}
+ >
+
+ {item.icon}
+
+
+ {item.title}
+
+
+ {item.description}
+
+
+
+
+ ))}
+
+
+ ))}
);
}
diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx
index 283926f13..6a9734a92 100644
--- a/src/configuration/index.tsx
+++ b/src/configuration/index.tsx
@@ -24,116 +24,126 @@ import { shippingZonesListUrl } from "@saleor/shipping/urls";
import { siteSettingsUrl } from "@saleor/siteSettings/urls";
import { staffListUrl } from "@saleor/staff/urls";
import { taxSection } from "@saleor/taxes/urls";
-import { ConfigurationCategoryEnum } from "@saleor/types";
import { PermissionEnum } from "@saleor/types/globalTypes";
import ConfigurationPage, { MenuItem } from "./ConfigurationPage";
export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
return [
{
- category: ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES,
- description: intl.formatMessage({
- defaultMessage: "Determine attributes used to create product types",
- id: "configurationMenuAttributes"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_PRODUCTS,
- title: intl.formatMessage(sectionNames.attributes),
- url: attributeListUrl()
+ label: "Attributes and Product Types",
+ menuItems: [
+ {
+ description: intl.formatMessage({
+ defaultMessage: "Determine attributes used to create product types",
+ id: "configurationMenuAttributes"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_PRODUCTS,
+ title: intl.formatMessage(sectionNames.attributes),
+ url: attributeListUrl()
+ },
+ {
+ description: intl.formatMessage({
+ defaultMessage: "Define types of products you sell",
+ id: "configurationMenuProductTypes"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_PRODUCTS,
+ title: intl.formatMessage(sectionNames.productTypes),
+ url: productTypeListUrl()
+ }
+ ]
},
{
- category: ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES,
- description: intl.formatMessage({
- defaultMessage: "Define types of products you sell",
- id: "configurationMenuProductTypes"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_PRODUCTS,
- title: intl.formatMessage(sectionNames.productTypes),
- url: productTypeListUrl()
+ label: "Product Settings",
+ menuItems: [
+ {
+ description: intl.formatMessage({
+ defaultMessage: "Manage how you ship out orders",
+ id: "configurationMenuShipping"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_SHIPPING,
+ title: intl.formatMessage(sectionNames.shipping),
+ url: shippingZonesListUrl()
+ },
+ {
+ description: intl.formatMessage({
+ defaultMessage: "Manage how your store charges tax",
+ id: "configurationMenuTaxes"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_PRODUCTS,
+ title: intl.formatMessage(sectionNames.taxes),
+ url: taxSection
+ }
+ ]
},
{
- category: ConfigurationCategoryEnum.STAFF_SETTINGS,
- description: intl.formatMessage({
- defaultMessage: "Manage your employees and their permissions",
- id: "configurationMenuStaff"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_STAFF,
- title: intl.formatMessage(sectionNames.staff),
- url: staffListUrl()
+ label: "Staff Settings",
+ menuItems: [
+ {
+ description: intl.formatMessage({
+ defaultMessage: "Manage your employees and their permissions",
+ id: "configurationMenuStaff"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_STAFF,
+ title: intl.formatMessage(sectionNames.staff),
+ url: staffListUrl()
+ }
+ ]
},
{
- category: ConfigurationCategoryEnum.PRODUCT_SETTINGS,
- description: intl.formatMessage({
- defaultMessage: "Manage how you ship out orders",
- id: "configurationMenuShipping"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_SHIPPING,
- title: intl.formatMessage(sectionNames.shipping),
- url: shippingZonesListUrl()
- },
- {
- category: ConfigurationCategoryEnum.PRODUCT_SETTINGS,
- description: intl.formatMessage({
- defaultMessage: "Manage how your store charges tax",
- id: "configurationMenuTaxes"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_PRODUCTS,
- title: intl.formatMessage(sectionNames.taxes),
- url: taxSection
- },
- {
- category: ConfigurationCategoryEnum.MISCELLANEOUS,
- description: intl.formatMessage({
- defaultMessage: "Define how users can navigate through your store",
- id: "configurationMenuNavigation"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_MENUS,
- title: intl.formatMessage(sectionNames.navigation),
- url: menuListUrl()
- },
- {
- category: ConfigurationCategoryEnum.MISCELLANEOUS,
- description: intl.formatMessage({
- defaultMessage: "View and update your site settings",
- id: "configurationMenuSiteSettings"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_SETTINGS,
- title: intl.formatMessage(sectionNames.siteSettings),
- url: siteSettingsUrl()
- },
- {
- category: ConfigurationCategoryEnum.MISCELLANEOUS,
- description: intl.formatMessage({
- defaultMessage: "Manage and add additional pages",
- id: "configurationMenuPages"
- }),
- icon: ,
- permission: PermissionEnum.MANAGE_PAGES,
- title: intl.formatMessage(sectionNames.pages),
- url: pageListUrl()
- },
- {
- category: ConfigurationCategoryEnum.MISCELLANEOUS,
- description: intl.formatMessage({
- defaultMessage: "View and update your plugins and their settings.",
- id: "configurationPluginsPages"
- }),
- icon: (
-
- ),
- permission: PermissionEnum.MANAGE_SETTINGS,
- title: intl.formatMessage(sectionNames.plugins),
- url: pluginsListUrl()
+ label: "Miscellaneous",
+ menuItems: [
+ {
+ description: intl.formatMessage({
+ defaultMessage: "Define how users can navigate through your store",
+ id: "configurationMenuNavigation"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_MENUS,
+ title: intl.formatMessage(sectionNames.navigation),
+ url: menuListUrl()
+ },
+ {
+ description: intl.formatMessage({
+ defaultMessage: "View and update your site settings",
+ id: "configurationMenuSiteSettings"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_SETTINGS,
+ title: intl.formatMessage(sectionNames.siteSettings),
+ url: siteSettingsUrl()
+ },
+ {
+ description: intl.formatMessage({
+ defaultMessage: "Manage and add additional pages",
+ id: "configurationMenuPages"
+ }),
+ icon: ,
+ permission: PermissionEnum.MANAGE_PAGES,
+ title: intl.formatMessage(sectionNames.pages),
+ url: pageListUrl()
+ },
+ {
+ description: intl.formatMessage({
+ defaultMessage: "View and update your plugins and their settings.",
+ id: "configurationPluginsPages"
+ }),
+ icon: (
+
+ ),
+ permission: PermissionEnum.MANAGE_SETTINGS,
+ title: intl.formatMessage(sectionNames.plugins),
+ url: pluginsListUrl()
+ }
+ ]
}
];
}
diff --git a/src/index.tsx b/src/index.tsx
index bf8e504e8..aa59affac 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -227,8 +227,8 @@ const Routes: React.FC = () => {
path={attributeSection}
component={AttributeSection}
/>
- {createConfigurationMenu(intl).filter(menuItem =>
- hasPermission(menuItem.permission, user)
+ {createConfigurationMenu(intl).filter(menu =>
+ menu.menuItems.map(item => hasPermission(item.permission, user))
).length > 0 && (
void;
}
-
-export enum ConfigurationCategoryEnum {
- ATTRUBUTES_PRODUCT_TYPES = "ATTRUBUTES_PRODUCT_TYPES",
- PRODUCT_SETTINGS = "PRODUCT_SETTINGS",
- STAFF_SETTINGS = "STAFF_SETTINGS",
- MISCELLANEOUS = "MISCELLANEOUS"
-}