Change Boolean product attribute to Select

.changeset/lovely-hairs-smell.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+The boolean attribute has been changed from a toggle to a select. This change helps visualize when the attribute has not been set.

locale/defaultMessages.json

@@ -1455,6 +1455,10 @@
     "context": "checkbox gift cards label",
     "string": "Automatically fulfill non shippable gift cards"
   },
+  "7WEeNq": {
+    "context": "select label",
+    "string": "True"
+  },
   "7WzUxn": {
     "context": "staff member status",
     "string": "Inactive"
@@ -5974,6 +5978,10 @@
   "b088Xv": {
     "string": "App doesn't provide a description."
   },
+  "b1j4K6": {
+    "context": "select label",
+    "string": "False"
+  },
   "b1t9bM": {
     "context": "empty headers text",
     "string": "No custom request headers created for this webhook. Use the button below to add new custom request header."
@@ -7260,6 +7268,10 @@
     "context": "app data privacy link",
     "string": "Learn more about data privacy"
   },
+  "k62BKw": {
+    "context": "select label",
+    "string": "Unset"
+  },
   "k6WDZl": {
     "context": "attribute is visible",
     "string": "Visible"

src/attributes/utils/data.ts

@@ -16,7 +16,6 @@ import {
   SearchProductsQuery,
   SelectedVariantAttributeFragment,
   UploadErrorFragment,
-  VariantAttributeFragment,
 } from "@dashboard/graphql";
 import { FormsetData } from "@dashboard/hooks/useFormset";
 import { AttributeValuesMetadata } from "@dashboard/products/utils/data";
@@ -143,16 +142,6 @@ export function getAttributeData(
   }
 }
 
-export function getDefaultAttributeValues(attribute: VariantAttributeFragment) {
-  switch (attribute.inputType) {
-    case AttributeInputTypeEnum.BOOLEAN:
-      return ["false"];
-
-    default:
-      return [];
-  }
-}
-
 export function getSelectedAttributeValues(
   attribute:
     | PageSelectedAttributeFragment
@@ -173,7 +162,7 @@ export function getSelectedAttributeValues(
       return [attribute.values[0]?.name];
 
     case AttributeInputTypeEnum.BOOLEAN:
-      return [attribute.values[0]?.boolean ?? "false"];
+      return [attribute.values[0]?.boolean];
 
     case AttributeInputTypeEnum.DATE:
       return [attribute.values[0]?.date];

src/attributes/utils/handlers.ts

@@ -206,7 +206,7 @@ function getFileInput(attribute: AttributeInput, updatedFileAttributes: Attribut
 function getBooleanInput(attribute: AttributeInput) {
   return {
     id: attribute.id,
-    boolean: JSON.parse(attribute.value[0] ?? "false"),
+    boolean: attribute.value[0] ? JSON.parse(attribute.value[0]) : null,
   };
 }
 

src/components/Attributes/AttributeRow.tsx

@@ -5,6 +5,8 @@ import ExtendedAttributeRow from "@dashboard/components/Attributes/ExtendedAttri
 import { attributeRowMessages } from "@dashboard/components/Attributes/messages";
 import { SwatchRow } from "@dashboard/components/Attributes/SwatchRow";
 import {
+  booleanAttrValueToValue,
+  getBooleanDropdownOptions,
   getErrorMessage,
   getFileChoice,
   getMultiChoices,
@@ -17,7 +19,7 @@ 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, Input, Text, Toggle } from "@saleor/macaw-ui-next";
+import { Box, Input, Select, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -195,14 +197,25 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
     case AttributeInputTypeEnum.BOOLEAN:
       return (
         <BasicAttributeRow label={attribute.label}>
-          <Box as="li" display="flex" gap={2} alignItems="center" padding={1}>
+          <Box
+            as="li"
+            display="flex"
+            gap={2}
+            alignItems="center"
+            justifyContent="flex-end"
+            padding={1}
+          >
             <Box data-test-id="attribute-value">
               <Box display="flex" gap={0.5} flexDirection="column" alignItems="flex-end">
-                <Toggle
+                <Select
                   name={`attribute:${attribute.label}`}
-                  onPressedChange={checked => onChange(attribute.id, checked)}
-                  pressed={JSON.parse(attribute.value[0] ?? "false")}
+                  value={booleanAttrValueToValue(attribute.value[0])}
+                  onChange={value =>
+                    onChange(attribute.id, value === "unset" ? undefined : value === "true")
+                  }
+                  options={getBooleanDropdownOptions(intl)}
                   id={`attribute:${attribute.label}`}
+                  disabled={disabled}
                 />
                 <Text size={2} color="critical1">
                   {getErrorMessage(error, intl)}

src/components/Attributes/utils.ts

@@ -147,3 +147,40 @@ export function getErrorMessage(
       return getPageErrorMessage(err, intl);
   }
 }
+
+export function booleanAttrValueToValue(value: unknown | undefined): string {
+  if (typeof value !== "boolean") {
+    return "unset";
+  }
+
+  return value ? "true" : "false";
+}
+
+export function getBooleanDropdownOptions(intl: IntlShape) {
+  return [
+    {
+      label: intl.formatMessage({
+        defaultMessage: "True",
+        id: "7WEeNq",
+        description: "select label",
+      }),
+      value: "true",
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "False",
+        id: "b1j4K6",
+        description: "select label",
+      }),
+      value: "false",
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Unset",
+        id: "k62BKw",
+        description: "select label",
+      }),
+      value: "unset",
+    },
+  ];
+}

src/products/utils/data.ts

@@ -1,6 +1,5 @@
 // @ts-strict-ignore
 import {
-  getDefaultAttributeValues,
   getSelectedAttributeValues,
   mergeChoicesWithValues,
 } from "@dashboard/attributes/utils/data";
@@ -106,7 +105,7 @@ export function getAttributeInputFromAttributes(
     },
     id: attribute.id,
     label: attribute.name,
-    value: getDefaultAttributeValues(attribute),
+    value: [],
   }));
 }