From 721cba2829ed428acf316d33fda9cb100ee096ed Mon Sep 17 00:00:00 2001
From: Srinadh Reddy <srinadh.reddy@contentstack.com>
Date: Tue, 19 Nov 2024 17:27:37 +0530
Subject: [PATCH] handle multiple variant status case

---
 .../FieldRevert/FieldRevertComponent.tsx      |  4 +-
 src/visualBuilder/components/FieldToolbar.tsx | 79 +++++++++++--------
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx
index c076e752..e6819d17 100644
--- a/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx
+++ b/src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx
@@ -44,12 +44,12 @@ export const BASE_VARIANT_STATUS: IVariantStatus = {
 };
 
 export async function getFieldVariantStatus(
-    fieldPathWithIndex: string
+    fieldMetadata: CslpData
 ): Promise<IVariantStatus | undefined> {
     try {
         const result = await visualBuilderPostMessage?.send<IVariantStatus>(
             "get-field-variant-status",
-            fieldPathWithIndex
+            fieldMetadata
         );
         return result;
     } catch (error) {
diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
index b2794a54..a9b3f000 100644
--- a/src/visualBuilder/components/FieldToolbar.tsx
+++ b/src/visualBuilder/components/FieldToolbar.tsx
@@ -40,14 +40,17 @@ import {
     IVariantStatus,
 } from "./FieldRevert/FieldRevertComponent";
 
-export type FieldDetails = Pick<VisualBuilderCslpEventDetails, "editableElement" | "fieldMetadata">;
+export type FieldDetails = Pick<
+    VisualBuilderCslpEventDetails,
+    "editableElement" | "fieldMetadata"
+>;
 
 const TOOLTIP_TOP_EDGE_BUFFER = 96;
 
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
     hideOverlay: () => void;
-};
+}
 
 function handleReplaceAsset(fieldMetadata: CslpData) {
     // TODO avoid sending whole fieldMetadata
@@ -90,17 +93,19 @@ function handleEdit(fieldMetadata: CslpData) {
 
 function handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {
     const { editableElement, fieldMetadata, cslpData } = eventDetails;
-    visualBuilderPostMessage?.send(
-        VisualBuilderPostMessageEvents.TOGGLE_FORM,
-        {
+    visualBuilderPostMessage
+        ?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {
             fieldMetadata,
             cslpData,
-        }
-    ).then(() => {
-        visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {
-            DOMEditStack: getDOMEditStack(editableElement),
+        })
+        .then(() => {
+            visualBuilderPostMessage?.send(
+                VisualBuilderPostMessageEvents.FOCUS_FIELD,
+                {
+                    DOMEditStack: getDOMEditStack(editableElement),
+                }
+            );
         });
-    });
 }
 
 function FieldToolbarComponent(
@@ -128,14 +133,11 @@ function FieldToolbarComponent(
     let fieldType = null;
     let isWholeMultipleField = false;
 
-    if(fieldSchema) {
-        const { isDisabled } = isFieldDisabled(
-            fieldSchema,
-            {
-                editableElement: targetElement,
-                fieldMetadata
-            }
-        );
+    if (fieldSchema) {
+        const { isDisabled } = isFieldDisabled(fieldSchema, {
+            editableElement: targetElement,
+            fieldMetadata,
+        });
 
         // field is disabled, no actions needed
         if (isDisabled) {
@@ -149,8 +151,9 @@ function FieldToolbarComponent(
         Icon = fieldIcons[fieldType];
 
         isMultiple = fieldSchema.multiple || false;
-        if(fieldType === FieldDataType.REFERENCE)
-            isMultiple = (fieldSchema as IReferenceContentTypeSchema).field_metadata.ref_multiple;
+        if (fieldType === FieldDataType.REFERENCE)
+            isMultiple = (fieldSchema as IReferenceContentTypeSchema)
+                .field_metadata.ref_multiple;
 
         // field is multiple but an instance is not selected
         // instead the whole field (all instances) is selected.
@@ -159,12 +162,16 @@ function FieldToolbarComponent(
         // cannot rely on -1 index, as the non-negative index then refers to the index of
         // the featured_blogs block in page_components
         // It is not needed except taxanomy.
-        isWholeMultipleField = isMultiple &&
-        (fieldMetadata.fieldPathWithIndex ===
-            fieldMetadata.instance.fieldPathWithIndex ||
-            fieldMetadata.multipleFieldMetadata?.index === -1);
-
-        if (DEFAULT_MULTIPLE_FIELDS.includes(fieldType) && isWholeMultipleField) {
+        isWholeMultipleField =
+            isMultiple &&
+            (fieldMetadata.fieldPathWithIndex ===
+                fieldMetadata.instance.fieldPathWithIndex ||
+                fieldMetadata.multipleFieldMetadata?.index === -1);
+
+        if (
+            DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&
+            isWholeMultipleField
+        ) {
             return null;
         }
     }
@@ -302,21 +309,25 @@ function FieldToolbarComponent(
             if (fieldSchema) {
                 setFieldSchema(fieldSchema);
             }
-            const variantStatus = await getFieldVariantStatus(
-                fieldMetadata.fieldPathWithIndex
-            );
+            const variantStatus = await getFieldVariantStatus(fieldMetadata);
             setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);
         }
         fetchFieldSchema();
     }, [fieldMetadata]);
 
     useEffect(() => {
-        visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args: { data: { path: string } }) => {
-            if(args.data?.path === fieldMetadata.instance.fieldPathWithIndex){
-                props.hideOverlay()
+        visualBuilderPostMessage?.on(
+            VisualBuilderPostMessageEvents.DELETE_INSTANCE,
+            (args: { data: { path: string } }) => {
+                if (
+                    args.data?.path ===
+                    fieldMetadata.instance.fieldPathWithIndex
+                ) {
+                    props.hideOverlay();
+                }
             }
-        })
-    }, [])
+        );
+    }, []);
 
     const multipleFieldToolbarButtonClasses = classNames(
         "visual-builder__button visual-builder__button--secondary",