1427, 1866, 1868 - Implement reference attribute submission (#938)

* Implement reference attribute submitting

* Fix updating reference attributs

* Fix displaying references attribute values names

src/attributes/fixtures.ts

@@ -34,6 +34,7 @@ export const attribute: AttributeDetailsFragment = {
       file: null,
       id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0",
       name: "John Doe",
+      reference: null,
       slug: "john-doe"
     },
     {
@@ -41,6 +42,7 @@ export const attribute: AttributeDetailsFragment = {
       file: null,
       id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1",
       name: "Milionare Pirate",
+      reference: null,
       slug: "milionare-pirate"
     }
   ],
@@ -64,6 +66,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0",
           name: "John Doe",
+          reference: null,
           slug: "john-doe",
           sortOrder: 0,
           value: ""
@@ -73,6 +76,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1",
           name: "Milionare Pirate",
+          reference: null,
           slug: "milionare-pirate",
           sortOrder: 1,
           value: ""
@@ -96,6 +100,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1",
           name: "100g",
+          reference: null,
           slug: "100g",
           sortOrder: 0,
           value: ""
@@ -105,6 +110,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2",
           name: "250g",
+          reference: null,
           slug: "250g",
           sortOrder: 1,
           value: ""
@@ -114,6 +120,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3",
           name: "500g",
+          reference: null,
           slug: "500g",
           sortOrder: 2,
           value: ""
@@ -123,6 +130,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4",
           name: "1kg",
+          reference: null,
           slug: "1kg",
           sortOrder: 3,
           value: ""
@@ -146,6 +154,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=",
           name: "Saleor",
+          reference: null,
           slug: "saleor",
           sortOrder: 0,
           value: ""
@@ -169,6 +178,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx",
           name: "100g",
+          reference: null,
           slug: "100g",
           sortOrder: 0,
           value: ""
@@ -178,6 +188,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy",
           name: "250g",
+          reference: null,
           slug: "250g",
           sortOrder: 1,
           value: ""
@@ -187,6 +198,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz",
           name: "500g",
+          reference: null,
           slug: "500g",
           sortOrder: 2,
           value: ""
@@ -210,6 +222,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz",
           name: "Arabica",
+          reference: null,
           slug: "arabica",
           sortOrder: 0,
           value: ""
@@ -219,6 +232,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0",
           name: "Robusta",
+          reference: null,
           slug: "robusta",
           sortOrder: 1,
           value: ""
@@ -242,6 +256,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=",
           name: "Round",
+          reference: null,
           slug: "round",
           sortOrder: 0,
           value: ""
@@ -251,6 +266,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=",
           name: "V-Neck",
+          reference: null,
           slug: "v-neck",
           sortOrder: 1,
           value: ""
@@ -260,6 +276,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=",
           name: "Polo",
+          reference: null,
           slug: "polo",
           sortOrder: 2,
           value: ""
@@ -283,6 +300,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=",
           name: "Blue",
+          reference: null,
           slug: "blue",
           sortOrder: 0,
           value: ""
@@ -292,6 +310,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=",
           name: "White",
+          reference: null,
           slug: "white",
           sortOrder: 1,
           value: ""
@@ -315,6 +334,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw",
           name: "Soft",
+          reference: null,
           slug: "soft",
           sortOrder: 0,
           value: ""
@@ -324,6 +344,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx",
           name: "Hard",
+          reference: null,
           slug: "hard",
           sortOrder: 1,
           value: ""
@@ -333,6 +354,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy",
           name: "Middle soft",
+          reference: null,
           slug: "middle-soft",
           sortOrder: 2,
           value: ""
@@ -342,6 +364,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz",
           name: "Middle hard",
+          reference: null,
           slug: "middle-hard",
           sortOrder: 3,
           value: ""
@@ -351,6 +374,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0",
           name: "Middle",
+          reference: null,
           slug: "middle",
           sortOrder: 4,
           value: ""
@@ -360,6 +384,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1",
           name: "Very hard",
+          reference: null,
           slug: "very-hard",
           sortOrder: 5,
           value: ""
@@ -383,6 +408,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5",
           name: "Sour",
+          reference: null,
           slug: "sour",
           sortOrder: 0,
           value: ""
@@ -392,6 +418,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw",
           name: "Sweet",
+          reference: null,
           slug: "sweet",
           sortOrder: 1,
           value: ""
@@ -415,6 +442,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4",
           name: "English",
+          reference: null,
           slug: "english",
           sortOrder: 0,
           value: ""
@@ -424,6 +452,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5",
           name: "Pirate",
+          reference: null,
           slug: "pirate",
           sortOrder: 1,
           value: ""
@@ -447,6 +476,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2",
           name: "Mirumee Press",
+          reference: null,
           slug: "mirumee-press",
           sortOrder: 0,
           value: ""
@@ -456,6 +486,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3",
           name: "Saleor Publishing",
+          reference: null,
           slug: "saleor-publishing",
           sortOrder: 1,
           value: ""
@@ -479,6 +510,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=",
           name: "XS",
+          reference: null,
           slug: "xs",
           sortOrder: 0,
           value: ""
@@ -488,6 +520,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=",
           name: "S",
+          reference: null,
           slug: "s",
           sortOrder: 1,
           value: ""
@@ -497,6 +530,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=",
           name: "M",
+          reference: null,
           slug: "m",
           sortOrder: 2,
           value: ""
@@ -506,6 +540,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw",
           name: "L",
+          reference: null,
           slug: "l",
           sortOrder: 3,
           value: ""
@@ -515,6 +550,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx",
           name: "XL",
+          reference: null,
           slug: "xl",
           sortOrder: 4,
           value: ""
@@ -524,6 +560,7 @@ export const attributes: Array<AttributeList_attributes_edges_node &
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy",
           name: "XXL",
+          reference: null,
           slug: "xxl",
           sortOrder: 5,
           value: ""

src/attributes/types/AttributeCreate.ts

@@ -32,6 +32,7 @@ export interface AttributeCreate_attributeCreate_attribute_values {
   name: string | null;
   slug: string | null;
   file: AttributeCreate_attributeCreate_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface AttributeCreate_attributeCreate_attribute {

src/attributes/types/AttributeDetails.ts

@@ -32,6 +32,7 @@ export interface AttributeDetails_attribute_values {
   name: string | null;
   slug: string | null;
   file: AttributeDetails_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface AttributeDetails_attribute {

src/attributes/types/AttributeUpdate.ts

@@ -32,6 +32,7 @@ export interface AttributeUpdate_attributeUpdate_attribute_values {
   name: string | null;
   slug: string | null;
   file: AttributeUpdate_attributeUpdate_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface AttributeUpdate_attributeUpdate_attribute {

src/attributes/types/AttributeValueCreate.ts

@@ -32,6 +32,7 @@ export interface AttributeValueCreate_attributeValueCreate_attribute_values {
   name: string | null;
   slug: string | null;
   file: AttributeValueCreate_attributeValueCreate_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface AttributeValueCreate_attributeValueCreate_attribute {

src/attributes/types/AttributeValueDelete.ts

@@ -32,6 +32,7 @@ export interface AttributeValueDelete_attributeValueDelete_attribute_values {
   name: string | null;
   slug: string | null;
   file: AttributeValueDelete_attributeValueDelete_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface AttributeValueDelete_attributeValueDelete_attribute {

src/attributes/types/AttributeValueUpdate.ts

@@ -32,6 +32,7 @@ export interface AttributeValueUpdate_attributeValueUpdate_attribute_values {
   name: string | null;
   slug: string | null;
   file: AttributeValueUpdate_attributeValueUpdate_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface AttributeValueUpdate_attributeValueUpdate_attribute {

src/attributes/utils/data.ts

@@ -8,6 +8,7 @@ import { SelectedVariantAttributeFragment } from "@saleor/fragments/types/Select
 import { UploadErrorFragment } from "@saleor/fragments/types/UploadErrorFragment";
 import { FormsetData } from "@saleor/hooks/useFormset";
 import { PageDetails_page_attributes } from "@saleor/pages/types/PageDetails";
+import { ProductDetails_product_attributes } from "@saleor/products/types/ProductDetails";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
 import {
   AttributeInputTypeEnum,
@@ -62,6 +63,18 @@ export function getAttributeData(
   }
 }
 
+export function getSelectedAttributeValues(
+  attribute:
+    | PageDetails_page_attributes
+    | ProductDetails_product_attributes
+    | SelectedVariantAttributeFragment
+) {
+  if (attribute.attribute.inputType === AttributeInputTypeEnum.REFERENCE) {
+    return attribute.values.map(value => value.reference);
+  }
+  return attribute.values.map(value => value.slug);
+}
+
 export const isFileValueUnused = (
   attributesWithNewFileValue: FormsetData<null, File>,
   existingAttribute:
@@ -194,10 +207,11 @@ export const getReferenceAttributeDisplayData = (
   data: {
     ...attribute.data,
     references:
-      referencePages &&
+      referencePages?.length > 0 && attribute.value?.length > 0
-      attribute.value?.map(value =>
+        ? attribute.value.map(value =>
-        referencePages.find(reference => reference.id === value)
+            referencePages.find(reference => reference.id === value)
-      )
+          )
+        : []
   }
 });
 

src/attributes/utils/handlers.ts

@@ -44,6 +44,12 @@ export const prepareAttributesInput = ({
         id: attribute.id
       };
     }
+    if (attribute.data.inputType === AttributeInputTypeEnum.REFERENCE) {
+      return {
+        id: attribute.id,
+        references: attribute.value
+      };
+    }
     return {
       id: attribute.id,
       values: attribute.value[0] === "" ? [] : attribute.value

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -158,6 +158,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
           __typename: "AttributeValue" as "AttributeValue",
           file: null,
           id: valueIndex.toString(),
+          reference: null,
           slug: slugify(value.name).toLowerCase(),
           sortOrder: valueIndex,
           value: null,

src/components/Attributes/Attributes.tsx

@@ -163,13 +163,25 @@ function getReferenceDisplayValue(
   }
 
   return attribute.value.map(attributeValue => {
-    const definedAttributeValue = attribute.data.references?.find(
+    const definedAttributeValue = attribute.data.values.find(
-      reference => reference.id === attributeValue
+      definedValue => definedValue.reference === attributeValue
     );
+    // If value has been previously assigned, use it's data
     if (!!definedAttributeValue) {
       return {
-        label: definedAttributeValue.title,
+        label: definedAttributeValue.name,
-        value: definedAttributeValue.id
+        value: definedAttributeValue.reference
+      };
+    }
+
+    const definedAttributeReference = attribute.data.references?.find(
+      reference => reference.id === attributeValue
+    );
+    // If value has not been yet assigned, use data of reference
+    if (!!definedAttributeReference) {
+      return {
+        label: definedAttributeReference.title,
+        value: definedAttributeReference.id
       };
     }
 

src/components/Attributes/fixtures.ts

@@ -12,6 +12,7 @@ const DROPDOWN_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "fdinugiffgffd",
         name: "Dropdown First Value",
+        reference: null,
         slug: "dropdown-first-value"
       },
       {
@@ -19,6 +20,7 @@ const DROPDOWN_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "fdhfdhdihidff",
         name: "Dropdown Second Value",
+        reference: null,
         slug: "dropdown-second-value"
       }
     ]
@@ -38,6 +40,7 @@ const MULTISELECT_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "terteretregtt",
         name: "Multiselect First Value",
+        reference: null,
         slug: "multiselect-first-value"
       },
       {
@@ -45,6 +48,7 @@ const MULTISELECT_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "tyueyryetopwr",
         name: "Multiselect Second Value",
+        reference: null,
         slug: "multiselect-second-value"
       },
       {
@@ -52,6 +56,7 @@ const MULTISELECT_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "truiwrtweirqd",
         name: "Multiselect Third Value",
+        reference: null,
         slug: "multiselect-third-value"
       }
     ]
@@ -75,6 +80,7 @@ const FILE_ATTRIBUTE: AttributeInput = {
         },
         id: "gdghdgdhkkdae",
         name: "File First Value",
+        reference: null,
         slug: "file-first-value"
       }
     ]
@@ -111,6 +117,7 @@ const REFERENCE_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "vbnhgcvjhbvhj",
         name: "References First Value",
+        reference: null,
         slug: "references-first-value"
       },
       {
@@ -118,6 +125,7 @@ const REFERENCE_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "gucngdfdfvdvd",
         name: "References Second Value",
+        reference: null,
         slug: "references-second-value"
       },
       {
@@ -125,6 +133,7 @@ const REFERENCE_ATTRIBUTE: AttributeInput = {
         file: null,
         id: "dfdfdsfdsfdse",
         name: "References Third Value",
+        reference: null,
         slug: "references-third-value"
       }
     ]

src/fragments/types/AttributeDetailsFragment.ts

@@ -32,6 +32,7 @@ export interface AttributeDetailsFragment_values {
   name: string | null;
   slug: string | null;
   file: AttributeDetailsFragment_values_file | null;
+  reference: string | null;
 }
 
 export interface AttributeDetailsFragment {

src/fragments/types/AttributeValueFragment.ts

@@ -18,4 +18,5 @@ export interface AttributeValueFragment {
   name: string | null;
   slug: string | null;
   file: AttributeValueFragment_file | null;
+  reference: string | null;
 }

src/fragments/types/PageAttributesFragment.ts

@@ -20,6 +20,7 @@ export interface PageAttributesFragment_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: PageAttributesFragment_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface PageAttributesFragment_attributes_attribute {
@@ -44,6 +45,7 @@ export interface PageAttributesFragment_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageAttributesFragment_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageAttributesFragment_attributes {
@@ -64,6 +66,7 @@ export interface PageAttributesFragment_pageType_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageAttributesFragment_pageType_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageAttributesFragment_pageType_attributes {

src/fragments/types/PageDetailsFragment.ts

@@ -20,6 +20,7 @@ export interface PageDetailsFragment_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: PageDetailsFragment_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface PageDetailsFragment_attributes_attribute {
@@ -44,6 +45,7 @@ export interface PageDetailsFragment_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageDetailsFragment_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageDetailsFragment_attributes {
@@ -64,6 +66,7 @@ export interface PageDetailsFragment_pageType_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageDetailsFragment_pageType_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageDetailsFragment_pageType_attributes {

src/fragments/types/Product.ts

@@ -20,6 +20,7 @@ export interface Product_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: Product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface Product_attributes_attribute {
@@ -44,6 +45,7 @@ export interface Product_attributes_values {
   name: string | null;
   slug: string | null;
   file: Product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface Product_attributes {
@@ -64,6 +66,7 @@ export interface Product_productType_variantAttributes_values {
   name: string | null;
   slug: string | null;
   file: Product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface Product_productType_variantAttributes {

src/fragments/types/ProductVariant.ts

@@ -32,6 +32,7 @@ export interface ProductVariant_selectionAttributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: ProductVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariant_selectionAttributes_attribute {
@@ -56,6 +57,7 @@ export interface ProductVariant_selectionAttributes_values {
   name: string | null;
   slug: string | null;
   file: ProductVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariant_selectionAttributes {
@@ -76,6 +78,7 @@ export interface ProductVariant_nonSelectionAttributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: ProductVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariant_nonSelectionAttributes_attribute {
@@ -100,6 +103,7 @@ export interface ProductVariant_nonSelectionAttributes_values {
   name: string | null;
   slug: string | null;
   file: ProductVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariant_nonSelectionAttributes {

src/fragments/types/ProductVariantAttributesFragment.ts

@@ -20,6 +20,7 @@ export interface ProductVariantAttributesFragment_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: ProductVariantAttributesFragment_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantAttributesFragment_attributes_attribute {
@@ -44,6 +45,7 @@ export interface ProductVariantAttributesFragment_attributes_values {
   name: string | null;
   slug: string | null;
   file: ProductVariantAttributesFragment_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantAttributesFragment_attributes {
@@ -64,6 +66,7 @@ export interface ProductVariantAttributesFragment_productType_variantAttributes_
   name: string | null;
   slug: string | null;
   file: ProductVariantAttributesFragment_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantAttributesFragment_productType_variantAttributes {

src/fragments/types/SelectedVariantAttributeFragment.ts

@@ -20,6 +20,7 @@ export interface SelectedVariantAttributeFragment_attribute_values {
   name: string | null;
   slug: string | null;
   file: SelectedVariantAttributeFragment_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SelectedVariantAttributeFragment_attribute {
@@ -44,6 +45,7 @@ export interface SelectedVariantAttributeFragment_values {
   name: string | null;
   slug: string | null;
   file: SelectedVariantAttributeFragment_values_file | null;
+  reference: string | null;
 }
 
 export interface SelectedVariantAttributeFragment {

src/fragments/types/VariantAttributeFragment.ts

@@ -20,6 +20,7 @@ export interface VariantAttributeFragment_values {
   name: string | null;
   slug: string | null;
   file: VariantAttributeFragment_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantAttributeFragment {

src/pages/fixtures.ts

@@ -52,6 +52,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6ODc=",
             name: "Suzanne Ellison",
             slug: "suzanne-ellison",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -59,6 +60,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6ODg=",
             name: "Dennis Perkins",
             slug: "dennis-perkins",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -66,6 +68,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6ODk=",
             name: "Dylan Lamb",
             slug: "dylan-lamb",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           }
@@ -77,6 +80,7 @@ export const page: PageDetails_page = {
           id: "QXR0cmlidXRlVmFsdWU6ODk=",
           name: "Dylan Lamb",
           slug: "dylan-lamb",
+          reference: null,
           __typename: "AttributeValue",
           file: null
         }
@@ -95,6 +99,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTA=",
             name: "Security",
             slug: "security",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -102,6 +107,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTE=",
             name: "Support",
             slug: "support",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -109,6 +115,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTI=",
             name: "Medical",
             slug: "medical",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -116,6 +123,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTM=",
             name: "General",
             slug: "general",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           }
@@ -127,6 +135,7 @@ export const page: PageDetails_page = {
           id: "QXR0cmlidXRlVmFsdWU6OTA=",
           name: "Security",
           slug: "security",
+          reference: null,
           __typename: "AttributeValue",
           file: null
         }
@@ -159,6 +168,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6ODc=",
             name: "Suzanne Ellison",
             slug: "suzanne-ellison",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -166,6 +176,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6ODg=",
             name: "Dennis Perkins",
             slug: "dennis-perkins",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -173,6 +184,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6ODk=",
             name: "Dylan Lamb",
             slug: "dylan-lamb",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           }
@@ -189,6 +201,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTA=",
             name: "Security",
             slug: "security",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -196,6 +209,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTE=",
             name: "Support",
             slug: "support",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -203,6 +217,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTI=",
             name: "Medical",
             slug: "medical",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           },
@@ -210,6 +225,7 @@ export const page: PageDetails_page = {
             id: "QXR0cmlidXRlVmFsdWU6OTM=",
             name: "General",
             slug: "general",
+            reference: null,
             __typename: "AttributeValue",
             file: null
           }

src/pages/types/PageCreate.ts

@@ -28,6 +28,7 @@ export interface PageCreate_pageCreate_page_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: PageCreate_pageCreate_page_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface PageCreate_pageCreate_page_attributes_attribute {
@@ -52,6 +53,7 @@ export interface PageCreate_pageCreate_page_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageCreate_pageCreate_page_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageCreate_pageCreate_page_attributes {
@@ -72,6 +74,7 @@ export interface PageCreate_pageCreate_page_pageType_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageCreate_pageCreate_page_pageType_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageCreate_pageCreate_page_pageType_attributes {

src/pages/types/PageDetails.ts

@@ -20,6 +20,7 @@ export interface PageDetails_page_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: PageDetails_page_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface PageDetails_page_attributes_attribute {
@@ -44,6 +45,7 @@ export interface PageDetails_page_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageDetails_page_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageDetails_page_attributes {
@@ -64,6 +66,7 @@ export interface PageDetails_page_pageType_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageDetails_page_pageType_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageDetails_page_pageType_attributes {

src/pages/types/PageUpdate.ts

@@ -27,6 +27,7 @@ export interface PageUpdate_pageUpdate_page_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: PageUpdate_pageUpdate_page_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface PageUpdate_pageUpdate_page_attributes_attribute {
@@ -51,6 +52,7 @@ export interface PageUpdate_pageUpdate_page_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageUpdate_pageUpdate_page_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageUpdate_pageUpdate_page_attributes {
@@ -71,6 +73,7 @@ export interface PageUpdate_pageUpdate_page_pageType_attributes_values {
   name: string | null;
   slug: string | null;
   file: PageUpdate_pageUpdate_page_pageType_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface PageUpdate_pageUpdate_page_pageType_attributes {

src/pages/utils/data.ts

@@ -1,3 +1,4 @@
+import { getSelectedAttributeValues } from "@saleor/attributes/utils/data";
 import { AttributeInput } from "@saleor/components/Attributes";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
 
@@ -18,7 +19,7 @@ export function getAttributeInputFromPage(
     },
     id: attribute.attribute.id,
     label: attribute.attribute.name,
-    value: attribute.values.map(value => value.slug)
+    value: getSelectedAttributeValues(attribute)
   }));
 }
 

src/pages/utils/handlers.test.ts

@@ -15,6 +15,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-1",
           name: "Attribute 1 Value 1",
+          reference: null,
           slug: "attr-1-v-1"
         }
       ]
@@ -33,6 +34,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-2",
           name: "Attribute 2 Value 1",
+          reference: null,
           slug: "attr-2-v-1"
         },
         {
@@ -40,6 +42,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-3",
           name: "Attribute 2 Value 2",
+          reference: null,
           slug: "attr-2-v-2"
         },
         {
@@ -47,6 +50,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-4",
           name: "Attribute 2 Value 3",
+          reference: null,
           slug: "attr-2-v-3"
         }
       ]
@@ -69,6 +73,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           },
           id: "gdghdgdhkkdae",
           name: "File First Value",
+          reference: null,
           slug: "file-first-value"
         }
       ]

src/productTypes/fixtures.ts

@@ -26,6 +26,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0",
           name: "John Doe",
+          reference: null,
           slug: "john-doe",
           sortOrder: 0,
           type: "STRING",
@@ -36,6 +37,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1",
           name: "Milionare Pirate",
+          reference: null,
           slug: "milionare-pirate",
           sortOrder: 1,
           type: "STRING",
@@ -58,6 +60,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1",
           name: "100g",
+          reference: null,
           slug: "100g",
           sortOrder: 0,
           type: "STRING",
@@ -68,6 +71,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2",
           name: "250g",
+          reference: null,
           slug: "250g",
           sortOrder: 1,
           type: "STRING",
@@ -78,6 +82,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3",
           name: "500g",
+          reference: null,
           slug: "500g",
           sortOrder: 2,
           type: "STRING",
@@ -88,6 +93,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4",
           name: "1kg",
+          reference: null,
           slug: "1kg",
           sortOrder: 3,
           type: "STRING",
@@ -110,6 +116,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=",
           name: "Saleor",
+          reference: null,
           slug: "saleor",
           sortOrder: 0,
           type: "STRING",
@@ -132,6 +139,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx",
           name: "100g",
+          reference: null,
           slug: "100g",
           sortOrder: 0,
           type: "STRING",
@@ -142,6 +150,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy",
           name: "250g",
+          reference: null,
           slug: "250g",
           sortOrder: 1,
           type: "STRING",
@@ -152,6 +161,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz",
           name: "500g",
+          reference: null,
           slug: "500g",
           sortOrder: 2,
           type: "STRING",
@@ -174,6 +184,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz",
           name: "Arabica",
+          reference: null,
           slug: "arabica",
           sortOrder: 0,
           type: "STRING",
@@ -184,6 +195,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0",
           name: "Robusta",
+          reference: null,
           slug: "robusta",
           sortOrder: 1,
           type: "STRING",
@@ -206,6 +218,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=",
           name: "Round",
+          reference: null,
           slug: "round",
           sortOrder: 0,
           type: "STRING",
@@ -216,6 +229,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=",
           name: "V-Neck",
+          reference: null,
           slug: "v-neck",
           sortOrder: 1,
           type: "STRING",
@@ -226,6 +240,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=",
           name: "Polo",
+          reference: null,
           slug: "polo",
           sortOrder: 2,
           type: "STRING",
@@ -248,6 +263,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=",
           name: "Blue",
+          reference: null,
           slug: "blue",
           sortOrder: 0,
           type: "STRING",
@@ -258,6 +274,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=",
           name: "White",
+          reference: null,
           slug: "white",
           sortOrder: 1,
           type: "STRING",
@@ -280,6 +297,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw",
           name: "Soft",
+          reference: null,
           slug: "soft",
           sortOrder: 0,
           type: "STRING",
@@ -290,6 +308,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx",
           name: "Hard",
+          reference: null,
           slug: "hard",
           sortOrder: 1,
           type: "STRING",
@@ -300,6 +319,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy",
           name: "Middle soft",
+          reference: null,
           slug: "middle-soft",
           sortOrder: 2,
           type: "STRING",
@@ -310,6 +330,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz",
           name: "Middle hard",
+          reference: null,
           slug: "middle-hard",
           sortOrder: 3,
           type: "STRING",
@@ -320,6 +341,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0",
           name: "Middle",
+          reference: null,
           slug: "middle",
           sortOrder: 4,
           type: "STRING",
@@ -330,6 +352,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1",
           name: "Very hard",
+          reference: null,
           slug: "very-hard",
           sortOrder: 5,
           type: "STRING",
@@ -352,6 +375,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5",
           name: "Sour",
+          reference: null,
           slug: "sour",
           sortOrder: 0,
           type: "STRING",
@@ -362,6 +386,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw",
           name: "Sweet",
+          reference: null,
           slug: "sweet",
           sortOrder: 1,
           type: "STRING",
@@ -384,6 +409,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4",
           name: "English",
+          reference: null,
           slug: "english",
           sortOrder: 0,
           type: "STRING",
@@ -394,6 +420,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5",
           name: "Pirate",
+          reference: null,
           slug: "pirate",
           sortOrder: 1,
           type: "STRING",
@@ -416,6 +443,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2",
           name: "Mirumee Press",
+          reference: null,
           slug: "mirumee-press",
           sortOrder: 0,
           type: "STRING",
@@ -426,6 +454,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3",
           name: "Saleor Publishing",
+          reference: null,
           slug: "saleor-publishing",
           sortOrder: 1,
           type: "STRING",
@@ -448,6 +477,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=",
           name: "XS",
+          reference: null,
           slug: "xs",
           sortOrder: 0,
           type: "STRING",
@@ -458,6 +488,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=",
           name: "S",
+          reference: null,
           slug: "s",
           sortOrder: 1,
           type: "STRING",
@@ -468,6 +499,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=",
           name: "M",
+          reference: null,
           slug: "m",
           sortOrder: 2,
           type: "STRING",
@@ -478,6 +510,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw",
           name: "L",
+          reference: null,
           slug: "l",
           sortOrder: 3,
           type: "STRING",
@@ -488,6 +521,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx",
           name: "XL",
+          reference: null,
           slug: "xl",
           sortOrder: 4,
           type: "STRING",
@@ -498,6 +532,7 @@ export const attributes: SearchProductTypes_search_edges_node_productAttributes[
           file: null,
           id: "UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy",
           name: "XXL",
+          reference: null,
           slug: "xxl",
           sortOrder: 5,
           type: "STRING",

src/products/fixtures.ts

@@ -33,6 +33,7 @@ export const product: (
             file: null,
             id: "ptav47282",
             name: "portals",
+            reference: null,
             slug: "portals"
           },
           {
@@ -40,6 +41,7 @@ export const product: (
             file: null,
             id: "ptav17253",
             name: "Baht",
+            reference: null,
             slug: "Baht"
           }
         ]
@@ -50,6 +52,7 @@ export const product: (
           file: null,
           id: "ptav47282",
           name: "portals",
+          reference: null,
           slug: "portals"
         }
       ]
@@ -69,6 +72,7 @@ export const product: (
             file: null,
             id: "ptav31282",
             name: "payment",
+            reference: null,
             slug: "payment"
           },
           {
@@ -76,6 +80,7 @@ export const product: (
             file: null,
             id: "ptav14907",
             name: "Auto Loan Account",
+            reference: null,
             slug: "Auto-Loan-Account"
           },
           {
@@ -83,6 +88,7 @@ export const product: (
             file: null,
             id: "ptav27366",
             name: "Garden",
+            reference: null,
             slug: "Garden"
           },
           {
@@ -90,6 +96,7 @@ export const product: (
             file: null,
             id: "ptav11873",
             name: "override",
+            reference: null,
             slug: "override"
           }
         ]
@@ -100,6 +107,7 @@ export const product: (
           file: null,
           id: "ptav14907",
           name: "Auto Loan Account",
+          reference: null,
           slug: "Auto-Loan-Account"
         }
       ]
@@ -269,6 +277,7 @@ export const product: (
             },
             id: "gdghdgdhkkdae",
             name: "File First Value",
+            reference: null,
             slug: "file-first-value"
           }
         ]
@@ -288,6 +297,7 @@ export const product: (
             file: null,
             id: "ptvav47282",
             name: "Black",
+            reference: null,
             slug: "black"
           },
           {
@@ -295,6 +305,7 @@ export const product: (
             file: null,
             id: "ptvav17253",
             name: "White",
+            reference: null,
             slug: "white"
           }
         ]
@@ -323,6 +334,7 @@ export const product: (
             },
             id: "gdghdgdhkkdae",
             name: "File First Value",
+            reference: null,
             slug: "file-first-value"
           }
         ]
@@ -340,6 +352,7 @@ export const product: (
             file: null,
             id: "ptvav47282",
             name: "Black",
+            reference: null,
             slug: "black"
           },
           {
@@ -347,6 +360,7 @@ export const product: (
             file: null,
             id: "ptvav17253",
             name: "White",
+            reference: null,
             slug: "white"
           }
         ]
@@ -794,6 +808,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6MQ==",
             name: "Pineapple",
+            reference: null,
             slug: "pineapple"
           }
         ]
@@ -901,6 +916,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6Mg==",
             name: "Coconut",
+            reference: null,
             slug: "coconut"
           }
         ]
@@ -1008,6 +1024,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6Mw==",
             name: "Apple",
+            reference: null,
             slug: "apple"
           }
         ]
@@ -1116,6 +1133,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6NDk=",
             name: "Orange",
+            reference: null,
             slug: "orange"
           }
         ]
@@ -1223,6 +1241,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6NTA=",
             name: "Banana",
+            reference: null,
             slug: "banana"
           }
         ]
@@ -1330,6 +1349,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6NTE=",
             name: "Bean",
+            reference: null,
             slug: "bean"
           }
         ]
@@ -1437,6 +1457,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6NTI=",
             name: "Carrot",
+            reference: null,
             slug: "carrot"
           }
         ]
@@ -1544,6 +1565,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6NTM=",
             name: "Sprouty",
+            reference: null,
             slug: "sprouty"
           }
         ]
@@ -1651,6 +1673,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -1758,6 +1781,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -1865,6 +1889,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -1972,6 +1997,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -2079,6 +2105,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -2186,6 +2213,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -2293,6 +2321,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -2400,6 +2429,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6ODI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -2507,6 +2537,7 @@ export const products = (
             file: null,
             id: "QXR0cmlidXRlVmFsdWU6NzI=",
             name: "Cotton",
+            reference: null,
             slug: "cotton"
           }
         ]
@@ -2694,6 +2725,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             },
             id: "gdghdgdhkkdae",
             name: "File First Value",
+            reference: null,
             slug: "file-first-value"
           }
         ]
@@ -2708,6 +2740,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
           },
           id: "gdghdgdhkkdae",
           name: "File First Value",
+          reference: null,
           slug: "file-first-value"
         }
       ]
@@ -2923,6 +2956,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             file: null,
             id: "ptav47282",
             name: "portals",
+            reference: null,
             slug: "portals"
           },
           {
@@ -2930,6 +2964,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             file: null,
             id: "ptav17253",
             name: "Baht",
+            reference: null,
             slug: "Baht"
           }
         ]
@@ -2940,6 +2975,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
           file: null,
           id: "ptav47282",
           name: "portals",
+          reference: null,
           slug: "portals"
         }
       ]
@@ -2959,6 +2995,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             file: null,
             id: "ptav31282",
             name: "payment",
+            reference: null,
             slug: "payment"
           },
           {
@@ -2966,6 +3003,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             file: null,
             id: "ptav14907",
             name: "Auto Loan Account",
+            reference: null,
             slug: "Auto-Loan-Account"
           },
           {
@@ -2973,6 +3011,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             file: null,
             id: "ptav27366",
             name: "Garden",
+            reference: null,
             slug: "Garden"
           },
           {
@@ -2980,6 +3019,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
             file: null,
             id: "ptav11873",
             name: "override",
+            reference: null,
             slug: "override"
           }
         ]
