Merge pull request #741 from mirumee/fix/default-indicator-1162

Add default variant indicator for variant nav

CHANGELOG.md

@@ -49,6 +49,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Change plural form of "informations" to "information" strings across the app #722 by @mmarkusik
 - Fix misaligned rich text draft controls - #725 by @orzechdev
 - Allow taxes to be configured per product - #728 by @dominik-zeglen
+- Add default variant indicator for variant nav - #741 by @krzysztofwolski
 - Fix style of product type attributes empty table - #744 by @orzechdev
 - Fix order draft back button redirect - #753 by @orzechdev
 

locale/defaultMessages.json

@@ -4516,6 +4516,10 @@
     "context": "button",
     "string": "Choose photos"
   },
+  "src_dot_products_dot_components_dot_ProductVariantNavigation_dot_1222345317": {
+    "context": "default product variant indicator",
+    "string": "Default"
+  },
   "src_dot_products_dot_components_dot_ProductVariantNavigation_dot_2153006789": {
     "context": "section header",
     "string": "Variants"
@@ -4550,14 +4554,14 @@
     "context": "product variant inventory",
     "string": "Unavailable"
   },
-  "src_dot_products_dot_components_dot_ProductVariants_dot_1120495519": {
-    "context": "default variant label",
-    "string": "default"
-  },
   "src_dot_products_dot_components_dot_ProductVariants_dot_1134347598": {
     "context": "product variant price",
     "string": "Price"
   },
