Fix variant details/create page sidebar (#2180)

locale/defaultMessages.json

@@ -1225,6 +1225,10 @@
     "context": "order refund amount, input button",
     "string": "Refund {currency} {amount}"
   },
+  "8GC/ah": {
+    "context": "variants section name",
+    "string": "Variants"
+  },
   "8HRy+U": {
     "string": "Category Description"
   },
@@ -2609,6 +2613,10 @@
   "IoDlcd": {
     "string": "Slug"
   },
+  "IqRBql": {
+    "context": "variant name",
+    "string": "New variant"
+  },
   "Irflxf": {
     "context": "window title",
     "string": "Create category"
@@ -5582,10 +5590,6 @@
     "context": "gift card history message",
     "string": "Gift card was deactivated by {deactivatedBy}"
   },
-  "gF7hbK": {
-    "context": "variant name",
-    "string": "New Variant"
-  },
   "gKdGxP": {
     "context": "error message",
     "string": "Only pre-authorized payments can be captured"

src/graphql/hooks.generated.ts

@@ -12445,6 +12445,9 @@ export const ProductVariantCreateDataDocument = gql`
     thumbnail {
       url
     }
+    defaultVariant {
+      id
+    }
     variants {
       id
       name

src/graphql/types.generated.ts

@@ -7693,7 +7693,7 @@ export type ProductVariantCreateDataQueryVariables = Exact<{
 }>;
 
 
-export type ProductVariantCreateDataQuery = { __typename: 'Query', product: { __typename: 'Product', id: string, name: string, media: Array<{ __typename: 'ProductMedia', id: string, sortOrder: number | null, url: string }> | null, channelListings: Array<{ __typename: 'ProductChannelListing', channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, productType: { __typename: 'ProductType', id: string, selectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null, nonSelectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null }, thumbnail: { __typename: 'Image', url: string } | null, variants: Array<{ __typename: 'ProductVariant', id: string, name: string, sku: string | null, media: Array<{ __typename: 'ProductMedia', id: string, url: string, type: ProductMediaType }> | null }> | null } | null };
+export type ProductVariantCreateDataQuery = { __typename: 'Query', product: { __typename: 'Product', id: string, name: string, media: Array<{ __typename: 'ProductMedia', id: string, sortOrder: number | null, url: string }> | null, channelListings: Array<{ __typename: 'ProductChannelListing', channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, productType: { __typename: 'ProductType', id: string, selectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null, nonSelectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null }, thumbnail: { __typename: 'Image', url: string } | null, defaultVariant: { __typename: 'ProductVariant', id: string } | null, variants: Array<{ __typename: 'ProductVariant', id: string, name: string, sku: string | null, media: Array<{ __typename: 'ProductMedia', id: string, url: string, type: ProductMediaType }> | null }> | null } | null };
 
 export type ProductMediaByIdQueryVariables = Exact<{
   productId: Scalars['ID'];

src/intl.ts

@@ -486,6 +486,11 @@ export const sectionNames = defineMessages({
     defaultMessage: "Translations",
     description: "translations section name",
   },
+  variants: {
+    id: "8GC/ah",
+    defaultMessage: "Variants",
+    description: "variants section name",
+  },
   vouchers: {
     id: "iUy2dx",
     defaultMessage: "Vouchers",

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -70,6 +70,7 @@ const messages = defineMessages({
 
 interface ProductVariantCreatePageProps {
   productId: string;
+  defaultVariantId?: string;
   disabled: boolean;
   errors: ProductErrorWithAttributesFragment[];
   header: string;
@@ -100,6 +101,7 @@ interface ProductVariantCreatePageProps {
 
 const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   productId,
+  defaultVariantId,
   disabled,
   errors,
   header,
@@ -177,7 +179,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 fallbackThumbnail={product?.thumbnail?.url}
                 variants={product?.variants}
                 productId={productId}
+                defaultVariantId={defaultVariantId}
                 onReorder={onVariantReorder}
+                isCreate={true}
               />
             </div>
             <div>

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -1,5 +1,4 @@
 import { Card, TableCell, TableRow } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
 import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
@@ -13,7 +12,7 @@ import {
   ProductVariantCreateDataQuery,
   ProductVariantDetailsQuery,
 } from "@saleor/graphql";
-import { makeStyles } from "@saleor/macaw-ui";
+import { sectionNames } from "@saleor/intl";
 import {
   productVariantAddUrl,
   productVariantEditUrl,
@@ -24,48 +23,8 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { renderCollection } from "../../../misc";
-
+import { messages } from "./messages";
-const useStyles = makeStyles(
+import { useStyles } from "./styles";
-  theme => ({
-    colAvatar: {
-      width: 64,
-    },
-    colName: {
-      paddingLeft: 0,
-    },
-    defaultVariant: {
-      color: fade(theme.palette.text.secondary, 0.6),
-      display: "block",
-    },
-    firstVariant: {
-      width: 104,
-    },
-    link: {
-      cursor: "pointer",
-    },
-    noHandle: {
-      "&&&": {
-        paddingRight: theme.spacing(3),
-      },
-      textAlign: "right",
-    },
-    tabActive: {
-      "& > td:first-child": {
-        "&:before": {
-          background: theme.palette.primary.main,
-          content: '""',
-          height: "100%",
-          left: 0,
-          position: "absolute",
-          top: 0,
-          width: 2,
-        },
-        position: "relative",
-      },
-    },
-  }),
-  { name: "ProductVariantNavigation" },
-);
 
 interface ProductVariantNavigationProps {
   current?: string;
@@ -95,13 +54,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
 
   return (
     <Card>
-      <CardTitle
+      <CardTitle title={intl.formatMessage(sectionNames.variants)} />
-        title={intl.formatMessage({
-          id: "1kdQdO",
-          defaultMessage: "Variants",
-          description: "section header",
-        })}
-      />
       <ResponsiveTable>
         <SortableTableBody onSortEnd={onReorder}>
           {renderCollection(variants, (variant, variantIndex) => {
@@ -117,7 +70,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
                 key={variant ? variant.id : "skeleton"}
                 index={variantIndex || 0}
                 className={classNames(classes.link, {
-                  [classes.tabActive]: isActive,
+                  [classes.rowActive]: isActive,
                 })}
                 href={
                   variant
@@ -133,11 +86,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
                   {variant ? variant.name || variant.sku : <Skeleton />}
                   {isDefault && (
                     <span className={classes.defaultVariant}>
-                      {intl.formatMessage({
+                      {intl.formatMessage(messages.defaultVariant)}
-                        id: "vZMs8f",
-                        defaultMessage: "Default",
-                        description: "default product variant indicator",
-                      })}
                     </span>
                   )}
                 </TableCell>
@@ -145,17 +94,13 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
             );
           })}
           {!isCreate ? (
-            <TableRow>
+            <TableRow className={classes.rowNew}>
               <TableCell colSpan={3}>
                 <Button
                   href={productVariantAddUrl(productId)}
                   data-test-id="button-add-variant"
                 >
-                  <FormattedMessage
+                  <FormattedMessage {...messages.addVariant} />
-                    id="3C3Nj5"
-                    defaultMessage="Add variant"
-                    description="button"
-                  />
                 </Button>
               </TableCell>
             </TableRow>
@@ -165,7 +110,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
                 alignRight
                 className={classNames(
                   classes.colAvatar,
-                  classes.tabActive,
+                  classes.rowActive,
                   classes.noHandle,
                   {
                     [classes.firstVariant]: variants?.length === 0,
@@ -175,11 +120,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
                 colSpan={2}
               />
               <TableCell className={classes.colName}>
-                <FormattedMessage
+                <FormattedMessage {...messages.newVariant} />
-                  id="gF7hbK"
-                  defaultMessage="New Variant"
-                  description="variant name"
-                />
               </TableCell>
             </TableRow>
           )}

src/products/components/ProductVariantNavigation/messages.ts

@@ -0,0 +1,19 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  defaultVariant: {
+    id: "vZMs8f",
+    defaultMessage: "Default",
+    description: "default product variant indicator",
+  },
+  addVariant: {
+    id: "3C3Nj5",
+    defaultMessage: "Add variant",
+    description: "button",
+  },
+  newVariant: {
+    id: "IqRBql",
+    defaultMessage: "New variant",
+    description: "variant name",
+  },
+});

src/products/components/ProductVariantNavigation/styles.ts

@@ -0,0 +1,38 @@
+import { fade } from "@material-ui/core/styles/colorManipulator";
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    colAvatar: {
+      width: 64,
+    },
+    colName: {
+      paddingLeft: 0,
+    },
+    defaultVariant: {
+      color: fade(theme.palette.text.secondary, 0.6),
+      display: "block",
+    },
+    firstVariant: {
+      width: 104,
+    },
+    link: {
+      cursor: "pointer",
+    },
+    noHandle: {
+      "&&&": {
+        paddingRight: theme.spacing(3),
+      },
+      textAlign: "right",
+    },
+    rowActive: {
+      borderLeft: `${theme.palette.primary.main} solid 2px`,
+    },
+    rowNew: {
+      "&:hover": {
+        backgroundColor: "unset !important",
+      },
+    },
+  }),
+  { name: "ProductVariantNavigation" },
+);

src/products/queries.ts

@@ -208,6 +208,9 @@ export const productVariantCreateQuery = gql`
       thumbnail {
         url
       }
+      defaultVariant {
+        id
+      }
       variants {
         id
         name

src/products/views/ProductVariantCreate.tsx

@@ -225,6 +225,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
       />
       <ProductVariantCreatePage
         productId={productId}
+        defaultVariantId={data?.product.defaultVariant?.id}
         disabled={disableForm}
         errors={variantCreateResult.data?.productVariantCreate.errors || []}
         header={intl.formatMessage({

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

@@ -186725,23 +186725,36 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
-                      colspan="3"
+                      colspan="2"
+                      data-test-id="table-cell-avatar"
                     >
-                      <a
+                      <div
-                        aria-disabled="false"
+                        class="Avatar-content-id Avatar-alignRight-id"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
                       >
-                        <span
+                        <div
-                          class="MuiButton-label-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          Add variant
+                          <svg
-                        </span>
+                            aria-hidden="true"
-                      </a>
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
+                    >
+                      New variant
                     </td>
                   </tr>
                 </tbody>
@@ -187714,23 +187727,36 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="3"
+                      colspan="2"
+                      data-test-id="table-cell-avatar"
                     >
-                      <a
+                      <div
-                        aria-disabled="false"
+                        class="Avatar-content-id Avatar-alignRight-id"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
                       >
-                        <span
+                        <div
-                          class="MuiButton-label-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          Add variant
+                          <svg
-                        </span>
+                            aria-hidden="true"
-                      </a>
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
+                    >
+                      New variant
                     </td>
                   </tr>
                 </tbody>
@@ -188703,23 +188729,36 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="3"
+                      colspan="2"
+                      data-test-id="table-cell-avatar"
                     >
-                      <a
+                      <div
-                        aria-disabled="false"
+                        class="Avatar-content-id Avatar-alignRight-id"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
                       >
-                        <span
+                        <div
-                          class="MuiButton-label-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          Add variant
+                          <svg
-                        </span>
+                            aria-hidden="true"
-                      </a>
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
+                    >
+                      New variant
                     </td>
                   </tr>
                 </tbody>
@@ -189656,23 +189695,36 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="3"
+                      colspan="2"
+                      data-test-id="table-cell-avatar"
                     >
-                      <a
+                      <div
-                        aria-disabled="false"
+                        class="Avatar-content-id Avatar-alignRight-id"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
                       >
-                        <span
+                        <div
-                          class="MuiButton-label-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          Add variant
+                          <svg
-                        </span>
+                            aria-hidden="true"
-                      </a>
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
+                    >
+                      New variant
                     </td>
                   </tr>
                 </tbody>
@@ -190512,23 +190564,36 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="3"
+                      colspan="2"
+                      data-test-id="table-cell-avatar"
                     >
-                      <a
+                      <div
-                        aria-disabled="false"
+                        class="Avatar-content-id Avatar-alignRight-id"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
                       >
-                        <span
+                        <div
-                          class="MuiButton-label-id"
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                         >
-                          Add variant
+                          <svg
-                        </span>
+                            aria-hidden="true"
-                      </a>
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              clip-rule="evenodd"
+                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
+                    >
+                      New variant
                     </td>
                   </tr>
                 </tbody>
@@ -227818,7 +227883,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-tabActive-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-rowActive-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -228022,7 +228087,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -229780,7 +229845,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-tabActive-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-rowActive-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -229984,7 +230049,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -231732,7 +231797,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-tabActive-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-rowActive-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -231936,7 +232001,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -233738,7 +233803,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                     </td>
                   </tr>
                   <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
+                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id MuiTableRow-hover-id"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"