Ve 7071 apply outline offset highlight to variant fields on canvas

src/visualBuilder/__test__/click/fields/multi-line.test.tsx

@@ -11,6 +11,8 @@ import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage
 import { VisualBuilder } from "../../../index";
 import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
 
+const EXAMPLE_STAGE_NAME = "Example Stage";
+
 vi.mock("../../../components/FieldToolbar", () => {
     return {
         default: () => {
@@ -94,23 +96,28 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        return Promise.resolve({
-                            fieldData: "Hello world",
-                        });
-                    } else if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
-                    ) {
-                        return Promise.resolve({
-                            "all_fields.bltapikey.en-us.single_line":
-                                "Single Line",
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA:
+                            return Promise.resolve({
+                                fieldData: "Hello world",
+                            });
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES:
+                            return Promise.resolve({
+                                "all_fields.bltapikey.en-us.single_line":
+                                    "Single Line",
+                            });
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS:
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 
@@ -185,20 +192,33 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        const values: Record<string, any> = {
-                            multi_line_textbox_multiple_: ["Hello", "world"],
-                            "multi_line_textbox_multiple_.0": "Hello",
-                            "multi_line_textbox_multiple_.1": "world",
-                        };
-                        return Promise.resolve({
-                            fieldData: values[args.entryPath],
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA: {
+                            const values: Record<string, any> = {
+                                multi_line_textbox_multiple_: [
+                                    "Hello",
+                                    "world",
+                                ],
+                                "multi_line_textbox_multiple_.0": "Hello",
+                                "multi_line_textbox_multiple_.1": "world",
+                            };
+                            return Promise.resolve({
+                                fieldData: values[args.entryPath],
+                            });
+                        }
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS: {
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        }
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 

src/visualBuilder/__test__/click/fields/number.test.tsx

@@ -11,6 +11,8 @@ import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage
 import { VisualBuilder } from "../../../index";
 import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
 
+const EXAMPLE_STAGE_NAME = "Example Stage";
+
 const VALUES = {
     number: "10.5",
 };
@@ -112,6 +114,18 @@ describe("When an element is clicked in visual builder mode", () => {
                         return Promise.resolve({
                             "all_fields.bltapikey.en-us.number": "Number",
                         });
+                    } else if (
+                        eventName ===
+                        VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS
+                    ) {
+                        return Promise.resolve({
+                            stage: { name: EXAMPLE_STAGE_NAME },
+                            permissions: {
+                                entry: {
+                                    update: true,
+                                },
+                            },
+                        });
                     }
                     return Promise.resolve({});
                 }
@@ -196,6 +210,18 @@ describe("When an element is clicked in visual builder mode", () => {
                         return Promise.resolve({
                             fieldData: values[args.entryPath],
                         });
+                    } else if (
+                        eventName ===
+                        VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS
+                    ) {
+                        return Promise.resolve({
+                            stage: { name: EXAMPLE_STAGE_NAME },
+                            permissions: {
+                                entry: {
+                                    update: true,
+                                },
+                            },
+                        });
                     }
                     return Promise.resolve({});
                 }

src/visualBuilder/__test__/click/fields/single-line.test.tsx

@@ -10,7 +10,8 @@ import { Mock, vi } from "vitest";
 import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types";
 import { VisualBuilder } from "../../../index";
 import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
-import { act } from "preact/test-utils";
+
+const EXAMPLE_STAGE_NAME = "Example Stage";
 
 const VALUES = {
     singleLine: "Single line",
@@ -99,23 +100,28 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        return Promise.resolve({
-                            fieldData: VALUES.singleLine,
-                        });
-                    } else if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES
-                    ) {
-                        return Promise.resolve({
-                            "all_fields.bltapikey.en-us.single_line":
-                                "Single Line",
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA:
+                            return Promise.resolve({
+                                fieldData: VALUES.singleLine,
+                            });
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES:
+                            return Promise.resolve({
+                                "all_fields.bltapikey.en-us.single_line":
+                                    "Single Line",
+                            });
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS:
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 
@@ -205,20 +211,32 @@ describe("When an element is clicked in visual builder mode", () => {
         beforeAll(async () => {
             (visualBuilderPostMessage?.send as Mock).mockImplementation(
                 (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        const values: Record<string, any> = {
-                            single_line_textbox_multiple_: ["Hello", "world"],
-                            "single_line_textbox_multiple_.0": "Hello",
-                            "single_line_textbox_multiple_.1": "world",
-                        };
-                        return Promise.resolve({
-                            fieldData: values[args.entryPath],
-                        });
+                    switch (eventName) {
+                        case VisualBuilderPostMessageEvents.GET_FIELD_DATA: {
+                            const values: Record<string, any> = {
+                                single_line_textbox_multiple_: [
+                                    "Hello",
+                                    "world",
+                                ],
+                                "single_line_textbox_multiple_.0": "Hello",
+                                "single_line_textbox_multiple_.1": "world",
+                            };
+                            return Promise.resolve({
+                                fieldData: values[args.entryPath],
+                            });
+                        }
+                        case VisualBuilderPostMessageEvents.GET_WORKFLOW_STAGE_DETAILS:
+                            return Promise.resolve({
+                                stage: { name: EXAMPLE_STAGE_NAME },
+                                permissions: {
+                                    entry: {
+                                        update: true,
+                                    },
+                                },
+                            });
+                        default:
+                            return Promise.resolve({});
                     }
-                    return Promise.resolve({});
                 }
             );
 

src/visualBuilder/components/FieldToolbar.tsx

@@ -4,7 +4,6 @@ import getChildrenDirection from "../utils/getChildrenDirection";
 import {
     ALLOWED_MODAL_EDITABLE_FIELD,
     ALLOWED_REPLACE_FIELDS,
-    DEFAULT_MULTIPLE_FIELDS,
 } from "../utils/constants";
 import { getFieldType } from "../utils/getFieldType";
 import {
@@ -20,7 +19,6 @@ import {
     MoveLeftIcon,
     MoveRightIcon,
     ReplaceAssetIcon,
-    MoreIcon,
 } from "./icons";
 import { fieldIcons } from "./icons/fields";
 import classNames from "classnames";
@@ -42,10 +40,9 @@ import {
 } from "./FieldRevert/FieldRevertComponent";
 import { LoadingIcon } from "./icons/loading";
 import { EntryPermissions } from "../utils/getEntryPermissions";
-import { EmptyAppIcon } from "./icons/EmptyAppIcon";
 import { FieldLocationAppList } from "./FieldLocationAppList";
 import { FieldLocationIcon } from "./FieldLocationIcon";
-
+import { WorkflowStageDetails } from "../utils/getWorkflowStageDetails";
 
 export type FieldDetails = Pick<
     VisualBuilderCslpEventDetails,
@@ -58,7 +55,8 @@ interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
     hideOverlay: () => void;
     isVariant?: boolean;
-    entryPermissions?: EntryPermissions;
+    entryPermissions?: EntryPermissions | undefined;
+    entryWorkflowStageDetails?: WorkflowStageDetails | undefined;
 }
 
 function handleReplaceAsset(fieldMetadata: CslpData) {
@@ -118,6 +116,7 @@ function FieldToolbarComponent(
         eventDetails,
         isVariant: isVariantOrParentOfVariant,
         entryPermissions,
+        entryWorkflowStageDetails,
     } = props;
     const { fieldMetadata, editableElement: targetElement } = eventDetails;
     const [isFormLoading, setIsFormLoading] = useState(false);
@@ -158,12 +157,12 @@ function FieldToolbarComponent(
                 editableElement: targetElement,
                 fieldMetadata,
             },
-            entryPermissions
+            entryPermissions,
+            entryWorkflowStageDetails
         );
         disableFieldActions = isDisabled;
 
         fieldType = getFieldType(fieldSchema);
-
 
         Icon = fieldIcons[fieldType];
 
@@ -394,8 +393,6 @@ function FieldToolbarComponent(
         };
     }, []);
 
-
-
     useEffect(() => {
         const fetchFieldLocationData = async () => {
             try {