feat(field-toolbar): show the Edit button for Taxonomy fields on the canvas toolbar

src/visualBuilder/components/FieldToolbar.tsx

@@ -152,6 +152,7 @@ function FieldToolbarComponent(
     let fieldType = null;
     let isWholeMultipleField = false;
     let isMultipleSelect = false;
+    let isTaxonomyField = false;
     const APP_LIST_MIN_WIDTH = 230;
 
     let disableFieldActions = false;
@@ -196,10 +197,12 @@ function FieldToolbarComponent(
         isCustomFieldWholeMultiple =
             fieldType === FieldDataType.CUSTOM_FIELD && isMultiple && isWholeMultipleField;
 
-        // A multiple Select edits as one field, so a value click gets the whole-field toolbar.
+        // A multiple Select or Taxonomy edits as one value, so a value click gets the whole-field toolbar.
         isMultipleSelect = fieldType === FieldDataType.SELECT && isMultiple;
+        // Taxonomy is always multiple, so unlike Select no isMultiple check is needed.
+        isTaxonomyField = fieldType === FieldDataType.TAXONOMY;
 
-        if (isCustomFieldWholeMultiple || isMultipleSelect) {
+        if (isCustomFieldWholeMultiple || isMultipleSelect || isTaxonomyField) {
             isModalEditable = true;
         } else {
             isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType) && !isWholeMultipleField;
@@ -263,9 +266,9 @@ function FieldToolbarComponent(
                 // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown
                 e.preventDefault();
                 e.stopPropagation();
-                // Multiple Select is edited as one value; a value click must not bind to its index
+                // Multiple Select and Taxonomy are edited as one value; a value click must not bind to its index
                 handleEdit(
-                    isMultipleSelect
+                    isMultipleSelect || isTaxonomyField
                         ? {
                               ...fieldMetadata,
                               instance: {
@@ -514,7 +517,7 @@ function FieldToolbarComponent(
                                 disabled={disableFieldActions}
                             />
                         ) : null}
-                        {isMultiple && !isWholeMultipleField && !isMultipleSelect ? (
+                        {isMultiple && !isWholeMultipleField && !isMultipleSelect && !isTaxonomyField ? (
                             <>
                                 <button
                                     data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button"

src/visualBuilder/components/__test__/fieldToolbar.test.tsx

@@ -796,4 +796,164 @@ describe("FieldToolbarComponent", () => {
             ).toBeDisabled();
         });
     });
+
+    describe("Taxonomy field toolbar", () => {
+        const taxonomySchema = {
+            data_type: "taxonomy",
+            display_name: "Taxonomies",
+            uid: "taxonomies",
+            multiple: true,
+            mandatory: false,
+            non_localizable: false,
+            unique: false,
+            taxonomies: [{ taxonomy_uid: "colors", non_localizable: false }],
+        } as unknown as ISchemaFieldMap;
+
+        const termMetadata: CslpData = {
+            ...mockMultipleFieldMetadata,
+            fieldPath: "taxonomies",
+            fieldPathWithIndex: "taxonomies",
+            multipleFieldMetadata: {
+                index: 1,
+                parentDetails: {
+                    parentPath: "taxonomies",
+                    parentCslpValue: "entry.ct.en-us",
+                },
+            },
+            instance: { fieldPathWithIndex: "taxonomies.1" },
+        };
+
+        const TAX_EDIT_ID =
+            "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button";
+        const TAX_PREFIX =
+            "visual-builder__focused-toolbar__multiple-field-toolbar";
+
+        const renderTaxonomy = async (fieldMetadata: CslpData) => {
+            vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
+                Promise.resolve(taxonomySchema)
+            );
+            const view = render(
+                <FieldToolbarComponent
+                    eventDetails={{ ...mockEventDetails, fieldMetadata }}
+                    hideOverlay={vi.fn()}
+                />
+            );
+            await act(async () => {
+                await new Promise((r) => setTimeout(r, 0));
+            });
+            return view;
+        };
+
+        const expectNoMoveOrDelete = (container: HTMLElement) => {
+            for (const id of ["move-left", "move-right", "delete"]) {
+                expect(
+                    container.querySelector(
+                        `[data-testid="${TAX_PREFIX}__${id}-button"]`
+                    )
+                ).not.toBeInTheDocument();
+            }
+        };
+
+        test("term click shows edit without move or delete", async () => {
+            const { container } = await renderTaxonomy(termMetadata);
+
+            expect(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            ).toBeInTheDocument();
+            expectNoMoveOrDelete(container);
+        });
+
+        test("term click inside a modular block keeps the parent index on edit", async () => {
+            const blockTermMetadata: CslpData = {
+                ...termMetadata,
+                fieldPath: "blocks.section.taxonomies",
+                fieldPathWithIndex: "blocks.0.section.taxonomies",
+                multipleFieldMetadata: {
+                    index: 2,
+                    parentDetails: {
+                        parentPath: "blocks.0.section.taxonomies",
+                        parentCslpValue: "entry.ct.en-us",
+                    },
+                },
+                instance: {
+                    fieldPathWithIndex: "blocks.0.section.taxonomies.2",
+                },
+            };
+            const { container } = await renderTaxonomy(blockTermMetadata);
+
+            fireEvent.click(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            );
+
+            expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith(
+                VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,
+                {
+                    fieldMetadata: {
+                        ...blockTermMetadata,
+                        instance: {
+                            fieldPathWithIndex: "blocks.0.section.taxonomies",
+                        },
+                        multipleFieldMetadata: {
+                            ...blockTermMetadata.multipleFieldMetadata,
+                            index: -1,
+                        },
+                    },
+                }
+            );
+            expect(blockTermMetadata.instance.fieldPathWithIndex).toBe(
+                "blocks.0.section.taxonomies.2"
+            );
+            expect(blockTermMetadata.multipleFieldMetadata.index).toBe(2);
+        });
+
+        test("whole-list click shows edit without move or delete", async () => {
+            const { container } = await renderTaxonomy({
+                ...termMetadata,
+                multipleFieldMetadata: { index: -1, parentDetails: null },
+                instance: { fieldPathWithIndex: "taxonomies" },
+            });
+
+            expect(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            ).toBeInTheDocument();
+            expectNoMoveOrDelete(container);
+        });
+
+        test("term click sends whole-field metadata on edit", async () => {
+            const { container } = await renderTaxonomy(termMetadata);
+
+            fireEvent.click(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            );
+
+            expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith(
+                VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,
+                {
+                    fieldMetadata: {
+                        ...termMetadata,
+                        instance: { fieldPathWithIndex: "taxonomies" },
+                        multipleFieldMetadata: {
+                            ...termMetadata.multipleFieldMetadata,
+                            index: -1,
+                        },
+                    },
+                }
+            );
+            expect(termMetadata.instance.fieldPathWithIndex).toBe(
+                "taxonomies.1"
+            );
+        });
+
+        test("edit button is disabled when the taxonomy field is disabled", async () => {
+            vi.mocked(isFieldDisabled).mockReturnValue({
+                isDisabled: true,
+                reason: "",
+            } as ReturnType<typeof isFieldDisabled>);
+            const { container } = await renderTaxonomy(termMetadata);
+
+            expect(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            ).toBeDisabled();
+        });
+    });
 });

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

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

src/visualBuilder/utils/__test__/handleIndividualFields.test.ts

@@ -176,6 +176,23 @@ describe("handleIndividualFields", () => {
         expect(handleAddButtonsForMultiple).not.toHaveBeenCalled();
     });
 
+    it("still adds instance buttons for a multiple Taxonomy field", async () => {
+        const fieldSchema = {
+            data_type: "taxonomy",
+            multiple: true,
+            taxonomies: [{ taxonomy_uid: "colors" }],
+        };
+
+        (FieldSchemaMap.getFieldSchema as Mock).mockResolvedValue(fieldSchema);
+        (getFieldData as Mock).mockResolvedValue([{ term_uid: "red" }]);
+        (getFieldType as Mock).mockReturnValue(FieldDataType.TAXONOMY);
+        (isFieldDisabled as Mock).mockReturnValue({ isDisabled: false });
+
+        await handleIndividualFields(eventDetails, elements);
+
+        expect(handleAddButtonsForMultiple).toHaveBeenCalled();
+    });
+
     it("still adds instance buttons for a multiple single-line text", async () => {
         const fieldSchema = {
             data_type: "text",

src/visualBuilder/utils/constants.ts

@@ -46,6 +46,7 @@ export const ALLOWED_MODAL_EDITABLE_FIELD: FieldDataType[] = [
     FieldDataType.ISODATE,
     FieldDataType.URL,
     FieldDataType.SELECT,
+    FieldDataType.TAXONOMY,
 ];
 
 export const ALLOWED_REPLACE_FIELDS: FieldDataType[] = [

src/visualBuilder/utils/handleIndividualFields.ts

@@ -70,7 +70,8 @@ export async function handleIndividualFields(
         fieldType
     );
 
-    // A canvas add button patches an { $fieldValue } item into the Select's plain array
+    // Select skips add buttons: they would patch a { $fieldValue } item into its plain array.
+    // Taxonomy keeps them: the editor opens its term picker on add-instance.
     if (isFieldMultiple(fieldSchema) && fieldType !== FieldDataType.SELECT) {
         if (!isCustomFieldMultipleInstance(fieldSchema, fieldMetadata) && lastEditedField !== editableElement) {
             const addButtonLabel =