reactioncommerce · machikoyasuda · Jan 26, 2019 · Jan 23, 2019 · Jan 23, 2019 · Jan 24, 2019
diff --git a/imports/plugins/core/router/client/theme/muiTheme.js b/imports/plugins/core/router/client/theme/muiTheme.js
@@ -68,6 +68,19 @@ export const rawMuiTheme = {
       root: {
         border: `1px solid ${colors.black10}`
       }
+    },
+    MuiCheckbox: {
+      root: {
+        color: colors.coolGrey500
+      },
+      colorSecondary: {
+        "&$checked": {
+          color: colors.coolGrey500
+        },
+        "&$disabled": {
+          color: colors.coolGrey100
+        }
+      }
     }
   }
 };

diff --git a/imports/plugins/core/tags/client/components/TagDataTable.js b/imports/plugins/core/tags/client/components/TagDataTable.js
@@ -13,6 +13,7 @@ import TextInput from "@reactioncommerce/components/TextInput/v1";
 import Button from "@reactioncommerce/components/Button/v1";
 import { i18next } from "/client/api";
 import { pagination } from "./util/pagination";
+import TagTableSelect from "./TagTableSelect";
 
 const CheckboxTable = checkboxHOC(ReactTable);
 
@@ -32,7 +33,7 @@ const FilterTextInput = styled.div`
 
 const BulkActionsSelect = styled.div`
   min-width: 150px;
-  margin-left: 20px;
+  margin-right: 20px;
 `;
 
 const PaginationContainer = styled.div`
@@ -44,6 +45,39 @@ const PaginationContainer = styled.div`
   }
 `;
 
