Product editor fixes

imports/plugins/included/product-admin/client/blocks/ProductHeader.js

@@ -13,10 +13,6 @@ import { makeStyles, Box, Divider } from "@material-ui/core";
 import useProduct from "../hooks/useProduct";
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2)
-  },
   breadcrumbs: {
     display: "flex",
     alignItems: "center",
@@ -104,12 +100,10 @@ function ProductHeader({ shouldDisplayStatus }) {
   }
 
   return (
-    <div className={classes.root}>
+    <>
       <Box
         display="flex"
         alignItems="center"
-        paddingRight={2}
-        paddingLeft={2}
       >
         <Box
           display="flex"
@@ -184,7 +178,7 @@ function ProductHeader({ shouldDisplayStatus }) {
           archiveMenuItem
         }
       </Menu>
-    </div>
+    </>
   );
 }
 

imports/plugins/included/product-admin/client/blocks/VariantList.js

@@ -19,17 +19,64 @@ const useStyles = makeStyles((theme) => ({
   listItemContainer: {
     "&:hover $listItemAction": {
       display: "block"
+    },
+    [theme.breakpoints.up("md")]: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2)
     }
   },
   listItem: {
-    paddingLeft: theme.spacing(7)
+    "&$selected $listItemPrimaryText, &$selected:hover $listItemPrimaryText": {
+      fontWeight: theme.typography.fontWeightBold
+    },
+    [theme.breakpoints.up("xs")]: {
+      paddingLeft: theme.spacing(8)
+    },
+    [theme.breakpoints.up("md")]: {
+      "paddingLeft": theme.spacing(7),
+      "&$selected": {
+        backgroundColor: "transparent"
+      },
+      "&$selected:hover": {
+        backgroundColor: "white"
+      }
+    }
+  },
+  listItemButton: {
+    "transition": theme.transitions.create("background-color", {
+      duration: theme.transitions.duration.shortest
+    }),
+    "&:hover": {
+      "textDecoration": "none",
+      "backgroundColor": "white",
+      "boxShadow": theme.shadows[2],
+      "borderRadius": theme.shape.borderRadius,
+      "@media (hover: none)": {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        borderRadius: 0
+      }
+    }
   },
   nested: {
-    paddingLeft: theme.spacing(8)
+    [theme.breakpoints.up("md")]: {
+      paddingLeft: theme.spacing(6)
+    },
+    [theme.breakpoints.up("xs")]: {
+      paddingLeft: theme.spacing(4)
+    }
   },
   listItemAction: {
-    display: "none"
-  }
+    [theme.breakpoints.up("md")]: {
+      display: "none"
+    }
+  },
+  /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
+  focusVisible: {},
+  /* Pseudo-class applied to the `ListItemText`'s `primary label` when `selected`. */
+  listItemPrimaryText: {},
+  /* Pseudo-class applied to the root element if `selected={true}`. */
+  selected: {}
 }));
 
 /**
@@ -51,25 +98,26 @@ function getItemSecondaryLabel({ isVisible }) {
  */
 export default function VariantList() {
   const {
+    currentVariant,
     onArchiveProductVariants,
     onCreateVariant,
     onToggleVariantVisibility,
     onCloneProductVariants,
     onRestoreProduct,
     product,
-    variant: currentVariant
+    variant: variantProp
   } = useProduct();
   const classes = useStyles();
   const history = useHistory();
   const [expandedIds, setExpandedIds] = useState([]);
 
 
   useEffect(() => {
-    if (currentVariant) {
-      setExpandedIds((prevState) => [...prevState, currentVariant._id]);
+    if (variantProp) {
+      setExpandedIds((prevState) => [...prevState, variantProp._id]);
     }
   }, [
-    currentVariant
+    variantProp
   ]);
 
   const renderVariantTree = useCallback((variants, parentVariant) => {
@@ -95,17 +143,25 @@ export default function VariantList() {
             <ListItem
               component="nav"
               ContainerProps={{
-                className: classes.listItemContainer,
+                className: clsx({
+                  [classes.listItemContainer]: true,
+                  [classes.nested]: Boolean(parentVariant)
+                }),
                 isExpanded,
                 hasChildren,
                 onArrowButtonClick: () => toggleExpand(variant._id)
               }}
               ContainerComponent={VariantListItemContainer}
+              classes={{
+                root: classes.listItem,
+                button: classes.listItemButton,
+                selected: classes.selected
+              }}
               className={clsx({
-                [classes.listItem]: true,
-                [classes.nested]: Boolean(parentVariant)
+                // [classes.nested]: Boolean(parentVariant)
               })}
               button
+              selected={currentVariant && (currentVariant._id === variant._id)}
               onClick={() => {
                 const url = getPDPUrl(product._id, variant._id, parentVariant && parentVariant._id);
                 history.push(url);
@@ -116,6 +172,9 @@ export default function VariantList() {
               }}
             >
               <ListItemText
+                primaryTypographyProps={{
+                  className: classes.listItemPrimaryText
+                }}
                 primary={variant.optionTitle || variant.title || "Untitled"}
                 secondary={getItemSecondaryLabel(variant)}
               />
@@ -153,6 +212,7 @@ export default function VariantList() {
   }, [
     expandedIds,
     classes,
+    currentVariant,
     product,
     onArchiveProductVariants,
     onCreateVariant,

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

@@ -9,10 +9,10 @@ import {
 import ChevronDown from "mdi-material-ui/ChevronDown";
 import ChevronRight from "mdi-material-ui/ChevronRight";
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   expandButton: {
     position: "absolute",
-    left: 0,
+    left: theme.spacing(2),
     top: "50%",
     transform: "translateY(-50%)",
     zIndex: 1

imports/plugins/included/product-admin/client/graphql/fragments/productVariant.js

@@ -0,0 +1,33 @@
+import gql from "graphql-tag";
+
+export default gql`
+  fragment ProductVariant on ProductVariant {
+    _id
+    attributeLabel
+    barcode
+    height
+    index
+    isDeleted
+    isVisible
+    length
+    metafields {
+      key
+      value
+    }
+    minOrderQuantity
+    optionTitle
+    originCountry
+    shop {
+      _id
+    }
+    sku
+    title
+    updatedAt
+    weight
+    width
+    isTaxable
+    taxCode
+    taxDescription
+  }
+`;
+

imports/plugins/included/product-admin/client/graphql/fragments/productWithVariants.js

@@ -0,0 +1,48 @@
+import gql from "graphql-tag";
+import ProductVariant from "./productVariant";
+
+export default gql`
+  fragment Product on Product {
+    _id
+    currentProductHash
+    description
+    isDeleted
+    isVisible
+    metaDescription
+    metafields {
+      key
+      value
+    }
+    originCountry
+    pageTitle
+    productType
+    publishedAt
+    publishedProductHash
+    shop {
+      _id
+    }
+    slug
+    socialMetadata {
+      message
+      service
+    }
+    supportedFulfillmentTypes
+    tagIds
+    tags {
+      nodes {
+        _id
+        name
+      }
+    }
+    title
+    updatedAt
+    vendor
+    variants {
+      ...ProductVariant
+      options {
+        ...ProductVariant
+      }
+    }
+  }
+  ${ProductVariant}
+`;

imports/plugins/included/product-admin/client/graphql/mutations/archiveProductVariants.js

@@ -0,0 +1,11 @@
+import gql from "graphql-tag";
+
+export default gql`
+  mutation archiveProductVariants($input: ArchiveProductVariantsInput!) {
+    archiveProductVariants(input: $input) {
+      variants {
+        _id
+      }
+    }
+  }
+`;

imports/plugins/included/product-admin/client/graphql/mutations/cloneProductVariants.js

@@ -0,0 +1,11 @@
+import gql from "graphql-tag";
+
+export default gql`
+  mutation cloneProductVariants($input: CloneProductVariantsInput!) {
+    cloneProductVariants(input: $input) {
+      variants {
+        _id
+      }
+    }
+  }
+`;

imports/plugins/included/product-admin/client/graphql/mutations/createProductVariant.js

@@ -0,0 +1,13 @@
+import gql from "graphql-tag";
+import ProductVariant from "../fragments/productVariant";
+
+export default gql`
+  mutation createProductVariant($input: CreateProductVariantInput!) {
+    createProductVariant(input: $input) {
+      variant {
+        ...ProductVariant
+      }
+    }
+  }
+  ${ProductVariant}
+`;

imports/plugins/included/product-admin/client/graphql/mutations/updateProduct.js

@@ -1,11 +1,13 @@
 import gql from "graphql-tag";
+import Product from "../fragments/productWithVariants";
 
 export default gql`
   mutation updateProduct($input: UpdateProductInput!){
     updateProduct(input: $input){
       product {
-        isVisible
+        ...Product
       }
     }
-}
+  }
+  ${Product}
 `;

imports/plugins/included/product-admin/client/graphql/mutations/updateProductVariant.js

@@ -0,0 +1,13 @@
+import gql from "graphql-tag";
+import ProductVariant from "../fragments/productVariant";
+
+export default gql`
+  mutation updateProductVariant($input: UpdateProductVariantInput!) {
+    updateProductVariant(input: $input) {
+      variant {
+        ...ProductVariant
+      }
+    }
+  }
+  ${ProductVariant}
+`;

imports/plugins/included/product-admin/client/graphql/mutations/updateProductVariantPrices.js

@@ -0,0 +1,13 @@
+import gql from "graphql-tag";
+
+export default gql`
+  mutation updateProductVariantPrices($input: UpdateProductVariantPricesInput!) {
+    updateProductVariantPrices(input: $input) {
+      variant {
+        _id
+        price
+        compareAtPrice
+      }
+    }
+  }
+`;

imports/plugins/included/product-admin/client/graphql/queries/product.js

@@ -0,0 +1,11 @@
+import gql from "graphql-tag";
+import Product from "../fragments/productWithVariants";
+
+export default gql`
+  query product($productId: ID!, $shopId: ID!) {
+    product(productId: $productId, shopId: $shopId) {
+      ...Product
+    }
+  }
+  ${Product}
+`;