Merge pull request #331 from contentstack/VE-4804

refactor: replace hardcoded class names with constants for empty block parent

Author: hiteshshetty-dev

src/visualBuilder/components/emptyBlock.tsx

@@ -57,6 +57,7 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                 )}
                 onClick={() => sendAddInstanceEvent()}
                 type="button"
+                data-testid="visual-builder__empty-block-add-button"
             >
                 <i className="fas fa-plus"></i> &nbsp;
                 {blockParentName}

src/visualBuilder/index.ts

@@ -42,6 +42,7 @@ import {
 import { useHighlightCommentIcon } from "./eventManager/useHighlightCommentIcon";
 import { updateHighlightedCommentIconPosition } from "./generators/generateHighlightedComment";
 import { useRecalculateVariantDataCSLPValues } from "./eventManager/useRecalculateVariantDataCSLPValues";
+import { VB_EmptyBlockParentClass } from "..";
 
 interface VisualBuilderGlobalStateImpl {
     previousSelectedEditableDOM: HTMLElement | Element | null;
@@ -184,7 +185,7 @@ export class VisualBuilder {
                 );
                 const emptyBlockParents = Array.from(
                     document.querySelectorAll(
-                        ".visual-builder__empty-block-parent"
+                        `.${VB_EmptyBlockParentClass}`
                     )
                 );
 

src/visualBuilder/listeners/mouseClick.ts

@@ -21,6 +21,7 @@ import { FieldSchemaMap } from "../utils/fieldSchemaMap";
 import { isFieldDisabled } from "../utils/isFieldDisabled";
 import EventListenerHandlerParams from "./types";
 import { toggleHighlightedCommentIconDisplay } from "../generators/generateHighlightedComment";
+import { VB_EmptyBlockParentClass } from "../..";
 
 type HandleBuilderInteractionParams = Omit<
     EventListenerHandlerParams,
@@ -110,7 +111,7 @@ async function handleBuilderInteraction(
     // if the selected element is our empty block element, return
     if (
         editableElement.classList.contains(
-            "visual-builder__empty-block-parent"
+            VB_EmptyBlockParentClass
         ) ||
         editableElement.classList.contains("visual-builder__empty-block")
     ) {

src/visualBuilder/listeners/mouseHover.ts

@@ -10,6 +10,7 @@ import EventListenerHandlerParams from "./types";
 import { VisualBuilder } from "..";
 import { addHoverOutline } from "../generators/generateHoverOutline";
 import { visualBuilderStyles } from "../visualBuilder.style";
+import { VB_EmptyBlockParentClass } from "../..";
 
 export interface HandleMouseHoverParams
     extends Pick<
@@ -202,7 +203,7 @@ async function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {
 
         if (
             !editableElement.classList.contains(
-                "visual-builder__empty-block-parent"
+                VB_EmptyBlockParentClass
             ) &&
             !editableElement.classList.contains("visual-builder__empty-block")
         ) {