Add default variant indicator for variant nav

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;
@@ -107,6 +112,7 @@ export interface ProductVariant_product {
   name: string;
   thumbnail: ProductVariant_product_thumbnail | null;
   variants: (ProductVariant_product_variants | null)[] | null;
+  defaultVariant: ProductVariant_product_defaultVariant | null;
 }
 
 export interface ProductVariant_stocks_warehouse {

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";
@@ -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 variant label"
+                      })}
+                    </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,
@@ -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/types/ProductVariantDetails.ts

@@ -99,6 +99,11 @@ 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;
@@ -107,6 +112,7 @@ export interface ProductVariantDetails_productVariant_product {
   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,6 +346,11 @@ 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;
@@ -354,6 +359,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
   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,6 +503,11 @@ 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;
@@ -505,6 +516,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
   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,6 +659,11 @@ 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;
@@ -655,6 +672,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
   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,6 +816,11 @@ 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;
@@ -806,6 +829,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
   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,6 +106,11 @@ 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;
@@ -114,6 +119,7 @@ export interface VariantCreate_productVariantCreate_productVariant_product {
   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,6 +105,11 @@ 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;
@@ -113,6 +118,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_product {
   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,6 +105,11 @@ 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;
@@ -113,6 +118,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_produc
   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,6 +106,11 @@ 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;
@@ -114,6 +119,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product {
   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,6 +263,11 @@ 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;
@@ -265,6 +276,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product
   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}