feat(VB-1583): restrict toolbar actions for multiple custom field instances

hitesh-shetty-cstk · claude · hitesh-shetty-cstk · commit 66bb3f0ac0e0 · 2026-05-20T12:00:32.000+05:30
For multiple custom fields, show the edit modal button only on
whole-field selection and suppress all toolbar actions (move,
delete, form, add-instance) for individual instances.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/__test__/data/fields.ts b/src/__test__/data/fields.ts
@@ -50,3 +50,29 @@ export const mockMultipleFileFieldSchema: ISchemaFieldMap = {
     non_localizable: false,
     unique: false,
 };
+
+export const mockMultipleCustomFieldSchema: ISchemaFieldMap = {
+    extension_uid: "test_extension_uid",
+    field_metadata: { extension: true },
+    config: {},
+    data_type: "number",
+    display_name: "Custom Field",
+    uid: "custom_field",
+    mandatory: false,
+    multiple: true,
+    non_localizable: false,
+    unique: false,
+} as unknown as ISchemaFieldMap;
+
+export const mockSingleCustomFieldSchema: ISchemaFieldMap = {
+    extension_uid: "test_extension_uid",
+    field_metadata: { extension: true },
+    config: {},
+    data_type: "number",
+    display_name: "Custom Field",
+    uid: "custom_field",
+    mandatory: false,
+    multiple: false,
+    non_localizable: false,
+    unique: false,
+} as unknown as ISchemaFieldMap;
diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
@@ -44,6 +44,7 @@ import { FieldLocationAppList } from "./FieldLocationAppList";
 import { FieldLocationIcon } from "./FieldLocationIcon";
 import { WorkflowStageDetails } from "../utils/getWorkflowStageDetails";
 import { ResolvedVariantPermissions } from "../utils/getResolvedVariantPermissions";
+import { isCustomFieldMultipleInstance as checkIsCustomFieldMultipleInstance } from "../utils/isCustomFieldMultipleInstance";
 
 export type FieldDetails = Pick<
     VisualBuilderCslpEventDetails,
@@ -153,6 +154,8 @@ function FieldToolbarComponent(
     const APP_LIST_MIN_WIDTH = 230;
 
     let disableFieldActions = false;
+    let isCustomFieldMultipleInstance = false;
+    let isCustomFieldWholeMultiple = false;
     if (fieldSchema) {
         const { isDisabled } = isFieldDisabled(
             fieldSchema,
@@ -188,7 +191,15 @@ function FieldToolbarComponent(
                 fieldMetadata.instance.fieldPathWithIndex ||
                 fieldMetadata.multipleFieldMetadata?.index === -1);
 
-        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType) && !isWholeMultipleField;
+        isCustomFieldMultipleInstance = checkIsCustomFieldMultipleInstance(fieldSchema, fieldMetadata);
+        isCustomFieldWholeMultiple =
+            fieldType === FieldDataType.CUSTOM_FIELD && isMultiple && isWholeMultipleField;
+
+        if (isCustomFieldWholeMultiple) {
+            isModalEditable = true;
+        } else {
+            isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType) && !isWholeMultipleField;
+        }
 
         isReplaceAllowed =
             ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;
@@ -425,6 +436,8 @@ function FieldToolbarComponent(
         }
     );
 