+const TableContainer = styled.div`
+  .ReactTable {
+    border: none;
+  }
+
+  .ReactTable .rt-th, .ReactTable .rt-td {
+    padding: 0px 5px;
+  }
+
+  .ReactTable .rt-tbody .rt-td {
+    border: none;
+  }
+
+  .ReactTable .rt-thead .rt-th, .ReactTable .rt-thead .rt-td {
+    border: none;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .ReactTable .rt-thead.-header {
+    border: none;
+  }
+
+  .ReactTable .rt-tr-group {
+    border: none;
+  }
+
+  .ReactTable .rt-thead.-header:first-child .rt-th:first-child {
+    justify-content: center;
+  }
+`;
+
 /**
  * @file TagDataTable is a React Component wrapper around {@link https://react-table.js.org} ReactTable.
  * Any functionality from ReactTable should be available in SortableTable out of the box, but may require styling.
@@ -236,7 +270,7 @@ class TagDataTable extends Component {
       const option = bulkActions.find((opt) => opt.value === action);
 
       Alerts.alert({
-        title: `${option.label} ${selection.length} item(s)`,
+        title: i18next.t(`admin.tags.${option.value}Action`, { count: selection.length }),
         type: "warning",
         showCancelButton: true
       }, async (isConfirm) => {
@@ -417,11 +451,14 @@ class TagDataTable extends Component {
       ...variablesProp
     };
     const checkboxProps = {
+      SelectInputComponent: TagTableSelect,
+      SelectAllInputComponent: TagTableSelect,
       selectType: "checkbox",
       selectAll: this.state.selectAll,
       isSelected: this.isRowSelected,
       toggleSelection: this.handleToggleSelection,
-      toggleAll: this.handleToggleAll
+      toggleAll: this.handleToggleAll,
+      selectWidth: 64
     };
 
 
@@ -464,10 +501,10 @@ class TagDataTable extends Component {
           const { hasNextPage, hasPreviousPage, loadNextPage, loadPreviousPage } = pageInfo;
 
           return (
-            <div className="rui rui-sortable-table">
+            <TableContainer>
               <TableHeader>
-                {this.renderTableFilter(resultCount)}
                 {resultCount > 0 && this.renderBulkActionsSelect()}
+                {this.renderTableFilter(resultCount)}
               </TableHeader>
               <CheckboxTable
                 {...checkboxProps}
@@ -541,7 +578,7 @@ class TagDataTable extends Component {
                   <ChevronRightIcon />
                 </Button>
               </PaginationContainer>
-            </div>
+            </TableContainer>
           );
         }}
       </Query>

diff --git a/imports/plugins/core/tags/client/components/TagDataTableColumn.js b/imports/plugins/core/tags/client/components/TagDataTableColumn.js
@@ -3,14 +3,23 @@ import PropTypes from "prop-types";
 import { i18next } from "/client/api";
 import { Components, registerComponent, withMoment } from "@reactioncommerce/reaction-components";
 import { applyTheme } from "@reactioncommerce/components/utils";
-import styled from "styled-components";
+import colors from "/imports/plugins/core/router/client/theme/colors.js";
+import styled, { css } from "styled-components";
+import CircleIcon from "mdi-material-ui/CheckboxBlankCircle";
 
 const Cell = styled.div`
   display: flex;
   align-items: center;
   height: 100%;
 `;
 
+const CenteredCell = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+
 const EnabledLabel = styled.span`
   padding-left: 8px;
 `;
@@ -29,7 +38,10 @@ const HeroMediaImage = styled.img`
   height: 30px
   border-radius: 2px;
   border: ${applyTheme("HeroMediaSmall.border")}
+`;
 
+const StatusIcon = styled(({ isVisible, ...rest }) => <CircleIcon {...rest} />)`
+  ${({ isVisible }) => (isVisible && css`color: ${colors.forestGreen300}`) || css`color: ${colors.black40}`};
 `;
 
 class TagDataTableColumn extends Component {
@@ -47,15 +59,15 @@ class TagDataTableColumn extends Component {
     if (renderColumn === "isVisible") {
       return (
         <Cell>
-          <Components.Icon icon="fa fa-circle" className={row.value ? "valid" : "error"} />
+          <StatusIcon isVisible={row.value} fontSize="small" />
           <EnabledLabel>{i18next.t(row.value ? "admin.tags.visible" : "admin.tags.hidden")}</EnabledLabel>
         </Cell>
       );
     } else if (renderColumn === "edit") {
       return (
-        <Cell>
+        <CenteredCell>
           <Components.Icon icon="fa fa-pencil" />
-        </Cell>
+        </CenteredCell>
       );
     } else if (renderColumn === "heroMediaUrl") {
       return (

diff --git a/imports/plugins/core/tags/client/components/TagTableSelect.js b/imports/plugins/core/tags/client/components/TagTableSelect.js
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Checkbox from "@material-ui/core/Checkbox";
+import CheckboxCheckedIcon from "mdi-material-ui/CheckBoxOutline";
+
+/**
+ * @name TagTableSelect
+ * @method
+ * @summary Tag table select component, compatible with react table
+ * @param {Object} props Props
+ * @returns {Node} React component
+ */
+export default function TagTableSelect(props) {
+  return (
+    <Checkbox
+      checked={props.checked}
+      checkedIcon={<CheckboxCheckedIcon />}
+      onClick={(event) => {
+        const { shiftKey } = event;
+        event.stopPropagation();
+        props.onClick(props.id, shiftKey, props.row);
+      }}
+      onChange={() => { }}
+    />
+  );
+}
+
+TagTableSelect.propTypes = {
+  // Checked prop is required to be named as such for React table compatibility
+  // eslint-disable-next-line react/boolean-prop-naming
+  checked: PropTypes.bool,
+  id: PropTypes.string,
+  onClick: PropTypes.func,
+  row: PropTypes.object
+};
diff --git a/imports/plugins/core/tags/client/pages/TagSettingsPageWithData.js b/imports/plugins/core/tags/client/pages/TagSettingsPageWithData.js
@@ -31,9 +31,9 @@ class TagSettings extends Component {
     super(props);
 
     this.bulkActions = [
-      { value: "disable", label: i18next.t("admin.routing.disable") },
-      { value: "enable", label: i18next.t("admin.routing.enable") },
-      { value: "delete", label: i18next.t("admin.routing.delete") }
+      { value: "hidden", label: i18next.t("admin.tags.hidden") },
+      { value: "visible", label: i18next.t("admin.tags.visible") },
+      { value: "delete", label: i18next.t("admin.tags.delete") }
     ];
 
     this.tableRef = React.createRef();
@@ -67,7 +67,7 @@ class TagSettings extends Component {
     let mutation = updateTagMutation;
 
     // Escape early if you don't have a valid action
-    if (!["enable", "disable", "delete"].includes(action)) {
+    if (!["visible", "hidden", "delete"].includes(action)) {
       return Promise.reject(`Invalid bulk action: ${action}`);
     }
 
@@ -82,12 +82,12 @@ class TagSettings extends Component {
         shopId
       };
 
-      // For enable / disable we need to supply the required fields for
+      // For visible / hidden we need to supply the required fields for
       // the `UpdateTagInput`
-      if (action === "enable" || action === "disable") {
+      if (action === "visible" || action === "hidden") {
         input = {
           ...input,
-          isVisible: action === "enable",
+          isVisible: action === "visible",
           name: item.name,
           displayTitle: item.displayTitle
         };
@@ -150,7 +150,7 @@ class TagSettings extends Component {
 
       if (field === "isVisible") {
         colWidth = 110;
-        headerLabel = "";
+        headerLabel = i18next.t("admin.tags.headers.status");
       }
 
       // https://react-table.js.org/#/story/cell-renderers-custom-components

diff --git a/imports/plugins/core/tags/register.js b/imports/plugins/core/tags/register.js
@@ -9,6 +9,7 @@ Reaction.registerPackage({
   name: "reaction-tags",
   icon: "fa fa-tag",
   autoEnable: true,
+  version: "1.0.0",
   graphQL: {
     resolvers,
     schemas

diff --git a/imports/plugins/core/tags/server/i18n/en.json b/imports/plugins/core/tags/server/i18n/en.json
@@ -15,6 +15,12 @@
             "delete": "Delete",
             "visible": "Visible",
             "hidden": "Hidden",
+            "visibleAction": "Make {{count}} tag visible to customers",
+            "visibleAction_plural": "Make {{count}} tags visible to customers",
+            "hiddenAction": "Hide {{count}} tag from customers",
+            "hiddenAction_plural": "Hide {{count}} tags from customers",
+            "deleteAction": "Delete {{count}} tag",
+            "deleteAction_plural": "Delete {{count}} tags",
             "form": {
               "name": "Tag name",
               "nameHelpText": "The unique name for the tag",

diff --git a/imports/plugins/core/tags/server/no-meteor/mutations/addTag.js b/imports/plugins/core/tags/server/no-meteor/mutations/addTag.js
@@ -14,7 +14,7 @@ import getSlug from "/imports/plugins/core/core/server/Reaction/getSlug";
  */
 export default async function addTag(context, input) {
   // Check for owner or admin permissions from the user before allowing the mutation
-  const { shopId, name, isVisible, displayTitle, metafields } = input;
+  const { shopId, name, isVisible, displayTitle, metafields, heroMediaUrl } = input;
   const { appEvents, collections, userHasPermission } = context;
   const { Tags } = collections;
 
@@ -32,6 +32,7 @@ export default async function addTag(context, input) {
     metafields,
     name,
     displayTitle,
+    heroMediaUrl,
     shopId,
     createdAt: now,
     updatedAt: now

diff --git a/imports/plugins/core/tags/server/no-meteor/schemas/schema.graphql b/imports/plugins/core/tags/server/no-meteor/schemas/schema.graphql
@@ -19,6 +19,9 @@ input AddTagInput {
 
   "Tag metafields"
   metafields: [MetafieldInput]
+
+  "Hero media URL"
+  heroMediaUrl: String
 }
 
 type AddTagPayload {