Add global shop selector for multi-shop usage

CHANGELOG.md

@@ -1,15 +1,44 @@
+# v3.0.0-beta.9
+
+### Features
+
+- feat: Enable mock TLS termination on calls to Hydra ([#302](https://github.com/reactioncommerce/reaction-admin/pull/302))
+
+### Fixes
+
+- fix: Update defaultParcelSize only when it exists ([#295](https://github.com/reactioncommerce/reaction-admin/pull/295))
+- fix: Reaction.hasPermission method shopId ([#298](https://github.com/reactioncommerce/reaction-admin/pull/298))
+
+## Contributors
+
+Thanks to @manizuca and @mikoscz for contributing to this release! 🎉
+
+# v3.0.0-beta.8
+
+### Features
+
+- feat: Added GraphQL-powered accounts page ([#276](https://github.com/reactioncommerce/reaction-admin/pull/276))
+
+### Fixes
+
+- fix: Set empty tax fields to null ([#258](https://github.com/reactioncommerce/reaction-admin/pull/258))
+
+## Contributors
+
+Thanks to @loan-laux and @derBretti for contributing to this release! 🎉
+
 # v3.0.0-beta.7
 
 This is the seventh beta release of the Reaction Admin project that is designed to work with our new Reaction API.
 
 ### Refactors
 
-refactor: de-meteorize discount codes view ([#255](http://github.com/reactioncommerce/reaction-admin/pull/255))
+- refactor: de-meteorize discount codes view ([#255](http://github.com/reactioncommerce/reaction-admin/pull/255))
 
 ### Fixes
 
-fix: navigation tree not showing up ([#278](http://github.com/reactioncommerce/reaction-admin/pull/278))
-fix: use network-only fetchPolicy for tag table ([#254](http://github.com/reactioncommerce/reaction-admin/pull/254))
+- fix: navigation tree not showing up ([#278](http://github.com/reactioncommerce/reaction-admin/pull/278))
+- fix: use network-only fetchPolicy for tag table ([#254](http://github.com/reactioncommerce/reaction-admin/pull/254))
 
 ## Contributors
 

docker-compose.yml

@@ -13,7 +13,7 @@ networks:
 
 services:
   reaction-admin:
-    image: reactioncommerce/admin:3.0.0-beta.7
+    image: reactioncommerce/admin:3.0.0-beta.9
     env_file:
       - ./.env
     networks:

imports/client/ui/components/ShopLogoWithData/ShopLogoWithData.js

@@ -1,11 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { compose } from "recompose";
-import classNames from "classnames";
 import gql from "graphql-tag";
 import { Query } from "react-apollo";
-import { Link } from "react-router-dom";
-import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
 import { withComponents } from "@reactioncommerce/components-context";
 import withPrimaryShopId from "/imports/plugins/core/graphql/lib/hocs/withPrimaryShopId";
@@ -47,29 +44,15 @@ const styles = (theme) => ({
  * @param {Object} props Component props
  * @returns {Node} React component
  */
-function ShopLogoWithData({ className, classes, shopId, shouldShowShopName, linkTo, size }) {
+function ShopLogoWithData({ classes, shopId, size }) {
   if (!shopId) {
     return (
-      <Link
-        className={classNames(classes.root, className)}
-        to={linkTo}
-      >
-        <img
-          alt="Reaction Commerce"
-          className={classes.logo}
-          src={defaultLogo}
-          width={size}
-        />
-        {shouldShowShopName &&
-          <Typography
-            variant="h3"
-            component="span"
-            className={classes.logoName}
-          >
-            Reaction Commerce
-          </Typography>
-        }
-      </Link>
+      <img
+        alt="Reaction Commerce"
+        className={classes.logo}
+        src={defaultLogo}
+        width={size}
+      />
     );
   }
 
@@ -84,26 +67,12 @@ function ShopLogoWithData({ className, classes, shopId, shouldShowShopName, link
             const customLogoFromUrlInput = shop.shopLogoUrls && shop.shopLogoUrls.primaryShopLogoUrl;
 
             return (
-              <Link
-                className={classNames(classes.root, className)}
-                to={linkTo}
-              >
-                <img
-                  alt={shop.name}
-                  className={classes.logo}
-                  src={customLogoFromUrlInput || customLogoFromUpload || defaultLogo}
-                  width={size}
-                />
-                {shouldShowShopName &&
-                  <Typography
-                    variant="h3"
-                    component="span"
-                    className={classes.logoName}
-                  >
-                    {shop.name}
-                  </Typography>
-                }
-              </Link>
+              <img
+                alt={shop.name}
+                className={classes.logo}
+                src={customLogoFromUrlInput || customLogoFromUpload || defaultLogo}
+                width={size}
+              />
             );
           }
 
@@ -116,17 +85,12 @@ function ShopLogoWithData({ className, classes, shopId, shouldShowShopName, link
 }
 
 ShopLogoWithData.propTypes = {
-  className: PropTypes.string,
   classes: PropTypes.object,
-  linkTo: PropTypes.string,
   shopId: PropTypes.string,
-  shouldShowShopName: PropTypes.bool,
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
 ShopLogoWithData.defaultProps = {
-  linkTo: "/",
-  shouldShowShopName: false,
   size: 60
 };
 

imports/client/ui/components/ShopSelectorWithData/ShopSelectorWithData.js

@@ -0,0 +1,171 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { compose } from "recompose";
+import classNames from "classnames";
+import { Link, useLocation } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import InputBase from "@material-ui/core/InputBase";
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
+import Typography from "@material-ui/core/Typography";
+import withStyles from "@material-ui/core/styles/withStyles";
+import { withComponents } from "@reactioncommerce/components-context";
+
+const defaultLogo = "/resources/reaction-logo-circular.svg";
+
+const styles = (theme) => ({
+  root: {
+    display: "flex",
+    alignItems: "center"
+  },
+  logo: {
+    marginRight: theme.spacing(2)
+  },
+  menuItem: {
+    "& a span": {
+      color: theme.palette.colors.black90
+    }
+  },
+  selectMenu: {
+    "& a span": {
+      color: theme.palette.colors.black15
+    }
+  },
+  dummyShopName: {
+    color: theme.palette.colors.black15
+  },
+  newShopLink: {
+    "color": theme.palette.colors.darkBlue,
+    "&:hover": {
+      color: theme.palette.colors.darkBlue
+    }
+  },
+  plusIcon: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  selectArrow: {
+    color: theme.palette.colors.black15
+  }
+});
+
+const ShopSelectorInput = withStyles(() => ({
+  input: {
+    "border": "none",
+    "&:focus": {
+      border: "none",
+      background: "transparent"
+    }
+  }
+}))(InputBase);
+
+/**
+ * ShopSelectorWithData
+ * @param {Object} props Component props
+ * @returns {Node} React component
+ */
+function ShopSelectorWithData({ className, classes, shouldShowShopName, shopId, linkTo, size, viewer }) {
+  const location = useLocation();
+
+  let adminUIShops = [];
+
+  if (viewer?.adminUIShops) {
+    ({ adminUIShops } = viewer);
+  } else {
+    return (
+      <Link
+        className={classNames(classes.root, className)}
+        to={linkTo}
+      >
+        <img
+          alt="Reaction Commerce"
+          className={classes.logo}
+          src={defaultLogo}
+          width={size}
+        />
+        {shouldShowShopName &&
+        <Typography
+          className={classes.dummyShopName}
+          component="span"
+          variant="h3"
+        >
+          Reaction Commerce
+        </Typography>
+        }
+      </Link>
+    );
+  }
+
+  return (
+    <Select classes={{ selectMenu: classes.selectMenu, icon: classes.selectArrow }} value={shopId} input={<ShopSelectorInput />}>
+      {adminUIShops.map((shop) => {
+        const customLogoFromUpload = shop.brandAssets && shop.brandAssets.navbarBrandImage && shop.brandAssets.navbarBrandImage.large;
+        const customLogoFromUrlInput = shop.shopLogoUrls && shop.shopLogoUrls.primaryShopLogoUrl;
+        // Replace only the first segment of the URL with the shop ID and keep the rest (if any)
+        const linkUrl = location.pathname.replace(/(\/.[^/]*(\/.*)?)/g, (match, firstUrlSegment, restOfUrl) => `/${shop._id}${restOfUrl || ""}`);
+
+        return (
+          <MenuItem className={classes.menuItem} value={shop._id} key={shop._id}>
+            <Link
+              className={classNames(classes.root, className)}
+              to={linkUrl}
+            >
+              <img
+                alt={shop.name}
+                className={classes.logo}
+                src={customLogoFromUrlInput || customLogoFromUpload || defaultLogo}
+                width={size}
+              />
+              {shouldShowShopName &&
+                <Typography
+                  variant="h3"
+                  component="span"
+                >
+                  {shop.name}
+                </Typography>
+              }
+            </Link>
+          </MenuItem>
+        );
+      })}
+      <MenuItem className={classes.menuItem} value="new-shop" key="new-shop">
+        <Link
+          className={classNames([classes.root, className, classes.newShopLink])}
+          to={"/new-shop"}
+        >
+          <div className={classNames([classes.logo, classes.plusIcon])} style={{ width: size }}>
+            <FontAwesomeIcon icon={faPlus} />
+          </div>
+          <Typography
+            variant="h3"
+            component="span"
+          >
+            New Shop
+          </Typography>
+        </Link>
+      </MenuItem>
+    </Select>
+  );
+}
+
+ShopSelectorWithData.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  linkTo: PropTypes.string,
+  shopId: PropTypes.string,
+  shouldShowShopName: PropTypes.bool,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  viewer: PropTypes.object
+};
+
+ShopSelectorWithData.defaultProps = {
+  linkTo: "/",
+  shouldShowShopName: false,
+  size: 60
+};
+
+export default compose(
+  withComponents,
+  withStyles(styles, { name: "RuiShopSelectorWithData" })
+)(ShopSelectorWithData);

imports/client/ui/components/ShopSelectorWithData/index.js

@@ -0,0 +1 @@
+export { default } from "./ShopSelectorWithData";

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

@@ -16,7 +16,7 @@ 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";
 import useCurrentShopId from "../../hooks/useCurrentShopId";
-import ShopLogoWithData from "../ShopLogoWithData";
+import ShopSelectorWithData from "../ShopSelectorWithData";
 import useOperatorRoutes from "../../hooks/useOperatorRoutes";
 
 const activeClassName = "nav-item-active";
@@ -97,7 +97,8 @@ function Sidebar(props) {
     isMobile,
     isSidebarOpen,
     onDrawerClose,
-    setIsSettingsOpen
+    setIsSettingsOpen,
+    viewer
   } = props;
 
   const [isAppLoading] = useIsAppLoading();
@@ -132,7 +133,7 @@ function Sidebar(props) {
           <NavLink
             activeClassName={activeClassName}
             className={classes.link}
-            to={route.href || route.path}
+            to={(route.href || route.path).replace(":shopId", currentShopId)}
             key={route.path}
             onClick={() => {
               setIsSettingsOpen(false);
@@ -164,7 +165,13 @@ function Sidebar(props) {
         position="sticky"
       >
         <Toolbar className={classes.toolbar}>
-          <ShopLogoWithData className={classes.shopLogo} shouldShowShopName size={32} />
+          <ShopSelectorWithData
+            className={classes.shopLogo}
+            shouldShowShopName
+            shopId={currentShopId}
+            size={32}
+            viewer={viewer}
+          />
 
           <Hidden mdUp>
             <Fab classes={{ root: classes.closeButton }} onClick={onDrawerClose} size="small">
@@ -187,7 +194,8 @@ Sidebar.propTypes = {
   isMobile: PropTypes.bool,
   isSidebarOpen: PropTypes.bool.isRequired,
   onDrawerClose: PropTypes.func.isRequired,
-  setIsSettingsOpen: PropTypes.func.isRequired
+  setIsSettingsOpen: PropTypes.func.isRequired,
+  viewer: PropTypes.object
 };
 
 Sidebar.defaultProps = {