feat: disable editing when workflow stage rules restrict the same

Fetch workflow stage details for the entry from parent and
disable editing based on the received data

Author: faraazb-contentstack

src/visualBuilder/components/fieldLabelWrapper.tsx

@@ -14,9 +14,9 @@ import { visualBuilderStyles } from "../visualBuilder.style";
 import { CslpError } from "./CslpError";
 import { hasPostMessageError } from "../utils/errorHandling";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
-import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached";
 import { ContentTypeIcon } from "./icons";
 import { ToolbarTooltip } from "./Tooltip";
+import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
 
 interface ReferenceParentMap {
     [entryUid: string]: {
@@ -55,7 +55,6 @@ async function getReferenceParentMap() {
         console.warn("[getFieldLabelWrapper] Error getting reference parent map", e);
         return {};
     }
-    
 }
 
 interface FieldLabelWrapperProps {
@@ -157,15 +156,18 @@ function FieldLabelWrapperComponent(
                 return;
             }
 
-            const entryPermissions = await getEntryPermissionsCached({
-                entryUid: props.fieldMetadata.entry_uid,
-                contentTypeUid: props.fieldMetadata.content_type_uid,
-                locale: props.fieldMetadata.locale,
-            });
+            const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+                await fetchEntryPermissionsAndStageDetails({
+                    entryUid: props.fieldMetadata.entry_uid,
+                    contentTypeUid: props.fieldMetadata.content_type_uid,
+                    locale: props.fieldMetadata.locale,
+                    variantUid: props.fieldMetadata.variant,
+                });
             const { isDisabled: fieldDisabled, reason } = isFieldDisabled(
                 fieldSchema,
                 eventDetails,
-                entryPermissions
+                entryAcl,
+                entryWorkflowStageDetails
             );
 
             const currentFieldDisplayName =

src/visualBuilder/listeners/mouseClick.ts

@@ -30,7 +30,8 @@ import { isCollabThread } from "../generators/generateThread";
 import { toggleCollabPopup } from "../generators/generateThread";
 import { fixSvgXPath } from "../utils/collabUtils";
 import { v4 as uuidV4 } from "uuid";
-import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached";
+import { CslpData } from "../../cslp/types/cslp.types";
+import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
 
 export type HandleBuilderInteractionParams = Omit<
     EventListenerHandlerParams,
@@ -45,7 +46,11 @@ type AddFocusOverlayParams = Pick<
 type AddFocusedToolbarParams = Pick<
     EventListenerHandlerParams,
     "eventDetails" | "focusedToolbar"
-> & { hideOverlay: () => void; isVariant: boolean, options?: { isHover?: boolean } };
+> & {
+    hideOverlay: () => void;
+    isVariant: boolean;
+    options?: { isHover?: boolean };
+};
 
 function addOverlay(params: AddFocusOverlayParams) {
     if (!params.overlayWrapper || !params.editableElement) return;
@@ -295,35 +300,35 @@ function addOverlayAndToolbar(
 async function handleFieldSchemaAndIndividualFields(
     params: HandleBuilderInteractionParams,
     eventDetails: any,
-    fieldMetadata: any,
+    fieldMetadata: CslpData,
     editableElement: Element,
     previousSelectedElement: Element | null
 ) {
-    const { content_type_uid, entry_uid, fieldPath, locale } = fieldMetadata;
+    const {
+        content_type_uid,
+        entry_uid,
+        fieldPath,
+        locale,
+        variant: variantUid,
+    } = fieldMetadata;
     const fieldSchema = await FieldSchemaMap.getFieldSchema(
         content_type_uid,
         fieldPath
     );
-    let entryAcl;
-    try {
-        entryAcl = await getEntryPermissionsCached({
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
             entryUid: entry_uid,
             contentTypeUid: content_type_uid,
             locale,
+            variantUid,
         });
-    } catch (error) {
-        console.error(
-            "[Visual Builder] Error retrieving entry permissions:",
-            error
-        );
-        return;
-    }
 
     if (fieldSchema) {
         const { isDisabled } = isFieldDisabled(
             fieldSchema,
             eventDetails,
-            entryAcl
+            entryAcl,
+            entryWorkflowStageDetails
         );
         if (isDisabled) {
             addOverlay({

src/visualBuilder/listeners/mouseHover.ts

@@ -13,14 +13,11 @@ import { visualBuilderStyles } from "../visualBuilder.style";
 import { VB_EmptyBlockParentClass } from "../..";
 import Config from "../../configManager/configManager";
 import { isCollabThread } from "../generators/generateThread";
-import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached";
-import { EntryPermissions } from "../utils/getEntryPermissions";
-import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
-import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
 import { HandleBuilderInteractionParams } from "./mouseClick";
-import { appendFieldPathDropdown, removeFieldToolbar } from "../generators/generateToolbar";
+import { appendFieldPathDropdown } from "../generators/generateToolbar";
 import { VisualBuilderCslpEventDetails } from "../types/visualBuilder.types";
 import { CslpData } from "../../cslp/types/cslp.types";
+import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails";
 
 const config = Config.get();
 export interface HandleMouseHoverParams
@@ -71,46 +68,43 @@ function handleCursorPosition(
     }
 }
 
-function addOutline(params?: AddOutlineParams): void {
-    if(!params) {
+async function addOutline(params?: AddOutlineParams): Promise<void> {
+    if (!params) {
         return;
     }
-    const { editableElement, eventDetails, content_type_uid, fieldPath, fieldMetadata, fieldDisabled } = params;
+    const {
+        editableElement,
+        eventDetails,
+        content_type_uid,
+        fieldPath,
+        fieldMetadata,
+        fieldDisabled,
+    } = params;
     if (!editableElement) return;
     addHoverOutline(editableElement as HTMLElement, fieldDisabled);
-    FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(
-        (fieldSchema) => {
-            let entryAcl: EntryPermissions | undefined;
-            if (!fieldSchema) return;
-            getEntryPermissionsCached({
-                entryUid: fieldMetadata.entry_uid,
-                contentTypeUid: fieldMetadata.content_type_uid,
-                locale: fieldMetadata.locale,
-            })
-            .then((data) => {
-                entryAcl = data;
-            })
-            .catch((error) => {
-                console.error(
-                    "[Visual Builder] Error retrieving entry permissions:",
-                    error
-                );
-            })
-            .finally(() => {
-                const { isDisabled: fieldDisabled } =
-                    isFieldDisabled(
-                        fieldSchema,
-                        eventDetails,
-                        entryAcl
-                    );
-                addHoverOutline(editableElement, fieldDisabled);
-            });
-        }
+    const fieldSchema = await FieldSchemaMap.getFieldSchema(
+        content_type_uid,
+        fieldPath
     );
+    if (!fieldSchema) return;
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
+            entryUid: fieldMetadata.entry_uid,
+            contentTypeUid: fieldMetadata.content_type_uid,
+            locale: fieldMetadata.locale,
+            variantUid: fieldMetadata.variant,
+        });
+    const { isDisabled } = isFieldDisabled(
+        fieldSchema,
+        eventDetails,
+        entryAcl,
+        entryWorkflowStageDetails
+    );
+    addHoverOutline(editableElement, fieldDisabled || isDisabled);
 }
 
 const debouncedAddOutline = debounce(addOutline, 50, { trailing: true });
-const showOutline = (params?: AddOutlineParams): void => debouncedAddOutline(params);
+const showOutline = (params?: AddOutlineParams): Promise<void> | undefined => debouncedAddOutline(params);
 
 function hideDefaultCursor(): void {
     if (
@@ -219,7 +213,7 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             hideCustomCursor(params.customCursor);
             return;
         }
-        if(
+        if (
             eventTarget &&
             isFieldPathDropdown(eventTarget)
         ) {
@@ -287,10 +281,7 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             handleCursorPosition(params.event, params.customCursor);
             showCustomCursor(params.customCursor);
             return;
-        } else if (
-            config?.collab.enable &&
-            !config?.collab.isFeedbackMode
-        ) {
+        } else if (config?.collab.enable && !config?.collab.isFeedbackMode) {
             hideCustomCursor(params.customCursor);
             return;
         }
@@ -314,48 +305,11 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             });
         }
 
-        /**
-         * We called it seperately inside the code block to ensure that
-         * the code will not wait for the promise to resolve.
-         * If we get a cache miss, we will send a message to the iframe
-         * without blocking the code.
-         */
-        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(
-            (fieldSchema) => {
-                if (!fieldSchema) return;
-
-                let entryAcl: EntryPermissions | undefined;
-                getEntryPermissionsCached({
-                    entryUid: fieldMetadata.entry_uid,
-                    contentTypeUid: fieldMetadata.content_type_uid,
-                    locale: fieldMetadata.locale,
-                })
-                    .then((data) => {
-                        entryAcl = data;
-                    })
-                    .catch((error) => {
-                        console.error(
-                            "[Visual Builder] Error retrieving entry permissions:",
-                            error
-                        );
-                    })
-                    .finally(() => {
-                        if (!params.customCursor) return;
-                        const { isDisabled: fieldDisabled } =
-                            isFieldDisabled(
-                                fieldSchema,
-                                eventDetails,
-                                entryAcl
-                            );
-                        const fieldType = getFieldType(fieldSchema);
-                        generateCustomCursor({
-                            fieldType,
-                            customCursor: params.customCursor,
-                            fieldDisabled,
-                        });
-                    });
-            }
-        );
+        // we can generate the cursor asynchronously
+        generateCursor({
+            eventDetails,
+            customCursor: params.customCursor,
+        });
 
         handleCursorPosition(params.event, params.customCursor);
         showCustomCursor(params.customCursor);
@@ -398,6 +352,45 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
         editableElement;
 }, 10);
 
-const handleMouseHover = async (params: HandleMouseHoverParams): Promise<void> => await throttledMouseHover(params);
+async function generateCursor({
+    eventDetails,
+    customCursor,
+}: {
+    eventDetails: VisualBuilderCslpEventDetails;
+    customCursor: HTMLDivElement | null;
+}) {
+    if (!customCursor) return;
+    const { fieldMetadata } = eventDetails;
+    const fieldSchema = await FieldSchemaMap.getFieldSchema(
+        fieldMetadata.content_type_uid,
+        fieldMetadata.fieldPath
+    );
+    if (!fieldSchema) {
+        return;
+    }
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+        await fetchEntryPermissionsAndStageDetails({
+            entryUid: fieldMetadata.entry_uid,
+            contentTypeUid: fieldMetadata.content_type_uid,
+            locale: fieldMetadata.locale,
+            variantUid: fieldMetadata.variant,
+        });
+    const { isDisabled: fieldDisabled } = isFieldDisabled(
+        fieldSchema,
+        eventDetails,
+        entryAcl,
+        entryWorkflowStageDetails
+    );
+    const fieldType = getFieldType(fieldSchema);
+    generateCustomCursor({
+        fieldType,
+        customCursor,
+        fieldDisabled,
+    });
+}
+
+const handleMouseHover = async (
+    params: HandleMouseHoverParams
+): Promise<void> => await throttledMouseHover(params);
 
 export default handleMouseHover;

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

@@ -9,7 +9,7 @@ import { handleAddButtonsForMultiple, removeAddInstanceButtons } from "../multip
 import { VisualBuilderPostMessageEvents } from "../types/postMessage.types";
 import visualBuilderPostMessage from "../visualBuilderPostMessage";
 import { VisualBuilder } from "../..";
-import { act, screen } from "@testing-library/preact";
+import { act } from "@testing-library/preact";
 import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../constants";
 import { FieldDataType } from "../types/index.types";
 
@@ -31,6 +31,7 @@ describe("handleIndividualFields", () => {
 
     beforeEach(() => {
         eventDetails = {
+            // @ts-expect-error mocking only required properties
             fieldMetadata: {
                 content_type_uid: "contentTypeUid",
                 entry_uid: "entryUid",
@@ -79,6 +80,16 @@ describe("handleIndividualFields", () => {
             update: true,
             delete: true,
             publish: true,
+          },
+          {
+            permissions: {
+                entry: {
+                    update: true,
+                },
+            },
+            stage: {
+                name: "Unknown"
+            }
           }
         );
         expect(eventDetails.editableElement.getAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY)).toBe(fieldType);