Fix unable to save attribute value (#3814)

.changeset/five-plums-tell.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix unability to save attribute value when the attribute value is invalid (attribute value should be only send when attribute input type is swatch)

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -24,6 +24,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { AttributeValueEditDialogFormData } from "../../utils/data";
 import AttributeSwatchField from "../AttributeSwatchField";
+import { getAttributeValueFields } from "./utils";
 
 export interface AttributeValueEditDialogProps {
   attributeValue: AttributeValueEditDialogFormData | null;
@@ -47,12 +48,12 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
   inputType,
 }) => {
   const intl = useIntl();
-  const attributeValueFields = attributeValue?.fileUrl
-    ? {
-        fileUrl: attributeValue?.fileUrl,
-        contentType: attributeValue?.contentType,
-      }
-    : { value: attributeValue?.value ?? "" };
+
+  const isSwatch = inputType === AttributeInputTypeEnum.SWATCH;
+  const attributeValueFields = getAttributeValueFields(
+    attributeValue,
+    isSwatch,
+  );
 
   const initialForm: AttributeValueEditDialogFormData = {
     name: attributeValue?.name ?? "",
@@ -60,7 +61,6 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
   };
   const errors = useModalDialogErrors(apiErrors, open);
   const formErrors = getFormErrors(["name"], errors);
-  const isSwatch = inputType === AttributeInputTypeEnum.SWATCH;
 
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">

src/attributes/components/AttributeValueEditDialog/utils.test.ts

@@ -0,0 +1,54 @@
+import { AttributeValueEditDialogFormData } from "@dashboard/attributes/utils/data";
+
+import { getAttributeValueFields } from "./utils";
+
+describe("getAttributeValueFields", () => {
+  it("should return fileUrl and contentType if attributeValue has fileUrl", () => {
+    // Arrange
+    const attributeValue = {
+      fileUrl: "fileUrl",
+      contentType: "contentType",
+      value: "value",
+    } as AttributeValueEditDialogFormData;
+    const isSwatch = true;
+
+    // Act
+    const result = getAttributeValueFields(attributeValue, isSwatch);
+
+    // Assert
+    expect(result).toEqual({
+      fileUrl: "fileUrl",
+      contentType: "contentType",
+    });
+  });
+
+  it("should return value when attributeValue has value and is swatch type", () => {
+    // Arrange
+    const attributeValue = {
+      value: "value",
+    } as AttributeValueEditDialogFormData;
+    const isSwatch = true;
+
+    // Act
+    const result = getAttributeValueFields(attributeValue, isSwatch);
+
+    // Assert
+    expect(result).toEqual({
+      value: "value",
+    });
+  });
+
+  it("should return empty object when attributeValue has value but type is not swatch", () => {
+    // Arrange
+    const attributeValue = {
+      value: "value",
+    } as AttributeValueEditDialogFormData;
+    const isSwatch = false;
+
+    // Act
+    const result = getAttributeValueFields(attributeValue, isSwatch);
+
+    // Assert
+    expect(result).toEqual({});
+  });
+});

src/attributes/components/AttributeValueEditDialog/utils.ts

@@ -0,0 +1,20 @@
+import { AttributeValueEditDialogFormData } from "@dashboard/attributes/utils/data";
+
+export const getAttributeValueFields = (
+  attributeValue: AttributeValueEditDialogFormData | null,
+  isSwatch: boolean,
+): Partial<Omit<AttributeValueEditDialogFormData, "name">> => {
+  if (attributeValue?.fileUrl) {
+    return {
+      fileUrl: attributeValue?.fileUrl,
+      contentType: attributeValue?.contentType,
+    };
+  }
+
+  // Value should be only use when input type is swatch
+  if (attributeValue?.value && isSwatch) {
+    return { value: attributeValue?.value ?? "" };
+  }
+
+  return {};
+};