+  "src_dot_products_dot_components_dot_ProductVariants_dot_1222345317": {
+    "context": "default product variant indicator",
+    "string": "Default"
+  },
   "src_dot_products_dot_components_dot_ProductVariants_dot_1252282784": {
     "context": "product variant inventory",
     "string": "{stockQuantity,plural,one{{stockQuantity} available} other{{stockQuantity} available}}"

src/fragments/products.ts

@@ -253,6 +253,9 @@ export const fragmentVariant = gql`
           url
         }
       }
+      defaultVariant {
+        id
+      }
     }
     sku
     stocks {

src/fragments/types/ProductVariant.ts

@@ -99,6 +99,11 @@ export interface ProductVariant_product_variants {
   images: (ProductVariant_product_variants_images | null)[] | null;
 }
 
+export interface ProductVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface ProductVariant_product {
   __typename: "Product";
   id: string;

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -1,6 +1,7 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import { makeStyles } from "@material-ui/core/styles";
+import { fade } from "@material-ui/core/styles/colorManipulator";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import CardTitle from "@saleor/components/CardTitle";
@@ -16,7 +17,7 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { maybe, renderCollection } from "../../../misc";
+import { renderCollection } from "../../../misc";
 import { ProductVariantCreateData_product_variants } from "../../types/ProductVariantCreateData";
 import { ProductVariantDetails_productVariant } from "../../types/ProductVariantDetails";
 
@@ -28,6 +29,10 @@ const useStyles = makeStyles(
     colName: {
       paddingLeft: 0
     },
+    defaultVariant: {
+      color: fade(theme.palette.text.secondary, 0.6),
+      display: "block"
+    },
     firstVariant: {
       width: 88
     },
@@ -57,6 +62,7 @@ const useStyles = makeStyles(
 
 interface ProductVariantNavigationProps {
   current?: string;
+  defaultVariantId?: string;
   fallbackThumbnail: string;
   variants:
     | ProductVariantDetails_productVariant[]
@@ -69,6 +75,7 @@ interface ProductVariantNavigationProps {
 const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props => {
   const {
     current,
+    defaultVariantId,
     fallbackThumbnail,
     variants,
     onAdd,
@@ -89,28 +96,37 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
       />
       <ResponsiveTable>
         <SortableTableBody onSortEnd={onReorder}>
-          {renderCollection(variants, (variant, variantIndex) => (
+          {renderCollection(variants, (variant, variantIndex) => {
-            <SortableTableRow
+            const isDefault = variant && variant.id === defaultVariantId;
-              hover={!!variant}
+            const isActive = variant && variant.id === current;
-              key={variant ? variant.id : "skeleton"}
+            return (
-              index={variantIndex || 0}
+              <SortableTableRow
-              className={classNames(classes.link, {
+                hover={!!variant}
-                [classes.tabActive]: variant && variant.id === current
+                key={variant ? variant.id : "skeleton"}
-              })}
+                index={variantIndex || 0}
-              onClick={variant ? () => onRowClick(variant.id) : undefined}
+                className={classNames(classes.link, {
-            >
+                  [classes.tabActive]: isActive
-              <TableCellAvatar
+                })}
-                className={classes.colAvatar}
+                onClick={variant ? () => onRowClick(variant.id) : undefined}
-                thumbnail={maybe(
+              >
-                  () => variant.images[0].url,
+                <TableCellAvatar
-                  fallbackThumbnail
+                  className={classes.colAvatar}
-                )}
+                  thumbnail={variant?.images[0]?.url || fallbackThumbnail}
-              />
+                />
-              <TableCell className={classes.colName}>
+                <TableCell className={classes.colName}>
-                {variant ? variant.name || variant.sku : <Skeleton />}
+                  {variant ? variant.name || variant.sku : <Skeleton />}
-              </TableCell>
+                  {isDefault && (
-            </SortableTableRow>
+                    <span className={classes.defaultVariant}>
-          ))}
+                      {intl.formatMessage({
+                        defaultMessage: "Default",
+                        description: "default product variant indicator"
+                      })}
+                    </span>
+                  )}
+                </TableCell>
+              </SortableTableRow>
+            );
+          })}
           {onAdd ? (
             <TableRow>
               <TableCell colSpan={3}>

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -15,6 +15,7 @@ import useFormset, {
   FormsetChange,
   FormsetData
 } from "@saleor/hooks/useFormset";
+import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate";
 import {
   getAttributeInputFromVariant,
   getStockInputFromVariant
@@ -54,13 +55,16 @@ export interface ProductVariantPageSubmitData
 }
 
 interface ProductVariantPageProps {
+  defaultVariantId?: string;
   defaultWeightUnit: string;
-  variant?: ProductVariant;
+  errors:
-  errors: ProductErrorWithAttributesFragment[];
+    | ProductErrorWithAttributesFragment[]
-  saveButtonBarState: ConfirmButtonTransitionState;
+    | VariantUpdate_productVariantUpdate_errors[];
+  header: string;
   loading?: boolean;
   placeholderImage?: string;
-  header: string;
+  saveButtonBarState: ConfirmButtonTransitionState;
+  variant?: ProductVariant;
   warehouses: WarehouseFragment[];
   onVariantReorder: ReorderAction;
   onAdd();
@@ -74,10 +78,11 @@ interface ProductVariantPageProps {
 }
 
 const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
+  defaultVariantId,
   defaultWeightUnit,
   errors,
-  loading,
   header,
+  loading,
   placeholderImage,
   saveButtonBarState,
   variant,
@@ -171,7 +176,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
           {maybe(() => variant.product.name)}
         </AppHeader>
         <PageHeader title={header}>
-          {variant?.product?.defaultVariant.id !== variant?.id && (
+          {variant?.product?.defaultVariant?.id !== variant?.id && (
             <ProductVariantSetDefault
               onSetDefaultVariant={onSetDefaultVariant}
             />
@@ -192,6 +197,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                   <div>
                     <ProductVariantNavigation
                       current={variant ? variant.id : undefined}
+                      defaultVariantId={defaultVariantId}
                       fallbackThumbnail={maybe(
                         () => variant.product.thumbnail.url
                       )}

src/products/components/ProductVariants/ProductVariants.tsx

@@ -355,8 +355,8 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                     {isDefault && (
                       <span className={classes.defaultVariant}>
                         {intl.formatMessage({
-                          defaultMessage: "default",
+                          defaultMessage: "Default",
-                          description: "default variant label"
+                          description: "default product variant indicator"
                         })}
                       </span>
                     )}
@@ -399,7 +399,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                     data-test="actions"
                     onClick={e => e.stopPropagation()}
                   >
-                    {variant?.id !== product?.defaultVariant.id && (
+                    {variant?.id !== product?.defaultVariant?.id && (
                       <ProductVariantSetDefault
                         onSetDefaultVariant={() => onSetDefaultVariant(variant)}
                       />

src/products/types/ProductVariantDetails.ts

@@ -99,14 +99,19 @@ export interface ProductVariantDetails_productVariant_product_variants {
   images: (ProductVariantDetails_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface ProductVariantDetails_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface ProductVariantDetails_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: ProductVariantDetails_productVariant_product_defaultVariant | null;
   images: (ProductVariantDetails_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: ProductVariantDetails_productVariant_product_thumbnail | null;
   variants: (ProductVariantDetails_productVariant_product_variants | null)[] | null;
+  defaultVariant: ProductVariantDetails_productVariant_product_defaultVariant | null;
 }
 
 export interface ProductVariantDetails_productVariant_stocks_warehouse {

src/products/types/SimpleProductUpdate.ts

@@ -346,14 +346,19 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
   images: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
   images: (SimpleProductUpdate_productVariantUpdate_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantUpdate_productVariant_product_thumbnail | null;
   variants: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null;
+  defaultVariant: SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_stocks_warehouse {
@@ -497,14 +502,19 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
   images: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant | null;
   images: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_thumbnail | null;
   variants: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants | null)[] | null;
+  defaultVariant: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_stocks_warehouse {
@@ -647,14 +657,19 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
   images: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant | null;
   images: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_thumbnail | null;
   variants: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants | null)[] | null;
+  defaultVariant: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_stocks_warehouse {
@@ -798,14 +813,19 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
   images: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
   images: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null;
   variants: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants | null)[] | null;
+  defaultVariant: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse {

src/products/types/VariantCreate.ts

@@ -106,14 +106,19 @@ export interface VariantCreate_productVariantCreate_productVariant_product_varia
   images: (VariantCreate_productVariantCreate_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface VariantCreate_productVariantCreate_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface VariantCreate_productVariantCreate_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: VariantCreate_productVariantCreate_productVariant_product_defaultVariant | null;
   images: (VariantCreate_productVariantCreate_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: VariantCreate_productVariantCreate_productVariant_product_thumbnail | null;
   variants: (VariantCreate_productVariantCreate_productVariant_product_variants | null)[] | null;
+  defaultVariant: VariantCreate_productVariantCreate_productVariant_product_defaultVariant | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_stocks_warehouse {

src/products/types/VariantImageAssign.ts

@@ -105,14 +105,19 @@ export interface VariantImageAssign_variantImageAssign_productVariant_product_va
   images: (VariantImageAssign_variantImageAssign_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface VariantImageAssign_variantImageAssign_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant | null;
   images: (VariantImageAssign_variantImageAssign_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: VariantImageAssign_variantImageAssign_productVariant_product_thumbnail | null;
   variants: (VariantImageAssign_variantImageAssign_productVariant_product_variants | null)[] | null;
+  defaultVariant: VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant | null;
 }
 
 export interface VariantImageAssign_variantImageAssign_productVariant_stocks_warehouse {

src/products/types/VariantImageUnassign.ts

@@ -105,14 +105,19 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_produc
   images: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface VariantImageUnassign_variantImageUnassign_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant | null;
   images: (VariantImageUnassign_variantImageUnassign_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: VariantImageUnassign_variantImageUnassign_productVariant_product_thumbnail | null;
   variants: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants | null)[] | null;
+  defaultVariant: VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant | null;
 }
 
 export interface VariantImageUnassign_variantImageUnassign_productVariant_stocks_warehouse {

src/products/types/VariantUpdate.ts

@@ -106,14 +106,19 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product_varia
   images: (VariantUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface VariantUpdate_productVariantUpdate_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
   images: (VariantUpdate_productVariantUpdate_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: VariantUpdate_productVariantUpdate_productVariant_product_thumbnail | null;
   variants: (VariantUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null;
+  defaultVariant: VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_stocks_warehouse {
@@ -257,14 +262,19 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product
   images: (VariantUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null;
 }
 
+export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
   images: (VariantUpdate_productVariantStocksUpdate_productVariant_product_images | null)[] | null;
   name: string;
   thumbnail: VariantUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null;
   variants: (VariantUpdate_productVariantStocksUpdate_productVariant_product_variants | null)[] | null;
+  defaultVariant: VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse {

src/products/views/ProductVariant.tsx

@@ -201,6 +201,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
       <WindowTitle title={data?.productVariant?.name} />
       <ProductVariantPage
         defaultWeightUnit={shop?.defaultWeightUnit}
+        defaultVariantId={data?.productVariant.product.defaultVariant?.id}
         errors={errors}
         onSetDefaultVariant={onSetDefaultVariant}
         saveButtonBarState={updateVariantOpts.status}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -146607,7 +146607,7 @@ Ctrl + K"
                       <span
                         class="ProductVariants-defaultVariant-id"
                       >
-                        default
+                        Default
                       </span>
                     </td>
                     <td
@@ -148901,7 +148901,7 @@ Ctrl + K"
                       <span
                         class="ProductVariants-defaultVariant-id"
                       >
-                        default
+                        Default
                       </span>
                     </td>
                     <td
@@ -159044,7 +159044,7 @@ Ctrl + K"
                       <span
                         class="ProductVariants-defaultVariant-id"
                       >
-                        default
+                        Default
                       </span>
                     </td>
                     <td
@@ -162966,7 +162966,7 @@ Ctrl + K"
                       <span
                         class="ProductVariants-defaultVariant-id"
                       >
-                        default
+                        Default
                       </span>
                     </td>
                     <td