Use dedicated error fragment

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/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/ProductErrorFragment.ts

@@ -10,7 +10,6 @@ import { ProductErrorCode } from "./../../types/globalTypes";
 
 export interface ProductErrorFragment {
   __typename: "ProductError";
-  attributeId: string | null;
   code: ProductErrorCode;
   field: string | null;
 }

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,7 +13,7 @@ import MultiAutocompleteSelectField, {
 import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "@saleor/components/SingleAutocompleteSelectField";
-import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+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";
@@ -35,7 +35,7 @@ export type ProductAttributeInput = FormsetAtomicData<
 export interface ProductAttributesProps {
   attributes: ProductAttributeInput[];
   disabled: boolean;
-  errors: ProductErrorFragment[];
+  errors: ProductErrorWithAttributesFragment[];
   onChange: FormsetChange;
   onMultiChange: FormsetChange;
 }
@@ -174,8 +174,8 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
           <>
             <Hr />
             {attributes.map((attribute, attributeIndex) => {
-              const error = errors.find(
+              const error = errors.find(err =>
-                err => err.attributeId === attribute.id
+                err.attributes?.includes(attribute.id)
               );
 
               return (
@@ -201,7 +201,7 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
                               ).name,
                             attribute.value[0]
                           )}
-                          emptyOption
+                          emptyOption={!attribute.data.isRequired}
                           error={!!error}
                           helperText={getProductErrorMessage(error, intl)}
                           name={`attribute:${attribute.label}`}

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.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[];

src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx

@@ -8,7 +8,7 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "@saleor/components/SingleAutocompleteSelectField";
 import Skeleton from "@saleor/components/Skeleton";
-import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+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";
@@ -27,7 +27,7 @@ export type VariantAttributeInput = FormsetAtomicData<
 interface ProductVariantAttributesProps {
   attributes: VariantAttributeInput[];
   disabled: boolean;
-  errors: ProductErrorFragment[];
+  errors: ProductErrorWithAttributesFragment[];
   onChange: FormsetChange<VariantAttributeInputData>;
 }
 
@@ -85,8 +85,8 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
             <Skeleton />
           ) : (
             attributes.map(attribute => {
-              const error = errors.find(
+              const error = errors.find(err =>
-                err => err.attributeId === attribute.id
+                err.attributes?.includes(attribute.id)
               );
 
               return (
@@ -122,7 +122,7 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
             {errors
               .filter(
                 error =>
-                  error.field === "attributes" && error.attributeId === null
+                  error.field === "attributes" && error.attributes === null
               )
               .map(error => (
                 <Typography color="error" key={error.code}>

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

@@ -131,7 +131,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
                   classes.tabActive,
                   classes.noHandle,
                   {
-                    [classes.firstVariant]: variants.length === 0
+                    [classes.firstVariant]: variants?.length === 0
                   }
                 )}
                 thumbnail={null}

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -8,7 +8,7 @@ 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 { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
+import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
 import { ProductVariant } from "@saleor/fragments/types/ProductVariant";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import useFormset, {
@@ -56,7 +56,7 @@ export interface ProductVariantPageSubmitData
 interface ProductVariantPageProps {
   defaultWeightUnit: string;
   variant?: ProductVariant;
-  errors: ProductErrorFragment[];
+  errors: ProductErrorWithAttributesFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   loading?: boolean;
   placeholderImage?: string;

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/storybook/__snapshots__/Stories.test.ts.snap

@@ -140040,6 +140040,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"
           />
@@ -140248,8 +140394,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>
@@ -140264,7 +140410,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
@@ -140290,7 +140436,7 @@ Ctrl + K"
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -140299,7 +140445,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>
@@ -140976,7 +141122,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
@@ -142849,7 +142995,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 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
@@ -142857,11 +143003,11 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 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"
@@ -144511,17 +144657,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"
               >
@@ -145955,7 +146101,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
@@ -145963,11 +146109,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"
@@ -146005,6 +146151,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>
@@ -173699,7 +173850,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
@@ -173707,11 +173858,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"
@@ -173749,6 +173900,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
@@ -173815,11 +173971,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

@@ -152,8 +152,10 @@ storiesOf("Views / Products / Product edit", module)
       ] as Array<keyof ProductUpdatePageFormData | "attributes">).map(
         field => ({
           __typename: "ProductError",
-          attributeId:
+          attributes:
-            field === "attributes" ? product.attributes[0].attribute.id : null,
+            field === "attributes"
+              ? [product.attributes[0].attribute.id]
+              : null,
           code: ProductErrorCode.INVALID,
           field
         })

src/storybook/stories/products/ProductVariantCreatePage.tsx

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

src/storybook/stories/products/ProductVariantPage.tsx

@@ -86,17 +86,17 @@ storiesOf("Views / Products / Product variant details", module)
       saveButtonBarState="default"
       errors={[
         {
-          attributeId: variant.attributes[0].attribute.id,
+          attributes: [variant.attributes[0].attribute.id],
           code: ProductErrorCode.REQUIRED,
           field: "attributes"
         },
         {
-          attributeId: null,
+          attributes: null,
           code: ProductErrorCode.UNIQUE,
           field: "attributes"
         },
         {
-          attributeId: null,
+          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",