@@ -2990,6 +3030,7 @@ export const variant = (placeholderImage: string): ProductVariant => ({
           file: null,
           id: "ptav14907",
           name: "Auto Loan Account",
+          reference: null,
           slug: "Auto-Loan-Account"
         }
       ]

src/products/types/CreateMultipleVariantsData.ts

@@ -20,6 +20,7 @@ export interface CreateMultipleVariantsData_product_attributes_attribute_values
   name: string | null;
   slug: string | null;
   file: CreateMultipleVariantsData_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface CreateMultipleVariantsData_product_attributes_attribute {
@@ -44,6 +45,7 @@ export interface CreateMultipleVariantsData_product_attributes_values {
   name: string | null;
   slug: string | null;
   file: CreateMultipleVariantsData_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface CreateMultipleVariantsData_product_attributes {
@@ -64,6 +66,7 @@ export interface CreateMultipleVariantsData_product_productType_variantAttribute
   name: string | null;
   slug: string | null;
   file: CreateMultipleVariantsData_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface CreateMultipleVariantsData_product_productType_variantAttributes {

src/products/types/ProductChannelListingUpdate.ts

@@ -20,6 +20,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   name: string | null;
   slug: string | null;
   file: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_attribute {
@@ -44,6 +45,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   name: string | null;
   slug: string | null;
   file: ProductChannelListingUpdate_productChannelListingUpdate_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_attributes {
@@ -64,6 +66,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   name: string | null;
   slug: string | null;
   file: ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_productType_variantAttributes {

src/products/types/ProductCreate.ts

@@ -27,6 +27,7 @@ export interface ProductCreate_productCreate_product_attributes_attribute_values
   name: string | null;
   slug: string | null;
   file: ProductCreate_productCreate_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductCreate_productCreate_product_attributes_attribute {
@@ -51,6 +52,7 @@ export interface ProductCreate_productCreate_product_attributes_values {
   name: string | null;
   slug: string | null;
   file: ProductCreate_productCreate_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductCreate_productCreate_product_attributes {
@@ -71,6 +73,7 @@ export interface ProductCreate_productCreate_product_productType_variantAttribut
   name: string | null;
   slug: string | null;
   file: ProductCreate_productCreate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductCreate_productCreate_product_productType_variantAttributes {

src/products/types/ProductDetails.ts

@@ -20,6 +20,7 @@ export interface ProductDetails_product_attributes_attribute_values {
   name: string | null;
   slug: string | null;
   file: ProductDetails_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductDetails_product_attributes_attribute {
@@ -44,6 +45,7 @@ export interface ProductDetails_product_attributes_values {
   name: string | null;
   slug: string | null;
   file: ProductDetails_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductDetails_product_attributes {
@@ -64,6 +66,7 @@ export interface ProductDetails_product_productType_variantAttributes_values {
   name: string | null;
   slug: string | null;
   file: ProductDetails_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductDetails_product_productType_variantAttributes {

src/products/types/ProductImageCreate.ts

@@ -26,6 +26,7 @@ export interface ProductImageCreate_productImageCreate_product_attributes_attrib
   name: string | null;
   slug: string | null;
   file: ProductImageCreate_productImageCreate_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductImageCreate_productImageCreate_product_attributes_attribute {
@@ -50,6 +51,7 @@ export interface ProductImageCreate_productImageCreate_product_attributes_values
   name: string | null;
   slug: string | null;
   file: ProductImageCreate_productImageCreate_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductImageCreate_productImageCreate_product_attributes {
@@ -70,6 +72,7 @@ export interface ProductImageCreate_productImageCreate_product_productType_varia
   name: string | null;
   slug: string | null;
   file: ProductImageCreate_productImageCreate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductImageCreate_productImageCreate_product_productType_variantAttributes {

src/products/types/ProductImageUpdate.ts

@@ -26,6 +26,7 @@ export interface ProductImageUpdate_productImageUpdate_product_attributes_attrib
   name: string | null;
   slug: string | null;
   file: ProductImageUpdate_productImageUpdate_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductImageUpdate_productImageUpdate_product_attributes_attribute {
@@ -50,6 +51,7 @@ export interface ProductImageUpdate_productImageUpdate_product_attributes_values
   name: string | null;
   slug: string | null;
   file: ProductImageUpdate_productImageUpdate_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductImageUpdate_productImageUpdate_product_attributes {
@@ -70,6 +72,7 @@ export interface ProductImageUpdate_productImageUpdate_product_productType_varia
   name: string | null;
   slug: string | null;
   file: ProductImageUpdate_productImageUpdate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductImageUpdate_productImageUpdate_product_productType_variantAttributes {

src/products/types/ProductList.ts

@@ -88,6 +88,7 @@ export interface ProductList_products_edges_node_attributes_values {
   name: string | null;
   slug: string | null;
   file: ProductList_products_edges_node_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductList_products_edges_node_attributes {

src/products/types/ProductUpdate.ts

@@ -27,6 +27,7 @@ export interface ProductUpdate_productUpdate_product_attributes_attribute_values
   name: string | null;
   slug: string | null;
   file: ProductUpdate_productUpdate_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductUpdate_productUpdate_product_attributes_attribute {
@@ -51,6 +52,7 @@ export interface ProductUpdate_productUpdate_product_attributes_values {
   name: string | null;
   slug: string | null;
   file: ProductUpdate_productUpdate_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductUpdate_productUpdate_product_attributes {
@@ -71,6 +73,7 @@ export interface ProductUpdate_productUpdate_product_productType_variantAttribut
   name: string | null;
   slug: string | null;
   file: ProductUpdate_productUpdate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductUpdate_productUpdate_product_productType_variantAttributes {

src/products/types/ProductVariantChannelListingUpdate.ts

@@ -32,6 +32,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   name: string | null;
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_attribute {
@@ -56,6 +57,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   name: string | null;
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes {
@@ -76,6 +78,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   name: string | null;
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_attribute {
@@ -100,6 +103,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   name: string | null;
   slug: string | null;
   file: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes {

src/products/types/ProductVariantCreateData.ts

@@ -39,6 +39,7 @@ export interface ProductVariantCreateData_product_productType_selectionVariantAt
   name: string | null;
   slug: string | null;
   file: ProductVariantCreateData_product_productType_selectionVariantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantCreateData_product_productType_selectionVariantAttributes {
@@ -63,6 +64,7 @@ export interface ProductVariantCreateData_product_productType_nonSelectionVarian
   name: string | null;
   slug: string | null;
   file: ProductVariantCreateData_product_productType_nonSelectionVariantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantCreateData_product_productType_nonSelectionVariantAttributes {

src/products/types/ProductVariantDetails.ts

@@ -32,6 +32,7 @@ export interface ProductVariantDetails_productVariant_selectionAttributes_attrib
   name: string | null;
   slug: string | null;
   file: ProductVariantDetails_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantDetails_productVariant_selectionAttributes_attribute {
@@ -56,6 +57,7 @@ export interface ProductVariantDetails_productVariant_selectionAttributes_values
   name: string | null;
   slug: string | null;
   file: ProductVariantDetails_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantDetails_productVariant_selectionAttributes {
@@ -76,6 +78,7 @@ export interface ProductVariantDetails_productVariant_nonSelectionAttributes_att
   name: string | null;
   slug: string | null;
   file: ProductVariantDetails_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantDetails_productVariant_nonSelectionAttributes_attribute {
@@ -100,6 +103,7 @@ export interface ProductVariantDetails_productVariant_nonSelectionAttributes_val
   name: string | null;
   slug: string | null;
   file: ProductVariantDetails_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantDetails_productVariant_nonSelectionAttributes {

src/products/types/ProductVariantReorder.ts

@@ -26,6 +26,7 @@ export interface ProductVariantReorder_productVariantReorder_product_attributes_
   name: string | null;
   slug: string | null;
   file: ProductVariantReorder_productVariantReorder_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product_attributes_attribute {
@@ -50,6 +51,7 @@ export interface ProductVariantReorder_productVariantReorder_product_attributes_
   name: string | null;
   slug: string | null;
   file: ProductVariantReorder_productVariantReorder_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product_attributes {
@@ -70,6 +72,7 @@ export interface ProductVariantReorder_productVariantReorder_product_productType
   name: string | null;
   slug: string | null;
   file: ProductVariantReorder_productVariantReorder_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product_productType_variantAttributes {

src/products/types/ProductVariantSetDefault.ts

@@ -26,6 +26,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product_attri
   name: string | null;
   slug: string | null;
   file: ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes_attribute {
@@ -50,6 +51,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product_attri
   name: string | null;
   slug: string | null;
   file: ProductVariantSetDefault_productVariantSetDefault_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product_attributes {
@@ -70,6 +72,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product_produ
   name: string | null;
   slug: string | null;
   file: ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product_productType_variantAttributes {

src/products/types/SimpleProductUpdate.ts

@@ -27,6 +27,7 @@ export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productUpdate_product_attributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_attributes_attribute {
@@ -51,6 +52,7 @@ export interface SimpleProductUpdate_productUpdate_product_attributes_values {
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productUpdate_product_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_attributes {
@@ -71,6 +73,7 @@ export interface SimpleProductUpdate_productUpdate_product_productType_variantAt
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productUpdate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_productType_variantAttributes {
@@ -308,6 +311,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_selecti
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute {
@@ -332,6 +336,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_selecti
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes {
@@ -352,6 +357,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSele
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -376,6 +382,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSele
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes {
@@ -579,6 +586,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_s
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_attribute {
@@ -603,6 +611,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_s
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes {
@@ -623,6 +632,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_n
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_attribute {
@@ -647,6 +657,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_n
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes {
@@ -849,6 +860,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_s
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_attribute {
@@ -873,6 +885,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_s
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes {
@@ -893,6 +906,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_n
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_attribute {
@@ -917,6 +931,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_n
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes {
@@ -1120,6 +1135,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_s
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute {
@@ -1144,6 +1160,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_s
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes {
@@ -1164,6 +1181,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_n
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -1188,6 +1206,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_n
   name: string | null;
   slug: string | null;
   file: SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes {

src/products/types/VariantCreate.ts

@@ -39,6 +39,7 @@ export interface VariantCreate_productVariantCreate_productVariant_selectionAttr
   name: string | null;
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes_attribute {
@@ -63,6 +64,7 @@ export interface VariantCreate_productVariantCreate_productVariant_selectionAttr
   name: string | null;
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_selectionAttributes {
@@ -83,6 +85,7 @@ export interface VariantCreate_productVariantCreate_productVariant_nonSelectionA
   name: string | null;
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_attribute {
@@ -107,6 +110,7 @@ export interface VariantCreate_productVariantCreate_productVariant_nonSelectionA
   name: string | null;
   slug: string | null;
   file: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes {

src/products/types/VariantImageAssign.ts

@@ -38,6 +38,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_selectionA
   name: string | null;
   slug: string | null;
   file: VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute {
@@ -62,6 +63,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_selectionA
   name: string | null;
   slug: string | null;
   file: VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes {
@@ -82,6 +84,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_nonSelecti
   name: string | null;
   slug: string | null;
   file: VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute {
@@ -106,6 +109,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_nonSelecti
   name: string | null;
   slug: string | null;
   file: VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes {

src/products/types/VariantImageUnassign.ts

@@ -38,6 +38,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_select
   name: string | null;
   slug: string | null;
   file: VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute {
@@ -62,6 +63,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_select
   name: string | null;
   slug: string | null;
   file: VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes {
@@ -82,6 +84,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSel
   name: string | null;
   slug: string | null;
   file: VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute {
@@ -106,6 +109,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSel
   name: string | null;
   slug: string | null;
   file: VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes {

src/products/types/VariantUpdate.ts

@@ -39,6 +39,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttr
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttributes_attribute {
@@ -63,6 +64,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttr
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_selectionAttributes {
@@ -83,6 +85,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionA
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -107,6 +110,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionA
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes {
@@ -310,6 +314,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_selecti
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_attribute {
@@ -334,6 +339,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_selecti
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes {
@@ -354,6 +360,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSele
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_attribute {
@@ -378,6 +385,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSele
   name: string | null;
   slug: string | null;
   file: VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes {

src/products/utils/data.ts

@@ -1,10 +1,10 @@
+import { getSelectedAttributeValues } from "@saleor/attributes/utils/data";
 import { ChannelData } from "@saleor/channels/utils";
 import {
   AttributeInput,
   VariantAttributeScope
 } from "@saleor/components/Attributes";
 import { MetadataFormData } from "@saleor/components/Metadata/types";
-import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
 import { ProductVariant } from "@saleor/fragments/types/ProductVariant";
 import { SelectedVariantAttributeFragment } from "@saleor/fragments/types/SelectedVariantAttributeFragment";
@@ -54,27 +54,7 @@ export function getAttributeInputFromProduct(
         },
         id: attribute.attribute.id,
         label: attribute.attribute.name,
-        value: attribute.values.map(value => value.slug)
+        value: getSelectedAttributeValues(attribute)
-      })),
-    []
-  );
-}
-
-export interface ProductAttributeValueChoices {
-  id: string;
-  values: MultiAutocompleteChoiceType[];
-}
-export function getSelectedAttributesFromProduct(
-  product: ProductDetails_product
-): ProductAttributeValueChoices[] {
-  return maybe(
-    () =>
-      product.attributes.map(attribute => ({
-        id: attribute.attribute.id,
-        values: attribute.values.map(value => ({
-          label: value.name,
-          value: value.slug
-        }))
       })),
     []
   );
@@ -116,22 +96,18 @@ export function getAttributeInputFromSelectedAttributes(
   variantAttributes: SelectedVariantAttributeFragment[],
   variantAttributeScope: VariantAttributeScope
 ): AttributeInput[] {
-  return variantAttributes?.map(attribute => {
+  return variantAttributes?.map(attribute => ({
-    const value = attribute.values.length > 0 && attribute.values[0]?.slug;
+    data: {
-
+      inputType: attribute.attribute.inputType,
-    return {
+      isRequired: attribute.attribute.valueRequired,
-      data: {
+      selectedValues: attribute.values,
-        inputType: attribute.attribute.inputType,
+      values: attribute.attribute.values,
-        isRequired: attribute.attribute.valueRequired,
+      variantAttributeScope
-        selectedValues: attribute.values,
+    },
-        values: attribute.attribute.values,
+    id: attribute.attribute.id,
-        variantAttributeScope
+    label: attribute.attribute.name,
-      },
+    value: getSelectedAttributeValues(attribute)
-      id: attribute.attribute.id,
+  }));
-      label: attribute.attribute.name,
-      value: value ? [value] : undefined
-    };
-  });
 }
 
 export function getAttributeInputFromVariant(

src/products/utils/handlers.test.ts

@@ -15,6 +15,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-1",
           name: "Attribute 1 Value 1",
+          reference: null,
           slug: "attr-1-v-1"
         }
       ]
@@ -33,6 +34,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-2",
           name: "Attribute 2 Value 1",
+          reference: null,
           slug: "attr-2-v-1"
         },
         {
@@ -40,6 +42,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-3",
           name: "Attribute 2 Value 2",
+          reference: null,
           slug: "attr-2-v-2"
         },
         {
@@ -47,6 +50,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           file: null,
           id: "attrv-4",
           name: "Attribute 2 Value 3",
+          reference: null,
           slug: "attr-2-v-3"
         }
       ]
@@ -69,6 +73,7 @@ const attributes: FormsetData<AttributeInputData, string[]> = [
           },
           id: "attrv-5",
           name: "File First Value",
+          reference: null,
           slug: "file-first-value"
         }
       ]

src/searches/types/SearchPageTypes.ts

@@ -20,6 +20,7 @@ export interface SearchPageTypes_search_edges_node_attributes_values {
   name: string | null;
   slug: string | null;
   file: SearchPageTypes_search_edges_node_attributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SearchPageTypes_search_edges_node_attributes {

src/searches/types/SearchProductTypes.ts

@@ -20,6 +20,7 @@ export interface SearchProductTypes_search_edges_node_productAttributes_values {
   name: string | null;
   slug: string | null;
   file: SearchProductTypes_search_edges_node_productAttributes_values_file | null;
+  reference: string | null;
 }
 
 export interface SearchProductTypes_search_edges_node_productAttributes {

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

@@ -34716,7 +34716,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"reference\\":null,\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"reference\\":null,\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -34790,7 +34790,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo2"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"reference\\":null,\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"reference\\":null,\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"reference\\":null,\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"reference\\":null,\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -34864,7 +34864,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToz"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"reference\\":null,\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -34938,7 +34938,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo4"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"reference\\":null,\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"reference\\":null,\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"reference\\":null,\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35012,7 +35012,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo1"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"reference\\":null,\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"reference\\":null,\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35086,7 +35086,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToy"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"reference\\":null,\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"reference\\":null,\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"reference\\":null,\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35160,7 +35160,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTox"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"reference\\":null,\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"reference\\":null,\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35234,7 +35234,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMg=="
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"reference\\":null,\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"reference\\":null,\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"reference\\":null,\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"reference\\":null,\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"reference\\":null,\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"reference\\":null,\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35308,7 +35308,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo3"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"reference\\":null,\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"reference\\":null,\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35382,7 +35382,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"reference\\":null,\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"reference\\":null,\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35456,7 +35456,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"reference\\":null,\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"reference\\":null,\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35530,7 +35530,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
               data-test="id"
               data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo0"
-              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"value\\":\\"\\"}]"
+              data-test-values="[{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"reference\\":null,\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"reference\\":null,\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"reference\\":null,\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"reference\\":null,\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"reference\\":null,\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"file\\":null,\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"reference\\":null,\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"value\\":\\"\\"}]"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"