Fix configuration page layout

src/configuration/ConfigurationPage.tsx

@@ -12,12 +12,14 @@ import { useIntl } from "react-intl";
 
 import { IconProps } from "@material-ui/core/Icon";
 import { sectionNames } from "@saleor/intl";
+import { ConfigurationCategoryEnum } from "@saleor/types";
 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;
@@ -50,18 +52,26 @@ const styles = (theme: Theme) =>
       },
       marginBottom: theme.spacing.unit * 3
     },
-    icon: {
-      color: theme.palette.primary.main,
-      fontSize: 48
-    },
-    root: {
+    configurationCategory: {
       [theme.breakpoints.down("md")]: {
         gridTemplateColumns: "1fr"
       },
+      display: "grid",
+      gridColumnGap: theme.spacing.unit * 4 + "px",
+      gridTemplateColumns: "1fr 3fr"
+    },
+    configurationItem: {
       display: "grid",
       gridColumnGap: theme.spacing.unit * 4 + "px",
       gridTemplateColumns: "1fr 1fr"
     },
+    configurationLabel: {
+      paddingBottom: 20
+    },
+    icon: {
+      color: theme.palette.primary.main,
+      fontSize: 48
+    },
     sectionDescription: {},
     sectionTitle: {
       fontSize: 20,
@@ -85,39 +95,192 @@ export const ConfigurationPage = withStyles(styles, {
     onSectionClick
   }: ConfigurationPageProps & WithStyles<typeof styles>) => {
     const intl = useIntl();
-
     return (
       <Container>
         <PageHeader title={intl.formatMessage(sectionNames.configuration)} />
-        <div className={classes.root}>
-          {menu
-            .filter(menuItem =>
-              user.permissions
-                .map(perm => perm.code)
-                .includes(menuItem.permission)
-            )
-            .map((menuItem, menuItemIndex) => (
-              <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"
+        <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}
                     >
-                      {menuItem.title}
-                    </Typography>
-                    <Typography className={classes.sectionDescription}>
-                      {menuItem.description}
-                    </Typography>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
+                      <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>
       </Container>
     );

src/configuration/index.tsx

@@ -23,12 +23,14 @@ 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"
@@ -39,6 +41,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: attributeListUrl()
     },
     {
+      category: ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES,
       description: intl.formatMessage({
         defaultMessage: "Define types of products you sell",
         id: "configurationMenuProductTypes"
@@ -49,6 +52,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: productTypeListUrl()
     },
     {
+      category: ConfigurationCategoryEnum.STAFF_SETTINGS,
       description: intl.formatMessage({
         defaultMessage: "Manage your employees and their permissions",
         id: "configurationMenuStaff"
@@ -59,6 +63,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: staffListUrl()
     },
     {
+      category: ConfigurationCategoryEnum.PRODUCT_SETTINGS,
       description: intl.formatMessage({
         defaultMessage: "Manage how you ship out orders",
         id: "configurationMenuShipping"
@@ -69,6 +74,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: shippingZonesListUrl()
     },
     {
+      category: ConfigurationCategoryEnum.PRODUCT_SETTINGS,
       description: intl.formatMessage({
         defaultMessage: "Manage how your store charges tax",
         id: "configurationMenuTaxes"
@@ -79,6 +85,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: taxSection
     },
     {
+      category: ConfigurationCategoryEnum.MISCELLANEOUS,
       description: intl.formatMessage({
         defaultMessage: "Define how users can navigate through your store",
         id: "configurationMenuNavigation"
@@ -89,6 +96,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: menuListUrl()
     },
     {
+      category: ConfigurationCategoryEnum.MISCELLANEOUS,
       description: intl.formatMessage({
         defaultMessage: "View and update your site settings",
         id: "configurationMenuSiteSettings"
@@ -99,6 +107,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: siteSettingsUrl()
     },
     {
+      category: ConfigurationCategoryEnum.MISCELLANEOUS,
       description: intl.formatMessage({
         defaultMessage: "Manage and add additional pages",
         id: "configurationMenuPages"
@@ -109,6 +118,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
       url: pageListUrl()
     },
     {
+      category: ConfigurationCategoryEnum.MISCELLANEOUS,
       description: intl.formatMessage({
         defaultMessage: "View and update your plugins and their settings.",
         id: "configurationPluginsPages"

src/types.ts

@@ -130,3 +130,10 @@ 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"
+}