Merge pull request #737 from mirumee/fix/handle-attribute-errors

Fix handle attribute errors

schema.graphql

@@ -688,6 +688,7 @@ type BulkProductError {
   field: String
   message: String
   code: ProductErrorCode!
+  attributes: [ID!]
   index: Int
   warehouses: [ID!]
 }
@@ -696,6 +697,7 @@ type BulkStockError {
   field: String
   message: String
   code: ProductErrorCode!
+  attributes: [ID!]
   index: Int
 }
 
@@ -3744,6 +3746,7 @@ type ProductError {
   field: String
   message: String
   code: ProductErrorCode!
+  attributes: [ID!]
 }
 
 enum ProductErrorCode {
@@ -3755,6 +3758,7 @@ enum ProductErrorCode {
   GRAPHQL_ERROR
   INVALID
   NOT_PRODUCTS_IMAGE
+  NOT_PRODUCTS_VARIANT
   NOT_FOUND
   REQUIRED
   UNIQUE

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -4,7 +4,7 @@ import TextField from "@material-ui/core/TextField";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
-import Downshift from "downshift";
+import Downshift, { ControllerStateAndHelpers } from "downshift";
 import { filter } from "fuzzaldrin";
 import React from "react";
 
@@ -76,20 +76,27 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
 
   const [prevDisplayValue] = useStateFromProps(displayValue);
 
-  const handleChange = item =>
+  const handleChange = (
+    item: string,
+    stateAndHelpers: ControllerStateAndHelpers
+  ) => {
     onChange({
       target: {
         name,
         value: item
       }
     } as any);
+    stateAndHelpers.reset({
+      inputValue: item
+    });
+  };
 
   return (
     <DebounceAutocomplete debounceFn={fetchChoices}>
       {debounceFn => (
         <Downshift
           defaultInputValue={displayValue}
-          itemToString={() => displayValue}
+          itemToString={() => displayValue || ""}
           onInputValueChange={value => debounceFn(value)}
           onSelect={handleChange}
           selectedItem={value}
@@ -190,6 +197,7 @@ const SingleAutocompleteSelectField: React.FC<SingleAutocompleteSelectFieldProps
   ...rest
 }) => {
   const [query, setQuery] = React.useState("");
+
   if (fetchChoices) {
     return (
       <DebounceAutocomplete debounceFn={fetchChoices}>

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx

@@ -35,7 +35,7 @@ export interface SingleAutocompleteSelectFieldContentProps
   choices: SingleAutocompleteChoiceType[];
   displayCustomValue: boolean;
   emptyOption: boolean;
-  getItemProps: (options: GetItemPropsOptions) => void;
+  getItemProps: (options: GetItemPropsOptions) => any;
   highlightedIndex: number;
   inputValue: string;
   isCustomValueSelected: boolean;
@@ -164,9 +164,11 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
 
   React.useEffect(() => {
     setSlice(sliceSize);
-    anchor.current.scrollTo({
+    if (anchor.current?.scrollTo) {
-      top: 0
+      anchor.current.scrollTo({
-    });
+        top: 0
+      });
+    }
   }, [choices?.length]);
 
   React.useEffect(() => {
@@ -175,6 +177,10 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
     }
   }, [loading]);
 
+  const emptyOptionProps = getItemProps({
+    item: ""
+  });
+
   return (
     <Paper className={classes.root}>
       <div
@@ -188,10 +194,9 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
               <MenuItem
                 className={classes.menuItem}
                 component="div"
-                {...getItemProps({
-                  item: ""
-                })}
                 data-test="singleautocomplete-select-option"
+                data-test-type="empty"
+                {...emptyOptionProps}
               >
                 <Typography color="textSecondary">
                   <FormattedMessage defaultMessage="None" />
@@ -206,6 +211,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
                   item: inputValue
                 })}
                 data-test="singleautocomplete-select-option-add"
+                data-test-type="add"
                 onClick={add.onClick}
               >
                 <Add color="primary" className={classes.add} />
@@ -222,6 +228,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
                   item: inputValue
                 })}
                 data-test="singleautocomplete-select-option"
+                data-test-type="custom"
               >
                 <FormattedMessage
                   defaultMessage="Add new value: {value}"
@@ -254,6 +261,8 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
                     item: suggestion.value
                   })}
                   data-test="singleautocomplete-select-option"
+                  data-test-value={suggestion.value}
+                  data-test-type="option"
                 >
                   {suggestion.label}
                 </MenuItem>

src/fragments/errors.ts

@@ -7,6 +7,14 @@ export const productErrorFragment = gql`
   }
 `;
 
