Add create new option, add query for missing elements in combobobx

.changeset/lovely-bananas-own.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix combobox components in Attribute selection. "Add new value" option was added again for clear UX. New values are added when clicked "Save" in the form, like previously. Fixed fetching more items in the combobox: now when user enters a value in the input, we fetch options using input from user as `query` parameter.

src/attributes/utils/handlers.test.ts

@@ -279,12 +279,14 @@ describe("Sending only changed attributes", () => {
   });
 
   describe("works with select attributes", () => {
+    const SKIP_SUBMIT = Symbol("SKIP_SUBMIT");
+
     test.each`
       newAttr       | oldAttr       | expected
-      ${null}       | ${null}       | ${null}
-      ${"my value"} | ${"my value"} | ${null}
-      ${"my value"} | ${null}       | ${["my value"]}
-      ${null}       | ${"my value"} | ${[]}
+      ${null}       | ${null}       | ${SKIP_SUBMIT}
+      ${"my value"} | ${"my value"} | ${SKIP_SUBMIT}
+      ${"my value"} | ${null}       | ${{ value: "my value" }}
+      ${null}       | ${"my value"} | ${null}
     `("$oldAttr -> $newAttr returns $expected", ({ newAttr, oldAttr, expected }) => {
       const attribute = createSelectAttribute(newAttr);
       const prevAttribute = createSelectAttribute(oldAttr);
@@ -293,7 +295,8 @@ describe("Sending only changed attributes", () => {
         prevAttributes: [prevAttribute],
         updatedFileAttributes: [],
       });
-      const expectedResult = expected !== null ? [{ id: ATTR_ID, values: expected }] : [];
+      // "skip" means the attribute hasn't changed, and won't be included in mutation
+      const expectedResult = expected !== SKIP_SUBMIT ? [{ id: ATTR_ID, dropdown: expected }] : [];
 
       expect(result).toEqual(expectedResult);
     });
@@ -302,10 +305,10 @@ describe("Sending only changed attributes", () => {
   describe("works with required select attributes", () => {
     test.each`
       newAttr       | oldAttr       | expected
-      ${null}       | ${null}       | ${[]}
-      ${"my value"} | ${"my value"} | ${["my value"]}
-      ${"my value"} | ${null}       | ${["my value"]}
-      ${null}       | ${"my value"} | ${[]}
+      ${null}       | ${null}       | ${null}
+      ${"my value"} | ${"my value"} | ${{ value: "my value" }}
+      ${"my value"} | ${null}       | ${{ value: "my value" }}
+      ${null}       | ${"my value"} | ${null}
     `("$oldAttr -> $newAttr returns $expected", ({ newAttr, oldAttr, expected }) => {
       const attribute = createSelectAttribute(newAttr, true);
       const prevAttribute = createSelectAttribute(oldAttr, true);
@@ -314,7 +317,7 @@ describe("Sending only changed attributes", () => {
         prevAttributes: [prevAttribute],
         updatedFileAttributes: [],
       });
-      const expectedResult = expected !== null ? [{ id: ATTR_ID, values: expected }] : [];
+      const expectedResult = [{ id: ATTR_ID, dropdown: expected }];
 
       expect(result).toEqual(expectedResult);
     });
@@ -925,10 +928,10 @@ describe("prepareAttributesInput", () => {
     });
 
     // Assert
-    expect(result).toEqual([{ id: ATTR_ID, values: ["val-1"] }]);
+    expect(result).toEqual([{ id: ATTR_ID, dropdown: { value: "val-1" } }]);
   });
 
-  it("should create input without null values for dropdowns", () => {
+  it("should create input with null dropdown for empty dropdowns", () => {
     // Arrange & Act
     const attribute = createDropdownAttribute(null);
     const prevAttribute = createDropdownAttribute("val-1");
@@ -939,7 +942,7 @@ describe("prepareAttributesInput", () => {
     });
 
     // Assert
-    expect(result).toEqual([{ id: ATTR_ID, values: [] }]);
+    expect(result).toEqual([{ id: ATTR_ID, dropdown: null }]);
   });
 });
 

src/attributes/utils/handlers.ts

@@ -394,9 +394,11 @@ export const prepareAttributesInput = ({
     }
 
     if (inputType === AttributeInputTypeEnum.DROPDOWN) {
+      const dropdownValue = attr.value[0];
+
       attrInput.push({
         id: attr.id,
-        values: attr.value.filter(value => value !== null),
+        dropdown: dropdownValue ? { value: dropdownValue } : null,
       });
 
       return attrInput;

src/components/Attributes/AttributeRow.tsx

@@ -10,19 +10,18 @@ import {
   getMultiChoices,
   getMultiDisplayValue,
   getReferenceDisplayValue,
-  getSingleChoices,
-  getSingleDisplayValue,
   getTruncatedTextValue,
 } from "@dashboard/components/Attributes/utils";
 import FileUploadField from "@dashboard/components/FileUploadField";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
 import SortableChipsField from "@dashboard/components/SortableChipsField";
 import { AttributeInputTypeEnum } from "@dashboard/graphql";
-import { Box, DynamicCombobox, Input, Select, Text } from "@saleor/macaw-ui-next";
+import { Box, Input, Select, Text } from "@saleor/macaw-ui-next";
 import { useIntl } from "react-intl";
 
 import { Multiselect } from "../Combobox";
 import { DateTimeField } from "../DateTimeField";
+import { DropdownRow } from "./DropdownRow";
 import { SingleReferenceField } from "./SingleReferenceField";
 import { AttributeRowProps } from "./types";
 
@@ -42,7 +41,7 @@ const AttributeRow = ({
   fetchMoreAttributeValues,
   onAttributeSelectBlur,
   richTextGetters,
-}: AttributeRowProps) => {
+}: AttributeRowProps): JSX.Element => {
   const intl = useIntl();
 
   switch (attribute.data.inputType) {
@@ -96,36 +95,16 @@ const AttributeRow = ({
       );
     case AttributeInputTypeEnum.DROPDOWN:
       return (
-        <BasicAttributeRow label={attribute.label}>
-          <DynamicCombobox
-            size="small"
-            disabled={disabled}
-            options={getSingleChoices(attributeValues)}
-            value={
-              attribute.value[0]
-                ? {
-                    value: attribute.value[0],
-                    label: getSingleDisplayValue(attribute, attributeValues),
-                  }
-                : null
-            }
-            error={!!error}
-            helperText={getErrorMessage(error, intl)}
-            name={`attribute:${attribute.label}`}
-            id={`attribute:${attribute.label}`}
-            label=""
-            onChange={option => onChange(attribute.id, option?.value ?? "")}
-            onFocus={() => {
-              fetchAttributeValues("", attribute.id);
-            }}
-            onBlur={onAttributeSelectBlur}
-            onScrollEnd={() => {
-              if (fetchMoreAttributeValues?.hasMore) {
-                fetchMoreAttributeValues.onFetchMore();
-              }
-            }}
-          />
-        </BasicAttributeRow>
+        <DropdownRow
+          attribute={attribute}
+          attributeValues={attributeValues}
+          disabled={disabled}
+          error={error}
+          onChange={onChange}
+          fetchAttributeValues={fetchAttributeValues}
+          fetchMoreAttributeValues={fetchMoreAttributeValues}
+          onAttributeSelectBlur={onAttributeSelectBlur}
+        />
       );
     case AttributeInputTypeEnum.SWATCH:
       return (