From ad4975bd84375e1f3989feee563ea9bc4bfa6276 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Thu, 12 Sep 2019 16:38:40 +0200
Subject: [PATCH] Fix configuration page

---
 src/components/AppLayout/MenuList.tsx         |  60 ++---
 .../MultiAutocompleteSelectField.tsx          |   5 +-
 src/configuration/ConfigurationPage.tsx       | 245 ++++--------------
 src/configuration/index.tsx                   | 206 ++++++++-------
 src/index.tsx                                 |   4 +-
 src/types.ts                                  |   7 -
 6 files changed, 196 insertions(+), 331 deletions(-)

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" })(
             </a>
           );
         })}
-        {renderConfigure &&
-          createConfigurationMenu(intl).filter(menuItem =>
-            user.permissions
-              .map(perm => perm.code)
-              .includes(menuItem.permission)
-          ).length > 0 && (
-            <a
-              className={classes.menuListItem}
-              href={createHref(configurationMenuUrl)}
-              onClick={event => closeSubMenu(configurationMenuUrl, event)}
-            >
-              <div className={classes.menuItemHover}>
-                <SVG
-                  className={classNames(classes.menuIcon, {
-                    [classes.menuIconDark]: isDark
-                  })}
-                  src={configureIcon}
-                />
-                <Typography
-                  aria-label="configuration"
-                  className={classNames(classes.menuListItemText, {
-                    [classes.menuListItemTextHide]: !isMenuSmall
-                  })}
-                >
-                  <FormattedMessage {...sectionNames.configuration} />
-                </Typography>
-              </div>
-            </a>
-          )}
+        {renderConfigure && configutationMenu.length > 0 && (
+          <a
+            className={classes.menuListItem}
+            href={createHref(configurationMenuUrl)}
+            onClick={event => closeSubMenu(configurationMenuUrl, event)}
+          >
+            <div className={classes.menuItemHover}>
+              <SVG
+                className={classNames(classes.menuIcon, {
+                  [classes.menuIconDark]: isDark
+                })}
+                src={configureIcon}
+              />
+              <Typography
+                aria-label="configuration"
+                className={classNames(classes.menuListItemText, {
+                  [classes.menuListItemTextHide]: !isMenuSmall
+                })}
+              >
+                <FormattedMessage {...sectionNames.configuration} />
+              </Typography>
+            </div>
+          </a>
+        )}
       </div>
     );
   }
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 => (
             <div className={classes.chip} key={value.value}>
               <div className={classes.chipInner}>
-                <Typography className={classes.chipLabel} variant="caption">
+                <Typography className={classes.chipLabel}>
                   {value.label}
                 </Typography>
                 <IconButton
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index 26a10de27..883a626a5 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@@ -12,19 +12,23 @@ import { useIntl } from "react-intl";
 
 import { IconProps } from "@material-ui/core/Icon";
 import { sectionNames } from "@saleor/intl";
-import { ConfigurationCategoryEnum } from "@saleor/types";
+import { hasPermission } from "../auth/misc";
 import { User } from "../auth/types/User";
 import Container from "../components/Container";
 import PageHeader from "../components/PageHeader";
 import { PermissionEnum } from "../types/globalTypes";
 
 export interface MenuItem {
-  category: ConfigurationCategoryEnum;
-  description: string;
-  icon: React.ReactElement<IconProps>;
-  permission: PermissionEnum;
-  title: string;
-  url?: string;
+  label: string;
+  menuItems: [
+    {
+      description: string;
+      icon: React.ReactElement<IconProps>;
+      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 (
       <Container>
-        <PageHeader title={intl.formatMessage(sectionNames.configuration)} />
-        <div className={classes.configurationCategory}>
-          <div className={classes.configurationLabel}>
-            <Typography>
-              {intl.formatMessage({
-                defaultMessage: "Attributes and Product Types",
-                description: "configuration category"
-              })}
-            </Typography>
-          </div>
-          <div className={classes.configurationItem}>
-            {menu
-              .filter(menuItem =>
-                user.permissions
-                  .map(perm => perm.code)
-                  .includes(menuItem.permission)
-              )
-              .map(
-                (menuItem, menuItemIndex) =>
-                  menuItem.category ===
-                    ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES && (
-                    <Card
-                      className={
-                        menuItem.url ? classes.card : classes.cardDisabled
-                      }
-                      onClick={() => onSectionClick(menuItem.url)}
-                      key={menuItemIndex}
-                    >
-                      <CardContent className={classes.cardContent}>
-                        <div className={classes.icon}>{menuItem.icon}</div>
-                        <div>
-                          <Typography
-                            className={classes.sectionTitle}
-                            color="primary"
-                          >
-                            {menuItem.title}
-                          </Typography>
-                          <Typography className={classes.sectionDescription}>
-                            {menuItem.description}
-                          </Typography>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  )
-              )}
-          </div>
-        </div>
-        <div className={classes.configurationCategory}>
-          <div className={classes.configurationLabel}>
-            <Typography>
-              {intl.formatMessage({
-                defaultMessage: "Product Settings",
-                description: "configuration category"
-              })}
-            </Typography>
-          </div>
-          <div className={classes.configurationItem}>
-            {menu
-              .filter(menuItem =>
-                user.permissions
-                  .map(perm => perm.code)
-                  .includes(menuItem.permission)
-              )
-              .map(
-                (menuItem, menuItemIndex) =>
-                  menuItem.category ===
-                    ConfigurationCategoryEnum.PRODUCT_SETTINGS && (
-                    <Card
-                      className={
-                        menuItem.url ? classes.card : classes.cardDisabled
-                      }
-                      onClick={() => onSectionClick(menuItem.url)}
-                      key={menuItemIndex}
-                    >
-                      <CardContent className={classes.cardContent}>
-                        <div className={classes.icon}>{menuItem.icon}</div>
-                        <div>
-                          <Typography
-                            className={classes.sectionTitle}
-                            color="primary"
-                          >
-                            {menuItem.title}
-                          </Typography>
-                          <Typography className={classes.sectionDescription}>
-                            {menuItem.description}
-                          </Typography>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  )
-              )}
-          </div>
-        </div>
-        <div className={classes.configurationCategory}>
-          <div className={classes.configurationLabel}>
-            <Typography>
-              {intl.formatMessage({
-                defaultMessage: "Staff Settings",
-                description: "configuration category"
-              })}
-            </Typography>
-          </div>
-          <div className={classes.configurationItem}>
-            {menu
-              .filter(menuItem =>
-                user.permissions
-                  .map(perm => perm.code)
-                  .includes(menuItem.permission)
-              )
-              .map(
-                (menuItem, menuItemIndex) =>
-                  menuItem.category ===
-                    ConfigurationCategoryEnum.STAFF_SETTINGS && (
-                    <Card
-                      className={
-                        menuItem.url ? classes.card : classes.cardDisabled
-                      }
-                      onClick={() => onSectionClick(menuItem.url)}
-                      key={menuItemIndex}
-                    >
-                      <CardContent className={classes.cardContent}>
-                        <div className={classes.icon}>{menuItem.icon}</div>
-                        <div>
-                          <Typography
-                            className={classes.sectionTitle}
-                            color="primary"
-                          >
-                            {menuItem.title}
-                          </Typography>
-                          <Typography className={classes.sectionDescription}>
-                            {menuItem.description}
-                          </Typography>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  )
-              )}
-          </div>
-        </div>
-        <div className={classes.configurationCategory}>
-          <div className={classes.configurationLabel}>
-            <Typography>
-              {intl.formatMessage({
-                defaultMessage: "Miscellaneous",
-                description: "configuration category"
-              })}
-            </Typography>
-          </div>
-          <div className={classes.configurationItem}>
-            {menu
-              .filter(menuItem =>
-                user.permissions
-                  .map(perm => perm.code)
-                  .includes(menuItem.permission)
-              )
-              .map(
-                (menuItem, menuItemIndex) =>
-                  menuItem.category ===
-                    ConfigurationCategoryEnum.MISCELLANEOUS && (
-                    <Card
-                      className={
-                        menuItem.url ? classes.card : classes.cardDisabled
-                      }
-                      onClick={() => onSectionClick(menuItem.url)}
-                      key={menuItemIndex}
-                    >
-                      <CardContent className={classes.cardContent}>
-                        <div className={classes.icon}>{menuItem.icon}</div>
-                        <div>
-                          <Typography
-                            className={classes.sectionTitle}
-                            color="primary"
-                          >
-                            {menuItem.title}
-                          </Typography>
-                          <Typography className={classes.sectionDescription}>
-                            {menuItem.description}
-                          </Typography>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  )
-              )}
-          </div>
-        </div>
+        <PageHeader
+          className={classes.header}
+          title={intl.formatMessage(sectionNames.configuration)}
+        />
+        {menu
+          .filter(menu =>
+            menu.menuItems.map(item => hasPermission(item.permission, user))
+          )
+          .map((menu, menuIndex) => (
+            <div className={classes.configurationCategory}>
+              <div className={classes.configurationLabel}>
+                <Typography>{menu.label}</Typography>
+              </div>
+              <div className={classes.configurationItem}>
+                {menu.menuItems.map(item => (
+                  <Card
+                    className={item.url ? classes.card : classes.cardDisabled}
+                    onClick={() => onSectionClick(item.url)}
+                    key={menuIndex}
+                  >
+                    <CardContent className={classes.cardContent}>
+                      <div className={classes.icon}>{item.icon}</div>
+                      <div>
+                        <Typography
+                          className={classes.sectionTitle}
+                          color="primary"
+                        >
+                          {item.title}
+                        </Typography>
+                        <Typography className={classes.sectionDescription}>
+                          {item.description}
+                        </Typography>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          ))}
       </Container>
     );
   }
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: <Attributes fontSize="inherit" viewBox="0 0 44 44" />,
-      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: <Attributes fontSize="inherit" viewBox="0 0 44 44" />,
+          permission: PermissionEnum.MANAGE_PRODUCTS,
+          title: intl.formatMessage(sectionNames.attributes),
+          url: attributeListUrl()
+        },
+        {
+          description: intl.formatMessage({
+            defaultMessage: "Define types of products you sell",
+            id: "configurationMenuProductTypes"
+          }),
+          icon: <ProductTypes fontSize="inherit" viewBox="0 0 44 44" />,
+          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: <ProductTypes fontSize="inherit" viewBox="0 0 44 44" />,
-      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: <ShippingMethods fontSize="inherit" viewBox="0 0 44 44" />,
+          permission: PermissionEnum.MANAGE_SHIPPING,
+          title: intl.formatMessage(sectionNames.shipping),
+          url: shippingZonesListUrl()
+        },
+        {
+          description: intl.formatMessage({
+            defaultMessage: "Manage how your store charges tax",
+            id: "configurationMenuTaxes"
+          }),
+          icon: <Taxes fontSize="inherit" viewBox="0 0 44 44" />,
+          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: <StaffMembers fontSize="inherit" viewBox="0 0 44 44" />,
-      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: <StaffMembers fontSize="inherit" viewBox="0 0 44 44" />,
+          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: <ShippingMethods fontSize="inherit" viewBox="0 0 44 44" />,
-      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: <Taxes fontSize="inherit" viewBox="0 0 44 44" />,
-      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: <Navigation fontSize="inherit" viewBox="0 0 44 44" />,
-      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: <SiteSettings fontSize="inherit" viewBox="0 0 44 44" />,
-      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: <Pages fontSize="inherit" viewBox="0 0 44 44" />,
-      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: (
-        <Plugins
-          fontSize="inherit"
-          viewBox="-8 -5 44 44"
-          preserveAspectRatio="xMinYMin meet"
-        />
-      ),
-      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: <Navigation fontSize="inherit" viewBox="0 0 44 44" />,
+          permission: PermissionEnum.MANAGE_MENUS,
+          title: intl.formatMessage(sectionNames.navigation),
+          url: menuListUrl()
+        },
+        {
+          description: intl.formatMessage({
+            defaultMessage: "View and update your site settings",
+            id: "configurationMenuSiteSettings"
+          }),
+          icon: <SiteSettings fontSize="inherit" viewBox="0 0 44 44" />,
+          permission: PermissionEnum.MANAGE_SETTINGS,
+          title: intl.formatMessage(sectionNames.siteSettings),
+          url: siteSettingsUrl()
+        },
+        {
+          description: intl.formatMessage({
+            defaultMessage: "Manage and add additional pages",
+            id: "configurationMenuPages"
+          }),
+          icon: <Pages fontSize="inherit" viewBox="0 0 44 44" />,
+          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: (
+            <Plugins
+              fontSize="inherit"
+              viewBox="-8 -5 44 44"
+              preserveAspectRatio="xMinYMin meet"
+            />
+          ),
+          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 && (
                 <SectionRoute
                   exact
diff --git a/src/types.ts b/src/types.ts
index a5d516ec9..68de233fb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -134,10 +134,3 @@ export interface FetchMoreProps {
   hasMore: boolean;
   onFetchMore: () => void;
 }
-
-export enum ConfigurationCategoryEnum {
-  ATTRUBUTES_PRODUCT_TYPES = "ATTRUBUTES_PRODUCT_TYPES",
-  PRODUCT_SETTINGS = "PRODUCT_SETTINGS",
-  STAFF_SETTINGS = "STAFF_SETTINGS",
-  MISCELLANEOUS = "MISCELLANEOUS"
-}