feat(field-toolbar): show the Edit button for Boolean fields

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(
+                <FieldToolbarComponent
+                    eventDetails={{ ...mockEventDetails, fieldMetadata }}
+                    hideOverlay={vi.fn()}
+                />
+            );
+            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<typeof isFieldDisabled>);
+            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",

src/visualBuilder/components/icons/fields/index.ts

@@ -13,4 +13,5 @@ export const fieldIcons: Partial<Record<FieldDataType, React.FC>> = {
     select: EditIcon,
     taxonomy: EditIcon,
     tags: EditIcon,
+    boolean: EditIcon,
 };

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[] = [