+    if (isCustomFieldMultipleInstance) return null;
+
     return (
         <div
             className={classNames(
diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
@@ -18,6 +18,8 @@ import FieldToolbarComponent from "../FieldToolbar";
 import {
     mockMultipleLinkFieldSchema,
     mockMultipleFileFieldSchema,
+    mockMultipleCustomFieldSchema,
+    mockSingleCustomFieldSchema,
 } from "../../../__test__/data/fields";
 import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types";
 import { isFieldDisabled } from "../../utils/isFieldDisabled";
@@ -355,6 +357,119 @@ describe("FieldToolbarComponent", () => {
         });
     });
 
+    describe("Custom field multiple — toolbar visibility", () => {
+        const customFieldInstanceMetadata: CslpData = {
+            ...mockMultipleFieldMetadata,
+            fieldPathWithIndex: "custom_field",
+            multipleFieldMetadata: {
+                index: 0,
+                parentDetails: {
+                    parentPath: "custom_field",
+                    parentCslpValue: "entry.ct.en-us",
+                },
+            },
+            instance: { fieldPathWithIndex: "custom_field.0" },
+        };
+
+        const customFieldWholeMetadata: CslpData = {
+            ...mockMultipleFieldMetadata,
+            fieldPathWithIndex: "custom_field",
+            instance: { fieldPathWithIndex: "custom_field" },
+        };
+
+        test("renders nothing for a multiple custom field instance", async () => {
+            vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
+                Promise.resolve(mockMultipleCustomFieldSchema)
+            );
+
+            const { container } = render(
+                <FieldToolbarComponent
+                    eventDetails={{
+                        ...mockEventDetails,
+                        fieldMetadata: customFieldInstanceMetadata,
+                    }}
+                    hideOverlay={vi.fn()}
+                />
+            );
+
+            await act(async () => {
+                await new Promise((r) => setTimeout(r, 0));
+            });
+
+            expect(
+                container.querySelector(
+                    '[data-testid="visual-builder__focused-toolbar__multiple-field-toolbar"]'
+                )
+            ).not.toBeInTheDocument();
+        });
+
+        test("shows edit button for a multiple custom field whole-field selection", async () => {
+            vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
+                Promise.resolve(mockMultipleCustomFieldSchema)
+            );
+
+            const { container } = render(
+                <FieldToolbarComponent
+                    eventDetails={{
+                        ...mockEventDetails,
+                        fieldMetadata: customFieldWholeMetadata,
+                    }}
+                    hideOverlay={vi.fn()}
+                />
+            );
+
+            await act(async () => {
+                await new Promise((r) => setTimeout(r, 0));
+            });
+
+            const editButton = await findByTestId(
+                container,
+                "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button",
+                {},
+                { timeout: 1000 }
+            );
+            expect(editButton).toBeInTheDocument();
+        });
+
+        test("shows edit button for a single (non-multiple) custom field", async () => {
+            vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
+                Promise.resolve(mockSingleCustomFieldSchema)
+            );
+
+            const singleCustomFieldMetadata: CslpData = {
+                ...mockMultipleFieldMetadata,
+                fieldPathWithIndex: "custom_field",
+                multipleFieldMetadata: {
+                    index: -1,
+                    parentDetails: null,
+                },
+                instance: { fieldPathWithIndex: "custom_field" },
+            };
+
+            const { container } = render(
+                <FieldToolbarComponent
+                    eventDetails={{
+                        ...mockEventDetails,
+                        fieldMetadata: singleCustomFieldMetadata,
+                    }}
+                    hideOverlay={vi.fn()}
+                />
+            );
+
+            await act(async () => {
+                await new Promise((r) => setTimeout(r, 0));
+            });
+
+            const editButton = await findByTestId(
+                container,
+                "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button",
+                {},
+                { timeout: 1000 }
+            );
+            expect(editButton).toBeInTheDocument();
+        });
+    });
+
     describe("'Replace button' visibility for multiple file fields", () => {
         beforeEach(() => {
             // Override the mock for this describe block - resolve immediately
diff --git a/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts b/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
@@ -133,6 +133,31 @@ describe("handleIndividualFields", () => {
         expect(handleAddButtonsForMultiple).toHaveBeenCalled();
     });
 
+    it("should NOT call handleAddButtonsForMultiple for a multiple custom field instance", async () => {
+        const fieldSchema = {
+            extension_uid: "test_ext",
+            field_metadata: { extension: true },
+            data_type: "number",
+            multiple: true,
+        };
+        const isDisabled = { isDisabled: false };
+
+        (FieldSchemaMap.getFieldSchema as Mock).mockResolvedValue(fieldSchema);
+        (getFieldData as Mock).mockResolvedValue([]);
+        (getFieldType as Mock).mockReturnValue(FieldDataType.CUSTOM_FIELD);
+        (isFieldDisabled as Mock).mockReturnValue(isDisabled);
+
+        // Instance: different paths + valid index
+        eventDetails.fieldMetadata.multipleFieldMetadata = {
+            index: 0,
+            parentDetails: { parentPath: "fieldPath", parentCslpValue: "" },
+        };
+
+        await handleIndividualFields(eventDetails, elements);
+
+        expect(handleAddButtonsForMultiple).not.toHaveBeenCalled();
+    });
+
     it("should handle inline editing for supported fields", async () => {
         const fieldSchema = {
             data_type: FieldDataType.SINGLELINE,
diff --git a/src/visualBuilder/utils/__test__/isCustomFieldMultipleInstance.test.ts b/src/visualBuilder/utils/__test__/isCustomFieldMultipleInstance.test.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect } from "vitest";
+import { isCustomFieldMultipleInstance } from "../isCustomFieldMultipleInstance";
+import {
+    mockMultipleCustomFieldSchema,
+    mockSingleCustomFieldSchema,
+    mockMultipleLinkFieldSchema,
+} from "../../../__test__/data/fields";
+import { CslpData } from "../../../cslp/types/cslp.types";
+
+const instanceMetadata: CslpData = {
+    entry_uid: "entry",
+    content_type_uid: "ct",
+    cslpValue: "",
+    locale: "en-us",
+    variant: undefined,
+    fieldPath: "custom_field",
+    fieldPathWithIndex: "custom_field",
+    multipleFieldMetadata: {
+        index: 0,
+        parentDetails: {
+            parentPath: "custom_field",
+            parentCslpValue: "entry.ct.en-us",
+        },
+    },
+    instance: {
+        fieldPathWithIndex: "custom_field.0",
+    },
+};
+
+const wholeFieldMetadata: CslpData = {
+    ...instanceMetadata,
+    fieldPathWithIndex: "custom_field",
+    instance: { fieldPathWithIndex: "custom_field" },
+};
+
+const wholeFieldByIndexMetadata: CslpData = {
+    ...instanceMetadata,
+    multipleFieldMetadata: {
+        index: -1,
+        parentDetails: instanceMetadata.multipleFieldMetadata!.parentDetails,
+    },
+};
+
+describe("isCustomFieldMultipleInstance", () => {
+    it("returns true for a multiple custom field instance", () => {
+        expect(
+            isCustomFieldMultipleInstance(mockMultipleCustomFieldSchema, instanceMetadata)
+        ).toBe(true);
+    });
+
+    it("returns false when whole field is selected (same paths)", () => {
+        expect(
+            isCustomFieldMultipleInstance(mockMultipleCustomFieldSchema, wholeFieldMetadata)
+        ).toBe(false);
+    });
+
+    it("returns false when whole field is selected (index === -1)", () => {
+        expect(
+            isCustomFieldMultipleInstance(mockMultipleCustomFieldSchema, wholeFieldByIndexMetadata)
+        ).toBe(false);
+    });
+
+    it("returns false for a single (non-multiple) custom field", () => {
+        expect(
+            isCustomFieldMultipleInstance(mockSingleCustomFieldSchema, instanceMetadata)
+        ).toBe(false);
+    });
+
+    it("returns false for a non-custom multiple field (e.g. link)", () => {
+        expect(
+            isCustomFieldMultipleInstance(mockMultipleLinkFieldSchema, instanceMetadata)
+        ).toBe(false);
+    });
+});
diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts
@@ -13,6 +13,7 @@ import {
 import { isFieldMultiple } from "./isFieldMultiple";
 import { handleInlineEditableField } from "./handleInlineEditableField";
 import { VisualBuilderEditContext } from "./types/index.types";
+import { isCustomFieldMultipleInstance } from "./isCustomFieldMultipleInstance";
 import { pasteAsPlainText } from "./pasteAsPlainText";
 import { removeFieldToolbar } from "../generators/generateToolbar";
 import { fetchEntryPermissionsAndStageDetails } from "./fetchEntryPermissionsAndStageDetails";
@@ -70,7 +71,7 @@ export async function handleIndividualFields(
     );
 
     if (isFieldMultiple(fieldSchema)) {
-        if (lastEditedField !== editableElement) {
+        if (!isCustomFieldMultipleInstance(fieldSchema, fieldMetadata) && lastEditedField !== editableElement) {
             const addButtonLabel =
                 fieldSchema.data_type === "blocks"
                     ? // ? `Add ${fieldSchema.display_name ?? "Modular Block"}`
diff --git a/src/visualBuilder/utils/isCustomFieldMultipleInstance.ts b/src/visualBuilder/utils/isCustomFieldMultipleInstance.ts
@@ -0,0 +1,16 @@
+import { CslpData } from "../../cslp/types/cslp.types";
+import { FieldDataType, ISchemaFieldMap } from "./types/index.types";
+import { getFieldType } from "./getFieldType";
+import { isFieldMultiple } from "./isFieldMultiple";
+
+export function isCustomFieldMultipleInstance(
+    fieldSchema: ISchemaFieldMap,
+    fieldMetadata: CslpData
+): boolean {
+    return (
+        getFieldType(fieldSchema) === FieldDataType.CUSTOM_FIELD &&
+        isFieldMultiple(fieldSchema) &&
+        fieldMetadata.fieldPathWithIndex !== fieldMetadata.instance.fieldPathWithIndex &&
+        (fieldMetadata.multipleFieldMetadata?.index ?? -1) !== -1
+    );
+}
