diff --git a/.changeset/lovely-hairs-smell.md b/.changeset/lovely-hairs-smell.md new file mode 100644 index 00000000000..fd636ebcb43 --- /dev/null +++ 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 index 9b4ef9e5053..e20df0f5b11 100644 --- 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 index a2d6f29782c..f94de1d38d4 100644 --- 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 index 493b8971ce1..cb9b038dce2 100644 --- 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 index 6a386d2b7ec..1efd51f0b92 100644 --- 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 = ({ ); case AttributeInputTypeEnum.BOOLEAN: return ( - - - - onChange(attribute.id, checked)} - checked={JSON.parse(attribute.value[0] ?? "false")} - error={!!error} - id={`attribute:${attribute.label}`} - /> - - {getErrorMessage(error, intl)} - + + + + +