+export const productErrorWithAttributesFragment = gql`
+  ${productErrorFragment}
+  fragment ProductErrorWithAttributesFragment on ProductError {
+    ...ProductErrorFragment
+    attributes
+  }
+`;
+
 export const accountErrorFragment = gql`
   fragment AccountErrorFragment on AccountError {
     code

src/fragments/types/ProductErrorWithAttributesFragment.ts

@@ -0,0 +1,16 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ProductErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: ProductErrorWithAttributesFragment
+// ====================================================
+
+export interface ProductErrorWithAttributesFragment {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+  attributes: string[] | null;
+}

src/products/components/ProductAttributes/ProductAttributes.tsx

@@ -13,10 +13,11 @@ import MultiAutocompleteSelectField, {
 import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "@saleor/components/SingleAutocompleteSelectField";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
-import { maybe } from "@saleor/misc";
 import { ProductDetails_product_attributes_attribute_values } from "@saleor/products/types/ProductDetails";
 import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
+import { getProductErrorMessage } from "@saleor/utils/errors";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -33,6 +34,7 @@ export type ProductAttributeInput = FormsetAtomicData<
 export interface ProductAttributesProps {
   attributes: ProductAttributeInput[];
   disabled: boolean;
+  errors: ProductErrorWithAttributesFragment[];
   onChange: FormsetChange;
   onMultiChange: FormsetChange;
 }
@@ -125,6 +127,7 @@ function getSingleChoices(
 const ProductAttributes: React.FC<ProductAttributesProps> = ({
   attributes,
   disabled,
+  errors,
   onChange,
   onMultiChange
 }) => {
@@ -169,61 +172,69 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
         {expanded && attributes.length > 0 && (
           <>
             <Hr />
-            {attributes.map((attribute, attributeIndex) => (
+            {attributes.map((attribute, attributeIndex) => {
-              <React.Fragment key={attribute.id}>
+              const error = errors.find(err =>
-                {attributeIndex > 0 && <Hr />}
+                err.attributes?.includes(attribute.id)
-                <Grid className={classes.attributeSection} variant="uniform">
+              );
-                  <div
+
-                    className={classes.attributeSectionLabel}
+              return (
-                    data-test="product-attribute-label"
+                <React.Fragment key={attribute.id}>
-                  >
+                  {attributeIndex > 0 && <Hr />}
-                    <Typography>{attribute.label}</Typography>
+                  <Grid className={classes.attributeSection} variant="uniform">
-                  </div>
+                    <div
-                  <div data-test="product-attribute-value">
+                      className={classes.attributeSectionLabel}
-                    {attribute.data.inputType ===
+                      data-test="product-attribute-label"
-                    AttributeInputTypeEnum.DROPDOWN ? (
+                    >
-                      <SingleAutocompleteSelectField
+                      <Typography>{attribute.label}</Typography>
-                        choices={getSingleChoices(attribute.data.values)}
+                    </div>
-                        disabled={disabled}
+                    <div data-test="product-attribute-value">
-                        displayValue={maybe(
+                      {attribute.data.inputType ===
-                          () =>
+                      AttributeInputTypeEnum.DROPDOWN ? (
+                        <SingleAutocompleteSelectField
+                          choices={getSingleChoices(attribute.data.values)}
+                          disabled={disabled}
+                          displayValue={
                             attribute.data.values.find(
                               value => value.slug === attribute.value[0]
-                            ).name,
+                            )?.name || ""
-                          attribute.value[0]
+                          }
-                        )}
+                          emptyOption={!attribute.data.isRequired}
-                        emptyOption
+                          error={!!error}
-                        name={`attribute:${attribute.label}`}
+                          helperText={getProductErrorMessage(error, intl)}
-                        label={intl.formatMessage({
+                          name={`attribute:${attribute.label}`}
-                          defaultMessage: "Value",
+                          label={intl.formatMessage({
-                          description: "attribute value"
+                            defaultMessage: "Value",
-                        })}
+                            description: "attribute value"
-                        value={attribute.value[0]}
+                          })}
-                        onChange={event =>
+                          value={attribute.value[0]}
-                          onChange(attribute.id, event.target.value)
+                          onChange={event =>
-                        }
+                            onChange(attribute.id, event.target.value)
-                        allowCustomValues={!attribute.data.isRequired}
+                          }
-                      />
+                          allowCustomValues={!attribute.data.isRequired}
-                    ) : (
+                        />
-                      <MultiAutocompleteSelectField
+                      ) : (
-                        choices={getMultiChoices(attribute.data.values)}
+                        <MultiAutocompleteSelectField
-                        displayValues={getMultiDisplayValue(attribute)}
+                          choices={getMultiChoices(attribute.data.values)}
-                        label={intl.formatMessage({
+                          displayValues={getMultiDisplayValue(attribute)}
-                          defaultMessage: "Values",
+                          error={!!error}
-                          description: "attribute values"
+                          helperText={getProductErrorMessage(error, intl)}
-                        })}
+                          label={intl.formatMessage({
-                        name={`attribute:${attribute.label}`}
+                            defaultMessage: "Values",
-                        value={attribute.value}
+                            description: "attribute values"
-                        onChange={event =>
+                          })}
-                          onMultiChange(attribute.id, event.target.value)
+                          name={`attribute:${attribute.label}`}
-                        }
+                          value={attribute.value}
-                        allowCustomValues={!attribute.data.isRequired}
+                          onChange={event =>
-                      />
+                            onMultiChange(attribute.id, event.target.value)
-                    )}
+                          }
-                  </div>
+                          allowCustomValues={!attribute.data.isRequired}
-                </Grid>
+                        />
-              </React.Fragment>
+                      )}
-            ))}
+                    </div>
+                  </Grid>
+                </React.Fragment>
+              );
+            })}
           </>
         )}
       </CardContent>

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -10,13 +10,14 @@ import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocomplet
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
-import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import useFormset from "@saleor/hooks/useFormset";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import {
+  getAttributeInputFromProductType,
   getChoices,
   ProductAttributeValueChoices,
   ProductType
@@ -79,7 +80,7 @@ export interface ProductCreatePageSubmitData extends FormData {
 }
 
 interface ProductCreatePageProps {
-  errors: ProductErrorFragment[];
+  errors: ProductErrorWithAttributesFragment[];
   collections: SearchCollections_search_edges_node[];
   categories: SearchCategories_search_edges_node[];
   currency: string;
@@ -87,6 +88,7 @@ interface ProductCreatePageProps {
   fetchMoreCategories: FetchMoreProps;
   fetchMoreCollections: FetchMoreProps;
   fetchMoreProductTypes: FetchMoreProps;
+  initial?: Partial<FormData>;
   productTypes?: Array<{
     id: string;
     name: string;
@@ -118,6 +120,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   fetchMoreCollections,
   fetchMoreProductTypes,
   header,
+  initial,
   productTypes: productTypeChoiceList,
   saveButtonBarState,
   warehouses,
@@ -130,12 +133,21 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
 }: ProductCreatePageProps) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
+
+  const initialProductType = productTypeChoiceList?.find(
+    productType => initial?.productType === productType.id
+  );
+
   // Form values
   const {
     change: changeAttributeData,
     data: attributes,
     set: setAttributeData
-  } = useFormset<ProductAttributeInputData>([]);
+  } = useFormset<ProductAttributeInputData>(
+    initial?.productType
+      ? getAttributeInputFromProductType(initialProductType)
+      : []
+  );
   const {
     add: addStock,
     change: changeStockData,
@@ -154,6 +166,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   } = useMetadataChangeTrigger();
 
   const initialData: FormData = {
+    ...(initial || {}),
     availableForPurchase: "",
     basePrice: 0,
     category: "",
@@ -185,14 +198,20 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
     ProductAttributeValueChoices[]
   >([]);
 
-  const [selectedCategory, setSelectedCategory] = useStateFromProps("");
+  const [selectedCategory, setSelectedCategory] = useStateFromProps(
+    initial?.category || ""
+  );
 
   const [selectedCollections, setSelectedCollections] = useStateFromProps<
     MultiAutocompleteChoiceType[]
   >([]);
 
-  const [productType, setProductType] = React.useState<ProductType>(null);
+  const [productType, setProductType] = useStateFromProps<ProductType>(
-  const [selectedTaxType, setSelectedTaxType] = useStateFromProps(null);
+    initialProductType || null
+  );
+  const [selectedTaxType, setSelectedTaxType] = useStateFromProps(
+    initial?.taxCode || null
+  );
 
   const categories = getChoices(categoryChoiceList);
   const collections = getChoices(collectionChoiceList);
@@ -274,6 +293,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                   <ProductAttributes
                     attributes={attributes}
                     disabled={disabled}
+                    errors={errors}
                     onChange={handleAttributeChange}
                     onMultiChange={handleAttributeMultiChange}
                   />

src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx

@@ -0,0 +1,92 @@
+import placeholderImage from "@assets/images/placeholder255x255.png";
+import { collections } from "@saleor/collections/fixtures";
+import { fetchMoreProps, listActionsProps } from "@saleor/fixtures";
+import { product as productFixture } from "@saleor/products/fixtures";
+import { taxTypes } from "@saleor/storybook/stories/taxes/fixtures";
+import { warehouseList } from "@saleor/warehouses/fixtures";
+import Wrapper from "@test/wrapper";
+import { configure, mount } from "enzyme";
+import React from "react";
+
+import ProductUpdatePage, { ProductUpdatePageProps } from "./ProductUpdatePage";
+
+const product = productFixture(placeholderImage);
+import Adapter from "enzyme-adapter-react-16";
+configure({ adapter: new Adapter() });
+
+const onSubmit = jest.fn();
+
+const props: ProductUpdatePageProps = {
+  ...listActionsProps,
+  categories: [product.category],
+  collections,
+  defaultWeightUnit: "kg",
+  disabled: false,
+  errors: [],
+  fetchCategories: () => undefined,
+  fetchCollections: () => undefined,
+  fetchMoreCategories: fetchMoreProps,
+  fetchMoreCollections: fetchMoreProps,
+  header: product.name,
+  images: product.images,
+  onBack: () => undefined,
+  onDelete: () => undefined,
+  onImageDelete: () => undefined,
+  onImageUpload: () => undefined,
+  onSetDefaultVariant: () => undefined,
+  onSubmit,
+  onVariantAdd: () => undefined,
+  onVariantReorder: () => undefined,
+  onVariantShow: () => undefined,
+  onVariantsAdd: () => undefined,
+  onWarehouseConfigure: () => undefined,
+  placeholderImage,
+  product,
+  saveButtonBarState: "default",
+  taxTypes,
+  variants: product.variants,
+  warehouses: warehouseList
+};
+
+const selectors = {
+  dropdown: `[data-test="autocomplete-dropdown"]`,
+  empty: `[data-test-type="empty"]`,
+  input: `[data-test="product-attribute-value"] input`
+};
+
+describe("Product details page", () => {
+  it("can select empty option on attribute", () => {
+    const component = mount(
+      <Wrapper>
+        <ProductUpdatePage {...props} />
+      </Wrapper>
+    );
+    expect(component.find(selectors.dropdown).exists()).toBeFalsy();
+
+    component
+      .find(selectors.input)
+      .first()
+      .simulate("click");
+
+    expect(component.find(selectors.dropdown).exists()).toBeTruthy();
+
+    expect(component.find(selectors.empty).exists());
+
+    component
+      .find(selectors.empty)
+      .first()
+      .simulate("click");
+
+    expect(
+      component
+        .find(selectors.input)
+        .first()
+        .prop("value")
+    ).toEqual("");
+    component
+      .find("form")
+      .first()
+      .simulate("submit");
+    expect(onSubmit.mock.calls[0][0].attributes[0].value.length).toEqual(0);
+  });
+});

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -9,7 +9,7 @@ import Metadata from "@saleor/components/Metadata/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
-import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
@@ -58,7 +58,7 @@ import ProductVariants from "../ProductVariants";
 
 export interface ProductUpdatePageProps extends ListActions {
   defaultWeightUnit: string;
-  errors: ProductErrorFragment[];
+  errors: ProductErrorWithAttributesFragment[];
   placeholderImage: string;
   collections: SearchCollections_search_edges_node[];
   categories: SearchCategories_search_edges_node[];
@@ -296,6 +296,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                   {attributes.length > 0 && (
                     <ProductAttributes
                       attributes={attributes}
+                      errors={errors}
                       disabled={disabled}
                       onChange={handleAttributeChange}
                       onMultiChange={handleAttributeMultiChange}

src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx

@@ -8,10 +8,10 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "@saleor/components/SingleAutocompleteSelectField";
 import Skeleton from "@saleor/components/Skeleton";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { ProductVariant_attributes_attribute_values } from "@saleor/fragments/types/ProductVariant";
 import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
 import { commonMessages } from "@saleor/intl";
-import { VariantCreate_productVariantCreate_errors } from "@saleor/products/types/VariantCreate";
 import { getProductVariantAttributeErrorMessage } from "@saleor/utils/errors/product";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -27,7 +27,7 @@ export type VariantAttributeInput = FormsetAtomicData<
 interface ProductVariantAttributesProps {
   attributes: VariantAttributeInput[];
   disabled: boolean;
-  errors: VariantCreate_productVariantCreate_errors[];
+  errors: ProductErrorWithAttributesFragment[];
   onChange: FormsetChange<VariantAttributeInputData>;
 }
 
@@ -84,31 +84,45 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
           {attributes === undefined ? (
             <Skeleton />
           ) : (
-            attributes.map(attribute => (
+            attributes.map(attribute => {
-              <SingleAutocompleteSelectField
+              const error = errors.find(err =>
-                key={attribute.id}
+                err.attributes?.includes(attribute.id)
-                disabled={disabled}
+              );
-                displayValue={getAttributeDisplayValue(
+
-                  attribute.id,
+              return (
-                  attribute.value,
+                <SingleAutocompleteSelectField
-                  attributes
+                  key={attribute.id}
-                )}
+                  disabled={disabled}
-                label={attribute.label}
+                  displayValue={getAttributeDisplayValue(
-                name={`attribute:${attribute.id}`}
+                    attribute.id,
-                onChange={event => onChange(attribute.id, event.target.value)}
+                    attribute.value,
-                value={getAttributeValue(attribute.id, attributes)}
+                    attributes
-                choices={getAttributeValueChoices(attribute.id, attributes)}
+                  )}
-                allowCustomValues
+                  error={!!error}
-                data-test="variant-attribute-input"
+                  helperText={getProductVariantAttributeErrorMessage(
-              />
+                    error,
-            ))
+                    intl
+                  )}
+                  label={attribute.label}
+                  name={`attribute:${attribute.id}`}
+                  onChange={event => onChange(attribute.id, event.target.value)}
+                  value={getAttributeValue(attribute.id, attributes)}
+                  choices={getAttributeValueChoices(attribute.id, attributes)}
+                  allowCustomValues
+                  data-test="variant-attribute-input"
+                />
+              );
+            })
           )}
         </Grid>
         {errors.length > 0 && (
           <>
             <FormSpacer />
             {errors
-              .filter(error => error.field === "attributes")
+              .filter(
+                error =>
+                  error.field === "attributes" && error.attributes === null
+              )
               .map(error => (
                 <Typography color="error" key={error.code}>
                   {getProductVariantAttributeErrorMessage(error, intl)}

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -7,7 +7,7 @@ import Grid from "@saleor/components/Grid";
 import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
-import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import useFormset, {
   FormsetChange,
   FormsetData
@@ -48,7 +48,7 @@ export interface ProductVariantCreatePageSubmitData
 interface ProductVariantCreatePageProps {
   currencySymbol: string;
   disabled: boolean;
-  errors: ProductErrorFragment[];
+  errors: ProductErrorWithAttributesFragment[];
   header: string;
   product: ProductVariantCreateData_product;
   saveButtonBarState: ConfirmButtonTransitionState;

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -28,6 +28,9 @@ const useStyles = makeStyles(
     colName: {
       paddingLeft: 0
     },
+    firstVariant: {
+      width: 88
+    },
     link: {
       cursor: "pointer"
     },
@@ -126,7 +129,10 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
                 className={classNames(
                   classes.colAvatar,
                   classes.tabActive,
-                  classes.noHandle
+                  classes.noHandle,
+                  {
+                    [classes.firstVariant]: variants?.length === 0
+                  }
                 )}
                 thumbnail={null}
                 colSpan={2}

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -8,13 +8,13 @@ import { MetadataFormData } from "@saleor/components/Metadata";
 import Metadata from "@saleor/components/Metadata/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { ProductVariant } from "@saleor/fragments/types/ProductVariant";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import useFormset, {
   FormsetChange,
   FormsetData
 } from "@saleor/hooks/useFormset";
-import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate";
 import {
   getAttributeInputFromVariant,
   getStockInputFromVariant
@@ -56,7 +56,7 @@ export interface ProductVariantPageSubmitData
 interface ProductVariantPageProps {
   defaultWeightUnit: string;
   variant?: ProductVariant;
-  errors: VariantUpdate_productVariantUpdate_errors[];
+  errors: ProductErrorWithAttributesFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   loading?: boolean;
   placeholderImage?: string;

src/products/fixtures.ts

@@ -24,7 +24,7 @@ export const product: (
         inputType: AttributeInputTypeEnum.DROPDOWN,
         name: "Borders",
         slug: "Borders",
-        valueRequired: true,
+        valueRequired: false,
         values: [
           {
             __typename: "AttributeValue",

src/products/mutations.ts

@@ -3,6 +3,7 @@ import {
   bulkStockErrorFragment,
   exportErrorFragment,
   productErrorFragment,
+  productErrorWithAttributesFragment,
   stockErrorFragment
 } from "@saleor/fragments/errors";
 import {
@@ -159,12 +160,12 @@ export const useProductVariantSetDefaultMutation = makeMutation<
 >(productVariantSetDefault);
 
 export const productUpdateMutation = gql`
