Merge pull request #475 from contentstack/VE-6918/error-text-main

VE-6918 : warning message improved

Author: csAdityaPachauri

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

@@ -0,0 +1,73 @@
+import React from "preact/compat";
+import { render, fireEvent, waitFor } from "@testing-library/preact";
+import { EmptyBlock } from "../emptyBlock";
+import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage";
+import { observeParentAndFocusNewInstance } from "../../utils/multipleElementAddButton";
+import { CslpData } from "../../../cslp/types/cslp.types";
+import { ISchemaFieldMap } from "../../utils/types/index.types";
+import { VisualBuilderPostMessageEvents } from "../../utils/types/postMessage.types";
+
+vi.mock("../../utils/visualBuilderPostMessage", () => ({
+    default: {
+        send: vi.fn(),
+    },
+}));
+
+vi.mock("../../utils/multipleElementAddButton", () => ({
+    observeParentAndFocusNewInstance: vi.fn(),
+}));
+
+describe("EmptyBlock", () => {
+    const mockDetails = {
+        fieldMetadata: {
+            cslpValue: "parent.cslp.value",
+        } as CslpData,
+        fieldSchema: {
+            display_name: "Test Block",
+        } as ISchemaFieldMap,
+    };
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    test("should render correctly", () => {
+        const { getByText, getByTestId } = render(
+            <EmptyBlock details={mockDetails} />
+        );
+
+        expect(
+            getByText(
+                (_, element) =>
+                    element?.textContent ===
+                    "This page doesn’t have any Test Block added. Click the button below to add one."
+            )
+        ).toBeTruthy();
+        expect(
+            getByTestId("visual-builder__empty-block-add-button")
+        ).toBeTruthy();
+        expect(getByText("Add Test Block")).toBeTruthy();
+    });
+
+    test("should call sendAddInstanceEvent on button click", async () => {
+        const { getByTestId } = render(<EmptyBlock details={mockDetails} />);
+        const addButton = getByTestId("visual-builder__empty-block-add-button");
+
+        fireEvent.click(addButton);
+
+        await waitFor(() => {
+            expect((visualBuilderPostMessage as any).send).toHaveBeenCalledWith(
+                VisualBuilderPostMessageEvents.ADD_INSTANCE,
+                {
+                    fieldMetadata: mockDetails.fieldMetadata,
+                    index: 0,
+                }
+            );
+        });
+
+        expect(observeParentAndFocusNewInstance).toHaveBeenCalledWith({
+            parentCslp: mockDetails.fieldMetadata.cslpValue,
+            index: 0,
+        });
+    });
+});

src/visualBuilder/components/emptyBlock.tsx

@@ -6,6 +6,7 @@ import { observeParentAndFocusNewInstance } from "../utils/multipleElementAddBut
 import { ISchemaFieldMap } from "../utils/types/index.types";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
 import React from "preact/compat";
+import { startCase, toLower } from "lodash-es";
 
 interface EmptyBlockProps {
     details: {
@@ -46,7 +47,18 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                     visualBuilderStyles()["visual-builder__empty-block-title"]
                 )}
             >
-                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.
+                This page doesn’t have any{" "}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-field-name",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-field-name"
+                        ]
+                    )}
+                >
+                    {startCase(toLower(blockParentName))}
+                </span>{" "}
+                added. Click the button below to add one.
             </div>
             <button
                 className={classNames(
@@ -59,8 +71,17 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                 type="button"
                 data-testid="visual-builder__empty-block-add-button"
             >
-                <i className="fas fa-plus"></i> &nbsp;
-                {blockParentName}
+                <span
+                    className={classNames(
+                        "visual-builder__empty-block-plus-icon",
+                        visualBuilderStyles()[
+                            "visual-builder__empty-block-plus-icon"
+                        ]
+                    )}
+                >
+                    +
+                </span>
+                &nbsp; Add {blockParentName}
             </button>
         </div>
     );

src/visualBuilder/visualBuilder.style.ts

@@ -121,6 +121,13 @@ export function visualBuilderStyles() {
                 visibility: visible;
             }
         `,
+        "visual-builder__empty-block-plus-icon": css`
+            font-size: 22px;
+            font-weight: 300;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `,
         "visual-builder__overlay--outline": css`
             position: absolute;
             outline: 4px solid #715cdd;
@@ -571,19 +578,24 @@ export function visualBuilderStyles() {
             line-height: 100%;
             color: #647696;
         `,
+        "visual-builder__empty-block-field-name": css`
+            font-weight: 700;
+        `,
         "visual-builder__empty-block-add-button": css`
             height: 32px;
             border-radius: 4px;
             background: #f9f8ff;
             border-color: #6c5ce7;
             border-width: 1px;
-            padding: 8px 16px 8px 16px;
+            padding: 0 16px;
             font-size: 0.9rem;
             font-family: Inter;
             font-weight: 600;
             color: #6c5ce7;
-            padding-block: 0px;
             letter-spacing: 0.01rem;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
         `,
         "visual-builder__hover-outline": css`
             position: absolute;