fix: issue with variant revert dropdown in canvas

src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx

@@ -3,6 +3,9 @@ import React, { useRef, useEffect } from "preact/compat";
 import { visualBuilderStyles } from "../../visualBuilder.style";
 import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
 import { CslpData } from "../../../cslp/types/cslp.types";
+import { VariantIcon } from "../icons/variant";
+import { CaretIcon } from "../icons";
+import useHandleOutsideClick from "./useHandleOutsideClick";
 
 export interface IVariantStatus {
     fieldLevelCustomizations: boolean;
@@ -65,23 +68,6 @@ export const FieldRevertComponent = (props: FieldRevertComponentProps) => {
         isOpen,
         closeDropdown,
     } = props;
-    const dropdownRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (
-                dropdownRef.current &&
-                !dropdownRef.current.contains(event.target as Node)
-            ) {
-                closeDropdown();
-            }
-        };
-
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
 
     const getDropdownItems = () => {
         const {
@@ -166,11 +152,11 @@ export const FieldRevertComponent = (props: FieldRevertComponentProps) => {
                 "variant-field-revert-component",
                 visualBuilderStyles()["variant-field-revert-component"]
             )}
-            ref={dropdownRef}
             onClick={(e) => e.stopPropagation()}
         >
             {isOpen && (
                 <div
+                    data-testid="variant-field-revert-component__dropdown-content"
                     className={classNames(
                         "variant-field-revert-component__dropdown-content",
                         visualBuilderStyles()[
@@ -202,3 +188,59 @@ export const FieldRevertComponent = (props: FieldRevertComponentProps) => {
         </div>
     );
 };
+
+export const VariantRevertDropdown = (props: any) => {
+    const {
+        closeDropdown,
+        invertTooltipPosition,
+        toggleVariantDropdown,
+        variantStatus = BASE_VARIANT_STATUS,
+    } = props;
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    useHandleOutsideClick(dropdownRef, closeDropdown);
+    const hasDropdownItems = Object.values(variantStatus).some(
+        (value) => value
+    );
+
+    const buttonClassNames = classNames(
+        "visual-builder__button visual-builder__button--secondary",
+        visualBuilderStyles()["visual-builder__button"],
+        visualBuilderStyles()["visual-builder__button--secondary"],
+        visualBuilderStyles()["visual-builder__tooltip"],
+        {
+            "visual-builder__tooltip--bottom": invertTooltipPosition,
+            [visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
+                invertTooltipPosition,
+        }
+    );
+
+    if (!hasDropdownItems) {
+        return (
+            <button
+                className={classNames(buttonClassNames)}
+                style={{ padding: "6px" }}
+                data-tooltip={"Variant"}
+                data-testid={`visual-builder-canvas-variant-icon`}
+            >
+                <VariantIcon />
+            </button>
+        );
+    }
+    return (
+        <div ref={dropdownRef}>
+            <button
+                className={classNames(
+                    buttonClassNames,
+                    visualBuilderStyles()["visual-builder__variant-button"]
+                )}
+                data-tooltip={"Variant Revert"}
+                data-testid={`visual-builder-canvas-variant-revert`}
+                onClick={toggleVariantDropdown}
+            >
+                <VariantIcon />
+                <CaretIcon open={props.isOpen} />
+            </button>
+            <FieldRevertComponent {...props} />
+        </div>
+    );
+};

src/visualBuilder/components/FieldRevert/useHandleOutsideClick.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "preact/compat";
+
+const useHandleOutsideClick = (
+    ref: React.RefObject<HTMLElement>,
+    callback: () => void
+) => {
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (ref.current && !ref.current.contains(event.target as Node)) {
+                callback();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [ref, callback]);
+};
+
+export default useHandleOutsideClick;

src/visualBuilder/components/FieldToolbar.tsx

@@ -37,6 +37,7 @@ import {
     FieldRevertComponent,
     getFieldVariantStatus,
     IVariantStatus,
+    VariantRevertDropdown,
 } from "./FieldRevert/FieldRevertComponent";
 
 export type FieldDetails = Pick<
@@ -349,15 +350,6 @@ function FieldToolbarComponent(
                 visualBuilderStyles()["visual-builder__field-toolbar-container"]
             )}
         >
-            {isVariant && (
-                <FieldRevertComponent
-                    fieldDataName={fieldMetadata.fieldPathWithIndex}
-                    fieldMetadata={fieldMetadata}
-                    variantStatus={fieldVariantStatus}
-                    isOpen={isOpenVariantRevert}
-                    closeDropdown={closeVariantDropdown}
-                />
-            )}
             <div
                 className={classNames(
                     "visual-builder__focused-toolbar__multiple-field-toolbar",
@@ -376,7 +368,17 @@ function FieldToolbarComponent(
                     )}
                 >
                     <>
-                        {isVariant ? variantButton : null}
+                        {isVariant ? (
+                            <VariantRevertDropdown
+                                fieldDataName={fieldMetadata.fieldPathWithIndex}
+                                fieldMetadata={fieldMetadata}
+                                variantStatus={fieldVariantStatus}
+                                isOpen={isOpenVariantRevert}
+                                closeDropdown={closeVariantDropdown}
+                                invertTooltipPosition={invertTooltipPosition}
+                                toggleVariantDropdown={toggleVariantDropdown}
+                            />
+                        ) : null}
                         {isMultiple && !isWholeMultipleField ? (
                             <>
                                 <button

src/visualBuilder/components/__test__/fieldToolbar.test.tsx

@@ -169,4 +169,15 @@ describe("MultipleFieldToolbarComponent", () => {
             );
         })
     });
+    test("display variant icon instead of dropdown", async () => {
+        mockEventDetails.fieldMetadata.variant = "variant";
+        const { findByTestId } = await asyncRender(
+            <FieldToolbarComponent eventDetails={mockEventDetails} />
+        );
+
+        const variantIcon = await findByTestId(
+            "visual-builder-canvas-variant-icon"
+        );
+        expect(variantIcon).toBeInTheDocument();
+    });
 });