feat: 4868 - tag management operator UI

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

@@ -17,8 +17,6 @@ import {
 import { Translation } from "/imports/plugins/core/ui/client/components";
 
 const Drawer = styledMUI(MUIDrawer, { paper: "Paper" })`
-  width: ${applyTheme("Sidebar.drawerWidth")};
-  flex-shrink: 0;
   .Paper {
     width: ${applyTheme("Sidebar.drawerWidth")};
   }

imports/client/ui/layouts/Dashboard.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
+import styled, { css, injectGlobal } from "styled-components";
 import styledMUI from "styled-components-mui";
 import { ContainerQuery } from "react-container-query";
 import MUIAppBar from "@material-ui/core/AppBar";
@@ -20,6 +20,13 @@ const query = {
   }
 };
 
+// Remove the 10px fontSize from the html element as it affects fonts that rely on rem
+injectGlobal`
+  html {
+    font-size: inherit;
+  }
+`;
+
 const Container = styled.div`
   display: flex;
 `;
@@ -29,13 +36,14 @@ const Container = styled.div`
 // for DOM elements and prints warnings in the console. Someday there may be a better solution.
 // See https://github.com/styled-components/styled-components/issues/305
 const Main = styled(({ children, isMobile, isSidebarOpen, ...divProps }) => (<div {...divProps}>{children}</div>))`
+  width: 100vw;
   background-color: ${applyTheme("Layout.pageBackgroundColor")};
   flex-grow: 1;
   transition: ${(props) =>
     (props.isSidebarOpen && props.isMobile !== true
-      ? "margin 225ms cubic-bezier(0, 0, 0.2, 1) 0ms"
-      : "margin 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms")};
-  margin-left: ${(props) => (!props.isSidebarOpen && props.isMobile === false ? "-264px" : 0)};
+      ? "padding 225ms cubic-bezier(0, 0, 0.2, 1) 0ms"
+      : "padding 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms")};
+  padding-left: ${(props) => (props.isSidebarOpen && props.isMobile === false ? "280px" : 0)};
 `;
 
 const MainContent = styled.div`

imports/collections/schemas/tags.js

@@ -88,7 +88,12 @@ export const Tag = new SimpleSchema({
   "displayTitle": {
     type: String,
     optional: true
-  }
+  },
+  "featuredProductIds": {
+    type: Array,
+    optional: true
+  },
+  "featuredProductIds.$": String
 });
 
 registerSchema("Tag", Tag);

imports/plugins/core/core/server/no-meteor/schemas/tag.graphql

@@ -47,7 +47,9 @@ type Tag implements Node & Deletable {
 
   "A string of the title to be displayed on a Tag Listing Page"
   displayTitle: String
-
+
+  "A list of the IDs of top products in this tag"
+  featuredProductIds: [ID]
 }
 
 "The fields by which you are allowed to sort any query that returns a `TagConnection`"
@@ -78,7 +80,7 @@ extend type Query {
   tag(
     "Slug or ID of Tag"
     slugOrId: String,
-    
+
     "Set to true if you want to include tags that have isVisible set to false"
     shouldIncludeInvisible: Boolean = false
   ): Tag

imports/plugins/core/graphql/lib/hocs/withOpaqueShopId.js

@@ -0,0 +1,21 @@
+import { composeWithTracker } from "@reactioncommerce/reaction-components";
+import { Reaction } from "/client/api";
+import Logger from "/client/modules/logger";
+import getOpaqueIds from "/imports/plugins/core/core/client/util/getOpaqueIds";
+
+const composer = (props, onData) => {
+  const shopId = Reaction.getShopId();
+
+  getOpaqueIds([{ namespace: "Shop", id: shopId }])
+    .then(([opaqueShopId]) => {
+      onData(null, {
+        shopId: opaqueShopId
+      });
+      return null;
+    })
+    .catch((error) => {
+      Logger.error(error);
+    });
+};
+
+export default composeWithTracker(composer);

imports/plugins/core/graphql/server/no-meteor/util/applyPaginationToMongoAggregation.js

@@ -0,0 +1,90 @@
+const DEFAULT_LIMIT = 20;
+
+/**
+ * Inspired by https://www.reindex.io/blog/relay-graphql-pagination-with-mongodb/
+ * @name applyPaginationToMongoAggregation
+ * @method
+ * @memberof GraphQL/ResolverUtilities
+ * @summary Adds `skip` and `limit` to a MongoDB Aggregation as necessary, based on GraphQL
+ *   `first` and `last` params
+ * @param {Object} aggregationParams An object containing the collection and aggregation pipeline
+ * @param {MongoCollection} [aggregationParams.collection] - Mongo collection is run the aggregation on
+ * @param {Array} [aggregationParams.pipeline] - Mongo aggregation pipeline array
+ * @param {Object} args GraphQL query arguments
+ * @param {Number} totalCount Total count of docs that match the query, after applying the before/after filter
+ * @return {Promise<Object>} `{ pageInfo }`
+ */
+export default async function applyPaginationToMongoAggregation(aggregationParams, { first, last } = {}, totalCount) {
+  const { collection, pipeline } = aggregationParams;
+
+  if (first && last) throw new Error("Request either `first` or `last` but not both");
+
+  // Enforce a `first: 20` limit if no user-supplied limit, using the DEFAULT_LIMIT
+  const limit = first || last || DEFAULT_LIMIT;
+
+  let skip = 0;
+  if (last && totalCount > last) skip = totalCount - last;
+
+  let hasNextPage = null;
+  let hasPreviousPage = null;
+  if (last) {
+    if (skip === 0) {
+      hasPreviousPage = false;
+    } else {
+      // For backward pagination, we can find out whether there is a previous page here, but we can't
+      // find out whether there's a next page because the cursor has already had "before" filtering
+      // added. Code external to this function will need to determine whether there are any documents
+      // after that "before" ID.
+
+      const facet = {
+        $facet: {
+          nodes: [
+            { $limit: limit + 1 },
+            { $skip: skip - 1 }
+          ]
+        }
+      };
+
+      const result = await collection.aggregate([...pipeline, facet]).toArray();
+      const { nodes } = (result && result[0]) || { nodes: [] };
+      hasPreviousPage = nodes.length > limit;
+    }
+  } else {
+    // For forward pagination, we can find out whether there is a next page here, but we can't
+    // find out whether there's a previous page because the cursor has already had "after" filtering
+    // added. Code external to this function will need to determine whether there are any documents
+    // before that "after" ID.
+    const facet = {
+      $facet: {
+        nodes: [
+          { $limit: limit + 1 }
+        ]
+      }
+    };
+
+    const result = await collection.aggregate([...pipeline, facet]).toArray();
+    const { nodes } = (result && result[0]) || { nodes: [] };
+    hasNextPage = nodes.length > limit;
+  }
+
+  // Now apply actual limit + skip
+  const facet = {
+    $facet: {
+      nodes: [
+        { $limit: limit },
+        { $skip: skip || 0 }
+      ],
+      pageInfo: [
+        { $count: "totalCount" }
+      ]
+    }
+  };
+
+  const results = await collection.aggregate([...pipeline, facet]).toArray();
+
+  return {
+    hasNextPage,
+    hasPreviousPage,
+    results
+  };
+}

imports/plugins/core/graphql/server/no-meteor/util/getPaginatedAggregateResponse.js

@@ -0,0 +1,36 @@
+import applyPaginationToMongoAggregation from "./applyPaginationToMongoAggregation";
+
+/**
+ * Resolvers that return multiple documents in the form of a connection should construct a
+ * MongoDB query, pass that cursor to this function, and then return the result.
+ *
+ * @name getPaginatedResponse
+ * @method
+ * @memberof GraphQL/ResolverUtilities
+ * @summary Given a MongoDB cursor, adds skip, limit, sort, and other filters as necessary
+ *   based on GraphQL resolver arguments.
+ * @param {Object} aggregationParams An object containing the collection and aggregation pipeline
+ * @param {MongoCollection} [aggregationParams.collection] - Mongo collection is run the aggregation on
+ * @param {Array} [aggregationParams.pipeline] - Mongo aggregation pipeline array
+ * @param {Object} args Connection arguments from GraphQL query
+ * @return {Promise<Object>} `{ nodes, pageInfo, totalCount }`
+ */
+export default async function getPaginatedAggregateResponse(aggregationParams, args) {
+  const totalCountAfterOrBefore = 0;
+  const { results, hasPreviousPage, hasNextPage } = await applyPaginationToMongoAggregation(aggregationParams, args, totalCountAfterOrBefore);
+  const { nodes, pageInfo: { totalCount } } = results[0];
+
+  // Figure out proper hasNext/hasPrevious
+  const pageInfo = {
+    hasPreviousPage: hasPreviousPage || false,
+    hasNextPage: hasNextPage || false
+  };
+
+  const count = nodes.length;
+  if (count) {
+    pageInfo.startCursor = nodes[0]._id;
+    pageInfo.endCursor = nodes[count - 1]._id;
+  }
+
+  return { nodes, pageInfo, totalCount };
+}

imports/plugins/core/graphql/server/no-meteor/util/index.js

@@ -4,7 +4,9 @@
  */
 
 export { default as applyPaginationToMongoCursor } from "./applyPaginationToMongoCursor";
+export { default as applyPaginationToMongoAggregation } from "./applyPaginationToMongoAggregation";
 export { default as getConnectionTypeResolvers } from "./getConnectionTypeResolvers";
+export { default as getPaginatedAggregateResponse } from "./getPaginatedAggregateResponse";
 export { default as getPaginatedResponse } from "./getPaginatedResponse";
 export { default as namespaces } from "./namespaces";
 export { default as optimizeIdOnly } from "./optimizeIdOnly";

imports/plugins/core/router/client/browserRouter.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import { ThemeProvider } from "styled-components";
+import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
 import { matchPath } from "react-router";
 import { Router as ReactRouter } from "react-router-dom";
 import { ApolloProvider } from "react-apollo";
@@ -19,6 +20,7 @@ import { MetaData } from "/lib/api/router/metadata";
 import { Router } from "../lib";
 import appComponents from "./appComponents";
 import theme from "./theme";
+import muiTheme from "./theme/muiTheme";
 
 const { history } = Router;
 
@@ -178,7 +180,9 @@ export function initBrowserRouter() {
               <TranslationProvider>
                 <ComponentsProvider value={appComponents}>
                   <ThemeProvider theme={theme}>
-                    <Components.App children={Router.reactComponents} />
+                    <MuiThemeProvider theme={muiTheme}>
+                      <Components.App children={Router.reactComponents} />
+                    </MuiThemeProvider>
                   </ThemeProvider>
                 </ComponentsProvider>
               </TranslationProvider>

imports/plugins/core/router/client/theme/defaultTheme.js

@@ -47,7 +47,7 @@ const rui_components = {
     companyNameColor: colors.reactionBlue,
     companyNameBorderBottom: colors.reactionBlue200,
     dividerHeight: "20px",
-    drawerWidth: "264px",
+    drawerWidth: "280px",
     iconBarWidth,
     iconColor: colors.coolGrey300,
     listItemIconFontSize: "20px",
@@ -74,6 +74,13 @@ const rui_components = {
       ${colors.coolGrey100} ${iconBarWidth},
       ${colors.coolGrey100} 100%
     )`
+  },
+  MediaUploader: {
+    backgroundColor: colors.black02,
+    border: `1px solid ${colors.black20}`
+  },
+  HeroMediaSmall: {
+    border: `1px solid ${colors.reactionBlue}`
   }
 };
 

