djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix variant details/create page sidebar (#2180)

Browse source
This commit is contained in:
Dawid 2022-07-29 18:45:52 +02:00 committed by GitHub
parent c076d52f68
commit 3a85027934
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 234 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
locale/defaultMessages.json
View file

@ -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"

3
src/graphql/hooks.generated.ts
View file

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

2
src/graphql/types.generated.ts
View file

@ -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'];

5
src/intl.ts
View file

@ -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",

4
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

@ -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>

79
src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
View file

@ -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";
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",
},
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" },
);
import { messages } from "./messages";
import { useStyles } from "./styles";
interface ProductVariantNavigationProps {
current?: string;
@ -95,13 +54,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
return (
<Card>
<CardTitle
title={intl.formatMessage({
id: "1kdQdO",
defaultMessage: "Variants",
description: "section header",
})}
/>
<CardTitle title={intl.formatMessage(sectionNames.variants)} />
<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({
id: "vZMs8f",
defaultMessage: "Default",
description: "default product variant indicator",
})}
{intl.formatMessage(messages.defaultVariant)}
</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
id="3C3Nj5"
defaultMessage="Add variant"
description="button"
/>
<FormattedMessage {...messages.addVariant} />
</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
id="gF7hbK"
defaultMessage="New Variant"
description="variant name"
/>
<FormattedMessage {...messages.newVariant} />
</TableCell>
</TableRow>
)}

19
src/products/components/ProductVariantNavigation/messages.ts Normal file
View file

@ -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",
},
});

38
src/products/components/ProductVariantNavigation/styles.ts Normal file
View file

@ -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" },
);

3
src/products/queries.ts
View file

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

1
src/products/views/ProductVariantCreate.tsx
View file

@ -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({

219
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -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"
colspan="3"
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
colspan="2"
data-test-id="table-cell-avatar"
>
<a
aria-disabled="false"
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"
<div
class="Avatar-content-id Avatar-alignRight-id"
>
<span
class="MuiButton-label-id"
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
>
Add variant
</span>
</a>
<svg
aria-hidden="true"
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"
colspan="3"
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
>
<a
aria-disabled="false"
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"
<div
class="Avatar-content-id Avatar-alignRight-id"
>
<span
class="MuiButton-label-id"
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
>
Add variant
</span>
</a>
<svg
aria-hidden="true"
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"
colspan="3"
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
>
<a
aria-disabled="false"
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"
<div
class="Avatar-content-id Avatar-alignRight-id"
>
<span
class="MuiButton-label-id"
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
>
Add variant
</span>
</a>
<svg
aria-hidden="true"
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"
colspan="3"
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
>
<a
aria-disabled="false"
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"
<div
class="Avatar-content-id Avatar-alignRight-id"
>
<span
class="MuiButton-label-id"
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
>
Add variant
</span>
</a>
<svg
aria-hidden="true"
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"
colspan="3"
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
>
<a
aria-disabled="false"
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"
<div
class="Avatar-content-id Avatar-alignRight-id"
>
<span
class="MuiButton-label-id"
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
>
Add variant
</span>
</a>
<svg
aria-hidden="true"
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"