Fix configuration labels and types

src/components/AppLayout/MenuList.tsx

@@ -174,12 +174,11 @@ 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);
-      });
+      menu.menuItems.map(item =>
+        user.permissions.map(perm => perm.code).includes(item.permission)
+      );
     });
+
     const handleSubMenu = itemLabel => {
       setActiveSubMenu({
         isActive:

src/configuration/ConfigurationPage.tsx

@@ -20,15 +20,13 @@ import { PermissionEnum } from "../types/globalTypes";
 
 export interface MenuItem {
   label: string;
-  menuItems: [
-    {
-      description: string;
-      icon: React.ReactElement<IconProps>;
-      permission: PermissionEnum;
-      title: string;
-      url?: string;
-    }
-  ];
+  menuItems: Array<{
+    description: string;
+    icon: React.ReactElement<IconProps>;
+    permission: PermissionEnum;
+    title: string;
+    url?: string;
+  }>;
 }
 
 const styles = (theme: Theme) =>
@@ -115,16 +113,16 @@ export const ConfigurationPage = withStyles(styles, {
             menu.menuItems.map(item => hasPermission(item.permission, user))
           )
           .map((menu, menuIndex) => (
-            <div className={classes.configurationCategory}>
+            <div className={classes.configurationCategory} key={menuIndex}>
               <div className={classes.configurationLabel}>
                 <Typography>{menu.label}</Typography>
               </div>
               <div className={classes.configurationItem}>
-                {menu.menuItems.map(item => (
+                {menu.menuItems.map((item, itemIndex) => (
                   <Card
                     className={item.url ? classes.card : classes.cardDisabled}
                     onClick={() => onSectionClick(item.url)}
-                    key={menuIndex}
+                    key={itemIndex}
                   >
                     <CardContent className={classes.cardContent}>
                       <div className={classes.icon}>{item.icon}</div>

src/configuration/index.tsx

@@ -30,7 +30,9 @@ import ConfigurationPage, { MenuItem } from "./ConfigurationPage";
 export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
   return [
     {
-      label: "Attributes and Product Types",
+      label: intl.formatMessage({
+        defaultMessage: "Attributes and Product Typess"
+      }),
       menuItems: [
         {
           description: intl.formatMessage({
@@ -55,7 +57,9 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       ]
     },
     {
-      label: "Product Settings",
+      label: intl.formatMessage({
+        defaultMessage: "Product Settings"
+      }),
       menuItems: [
         {
           description: intl.formatMessage({
@@ -80,7 +84,9 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       ]
     },
     {
-      label: "Staff Settings",
+      label: intl.formatMessage({
+        defaultMessage: "Staff Settings"
+      }),
       menuItems: [
         {
           description: intl.formatMessage({
@@ -95,7 +101,9 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       ]
     },
     {
-      label: "Miscellaneous",
+      label: intl.formatMessage({
+        defaultMessage: "Miscellaneous"
+      }),
       menuItems: [
         {
           description: intl.formatMessage({