Fix label names in reference attributes (#1184)

* Fix label names in reference attributes

* Update changelog

CHANGELOG.md

@@ -52,6 +52,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix attribute values input display - #1156 by @orzechdev
 - Fix product type translations - #1163 by @orzechdev
 - Support staff only voucher - #1174 by @orzechdev
+- Fix label names in reference attributes - #1184 by @orzechdev
 
 # 2.11.1
 

src/attributes/utils/data.ts

@@ -16,7 +16,11 @@ import {
   AttributeInputTypeEnum,
   AttributeValueInput
 } from "@saleor/types/globalTypes";
-import { mapNodeToChoice, mapPagesToChoices } from "@saleor/utils/maps";
+import {
+  mapEdgesToItems,
+  mapNodeToChoice,
+  mapPagesToChoices
+} from "@saleor/utils/maps";
 import { MutationFetchResult } from "react-apollo";
 
 import { AttributePageFormData } from "../components/AttributePage";
@@ -144,6 +148,20 @@ export const mergeAttributeValueDeleteErrors = (
     return errors;
   }, []);
 
+export const mergeChoicesWithValues = (
+  attribute:
+    | ProductDetails_product_attributes
+    | PageDetails_page_attributes
+    | SelectedVariantAttributeFragment
+) => {
+  const choices = mapEdgesToItems(attribute.attribute.choices);
+  const valuesToConcat = attribute.values.filter(
+    value => !choices.some(choice => choice.id === value.id)
+  );
+
+  return choices.concat(valuesToConcat);
+};
+
 export const mergeAttributeValues = (
   attributeId: string,
   attributeValues: string[],

src/pages/utils/data.ts

@@ -1,4 +1,7 @@
-import { getSelectedAttributeValues } from "@saleor/attributes/utils/data";
+import {
+  getSelectedAttributeValues,
+  mergeChoicesWithValues
+} from "@saleor/attributes/utils/data";
 import { AttributeInput } from "@saleor/components/Attributes";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 
@@ -16,7 +19,7 @@ export function getAttributeInputFromPage(
       inputType: attribute.attribute.inputType,
       isRequired: attribute.attribute.valueRequired,
       selectedValues: attribute.values,
-      values: mapEdgesToItems(attribute.attribute.choices),
+      values: mergeChoicesWithValues(attribute),
       unit: attribute.attribute.unit
     },
     id: attribute.attribute.id,

src/products/utils/data.ts

@@ -1,4 +1,7 @@
-import { getSelectedAttributeValues } from "@saleor/attributes/utils/data";
+import {
+  getSelectedAttributeValues,
+  mergeChoicesWithValues
+} from "@saleor/attributes/utils/data";
 import { ChannelData } from "@saleor/channels/utils";
 import {
   AttributeInput,
@@ -52,7 +55,7 @@ export function getAttributeInputFromProduct(
           inputType: attribute.attribute.inputType,
           isRequired: attribute.attribute.valueRequired,
           selectedValues: attribute.values,
-          values: mapEdgesToItems(attribute.attribute.choices),
+          values: mergeChoicesWithValues(attribute),
           unit: attribute.attribute.unit
         },
         id: attribute.attribute.id,
@@ -109,7 +112,7 @@ export function getAttributeInputFromSelectedAttributes(
       inputType: attribute.attribute.inputType,
       isRequired: attribute.attribute.valueRequired,
       selectedValues: attribute.values,
-      values: mapEdgesToItems(attribute.attribute.choices),
+      values: mergeChoicesWithValues(attribute),
       unit: attribute.attribute.unit,
       variantAttributeScope
     },