feat: added resolved variants permission handling logic

csAyushDubey · csAyushDubey · commit 15c8f04508cc · 2025-09-12T11:22:07.000+05:30
diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
@@ -43,6 +43,7 @@ import { EntryPermissions } from "../utils/getEntryPermissions";
 import { FieldLocationAppList } from "./FieldLocationAppList";
 import { FieldLocationIcon } from "./FieldLocationIcon";
 import { WorkflowStageDetails } from "../utils/getWorkflowStageDetails";
+import { ResolvedVariantPermissions } from "../utils/getResolvedVariantPermissions";
 
 export type FieldDetails = Pick<
     VisualBuilderCslpEventDetails,
@@ -57,6 +58,7 @@ interface MultipleFieldToolbarProps {
     isVariant?: boolean;
     entryPermissions?: EntryPermissions | undefined;
     entryWorkflowStageDetails?: WorkflowStageDetails | undefined;
+    resolvedVariantPermissions?: ResolvedVariantPermissions | undefined;
 }
 
 function handleReplaceAsset(fieldMetadata: CslpData) {
@@ -117,6 +119,7 @@ function FieldToolbarComponent(
         isVariant: isVariantOrParentOfVariant,
         entryPermissions,
         entryWorkflowStageDetails,
+        resolvedVariantPermissions,
     } = props;
     const { fieldMetadata, editableElement: targetElement } = eventDetails;
     const [isFormLoading, setIsFormLoading] = useState(false);
@@ -157,8 +160,9 @@ function FieldToolbarComponent(
                 editableElement: targetElement,
                 fieldMetadata,
             },
+            resolvedVariantPermissions,
             entryPermissions,
-            entryWorkflowStageDetails
+            entryWorkflowStageDetails,
         );
         disableFieldActions = isDisabled;
 