-  ${productErrorFragment}
+  ${productErrorWithAttributesFragment}
   ${productFragmentDetails}
   mutation ProductUpdate($id: ID!, $input: ProductInput!) {
     productUpdate(id: $id, input: $input) {
       errors: productErrors {
-        ...ProductErrorFragment
+        ...ProductErrorWithAttributesFragment
       }
       product {
         ...Product
@@ -179,7 +180,7 @@ export const useProductUpdateMutation = makeMutation<
 
 export const simpleProductUpdateMutation = gql`
   ${bulkStockErrorFragment}
-  ${productErrorFragment}
+  ${productErrorWithAttributesFragment}
   ${productFragmentDetails}
   ${stockErrorFragment}
   ${fragmentVariant}
@@ -194,7 +195,7 @@ export const simpleProductUpdateMutation = gql`
   ) {
     productUpdate(id: $id, input: $input) {
       errors: productErrors {
-        ...ProductErrorFragment
+        ...ProductErrorWithAttributesFragment
       }
       product {
         ...Product
@@ -202,7 +203,7 @@ export const simpleProductUpdateMutation = gql`
     }
     productVariantUpdate(id: $productVariantId, input: $productVariantInput) {
       errors: productErrors {
-        ...ProductErrorFragment
+        ...ProductErrorWithAttributesFragment
       }
       productVariant {
         ...ProductVariant
@@ -249,12 +250,12 @@ export const useSimpleProductUpdateMutation = makeMutation<
 >(simpleProductUpdateMutation);
 
 export const productCreateMutation = gql`
-  ${productErrorFragment}
+  ${productErrorWithAttributesFragment}
   ${productFragmentDetails}
   mutation ProductCreate($input: ProductCreateInput!) {
     productCreate(input: $input) {
       errors: productErrors {
-        ...ProductErrorFragment
+        ...ProductErrorWithAttributesFragment
       }
       product {
         ...Product
@@ -288,7 +289,7 @@ export const useVariantDeleteMutation = makeMutation<
 export const variantUpdateMutation = gql`
   ${bulkStockErrorFragment}
   ${fragmentVariant}
-  ${productErrorFragment}
+  ${productErrorWithAttributesFragment}
   mutation VariantUpdate(
     $addStocks: [StockInput!]!
     $removeStocks: [ID!]!
@@ -313,7 +314,7 @@ export const variantUpdateMutation = gql`
       }
     ) {
       errors: productErrors {
-        ...ProductErrorFragment
+        ...ProductErrorWithAttributesFragment
       }
       productVariant {
         ...ProductVariant
@@ -359,11 +360,11 @@ export const useVariantUpdateMutation = makeMutation<
 
 export const variantCreateMutation = gql`
   ${fragmentVariant}
-  ${productErrorFragment}
+  ${productErrorWithAttributesFragment}
   mutation VariantCreate($input: ProductVariantCreateInput!) {
     productVariantCreate(input: $input) {
       errors: productErrors {
-        ...ProductErrorFragment
+        ...ProductErrorWithAttributesFragment
       }
       productVariant {
         ...ProductVariant

src/products/types/ProductCreate.ts

@@ -12,6 +12,7 @@ export interface ProductCreate_productCreate_errors {
   __typename: "ProductError";
   code: ProductErrorCode;
   field: string | null;
+  attributes: string[] | null;
 }
 
 export interface ProductCreate_productCreate_product_attributes_attribute_values {

src/products/types/ProductUpdate.ts

@@ -12,6 +12,7 @@ export interface ProductUpdate_productUpdate_errors {
   __typename: "ProductError";
   code: ProductErrorCode;
   field: string | null;
+  attributes: string[] | null;
 }
 
 export interface ProductUpdate_productUpdate_product_attributes_attribute_values {

src/products/types/SimpleProductUpdate.ts

@@ -12,6 +12,7 @@ export interface SimpleProductUpdate_productUpdate_errors {
   __typename: "ProductError";
   code: ProductErrorCode;
   field: string | null;
+  attributes: string[] | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_values {
@@ -251,6 +252,7 @@ export interface SimpleProductUpdate_productVariantUpdate_errors {
   __typename: "ProductError";
   code: ProductErrorCode;
   field: string | null;
+  attributes: string[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_metadata {

src/products/types/VariantCreate.ts

@@ -12,6 +12,7 @@ export interface VariantCreate_productVariantCreate_errors {
   __typename: "ProductError";
   code: ProductErrorCode;
   field: string | null;
+  attributes: string[] | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_metadata {

src/products/types/VariantUpdate.ts

@@ -12,6 +12,7 @@ export interface VariantUpdate_productVariantUpdate_errors {
   __typename: "ProductError";
   code: ProductErrorCode;
   field: string | null;
+  attributes: string[] | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_metadata {

src/products/utils/handlers.ts

@@ -42,7 +42,7 @@ export function createAttributeChangeHandler(
     ]);
 
     triggerChange();
-    changeAttributeData(attributeId, [value]);
+    changeAttributeData(attributeId, value === "" ? [] : [value]);
   };
 }
 

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

@@ -8236,6 +8236,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AF"
             role="menuitem"
             tabindex="-1"
           >
@@ -8245,6 +8247,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AX"
             role="menuitem"
             tabindex="-1"
           >
@@ -8254,6 +8258,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AL"
             role="menuitem"
             tabindex="-1"
           >
@@ -8263,6 +8269,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="DZ"
             role="menuitem"
             tabindex="-1"
           >
@@ -8272,6 +8280,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AS"
             role="menuitem"
             tabindex="-1"
           >
@@ -8281,6 +8291,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AD"
             role="menuitem"
             tabindex="-1"
           >
@@ -8290,6 +8302,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AO"
             role="menuitem"
             tabindex="-1"
           >
@@ -8299,6 +8313,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AI"
             role="menuitem"
             tabindex="-1"
           >
@@ -8308,6 +8324,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AQ"
             role="menuitem"
             tabindex="-1"
           >
@@ -8317,6 +8335,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AG"
             role="menuitem"
             tabindex="-1"
           >
@@ -8388,6 +8408,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AF"
             role="menuitem"
             tabindex="-1"
           >
@@ -8397,6 +8419,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AX"
             role="menuitem"
             tabindex="-1"
           >
@@ -8406,6 +8430,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AL"
             role="menuitem"
             tabindex="-1"
           >
@@ -8415,6 +8441,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="DZ"
             role="menuitem"
             tabindex="-1"
           >
@@ -8424,6 +8452,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AS"
             role="menuitem"
             tabindex="-1"
           >
@@ -8433,6 +8463,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AD"
             role="menuitem"
             tabindex="-1"
           >
@@ -8442,6 +8474,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AO"
             role="menuitem"
             tabindex="-1"
           >
@@ -8451,6 +8485,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AI"
             role="menuitem"
             tabindex="-1"
           >
@@ -8460,6 +8496,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AQ"
             role="menuitem"
             tabindex="-1"
           >
@@ -8469,6 +8507,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AG"
             role="menuitem"
             tabindex="-1"
           >
@@ -8880,6 +8920,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option-add"
+            data-test-type="add"
             role="menuitem"
             tabindex="-1"
           >
@@ -8907,6 +8948,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AF"
             role="menuitem"
             tabindex="-1"
           >
@@ -8916,6 +8959,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AX"
             role="menuitem"
             tabindex="-1"
           >
@@ -8925,6 +8970,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AL"
             role="menuitem"
             tabindex="-1"
           >
@@ -8934,6 +8981,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="DZ"
             role="menuitem"
             tabindex="-1"
           >
@@ -8943,6 +8992,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AS"
             role="menuitem"
             tabindex="-1"
           >
@@ -8952,6 +9003,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AD"
             role="menuitem"
             tabindex="-1"
           >
@@ -8961,6 +9014,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AO"
             role="menuitem"
             tabindex="-1"
           >
@@ -8970,6 +9025,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AI"
             role="menuitem"
             tabindex="-1"
           >
@@ -8979,6 +9036,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AQ"
             role="menuitem"
             tabindex="-1"
           >
@@ -8988,6 +9047,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
             aria-disabled="false"
             class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
             data-test="singleautocomplete-select-option"
+            data-test-type="option"
+            data-test-value="AG"
             role="menuitem"
             tabindex="-1"
           >
@@ -140044,6 +140105,152 @@ Ctrl + K"
           <div
             class="CardSpacer-spacer-id"
           />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Attributes
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
+            >
+              <div
+                class="ProductAttributes-expansionBar-id"
+              >
+                <div
+                  class="ProductAttributes-expansionBarLabelContainer-id"
+                >
+                  <div
+                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
+                  >
+                    1 Attributes
+                  </div>
+                </div>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
+                  data-test="product-attributes-expand"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+              <hr
+                class="Hr-root-id"
+              />
+              <div
+                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
+              >
+                <div
+                  class="ProductAttributes-attributeSectionLabel-id"
+                  data-test="product-attribute-label"
+                >
+                  <div
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    Author
+                  </div>
+                </div>
+                <div
+                  data-test="product-attribute-value"
+                >
+                  <div
+                    class="SingleAutocompleteSelectField-container-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                    >
+                      <label
+                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
+                        data-shrink="false"
+                      >
+                        Value
+                      </label>
+                      <div
+                        aria-autocomplete="list"
+                        aria-expanded="false"
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                        role="combobox"
+                      >
+                        <input
+                          aria-invalid="true"
+                          autocomplete="off"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                          type="text"
+                          value=""
+                        />
+                        <div>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <g
+                              style="fill-rule:evenodd"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </g>
+                          </svg>
+                        </div>
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0.01px"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                      <p
+                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                      >
+                        Invalid value
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             class="CardSpacer-spacer-id"
           />
@@ -140252,8 +140459,8 @@ Ctrl + K"
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                 >
                   <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="false"
+                    data-shrink="true"
                   >
                     Product Type
                   </label>
@@ -140268,7 +140475,7 @@ Ctrl + K"
                       autocomplete="off"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                       type="text"
-                      value=""
+                      value="Candy"
                     />
                     <div>
                       <svg
@@ -140294,7 +140501,7 @@ Ctrl + K"
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -140303,7 +140510,7 @@ Ctrl + K"
                     </fieldset>
                   </div>
                   <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                   >
                     Invalid value
                   </p>
@@ -140980,7 +141187,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
                       colspan="2"
                     >
                       <div
@@ -144473,7 +144680,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                       data-shrink="false"
                     >
                       Color
@@ -144481,11 +144688,11 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     <div
                       aria-autocomplete="list"
                       aria-expanded="false"
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                       role="combobox"
                     >
                       <input
-                        aria-invalid="false"
+                        aria-invalid="true"
                         autocomplete="off"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         type="text"
@@ -144523,17 +144730,17 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                         </legend>
                       </fieldset>
                     </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
+                    >
+                      This field is required
+                    </p>
                   </div>
                 </div>
               </div>
               <div
                 class="FormSpacer-spacer-id"
               />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
-              >
-                All attributes should have value
-              </div>
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
               >
@@ -145969,7 +146176,7 @@ Ctrl + K"
                       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                         data-shrink="true"
                       >
                         Value
@@ -145977,11 +146184,11 @@ Ctrl + K"
                       <div
                         aria-autocomplete="list"
                         aria-expanded="false"
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                         role="combobox"
                       >
                         <input
-                          aria-invalid="false"
+                          aria-invalid="true"
                           autocomplete="off"
                           class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                           type="text"
@@ -146019,6 +146226,11 @@ Ctrl + K"
                           </legend>
                         </fieldset>
                       </div>
+                      <p
+                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                      >
+                        Invalid value
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -173713,7 +173925,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                       data-shrink="true"
                     >
                       Borders
@@ -173721,11 +173933,11 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     <div
                       aria-autocomplete="list"
                       aria-expanded="false"
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                       role="combobox"
                     >
                       <input
-                        aria-invalid="false"
+                        aria-invalid="true"
                         autocomplete="off"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         type="text"
@@ -173763,6 +173975,11 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                         </legend>
                       </fieldset>
                     </div>
+                    <p
+                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+                    >
+                      This field is required
+                    </p>
                   </div>
                 </div>
                 <div
@@ -173829,11 +174046,6 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
               <div
                 class="FormSpacer-spacer-id"
               />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
-              >
-                All attributes should have value
-              </div>
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
               >

src/storybook/stories/products/ProductCreatePage.tsx

@@ -68,13 +68,23 @@ storiesOf("Views / Products / Create product", module)
     <ProductCreatePage
       currency="USD"
       disabled={false}
-      errors={(["name", "productType", "category", "sku"] as Array<
+      errors={([
-        keyof ProductCreatePageSubmitData
+        "attributes",
-      >).map(field => ({
+        "name",
-        __typename: "ProductError",
+        "productType",
-        code: ProductErrorCode.INVALID,
+        "category",
-        field
+        "sku"
-      }))}
+      ] as Array<keyof ProductCreatePageSubmitData | "attributes">).map(
+        field => ({
+          __typename: "ProductError",
+          attributes:
+            field === "attributes"
+              ? [productTypes[0].productAttributes[0].id]
+              : null,
+          code: ProductErrorCode.INVALID,
+          field
+        })
+      )}
       header="Add product"
       collections={product.collections}
       fetchCategories={() => undefined}
@@ -83,6 +93,9 @@ storiesOf("Views / Products / Create product", module)
       fetchMoreCategories={fetchMoreProps}
       fetchMoreCollections={fetchMoreProps}
       fetchMoreProductTypes={fetchMoreProps}
+      initial={{
+        productType: productTypes[0].id
+      }}
       productTypes={productTypes}
       categories={[product.category]}
       onBack={() => undefined}

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -92,6 +92,7 @@ storiesOf("Views / Products / Product edit", module)
       {...props}
       product={{
         ...product,
+
         productType: {
           ...product.productType,
           hasVariants: false
@@ -137,6 +138,7 @@ storiesOf("Views / Products / Product edit", module)
     <ProductUpdatePage
       {...props}
       errors={([
+        "attributes",
         "basePrice",
         "category",
         "chargeTaxes",
@@ -148,10 +150,16 @@ storiesOf("Views / Products / Product edit", module)
         "seoTitle",
         "sku",
         "stockQuantity"
-      ] as Array<keyof ProductUpdatePageFormData>).map(field => ({
+      ] as Array<keyof ProductUpdatePageFormData | "attributes">).map(
-        __typename: "ProductError",
+        field => ({
-        code: ProductErrorCode.INVALID,
+          __typename: "ProductError",
-        field
+          attributes:
-      }))}
+            field === "attributes"
+              ? [product.attributes[0].attribute.id]
+              : null,
+          code: ProductErrorCode.INVALID,
+          field
+        })
+      )}
     />
   ));

src/storybook/stories/products/ProductVariantCreatePage.tsx

@@ -36,14 +36,17 @@ storiesOf("Views / Products / Create product variant", module)
       disabled={false}
       errors={[
         {
+          attributes: [product.productType.variantAttributes[0].id],
           code: ProductErrorCode.REQUIRED,
           field: "attributes"
         },
         {
+          attributes: null,
           code: ProductErrorCode.UNIQUE,
           field: "attributes"
         },
         {
+          attributes: null,
           code: ProductErrorCode.ALREADY_EXISTS,
           field: "sku"
         }

src/storybook/stories/products/ProductVariantPage.tsx

@@ -86,14 +86,17 @@ storiesOf("Views / Products / Product variant details", module)
       saveButtonBarState="default"
       errors={[
         {
+          attributes: [variant.attributes[0].attribute.id],
           code: ProductErrorCode.REQUIRED,
           field: "attributes"
         },
         {
+          attributes: null,
           code: ProductErrorCode.UNIQUE,
           field: "attributes"
         },
         {
+          attributes: null,
           code: ProductErrorCode.ALREADY_EXISTS,
           field: "sku"
         }

src/types/globalTypes.ts

@@ -705,6 +705,7 @@ export enum ProductErrorCode {
   INVALID = "INVALID",
   NOT_FOUND = "NOT_FOUND",
   NOT_PRODUCTS_IMAGE = "NOT_PRODUCTS_IMAGE",
+  NOT_PRODUCTS_VARIANT = "NOT_PRODUCTS_VARIANT",
   REQUIRED = "REQUIRED",
   UNIQUE = "UNIQUE",
   VARIANT_NO_DIGITAL_CONTENT = "VARIANT_NO_DIGITAL_CONTENT",

src/utils/errors/product.ts

@@ -83,8 +83,6 @@ export function getProductVariantAttributeErrorMessage(
 ): string {
   if (err) {
     switch (err.code) {
-      case ProductErrorCode.REQUIRED:
-        return intl.formatMessage(messages.attributeRequired);
       case ProductErrorCode.UNIQUE:
         return intl.formatMessage(messages.variantUnique);
       default: