diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
index 8105623d..44fc1791 100644
--- a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
+++ b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
@@ -797,6 +797,89 @@ describe("FieldToolbarComponent", () => {
});
});
+ describe("Boolean field toolbar", () => {
+ const booleanSchema = {
+ data_type: "boolean",
+ display_name: "Featured",
+ uid: "featured",
+ field_metadata: { description: "", default_value: false },
+ multiple: false,
+ mandatory: false,
+ unique: false,
+ non_localizable: false,
+ } as unknown as ISchemaFieldMap;
+
+ const EDIT_ID =
+ "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button";
+
+ const booleanMetadata: CslpData = {
+ ...mockMultipleFieldMetadata,
+ fieldPath: "featured",
+ fieldPathWithIndex: "featured",
+ multipleFieldMetadata: { index: -1, parentDetails: null },
+ instance: { fieldPathWithIndex: "featured" },
+ };
+
+ const renderField = async (
+ schema: ISchemaFieldMap,
+ fieldMetadata: CslpData
+ ) => {
+ vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
+ Promise.resolve(schema)
+ );
+ const utils = render(
+
+ );
+ await act(async () => {
+ await new Promise((r) => setTimeout(r, 0));
+ });
+ return utils;
+ };
+
+ test("boolean field shows the edit button", async () => {
+ const { container } = await renderField(
+ booleanSchema,
+ booleanMetadata
+ );
+
+ expect(
+ await findByTestId(container, EDIT_ID, {}, { timeout: 1000 })
+ ).toBeInTheDocument();
+ });
+
+ test("edit button is disabled when the boolean field is disabled", async () => {
+ vi.mocked(isFieldDisabled).mockReturnValue({
+ isDisabled: true,
+ reason: "",
+ } as ReturnType);
+ const { container } = await renderField(
+ booleanSchema,
+ booleanMetadata
+ );
+
+ expect(
+ await findByTestId(container, EDIT_ID, {}, { timeout: 1000 })
+ ).toBeDisabled();
+ });
+
+ test("boolean field has no replace button", async () => {
+ const { container } = await renderField(
+ booleanSchema,
+ booleanMetadata
+ );
+
+ await findByTestId(container, EDIT_ID, {}, { timeout: 1000 });
+ expect(
+ container.querySelector(
+ '[data-testid="visual-builder-replace-boolean"]'
+ )
+ ).not.toBeInTheDocument();
+ });
+ });
+
describe("Taxonomy field toolbar", () => {
const taxonomySchema = {
data_type: "taxonomy",
diff --git a/src/visualBuilder/components/icons/fields/index.ts b/src/visualBuilder/components/icons/fields/index.ts
index a7ed0328..f655fead 100644
--- a/src/visualBuilder/components/icons/fields/index.ts
+++ b/src/visualBuilder/components/icons/fields/index.ts
@@ -13,4 +13,5 @@ export const fieldIcons: Partial> = {
select: EditIcon,
taxonomy: EditIcon,
tags: EditIcon,
+ boolean: EditIcon,
};
diff --git a/src/visualBuilder/utils/constants.ts b/src/visualBuilder/utils/constants.ts
index 130b579a..3825c50e 100644
--- a/src/visualBuilder/utils/constants.ts
+++ b/src/visualBuilder/utils/constants.ts
@@ -48,6 +48,7 @@ export const ALLOWED_MODAL_EDITABLE_FIELD: FieldDataType[] = [
FieldDataType.SELECT,
FieldDataType.TAXONOMY,
FieldDataType.TAGS,
+ FieldDataType.BOOLEAN,
];
export const ALLOWED_REPLACE_FIELDS: FieldDataType[] = [