diff --git a/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx b/src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx
@@ -297,6 +297,7 @@ describe("FieldLabelWrapperComponent", () => {
         expect(isFieldDisabled).toHaveBeenCalledWith(
             mockFieldSchema,
             mockEventDetails,
+            undefined,
             {
                 update: {
                     create: true,
diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx
@@ -156,18 +156,20 @@ function FieldLabelWrapperComponent(
                 return;
             }
 
-            const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+            const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =
                 await fetchEntryPermissionsAndStageDetails({
                     entryUid: props.fieldMetadata.entry_uid,
                     contentTypeUid: props.fieldMetadata.content_type_uid,
                     locale: props.fieldMetadata.locale,
                     variantUid: props.fieldMetadata.variant,
+                    fieldPathWithIndex: props.fieldMetadata.fieldPathWithIndex,
                 });
             const { isDisabled: fieldDisabled, reason } = isFieldDisabled(
                 fieldSchema,
                 eventDetails,
+                resolvedVariantPermissions,
                 entryAcl,
-                entryWorkflowStageDetails
+                entryWorkflowStageDetails,
             );
 
             const currentFieldDisplayName =
diff --git a/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts b/src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts
@@ -37,6 +37,9 @@ interface LocaleEvent {
 }
 
 function isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {
+    if(!variantOrder || variantOrder.length === 0) {
+        return false;
+    }
     const indexOfVariant = variantOrder.indexOf(variant_uid);
     let indexOfDataCslp = -1;
     for (let i = variantOrder.length-1; i >= 0; i--) {
diff --git a/src/visualBuilder/generators/generateToolbar.tsx b/src/visualBuilder/generators/generateToolbar.tsx
@@ -51,12 +51,13 @@ export async function appendFieldToolbar(
         ) && !isHover
     )
         return;
-    const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails } =
+    const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =
         await fetchEntryPermissionsAndStageDetails({
             entryUid: eventDetails.fieldMetadata.entry_uid,
             contentTypeUid: eventDetails.fieldMetadata.content_type_uid,
             locale: eventDetails.fieldMetadata.locale,
             variantUid: eventDetails.fieldMetadata.variant,
+            fieldPathWithIndex: eventDetails.fieldMetadata.fieldPathWithIndex,
         });
     const wrapper = document.createDocumentFragment();
     render(
@@ -66,6 +67,7 @@ export async function appendFieldToolbar(
             isVariant={isVariant}
             entryPermissions={entryPermissions}
             entryWorkflowStageDetails={entryWorkflowStageDetails}
+            resolvedVariantPermissions={resolvedVariantPermissions}
         />,
         wrapper
     );
diff --git a/src/visualBuilder/listeners/mouseClick.ts b/src/visualBuilder/listeners/mouseClick.ts
@@ -310,23 +310,26 @@ async function handleFieldSchemaAndIndividualFields(
         fieldPath,
         locale,
         variant: variantUid,
+        fieldPathWithIndex,
     } = fieldMetadata;
     const fieldSchema = await FieldSchemaMap.getFieldSchema(
         content_type_uid,
         fieldPath
     );
-    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =
         await fetchEntryPermissionsAndStageDetails({
             entryUid: entry_uid,
             contentTypeUid: content_type_uid,
             locale,
             variantUid,
+            fieldPathWithIndex,
         });
 
     if (fieldSchema) {
         const { isDisabled } = isFieldDisabled(
             fieldSchema,
             eventDetails,
+            resolvedVariantPermissions,
             entryAcl,
             entryWorkflowStageDetails
         );
diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts
@@ -87,16 +87,18 @@ async function addOutline(params?: AddOutlineParams): Promise<void> {
         fieldPath
     );
     if (!fieldSchema) return;
-    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =
         await fetchEntryPermissionsAndStageDetails({
             entryUid: fieldMetadata.entry_uid,
             contentTypeUid: fieldMetadata.content_type_uid,
             locale: fieldMetadata.locale,
             variantUid: fieldMetadata.variant,
+            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,
         });
     const { isDisabled } = isFieldDisabled(
         fieldSchema,
         eventDetails,
+        resolvedVariantPermissions,
         entryAcl,
         entryWorkflowStageDetails
     );
@@ -372,16 +374,18 @@ async function generateCursor({
     if (!fieldSchema) {
         return;
     }
-    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =
         await fetchEntryPermissionsAndStageDetails({
             entryUid: fieldMetadata.entry_uid,
             contentTypeUid: fieldMetadata.content_type_uid,
             locale: fieldMetadata.locale,
             variantUid: fieldMetadata.variant,
+            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,
         });
     const { isDisabled: fieldDisabled } = isFieldDisabled(
         fieldSchema,
         eventDetails,
+        resolvedVariantPermissions,
         entryAcl,
         entryWorkflowStageDetails
     );
diff --git a/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts b/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
@@ -74,7 +74,10 @@ describe("handleIndividualFields", () => {
         expect(getFieldType).toHaveBeenCalledWith(fieldSchema);
         expect(isFieldDisabled).toHaveBeenCalledWith(
           fieldSchema, 
-          eventDetails, 
+          eventDetails,
+          {
+            update: true,
+          },
           {
             read: true,
             update: true,
diff --git a/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts b/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
@@ -5,6 +5,11 @@ import { FieldDetails } from "../../components/FieldToolbar";
 import Config from "../../../configManager/configManager";
 import { VisualBuilder } from "../..";
 import { EntryPermissions } from "../getEntryPermissions";
+import { ResolvedVariantPermissions } from "../getResolvedVariantPermissions";
+
+const resolvedVariantPermissions: ResolvedVariantPermissions = {
+    update: true,
+};
 
 describe("isFieldDisabled", () => {
     it("should return disabled state due to read-only role", () => {
@@ -247,7 +252,7 @@ describe("isFieldDisabled", () => {
             },
         };
 
-        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails, {
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails, resolvedVariantPermissions, {
             update: false,
             create: true,
             read: true,
@@ -292,6 +297,7 @@ describe("isFieldDisabled", () => {
             const result = isFieldDisabled(
                 fieldSchemaMap,
                 eventFieldDetails,
+                resolvedVariantPermissions,
                 entryPermissions,
                 workflowStageDetails
             );
@@ -332,6 +338,7 @@ describe("isFieldDisabled", () => {
             const result = isFieldDisabled(
                 fieldSchemaMap,
                 eventFieldDetails,
+                resolvedVariantPermissions,
                 entryPermissions,
                 workflowStageDetails
             );
@@ -372,6 +379,7 @@ describe("isFieldDisabled", () => {
             const result = isFieldDisabled(
                 fieldSchemaMap,
                 eventFieldDetails,
+                resolvedVariantPermissions,
                 entryPermissions,
                 workflowStageDetails
             );
@@ -408,6 +416,7 @@ describe("isFieldDisabled", () => {
             const result = isFieldDisabled(
                 fieldSchemaMap,
                 eventFieldDetails,
+                resolvedVariantPermissions,
                 entryPermissions,
                 workflowStageDetails
             );
@@ -448,6 +457,7 @@ describe("isFieldDisabled", () => {
             const result = isFieldDisabled(
                 fieldSchemaMap,
                 eventFieldDetails,
+                resolvedVariantPermissions,
                 entryPermissions,
                 // @ts-expect-error testing missing name property
                 workflowStageDetails
@@ -493,6 +503,7 @@ describe("isFieldDisabled", () => {
             const result = isFieldDisabled(
                 fieldSchemaMap,
                 eventFieldDetails,
+                resolvedVariantPermissions,
                 entryPermissions,
                 workflowStageDetails
             );
@@ -524,6 +535,7 @@ describe("isFieldDisabled", () => {
             const result = isFieldDisabled(
                 fieldSchemaMap,
                 eventFieldDetails,
+                resolvedVariantPermissions,
                 entryPermissions,
                 undefined
             );
diff --git a/src/visualBuilder/utils/__test__/updateFocussedState.test.ts b/src/visualBuilder/utils/__test__/updateFocussedState.test.ts
@@ -223,6 +223,9 @@ describe("updateFocussedState", () => {
                 editableElement: editableElementMock,
                 fieldMetadata: expect.any(Object),
             },
+            {
+                update: true,
+            },
             mockEntryPermissions,
             mockWorkflowStageDetails
         );
diff --git a/src/visualBuilder/utils/fetchEntryPermissionsAndStageDetails.ts b/src/visualBuilder/utils/fetchEntryPermissionsAndStageDetails.ts
@@ -1,22 +1,32 @@
 import { getEntryPermissionsCached } from "./getEntryPermissionsCached";
+import { getResolvedVariantPermissions } from "./getResolvedVariantPermissions";
 import { getWorkflowStageDetails } from "./getWorkflowStageDetails";
 
 export async function fetchEntryPermissionsAndStageDetails({
     entryUid,
     contentTypeUid,
     locale,
     variantUid,
+    fieldPathWithIndex,
 }: {
     entryUid: string;
     contentTypeUid: string;
     locale: string;
+    fieldPathWithIndex: string;
     variantUid?: string | undefined;
 }) {
     const entryAclPromise = getEntryPermissionsCached({
         entryUid,
         contentTypeUid,
         locale,
     });
+    const resolvedVariantPermissionsPromise = getResolvedVariantPermissions({
+        entry_uid: entryUid,
+        content_type_uid: contentTypeUid,
+        locale,
+        variant: variantUid,
+        fieldPathWithIndex,
+    });
     const entryWorkflowStageDetailsPromise = getWorkflowStageDetails({
         entryUid,
         contentTypeUid,
@@ -26,6 +36,7 @@ export async function fetchEntryPermissionsAndStageDetails({
     const results = await Promise.allSettled([
         entryAclPromise,
         entryWorkflowStageDetailsPromise,
+        resolvedVariantPermissionsPromise
     ]);
     if (results[0].status === "rejected") {
         console.debug(
@@ -39,12 +50,21 @@ export async function fetchEntryPermissionsAndStageDetails({
             results[1].reason
         );
     }
+    if (results[2].status === "rejected") {
+        console.debug(
+            "[Visual Builder] Error retrieving resolved variant permissions",
+            results[2].reason
+        );
+    }
     const acl =
         results[0].status === "fulfilled" ? results[0].value : undefined;
     const workflowStage =
         results[1].status === "fulfilled" ? results[1].value : undefined;
+    const resolvedVariantPermissions =
+        results[2].status === "fulfilled" ? results[2].value : undefined;
     return {
         acl,
         workflowStage,
+        resolvedVariantPermissions,
     };
 }
diff --git a/src/visualBuilder/utils/getResolvedVariantPermissions.ts b/src/visualBuilder/utils/getResolvedVariantPermissions.ts
@@ -0,0 +1,24 @@
+import { CslpData } from "../../cslp/types/cslp.types";
+import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
+import visualBuilderPostMessage from "./visualBuilderPostMessage";
+
+export type FieldContext = Pick<CslpData, "content_type_uid" | "entry_uid" | "locale" | "variant" | "fieldPathWithIndex">;
+
+export interface ResolvedVariantPermissions {
+  update: boolean;
+}
+
+export async function getResolvedVariantPermissions(fieldContext: FieldContext) {
+  try {
+    const result = await visualBuilderPostMessage?.send<ResolvedVariantPermissions>(VisualBuilderPostMessageEvents.GET_RESOLVED_VARIANT_PERMISSIONS, fieldContext);
+    return result ?? {
+      update: true,
+    };
+  }
+  catch(e) {
+    console.warn("Error retrieving resolved variant permissions", e);
+    return {
+      update: true,
+    };
+  }
+}
diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts
@@ -33,6 +33,7 @@ export async function handleIndividualFields(
         content_type_uid,
         entry_uid,
         locale,
+        variant,
         fieldPath,
         fieldPathWithIndex,
     } = fieldMetadata;
@@ -47,15 +48,18 @@ export async function handleIndividualFields(
 
     const fieldType = getFieldType(fieldSchema);
 
-    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =
+    const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =
         await fetchEntryPermissionsAndStageDetails({
             entryUid: entry_uid,
             contentTypeUid: content_type_uid,
             locale,
+            variantUid: variant,
+            fieldPathWithIndex,
         });
     const { isDisabled: disabled } = isFieldDisabled(
         fieldSchema,
         eventDetails,
+        resolvedVariantPermissions,
         entryAcl,
         entryWorkflowStageDetails
     );
diff --git a/src/visualBuilder/utils/isFieldDisabled.ts b/src/visualBuilder/utils/isFieldDisabled.ts
diff --git a/src/visualBuilder/utils/types/postMessage.types.ts b/src/visualBuilder/utils/types/postMessage.types.ts
diff --git a/src/visualBuilder/utils/updateFocussedState.ts b/src/visualBuilder/utils/updateFocussedState.ts

Original file line number	Diff line number	Diff line change
`@@ -297,6 +297,7 @@ describe("FieldLabelWrapperComponent", () => {`
`297`	`297`	`expect(isFieldDisabled).toHaveBeenCalledWith(`
`298`	`298`	`mockFieldSchema,`
`299`	`299`	`mockEventDetails,`
	`300`	`+ undefined,`
`300`	`301`	`{`
`301`	`302`	`update: {`
`302`	`303`	`create: true,`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,9 @@ interface LocaleEvent {`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`function isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {`
	`40`	`+ if(!variantOrder \|\| variantOrder.length === 0) {`
	`41`	`+ return false;`
	`42`	`+ }`
`40`	`43`	`const indexOfVariant = variantOrder.indexOf(variant_uid);`
`41`	`44`	`let indexOfDataCslp = -1;`
`42`	`45`	`for (let i = variantOrder.length-1; i >= 0; i--) {`