Feat bulk actions UI updates

imports/plugins/included/product-admin/client/components/ProductTable.js

@@ -8,13 +8,17 @@ import ImportIcon from "mdi-material-ui/Download";
 import { useDropzone } from "react-dropzone";
 import { i18next } from "/client/api";
 import { Session } from "meteor/session";
+import _ from "lodash";
 import Chip from "@reactioncommerce/catalyst/Chip";
 import withCreateProduct from "../hocs/withCreateProduct";
 
 const useStyles = makeStyles((theme) => ({
   leftIcon: {
     marginRight: theme.spacing(1)
   },
+  leftChip: {
+    marginRight: theme.spacing(1)
+  },
   helpText: {
     marginLeft: "20px",
     letterSpacing: "0.28px",
@@ -38,10 +42,12 @@ function ProductTable({ onCreateProduct }) {
   const [isFiltered, setFiltered] = useState(false);
   const [isClosed, setClosed] = useState(true);
   const [filteredProductIdsCount, setFilteredProductIdsCount] = useState(0);
+  const [noProductsFoundError, setNoProductsFoundError] = useState(false);
 
   const onDrop = (accepted) => {
     if (accepted.length === 0) return;
     setFiles(accepted);
+    setNoProductsFoundError(false);
   };
 
   const importFiles = (newFiles) => {
@@ -74,6 +80,8 @@ function ProductTable({ onCreateProduct }) {
             Session.set("filterByProductIds", productIds);
             setClosed(true);
             setFiltered(true);
+            const selectedProductIds = _.uniq(productIds);
+            Session.set("productGrid/selectedProducts", selectedProductIds);
           });
       };
       return;
@@ -119,12 +127,64 @@ function ProductTable({ onCreateProduct }) {
     setClosed(false);
   };
 
+  const setFilteredCount = (count) => {
+    if (count === 0) {
+      setFiltered(false);
+      Session.delete("filterByProductIds");
+      setFiles([]);
+      setNoProductsFoundError(true);
+    } else {
+      setFilteredProductIdsCount(count);
+    }
+    return;
+  };
+
   const iconComponents = {
     iconDismiss: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /><path d="M0 0h24v24H0z" fill="none" /></svg>
   };
 
+  const renderMissedFilterItems = () => {
+    if (!Session.get("filterByProductIds")) {
+      return "";
+    }
+    const filterProductIds = Session.get("filterByProductIds").length;
+    if (isFiltered && filteredProductIdsCount < filterProductIds) {
+      const missing = filterProductIds - filteredProductIdsCount;
+      return (
+        <Grid item sm={12}>
+          <InlineAlert
+            isDismissable
+            components={iconComponents}
+            alertType="error"
+            title={i18next.t("admin.productListIdsNotFound", { missing, all: filterProductIds }) || "Product Ids not found"}
+            message={i18next.t("admin.missingFilteredProducts", { count: missing })}
+          />
+        </Grid>
+      );
+    }
+    return "";
+  };
+
+  const renderNoProductsFoundError = () => {
+    if (noProductsFoundError) {
+      return (
+        <Grid item sm={12}>
+          <InlineAlert
+            isDismissable
+            components={iconComponents}
+            alertType="error"
+            title={i18next.t("admin.noProductsFoundTitle") || "No Product Ids found"}
+            message={i18next.t("admin.noProductsFoundText")}
+          />
+        </Grid>
+      );
+    }
+    return "";
+  };
+
   return (
     <Grid container spacing={3}>
+      {renderNoProductsFoundError()}
       <Grid item sm={12} style={{ display: displayCard }}>
         <Card raised>
           <CardHeader
@@ -140,7 +200,7 @@ function ProductTable({ onCreateProduct }) {
             { files.length > 0 ? (
               <Grid container spacing={1} className={classes.cardContainer}>
                 <Grid item sm={12}>
-                  {files.map((file) => <Chip label={file.name} onDelete={() => handleDelete(file.name)} />)}
+                  {files.map((file, idx) => <Chip label={file.name} key={idx} className={classes.leftChip} onDelete={() => handleDelete(file.name)} />)}
                 </Grid>
                 <Grid item sm={12}>
                   <Button
@@ -194,10 +254,11 @@ function ProductTable({ onCreateProduct }) {
           />
         </Grid>
       ) : "" }
+      {renderMissedFilterItems()}
       <Grid item sm={12}>
         <Components.ProductsAdmin
           onShowFilterByFile={() => closeCard()}
-          setFilteredProductIdsCount={setFilteredProductIdsCount}
+          setFilteredProductIdsCount={setFilteredCount}
           files={files}
           handleDelete={handleDelete}
           isFiltered={isFiltered}

imports/plugins/included/product-admin/server/i18n/en.json

@@ -7,6 +7,10 @@
         "createProduct": "Create product",
         "productListFiltered": "Product list filtered",
         "showingFilteredProducts": "Showing {{count}} found products from imported file(s).",
+        "productListIdsNotFound": "{{missing}} of {{all}} products not found",
+        "missingFilteredProducts": "{{count}} product IDs could not be found in the catalog.",
+        "noProductsFoundTitle": "No products found",
+        "noProductsFoundText": "No product IDs could be found in the catalog.",
         "productAdmin": {
           "details": "Details",
           "metadata": "Metadata",

imports/plugins/included/product-variant/components/productGrid.js

@@ -25,6 +25,9 @@ import Chip from "@reactioncommerce/catalyst/Chip";
 import withStyles from "@material-ui/core/styles/withStyles";
 
 const styles = (theme) => ({
+  leftChip: {
+    marginRight: theme.spacing(1)
+  },
   toolbar: {
     paddingLeft: 0,
     paddingRight: 0,
@@ -228,12 +231,12 @@ class ProductGrid extends Component {
   }
 
   renderFiles() {
-    const { files, handleDelete, isFiltered } = this.props;
+    const { files, handleDelete, isFiltered, classes } = this.props;
 
     if (isFiltered) {
       return (
         <div>
-          {files.map((file) => <Chip label={file.name} onDelete={() => handleDelete(file.name)} />)}
+          {files.map((file, idx) => <Chip label={file.name} key={idx} className={classes.leftChip} onDelete={() => handleDelete(file.name)} />)}
         </div>
       );
     }

imports/plugins/included/product-variant/components/products.js

@@ -16,7 +16,7 @@ import { getTagIds as getIds } from "/lib/selectors/tags";
 class Products extends Component {
   static propTypes = {
     canLoadMoreProducts: PropTypes.bool,
-    files: PropTypes.arrayOf(PropTypes.file),
+    files: PropTypes.arrayOf(PropTypes.object),
     handleDelete: PropTypes.func,
     isFiltered: PropTypes.bool,
     isProductsSubscriptionReady: PropTypes.bool,