Change Boolean product attribute to Select (#4997)

* change boolean attr to select * json messages --------- Co-authored-by: Paweł Chyła <chyla1988@gmail.com>
saleor · Jul 8, 2024 · c3dd08c · c3dd08c
1 parent e4b9c5a
commit c3dd08c
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 35 deletions.
diff --git a/.changeset/lovely-hairs-smell.md b/.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.
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -1307,6 +1307,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"
@@ -5427,6 +5431,10 @@
   "b+jcaN": {
     "string": "There are still fulfillments created for this order. Cancel the fulfillments first before you cancel the order."
   },
+  "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."
@@ -6533,6 +6541,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"

diff --git a/src/attributes/utils/data.ts b/src/attributes/utils/data.ts
@@ -20,7 +20,6 @@ import {
   SearchProductsQuery,
   SelectedVariantAttributeFragment,
   UploadErrorFragment,
-  VariantAttributeFragment,
 } from "@dashboard/graphql";
 import { FormsetData } from "@dashboard/hooks/useFormset";
 import { RelayToFlat } from "@dashboard/types";
@@ -159,16 +158,6 @@ export function getAttributeData(
   }
 }
 
-export function getDefaultAttributeValues(attribute: VariantAttributeFragment) {
-  switch (attribute.inputType) {
-    case AttributeInputTypeEnum.BOOLEAN:
-      return ["false"];
-
-    default:
-      return [];
-  }
-}
-
 export function getSelectedAttributeValues(
   attribute:
     | PageSelectedAttributeFragment
@@ -189,7 +178,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];

diff --git a/src/attributes/utils/handlers.ts b/src/attributes/utils/handlers.ts
@@ -204,7 +204,7 @@ function getFileInput(
 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,
   };
 }
 

diff --git a/src/components/Attributes/AttributeRow.tsx b/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,
@@ -21,7 +23,7 @@ import SortableChipsField from "@dashboard/components/SortableChipsField";
 import { AttributeInputTypeEnum } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
 import { TextField } from "@material-ui/core";
-import { Box, Checkbox, Input, Text } from "@saleor/macaw-ui/next";
+import { Box, Input, Select, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -200,24 +202,39 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       );
     case AttributeInputTypeEnum.BOOLEAN:
       return (
-        <Box as="li" display="flex" gap={2} alignItems="center" padding={1}>
-          <Box data-test-id="attribute-value">
-            <Box
-              display="flex"
-              gap={0.5}
-              flexDirection="column"
-              alignItems="flex-end"
-            >
-              <Checkbox
-                name={`attribute:${attribute.label}`}
-                onCheckedChange={checked => onChange(attribute.id, checked)}
-                checked={JSON.parse(attribute.value[0] ?? "false")}
-                error={!!error}
-                id={`attribute:${attribute.label}`}
-              />
-              <Text variant="caption" color="textCriticalDefault">
-                {getErrorMessage(error, intl)}
-              </Text>
+        <BasicAttributeRow label={attribute.label}>
+          <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"
+              >
+                <Select
+                  name={`attribute:${attribute.label}`}
+                  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 fontSize="bodySmall" color="textCriticalDefault">
+                  {getErrorMessage(error, intl)}
+                </Text>
+              </Box>
             </Box>
           </Box>
           <Box
@@ -230,7 +247,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
           >
             <Text>{attribute.label}</Text>
           </Box>
-        </Box>
+        </BasicAttributeRow>
       );
     case AttributeInputTypeEnum.DATE:
       return (

diff --git a/src/components/Attributes/utils.ts b/src/components/Attributes/utils.ts
@@ -146,3 +146,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",
+    },
+  ];
+}
diff --git a/src/products/utils/data.ts b/src/products/utils/data.ts
@@ -1,6 +1,5 @@
 // @ts-strict-ignore
 import {
-  getDefaultAttributeValues,
   getSelectedAttributeValues,
   mergeChoicesWithValues,
 } from "@dashboard/attributes/utils/data";
@@ -97,7 +96,7 @@ export function getAttributeInputFromAttributes(
     },
     id: attribute.id,
     label: attribute.name,
-    value: getDefaultAttributeValues(attribute),
+    value: [],
   }));
 }