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

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

Browse source 
Add default variant indicator for variant nav
This commit is contained in:
Dawid Tarasiuk 2020-10-13 19:33:42 +02:00 committed by GitHub
commit b7b5cb9d69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 136 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

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

12
locale/defaultMessages.json
View file

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

3
src/fragments/products.ts
View file

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

5
src/fragments/types/ProductVariant.ts
View file

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

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

@ -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) => (
<SortableTableRow
hover={!!variant}
key={variant ? variant.id : "skeleton"}
index={variantIndex || 0}
className={classNames(classes.link, {
[classes.tabActive]: variant && variant.id === current
})}
onClick={variant ? () => onRowClick(variant.id) : undefined}
>
<TableCellAvatar
className={classes.colAvatar}
thumbnail={maybe(
() => variant.images[0].url,
fallbackThumbnail
)}
/>
<TableCell className={classes.colName}>
{variant ? variant.name || variant.sku : <Skeleton />}
</TableCell>
</SortableTableRow>
))}
{renderCollection(variants, (variant, variantIndex) => {
const isDefault = variant && variant.id === defaultVariantId;
const isActive = variant && variant.id === current;
return (
<SortableTableRow
hover={!!variant}
key={variant ? variant.id : "skeleton"}
index={variantIndex || 0}
className={classNames(classes.link, {
[classes.tabActive]: isActive
})}
onClick={variant ? () => onRowClick(variant.id) : undefined}
>
<TableCellAvatar
className={classes.colAvatar}
thumbnail={variant?.images[0]?.url || fallbackThumbnail}
/>
<TableCell className={classes.colName}>
{variant ? variant.name || variant.sku : <Skeleton />}
{isDefault && (
<span className={classes.defaultVariant}>
{intl.formatMessage({
defaultMessage: "Default",
description: "default product variant indicator"
})}
</span>
)}
</TableCell>
</SortableTableRow>
);
})}
{onAdd ? (
<TableRow>
<TableCell colSpan={3}>

18
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -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: ProductErrorWithAttributesFragment[];
saveButtonBarState: ConfirmButtonTransitionState;
errors:
| ProductErrorWithAttributesFragment[]
| 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
)}

6
src/products/components/ProductVariants/ProductVariants.tsx
View file

@ -355,8 +355,8 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
{isDefault && (
<span className={classes.defaultVariant}>
{intl.formatMessage({
defaultMessage: "default",
description: "default variant label"
defaultMessage: "Default",
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)}
/>

7
src/products/types/ProductVariantDetails.ts
View file

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

28
src/products/types/SimpleProductUpdate.ts
View file

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

7
src/products/types/VariantCreate.ts
View file

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

7
src/products/types/VariantImageAssign.ts
View file

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

7
src/products/types/VariantImageUnassign.ts
View file

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

14
src/products/types/VariantUpdate.ts
View file

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

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

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

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

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