imports/plugins/core/router/client/theme/muiTheme.js

@@ -0,0 +1,75 @@
+import { defaultComponentTheme } from "@reactioncommerce/components";
+import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
+import colors from "./colors";
+
+const { rui_typography: typography } = defaultComponentTheme;
+
+export const rawMuiTheme = {
+  palette: {
+    primary: {
+      light: colors.coolGrey300,
+      main: colors.coolGrey,
+      dark: colors.coolGrey400
+    },
+    secondary: {
+      light: colors.coolGrey300,
+      main: colors.coolGrey,
+      dark: colors.coolGrey400
+    }
+  },
+  typography: {
+    fontFamily: typography.bodyText.fontFamily,
+    fontWeightLight: 400,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    useNextVariants: true
+  },
+  shadows: [
+    "none",
+    "0px 2px 2px 0px rgba(0,0,0,0.05)",
+    "0px 3px 6px 0px rgba(0,0,0,0.05)",
+    "0px 5px 10px 0 rgba(0,0,0,0.05);",
+    "0px 8px 16px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);",
+    "0px 13px 26px 0 rgba(0,0,0,0.05);"
+  ],
+  // Override default props
+  props: {
+    MuiAppBar: {
+      elevation: 3
+    }
+  },
+  // Override defined theme properties
+  overrides: {
+    MuiAppBar: {
+      colorDefault: {
+        backgroundColor: colors.white
+      }
+    },
+    MuiCard: {
+      root: {
+        border: `1px solid ${colors.black10}`
+      }
+    }
+  }
+};
+
+export default createMuiTheme(rawMuiTheme);