change boolean attr to select

saleor · Jun 26, 2024 · 1a88583 · 1a88583
1 parent bcaa91a
commit 1a88583
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 20 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/src/attributes/utils/data.ts b/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];

diff --git a/src/attributes/utils/handlers.ts b/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,
   };
 }
 

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,
@@ -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)}

diff --git a/src/components/Attributes/utils.ts b/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",
+    },
+  ];
+}
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";
@@ -106,7 +105,7 @@ export function getAttributeInputFromAttributes(
     },
     id: attribute.id,
     label: attribute.name,
-    value: getDefaultAttributeValues(attribute),
+    value: [],
   }));
 }