Fix sending attibutes on variant create/update in datagrid on product…

… details page (#4361)

Co-authored-by: Patryk Andrzejewski <vox3r69@gmail.com>

.changeset/brown-readers-hang.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix sending attibutes on variant create/update in datagrid on product details page

src/attributes/utils/handlers.test.ts

@@ -431,8 +431,8 @@ describe("Sending only changed attributes", () => {
       newAttr       | oldAttr       | expected
       ${null}       | ${null}       | ${null}
       ${"my value"} | ${"my value"} | ${null}
-      ${"my value"} | ${null}       | ${["my value"]}
-      ${null}       | ${"my value"} | ${[]}
+      ${"my value"} | ${null}       | ${"my value"}
+      ${null}       | ${"my value"} | ${""}
     `(
       "$oldAttr -> $newAttr returns $expected",
       ({ newAttr, oldAttr, expected }) => {
@@ -446,7 +446,9 @@ describe("Sending only changed attributes", () => {
         });
 
         const expectedResult =
-          expected !== null ? [{ id: ATTR_ID, values: expected }] : [];
+          expected !== null
+            ? [{ id: ATTR_ID, swatch: { value: expected } }]
+            : [];
         expect(result).toEqual(expectedResult);
       },
     );

src/attributes/utils/handlers.ts

@@ -314,6 +314,15 @@ export const prepareAttributesInput = ({
       });
       return attrInput;
     }
+    if (inputType === AttributeInputTypeEnum.SWATCH) {
+      attrInput.push({
+        id: attr.id,
+        swatch: {
+          value: attr.value[0] ?? "",
+        },
+      });
+      return attrInput;
+    }
 
     attrInput.push({
       id: attr.id,

src/fragments/products.ts

@@ -149,19 +149,7 @@ export const productVariantAttributesFragment = gql`
     productType {
       id
       variantAttributes {
-        id
-        name
-        inputType
-        valueRequired
-        unit
-        choices(
-          first: $firstValues
-          after: $afterValues
-          last: $lastValues
-          before: $beforeValues
-        ) {
-          ...AttributeValueList
-        }
+        ...VariantAttribute
       }
     }
     channelListings {
@@ -185,8 +173,7 @@ export const productDetailsVariant = gql`
         name
       }
       values {
-        id
-        name
+        ...AttributeValueDetails
       }
     }
     media {

src/graphql/hooks.generated.ts

@@ -2336,6 +2336,25 @@ export const ProductWithChannelListingsFragmentDoc = gql`
 }
     ${ChannelListingProductWithoutPricingFragmentDoc}
 ${PriceRangeFragmentDoc}`;
+export const VariantAttributeFragmentDoc = gql`
+    fragment VariantAttribute on Attribute {
+  id
+  name
+  slug
+  inputType
+  entityType
+  valueRequired
+  unit
+  choices(
+    first: $firstValues
+    after: $afterValues
+    last: $lastValues
+    before: $beforeValues
+  ) {
+    ...AttributeValueList
+  }
+}
+    ${AttributeValueListFragmentDoc}`;
 export const ProductVariantAttributesFragmentDoc = gql`
     fragment ProductVariantAttributes on Product {
   id
@@ -2364,19 +2383,7 @@ export const ProductVariantAttributesFragmentDoc = gql`
   productType {
     id
     variantAttributes {
-      id
-      name
-      inputType
-      valueRequired
-      unit
-      choices(
-        first: $firstValues
-        after: $afterValues
-        last: $lastValues
-        before: $beforeValues
-      ) {
-        ...AttributeValueList
-      }
+      ...VariantAttribute
     }
   }
   channelListings {
@@ -2388,7 +2395,8 @@ export const ProductVariantAttributesFragmentDoc = gql`
   }
 }
     ${AttributeValueListFragmentDoc}
-${AttributeValueDetailsFragmentDoc}`;
+${AttributeValueDetailsFragmentDoc}
+${VariantAttributeFragmentDoc}`;
 export const ProductMediaFragmentDoc = gql`
     fragment ProductMedia on ProductMedia {
   id
@@ -2437,8 +2445,7 @@ export const ProductDetailsVariantFragmentDoc = gql`
       name
     }
     values {
-      id
-      name
+      ...AttributeValueDetails
     }
   }
   media {
@@ -2456,7 +2463,8 @@ export const ProductDetailsVariantFragmentDoc = gql`
   }
   quantityLimitPerCustomer
 }
-    ${StockFragmentDoc}
+    ${AttributeValueDetailsFragmentDoc}
+${StockFragmentDoc}
 ${PreorderFragmentDoc}
 ${ChannelListingProductVariantFragmentDoc}`;
 export const WeightFragmentDoc = gql`
@@ -2515,25 +2523,6 @@ ${ChannelListingProductWithoutPricingFragmentDoc}
 ${ProductMediaFragmentDoc}
 ${ProductDetailsVariantFragmentDoc}
 ${WeightFragmentDoc}`;
-export const VariantAttributeFragmentDoc = gql`
-    fragment VariantAttribute on Attribute {
-  id
-  name
-  slug
-  inputType
-  entityType
-  valueRequired
-  unit
-  choices(
-    first: $firstValues
-    after: $afterValues
-    last: $lastValues
-    before: $beforeValues
-  ) {
-    ...AttributeValueList
-  }
-}
-    ${AttributeValueListFragmentDoc}`;
 export const SelectedVariantAttributeFragmentDoc = gql`
     fragment SelectedVariantAttribute on SelectedAttribute {
   attribute {

src/products/fixtures.ts

@@ -1,13 +1,15 @@
 // @ts-strict-ignore
 import { channelsList } from "@dashboard/channels/fixtures";
 import {
+  AttributeEntityTypeEnum,
   AttributeInputTypeEnum,
   GridAttributesQuery,
   ProductFragment,
   ProductListQuery,
   ProductMediaType,
   ProductVariantCreateDataQuery,
   ProductVariantFragment,
+  VariantAttributeFragment,
   WeightUnitsEnum,
 } from "@dashboard/graphql";
 import { RelayToFlat } from "@dashboard/types";
@@ -479,6 +481,8 @@ export const product: (
         inputType: AttributeInputTypeEnum.DROPDOWN,
         valueRequired: false,
         unit: null,
+        slug: "attachment",
+        entityType: AttributeEntityTypeEnum.PRODUCT,
         choices: {
           __typename: "AttributeValueCountableConnection",
           pageInfo: {
@@ -518,6 +522,8 @@ export const product: (
         __typename: "Attribute",
         id: "pta18161",
         name: "Color",
+        slug: "color",
+        entityType: AttributeEntityTypeEnum.PRODUCT,
         inputType: AttributeInputTypeEnum.DROPDOWN,
         valueRequired: false,
         unit: null,
@@ -617,6 +623,19 @@ export const product: (
             {
               id: "QXR0cmlidXRlVmFsdWU6NDc=",
               name: "1l",
+              plainText: "",
+              richText: "",
+              slug: "",
+              reference: "",
+              boolean: false,
+              date: "",
+              dateTime: "",
+              value: "",
+              file: {
+                __typename: "File",
+                url: "",
+                contentType: "",
+              },
               __typename: "AttributeValue",
             },
           ],
@@ -772,6 +791,19 @@ export const product: (
             {
               id: "QXR0cmlidXRlVmFsdWU6NDg=",
               name: "2l",
+              plainText: "",
+              richText: "",
+              slug: "",
+              reference: "",
+              boolean: false,
+              date: "",
+              dateTime: "",
+              value: "",
+              file: {
+                __typename: "File",
+                url: "",
+                contentType: "",
+              },
               __typename: "AttributeValue",
             },
           ],
@@ -860,6 +892,19 @@ export const product: (
             {
               id: "QXR0cmlidXRlVmFsdWU6NDY=",
               name: "500ml",
+              plainText: "",
+              richText: "",
+              slug: "",
+              reference: "",
+              boolean: false,
+              date: "",
+              dateTime: "",
+              value: "",
+              file: {
+                __typename: "File",
+                url: "",
+                contentType: "",
+              },
               __typename: "AttributeValue",
             },
           ],
@@ -3997,3 +4042,48 @@ export const gridAttributesResult: GridAttributesQuery = {
     ],
   },
 };
+
+export const variantAttributes: VariantAttributeFragment[] = [
+  {
+    __typename: "Attribute",
+    id: "QXR0cmlidXRlOjE1",
+    name: "Bottle size",
+    slug: "bottle-size",
+    inputType: AttributeInputTypeEnum.DROPDOWN,
+    entityType: null,
+    valueRequired: false,
+    unit: null,
+    choices: {
+      __typename: "AttributeValueCountableConnection",
+      pageInfo: {
+        __typename: "PageInfo",
+        endCursor: "WyI1IiwgIjg1Il0=",
+        hasNextPage: false,
+        hasPreviousPage: false,
+        startCursor: "WyIwIiwgIjYzIl0=",
+      },
+      edges: [],
+    },
+  },
+  {
+    __typename: "Attribute",
+    id: "QXR0cmlidXRlOjY4MQ==",
+    name: "Plain text",
+    slug: "plain-text",
+    inputType: AttributeInputTypeEnum.PLAIN_TEXT,
+    entityType: null,
+    valueRequired: false,
+    unit: null,
+    choices: {
+      __typename: "AttributeValueCountableConnection",
+      pageInfo: {
+        __typename: "PageInfo",
+        endCursor: "WyI1IiwgIjg1Il0=",
+        hasNextPage: false,
+        hasPreviousPage: false,
+        startCursor: "WyIwIiwgIjYzIl0=",
+      },
+      edges: [],
+    },
+  },
+];

src/products/views/ProductUpdate/handlers/data/attributes.test.ts

@@ -1,22 +1,36 @@
 import { DatagridChange } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
+import { variantAttributes } from "@dashboard/products/fixtures";
 
 import { getAttributeData } from "./attributes";
 
 describe("getAttributeData", () => {
   test("should filter and map data to attribute format", () => {
     // Arrage
     const changeData: DatagridChange[] = [
-      { column: "attribute:1", row: 1, data: { value: { value: "test" } } },
-      { column: "attribute:2", row: 1, data: { value: { value: "test2" } } },
+      {
+        column: "attribute:QXR0cmlidXRlOjE1",
+        row: 1,
+        data: { value: { value: "test" } },
+      },
+      {
+        column: "attribute:QXR0cmlidXRlOjY4MQ==",
+        row: 1,
+        data: { value: { value: "test2" } },
+      },
     ];
 
     // Act
-    const attributes = getAttributeData(changeData, 1, []);
+    const attributes = getAttributeData(changeData, 1, [], variantAttributes);
 
     // Assert
     expect(attributes).toEqual([
-      { id: "1", values: ["test"] },
-      { id: "2", values: ["test2"] },
+      {
+        id: "QXR0cmlidXRlOjE1",
+        dropdown: {
+          value: "test",
+        },
+      },
+      { id: "QXR0cmlidXRlOjY4MQ==", plainText: "test2" },
     ]);
   });
 
@@ -28,7 +42,7 @@ describe("getAttributeData", () => {
     ];
 
     // Act
-    const attributes = getAttributeData(changeData, 2, []);
+    const attributes = getAttributeData(changeData, 2, [], variantAttributes);
 
     // Assert
     expect(attributes).toEqual([]);
@@ -42,7 +56,7 @@ describe("getAttributeData", () => {
     ];
 
     // Act
-    const attributes = getAttributeData(changeData, 1, []);
+    const attributes = getAttributeData(changeData, 1, [], variantAttributes);
 
     // Assert
     expect(attributes).toEqual([]);