Refactor shop settings forms to use GraphQL

imports/client/ui/components/Sidebar/Sidebar.js

@@ -1,10 +1,8 @@
 import React from "react";
 import { compose, withState } from "recompose";
 import { NavLink, withRouter } from "react-router-dom";
-import classNames from "classnames";
 import PropTypes from "prop-types";
 import AppBar from "@material-ui/core/AppBar";
-import Collapse from "@material-ui/core/Collapse";
 import Fab from "@material-ui/core/Fab";
 import Hidden from "@material-ui/core/Hidden";
 import Toolbar from "@material-ui/core/Toolbar";
@@ -14,7 +12,6 @@ import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import Drawer from "@material-ui/core/Drawer";
 import withStyles from "@material-ui/core/styles/withStyles";
-import SettingsIcon from "mdi-material-ui/Settings";
 import CloseIcon from "mdi-material-ui/Close";
 import { Translation } from "/imports/plugins/core/ui/client/components";
 import useIsAppLoading from "/imports/client/ui/hooks/useIsAppLoading.js";
@@ -97,7 +94,6 @@ const styles = (theme) => ({
 function Sidebar(props) {
   const {
     classes,
-    history,
     isMobile,
     isSidebarOpen,
     onDrawerClose,
@@ -108,7 +104,6 @@ function Sidebar(props) {
   const [isAppLoading] = useIsAppLoading();
   const [currentShopId] = useCurrentShopId();
   const primaryRoutes = useOperatorRoutes({ groups: ["navigation"] });
-  const settingRoutes = useOperatorRoutes({ groups: ["settings"] });
 
   let drawerProps = {
     classes: {
@@ -138,7 +133,7 @@ function Sidebar(props) {
           <NavLink
             activeClassName={!isSettingsOpen ? activeClassName : null}
             className={classes.link}
-            to={route.path}
+            to={route.href || route.path}
             key={route.path}
             onClick={() => {
               setIsSettingsOpen(false);
@@ -158,53 +153,6 @@ function Sidebar(props) {
             </ListItem>
           </NavLink>
         ))}
-
-        <ListItem
-          button
-          className={classes.listItem}
-          onClick={() => {
-            // Push the first setting route when opened, but not on mobile
-            if (!isSettingsOpen && !isMobile) {
-              const [firstRoute] = settingRoutes;
-
-              if (firstRoute) {
-                history.push(firstRoute.path);
-              }
-            }
-            setIsSettingsOpen(!isSettingsOpen);
-          }}
-        >
-          <ListItemIcon className={classNames(classes.icon, { [classes.iconActive]: isSettingsOpen })}>
-            <SettingsIcon />
-          </ListItemIcon>
-          <ListItemText
-            disableTypography
-            className={classes.listItemText}
-          >
-            <Translation i18nKey={"app.settings"} />
-          </ListItemText>
-        </ListItem>
-
-        <Collapse in={isSettingsOpen}>
-          {settingRoutes.map((route) => (
-            <NavLink
-              activeClassName={activeClassName}
-              className={classes.link}
-              to={route.path}
-              key={route.path}
-              onClick={onDrawerClose}
-            >
-              <ListItem button className={classes.listItemNested}>
-                <ListItemText
-                  disableTypography
-                  className={classes.listItemText}
-                >
-                  <Translation defaultValue="" i18nKey={route.sidebarI18nLabel} />
-                </ListItemText>
-              </ListItem>
-            </NavLink>
-          ))}
-        </Collapse>
       </List>
     );
   }

imports/client/ui/layouts/ContentViewFullLayout.js

@@ -1,6 +1,6 @@
 /**
- * Component provies a fill width and height, non-scrollable container
- * for dashboard layouts that want to defin their on scroll zones.
+ * Component provides a fill width and height, non-scrollable container
+ * for dashboard layouts that want to define their on scroll zones.
  */
 import React from "react";
 import PropTypes from "prop-types";

imports/client/ui/layouts/ContentViewPrimaryDetailLayout.js

@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme) => ({
   },
   sidebar: {
     flex: "1 1 auto",
+    minWidth: 330,
     maxWidth: 330,
     height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
     overflowY: "auto",

imports/plugins/core/address/client/components/AddressValidationSettingsForm.js

@@ -9,7 +9,7 @@ import Button from "@reactioncommerce/catalyst/Button";
 import Grid from "@material-ui/core/Grid";
 import MenuItem from "@material-ui/core/MenuItem";
 import TextField from "@material-ui/core/TextField";
-import { makeStyles } from "@material-ui/styles";
+import { makeStyles } from "@material-ui/core";
 import muiOptions from "reacto-form/cjs/muiOptions";
 import useReactoForm from "reacto-form/cjs/useReactoForm";
 
@@ -217,7 +217,7 @@ export default function AddressValidationSettingsForm(props) {
           <Button
             className={classes.deleteButton}
             color="primary"
-            isDisabled={isSubmitting}
+            disabled={isSubmitting}
             onClick={() => {
               deleteRule({
                 variables: {
@@ -234,7 +234,7 @@ export default function AddressValidationSettingsForm(props) {
           </Button>}
         <Button
           color="primary"
-          isDisabled={isSubmitting}
+          disabled={isSubmitting}
           onClick={submitForm}
           variant="contained"
         >

imports/plugins/core/address/client/components/AddressValidationSettingsRegion.js

@@ -0,0 +1,30 @@
+import React from "react";
+import i18next from "i18next";
+import { Blocks } from "@reactioncommerce/reaction-components";
+import {
+  makeStyles,
+  Typography
+} from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+  header: {
+    marginBottom: theme.spacing(4)
+  }
+}));
+
+/**
+ * @summary Renders payment settings page
+ * @param {Object} props Component props
+ * @return {React.Node} React node
+ */
+export default function AddressValidationSettingsRegion(props) {
+  const classes = useStyles();
+  return (
+    <>
+      <Typography variant="h2" className={classes.header}>
+        {i18next.t("admin.settings.addressValidation.header")}
+      </Typography>
+      <Blocks region="AddressValidationSettings" blockProps={props} />
+    </>
+  );
+}

imports/plugins/core/address/client/components/ShopAddressValidationSettings.js

@@ -6,7 +6,7 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Dialog from "@material-ui/core/Dialog";
 import DialogContent from "@material-ui/core/DialogContent";
-import { makeStyles } from "@material-ui/styles";
+import { makeStyles } from "@material-ui/core";
 import CountryOptions from "@reactioncommerce/api-utils/CountryOptions.js";
 import { i18next } from "/client/api";
 import AddressValidationSettingsForm from "./AddressValidationSettingsForm";

imports/plugins/core/address/client/index.js

@@ -1,10 +1,19 @@
 import { registerOperatorRoute } from "/imports/client/ui";
+import AddressValidationSettingsRegion from "./components/AddressValidationSettingsRegion";
 import ShopAddressValidationSettings from "./containers/ShopAddressValidationSettings";
+import { registerBlock } from "@reactioncommerce/reaction-components";
 
 registerOperatorRoute({
   group: "settings",
-  MainComponent: ShopAddressValidationSettings,
-  path: "/address-validation-settings",
-  priority: 900,
+  MainComponent: AddressValidationSettingsRegion,
+  path: "/settings/address-validation-settings",
+  priority: 170,
   sidebarI18nLabel: "addressValidation.title"
 });
+
+registerBlock({
+  region: "AddressValidationSettings",
+  name: "AddressValidationSettings",
+  component: ShopAddressValidationSettings,
+  priority: 1
+});

imports/plugins/core/dashboard/client/components/SettingsDashboard.js

@@ -0,0 +1,43 @@
+import React from "react";
+import i18next from "i18next";
+import { Switch, Route } from "react-router-dom";
+import {
+  Container
+} from "@material-ui/core";
+import PrimaryAppBar from "/imports/client/ui/components/PrimaryAppBar";
+import ContentViewPrimaryDetailLayout from "/imports/client/ui/layouts/ContentViewPrimaryDetailLayout";
+import useOperatorRoutes from "/imports/client/ui/hooks/useOperatorRoutes";
+import SettingsList from "./SettingsList";
+
+/**
+ * @name SettingsDashboard
+ * @returns {React.component} a functional React component
+ */
+export default function SettingsDashboard() {
+  const settingsRoutes = useOperatorRoutes({ groups: ["settings"] });
+  return (
+    <ContentViewPrimaryDetailLayout
+      AppBarComponent={
+        <PrimaryAppBar title={i18next.t("admin.settings.settingsLabel")} />
+      }
+      PrimaryComponent={
+        <SettingsList />
+      }
+      DetailComponent={
+        <Container maxWidth="md">
+          <Switch>
+            {
+              settingsRoutes.map((settingRoute) => (
+                <Route
+                  key={settingRoute.path}
+                  component={settingRoute.MainComponent}
+                  path={settingRoute.path}
+                />
+              ))
+            }
+          </Switch>
+        </Container>
+      }
+    />
+  );
+}

imports/plugins/core/dashboard/client/components/SettingsList.js

@@ -0,0 +1,66 @@
+import React from "react";
+import i18next from "i18next";
+import {
+  List,
+  ListItemText,
+  makeStyles,
+  ListItem
+} from "@material-ui/core";
+import clsx from "classnames";
+import { useHistory } from "react-router-dom";
+import useOperatorRoutes from "imports/client/ui/hooks/useOperatorRoutes";
+
+const useStyles = makeStyles((theme) => ({
+  listItemContainer: {
+    "&:hover $listItemAction": {
+      display: "block"
+    }
+  },
+  listItem: {
+    paddingLeft: theme.spacing(4)
+  }
+}));
+
+/**
+ * @summary A list settings for a shop
+ * @returns {Node} React node
+ */
+export default function SettingsList() {
+  const classes = useStyles();
+  const history = useHistory();
+  const settingsRoutes = useOperatorRoutes({ groups: ["settings"] });
+  let settingsList = [];
+
+  if (Array.isArray(settingsRoutes)) {
+    settingsList = settingsRoutes.map((setting) => (
+      <ListItem
+        key={`listItem-${setting.path}`}
+        component="nav"
+        ContainerProps={{
+          className: classes.listItemContainer
+        }}
+        ContainerComponent={({ children, ...props }) => (
+          <li {...props}>
+            {i18next.t(setting.sidebarI18nLabel) }
+            {children}
+          </li>
+        )}
+        className={clsx({
+          [classes.listItem]: true
+        })}
+        button
+        onClick={() => history.push(setting.path)}
+      >
+        <ListItemText
+          primary={i18next.t(setting.sidebarI18nLabel)}
+        />
+      </ListItem>
+    ));
+  }
+
+  return (
+    <List>
+      {settingsRoutes && Array.isArray(settingsRoutes) && settingsList}
+    </List>
+  );
+}