@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/__tests__/components/FieldsBehavior/FieldsBehavior.test.tsx

@@ -1,14 +1,36 @@
-import * as React from "react";
-
-import { ThemeProvider } from "styled-components";
-import { render, screen, cleanup } from "@testing-library/react";
-import { parseTheme } from "@ax/helpers";
 import "@testing-library/jest-dom";
 
 import FieldsBehavior from "@ax/components/FieldsBehavior";
+import { getValidity } from "@ax/forms";
+import { getFieldByPath, isEmptyContainer, parseTheme, slugify } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
-afterEach(cleanup);
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+// Mock dependencies
+jest.mock("@ax/forms", () => ({
+	getValidity: jest.fn(),
+}));
+jest.mock("@ax/helpers", () => ({
+	...jest.requireActual("@ax/helpers"),
+	getFieldByPath: jest.fn(() => () => <div data-testid="mock-field" />),
+	isEmptyContainer: jest.fn(() => ({ isEmpty: false })),
+	slugify: jest.fn((text: string) => (text || "").toLowerCase().replace(/\s+/g, "-")),
+}));
+
+const mockGetValidity = getValidity as jest.MockedFunction<typeof getValidity>;
+const _mockGetFieldByPath = getFieldByPath as jest.MockedFunction<typeof getFieldByPath>;
+const mockIsEmptyContainer = isEmptyContainer as jest.MockedFunction<typeof isEmptyContainer>;
+const mockSlugify = slugify as jest.MockedFunction<typeof slugify>;
+
+afterEach(() => {
+	cleanup();
+	jest.clearAllMocks();
+});
+
+// Default mock setup for getValidity
+mockGetValidity.mockReturnValue({ isValid: true, errorText: "" });
 
 describe("FieldsBehavior component rendering", () => {
 	it("should render the component", () => {
@@ -26,9 +48,10 @@ describe("FieldsBehavior component rendering", () => {
 			filled: true,
 			title: "Cool title",
 			type: "TextField",
-			mandatory: "true",
+			mandatory: true,
 			isTitle: true,
 			theme: "default-theme",
+			value: undefined,
 		};
 
 		render(
@@ -53,15 +76,26 @@ describe("FieldsBehavior component rendering", () => {
 				placeholder: "https://",
 				condition: "url",
 			},
-			error: true,
+			error: {
+				type: "validation",
+				message: "This field is required",
+				validator: { required: true },
+				editorID: null,
+				component: null,
+				name: "subjDocumentUrl",
+				key: "subjDocumentUrl",
+				tab: "default",
+				template: false,
+			},
 			helptext: "ayuda",
 			filled: true,
 			title: "Cool title",
 			type: "TextField",
-			mandatory: "true",
+			mandatory: true,
 			isTitle: true,
 			theme: "default-theme",
 			whiteList: ["BasicContent", "CardCollection"],
+			value: undefined,
 		};
 
 		render(
@@ -90,11 +124,12 @@ describe("FieldsBehavior component rendering", () => {
 			},
 			title: "Cool title",
 			type: "TextField",
-			mandatory: "true",
+			mandatory: true,
 			isTitle: true,
 			theme: "default-theme",
 			advanced: true,
 			whiteList: [],
+			value: undefined,
 		};
 
 		render(
@@ -126,10 +161,11 @@ describe("FieldsBehavior component rendering", () => {
 			},
 			title: "Cool title",
 			type: "TextField",
-			mandatory: "true",
+			mandatory: true,
 			isTitle: true,
 			theme: "default-theme",
 			hideable: true,
+			value: undefined,
 		};
 
 		render(
@@ -147,3 +183,324 @@ describe("FieldsBehavior component rendering", () => {
 		expect(tipComponent).toBeTruthy();
 	});
 });
+
+describe("FieldsBehavior validation", () => {
+	const baseProps = {
+		objKey: "testField",
+		fieldType: "TextField",
+		title: "Test Field",
+		value: "test value",
+		validators: { required: true },
+		helptext: "Help text",
+	};
+
+	beforeEach(() => {
+		mockGetValidity.mockReturnValue({ isValid: true, errorText: "" });
+	});
+
+	it("should display helptext initially", () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.queryByText("Help text")).toBeTruthy();
+	});
+
+	it("should validate on error prop change", () => {
+		const deleteError = jest.fn();
+		const error = {
+			type: "validation",
+			message: "Required",
+			validator: { required: true },
+			editorID: null,
+			component: null,
+			name: "testField",
+			key: "testField",
+			tab: "default",
+			template: false,
+		};
+
+		mockGetValidity.mockReturnValue({ isValid: false, errorText: "Required" });
+
+		const { rerender } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} error={error} deleteError={deleteError} />
+			</ThemeProvider>,
+		);
+
+		// After rerender without error, should clear
+		mockGetValidity.mockReturnValue({ isValid: true, errorText: "" });
+		rerender(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} error={undefined} deleteError={deleteError} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByTestId("fields-behavior-wrapper")).toBeTruthy();
+	});
+
+	it("should accept validators prop", () => {
+		const customValidators = { minLength: 5, maxLength: 100 };
+
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} validators={customValidators} />
+			</ThemeProvider>,
+		);
+
+		expect(container).toBeTruthy();
+	});
+});
+
+describe("FieldsBehavior advanced options", () => {
+	const baseProps = {
+		objKey: "testField",
+		fieldType: "TextField",
+		title: "Test Field",
+		advanced: true,
+		value: "test",
+	};
+
+	it("should toggle advanced options on settings icon click", async () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} />
+			</ThemeProvider>,
+		);
+
+		const settingsButton = screen.getByRole("button", { hidden: true });
+		expect(settingsButton).toBeTruthy();
+
+		// The showAdvanced state should be passed to Field component
+		// which is mocked and won't show the actual behavior
+		fireEvent.click(settingsButton);
+
+		expect(settingsButton).toBeTruthy();
+	});
+
+	it("should not show settings icon when advanced is false", () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} advanced={false} />
+			</ThemeProvider>,
+		);
+
+		const tooltips = screen.queryAllByTestId("tooltip-component");
+		const hasSettingsIcon = tooltips.some((tooltip) => tooltip.querySelector('[data-icon="settings"]') !== null);
+
+		expect(hasSettingsIcon).toBeFalsy();
+	});
+});
+
+describe("FieldsBehavior slug synchronization", () => {
+	it("should render sync icon only for page slug field", () => {
+		// Test with page slug
+		const pageSlugProps = {
+			objKey: "slug",
+			fieldType: "TextField",
+			editorID: 0,
+			title: "Slug",
+			value: "current-slug",
+			selectedContent: { title: "Current Page" },
+		};
+
+		const { rerender } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...pageSlugProps} />
+			</ThemeProvider>,
+		);
+
+		const tooltips = screen.queryAllByTestId("tooltip-component");
+		expect(tooltips.length).toBeGreaterThan(0);
+
+		// Test without page slug (different objKey)
+		rerender(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...pageSlugProps} objKey="otherField" />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByTestId("fields-behavior-wrapper")).toBeTruthy();
+	});
+
+	it("should have correct sync behavior for page slug", () => {
+		const updateValue = jest.fn();
+		mockSlugify.mockReturnValue("new-title");
+
+		const props = {
+			objKey: "slug",
+			fieldType: "TextField",
+			editorID: 0,
+			title: "Slug",
+			value: "old-slug",
+			selectedContent: { title: "New Title" },
+			updateValue,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...props} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByTestId("fields-behavior-wrapper")).toBeTruthy();
+	});
+});
+
+describe("FieldsBehavior container state", () => {
+	it("should show title when container is not empty", () => {
+		mockIsEmptyContainer.mockReturnValue({
+			isEmpty: false,
+			containedComponent: { containerText: "Component", component: "TestComponent", componentID: 1 },
+		});
+
+		const defaultProps = {
+			objKey: "testContainer",
+			fieldType: "ComponentContainer",
+			title: "Container Title",
+			value: { someField: "value" },
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...defaultProps} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("Container Title")).toBeTruthy();
+	});
+
+	it("should hide hide button when container is empty", () => {
+		mockIsEmptyContainer.mockReturnValue({
+			isEmpty: true,
+			containedComponent: { containerText: "", component: "", componentID: 0 },
+		});
+
+		const defaultProps = {
+			objKey: "testContainer",
+			fieldType: "ComponentContainer",
+			title: "Container Title",
+			value: { someField: "value" },
+			hideable: true,
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...defaultProps} />
+			</ThemeProvider>,
+		);
+
+		const tooltips = screen.queryAllByTestId("tooltip-component");
+		const hasHideIcon = tooltips.some((tooltip) => tooltip.querySelector('[data-icon="delete"]') !== null);
+
+		expect(hasHideIcon).toBeFalsy();
+	});
+});
+
+describe("FieldsBehavior optional props", () => {
+	const baseProps = {
+		objKey: "testField",
+		fieldType: "TextField",
+		title: "Test Field",
+		value: "test",
+	};
+
+	it("should render without hideField callback", () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} hideable={true} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByTestId("fields-behavior-wrapper")).toBeTruthy();
+	});
+
+	it("should render without updateValue callback", () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} objKey="slug" editorID={0} selectedContent={{ title: "Test" }} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByTestId("fields-behavior-wrapper")).toBeTruthy();
+	});
+
+	it("should render without deleteError callback", async () => {
+		mockGetValidity.mockReturnValue({ isValid: false, errorText: "Error" });
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior
+					{...baseProps}
+					error={{
+						type: "validation",
+						message: "Error",
+						validator: { required: true },
+						editorID: null,
+						component: null,
+						name: "testField",
+						key: "testField",
+						tab: "default",
+						template: false,
+					}}
+					validators={{ required: true }}
+				/>
+			</ThemeProvider>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("Error")).toBeTruthy();
+		});
+	});
+
+	it("should handle missing selectedContent gracefully", () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...baseProps} objKey="slug" editorID={0} selectedContent={undefined} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByTestId("fields-behavior-wrapper")).toBeTruthy();
+	});
+});
+
+describe("FieldsBehavior mandatory field indicator", () => {
+	it("should display asterisk for mandatory fields", () => {
+		const defaultProps = {
+			objKey: "testField",
+			fieldType: "TextField",
+			title: "Required Field",
+			mandatory: true,
+			value: "test",
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...defaultProps} />
+			</ThemeProvider>,
+		);
+
+		expect(screen.getByText("*")).toBeTruthy();
+	});
+
+	it("should not display asterisk for optional fields", () => {
+		const defaultProps = {
+			objKey: "testField",
+			fieldType: "TextField",
+			title: "Optional Field",
+			mandatory: false,
+			value: "test",
+		};
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<FieldsBehavior {...defaultProps} />
+			</ThemeProvider>,
+		);
+
+		const asterisk = screen.queryByText("*");
+		expect(asterisk).toBeFalsy();
+	});
+});

package/src/__tests__/modules/Users/UserList/UserList.test.tsx

@@ -224,20 +224,20 @@ describe("UserList module events", () => {
 			render(Component, { store });
 		});
 
-		expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+		expect(screen.queryByTestId("modal-delete-content")).toBeFalsy();
 
 		expect(screen.queryAllByTestId("user-item").length).toBe(3);
 
 		await user.click(screen.getByLabelText("Prueba Prueba"));
 		await user.click(screen.getByText("delete"));
 
-		expect(screen.getByTestId("user-delete-bulk-modal")).toBeTruthy();
+		expect(screen.getByTestId("modal-delete-content")).toBeTruthy();
 
 		await act(async () => {
 			fireEvent.click(screen.getByText("Delete"));
 		});
 
-		expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+		expect(screen.queryByTestId("modal-delete-content")).toBeFalsy();
 		expect(screen.queryAllByTestId("user-item").length).toBe(2);
 
 		expect(store.getActions()).toContainEqual({
@@ -284,20 +284,20 @@ describe("UserList module events", () => {
 			render(Component, { store });
 		});
 
-		expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+		expect(screen.queryByTestId("modal-delete-content")).toBeFalsy();
 
 		expect(screen.queryAllByTestId("user-item").length).toBe(2);
 
 		await user.click(screen.getByLabelText("Admin"));
 		await user.click(screen.getByText("Remove from this site"));
 
-		expect(screen.getByTestId("user-delete-bulk-modal")).toBeTruthy();
+		expect(screen.getByTestId("modal-delete-content")).toBeTruthy();
 
 		await act(async () => {
 			fireEvent.click(screen.getByText("Remove"));
 		});
 
-		expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+		expect(screen.queryByTestId("modal-delete-content")).toBeFalsy();
 		expect(screen.queryAllByTestId("user-item").length).toBe(1);
 	});
 });

package/src/components/Fields/IntegrationsField/IntegrationItem/atoms.tsx

@@ -1,12 +1,20 @@
-import React from "react";
-
-import { IModal } from "@ax/types";
 import { Modal } from "@ax/components";
+import type { IModal } from "@ax/types";
 
 import * as S from "./style";
 
-const DeleteModal = (props: IModal & { integrationName: string | undefined }): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, integrationName } = props;
+const DeleteModal = (
+	props: IModal & { integrationName: string | undefined; onDelete(): void; isDeleting?: boolean },
+): JSX.Element => {
+	const { isOpen, toggleModal, integrationName, onDelete, isDeleting = false } = props;
+
+	const mainModalAction = {
+		title: isDeleting ? "Removing" : "Remove",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -16,6 +24,7 @@ const DeleteModal = (props: IModal & { integrationName: string | undefined }): J
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
+			height="auto"
 		>
 			<S.ModalContent>
 				Are you sure you want to remove <strong>{integrationName}</strong> from this page?

package/src/components/Fields/IntegrationsField/IntegrationItem/index.tsx

@@ -58,12 +58,6 @@ const IntegrationItem = (props: IProps): JSX.Element => {
 
 	const integrationName = isCustom ? "Custom Code" : integration.name;
 
-	const mainDeleteModalAction = {
-		title: "Remove",
-		onClick: removeItem,
-	};
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
-
 	return (
 		<>
 			<S.Component disabled={disabled} data-testid="integration-item">
@@ -109,9 +103,8 @@ const IntegrationItem = (props: IProps): JSX.Element => {
 			<DeleteModal
 				isOpen={isOpenDelete}
 				toggleModal={toggleModalDelete}
-				secondaryModalAction={secondaryDeleteModalAction}
-				mainModalAction={mainDeleteModalAction}
 				integrationName={integration.name}
+				onDelete={removeItem}
 			/>
 			{isVisibleCopy && <Toast message="1 Custom Code copied to clipboard" setIsVisible={setIsVisibleCopy} />}
 		</>

package/src/components/Fields/UrlField/index.tsx

@@ -1,10 +1,11 @@
 import { memo, useEffect, useState } from "react";
 
-import { IconAction, TextField, FloatingPanel, FieldsBehavior, PageFinder } from "@ax/components";
-import { useModal } from "@ax/hooks";
-import { isReqOk } from "@ax/helpers";
-import type { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
 import { pages as pagesApi } from "@ax/api";
+import { FieldsBehavior, FloatingPanel, IconAction, PageFinder, TextField } from "@ax/components";
+import { isReqOk } from "@ax/helpers";
+import { useModal } from "@ax/hooks";
+import type { Field, IPage, ISelectOption, IUrlField } from "@ax/types";
+
 import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./utils";
 
 import * as S from "./style";

package/src/components/Fields/Wysiwyg/atoms.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { Button, FieldsBehavior } from "@ax/components";
+import type { IUrlField } from "@ax/types";
+
+import * as S from "./style";
+
+const POPOVER_PADDING = 16;
+const POPOVER_WIDTH = 320;
+
+const LinkPopover = (props: ILinkPopoverProps) => {
+	const { x: initialX, y: initialY, selectedText = "", linkData, onInsert, onClose } = props;
+	const [linkText, setLinkText] = useState<string>(selectedText);
+	const [urlField, setUrlField] = useState<IUrlField | null>(null);
+	const [linkOptions, setLinkOptions] = useState<string[]>([]);
+	const [position, setPosition] = useState({ x: initialX, y: initialY });
+	const popoverRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!popoverRef.current) return;
+
+		setTimeout(() => {
+			const popoverHeight = popoverRef.current?.offsetHeight || 0;
+			let finalX = initialX;
+			let finalY = initialY;
+
+			// Check if popover goes off screen to the right
+			if (initialX + POPOVER_WIDTH + POPOVER_PADDING > window.innerWidth) {
+				finalX = window.innerWidth - POPOVER_WIDTH - POPOVER_PADDING;
+			}
+
+			// Check if popover goes off screen to the left
+			if (finalX < POPOVER_PADDING) {
+				finalX = POPOVER_PADDING;
+			}
+
+			// Check if popover goes off screen at the bottom
+			if (initialY + popoverHeight + POPOVER_PADDING > window.innerHeight) {
+				finalY = initialY - popoverHeight - 10;
+			}
+
+			// Check if popover goes off screen at the top
+			if (finalY < POPOVER_PADDING) {
+				finalY = POPOVER_PADDING;
+			}
+
+			setPosition({ x: finalX, y: finalY });
+		}, 0);
+	}, [initialX, initialY]);
+
+	useEffect(() => {
+		if (linkData?.isEditing) {
+			const urlFieldValue: IUrlField = {
+				title: selectedText,
+			};
+
+			if (linkData.linkPageId) {
+				urlFieldValue.linkTo = linkData.linkPageId;
+				urlFieldValue.linkToURL = linkData.url;
+			} else {
+				urlFieldValue.href = linkData.url;
+			}
+
+			setUrlField(urlFieldValue);
+			setLinkOptions([...(linkData.newTab ? ["newTab"] : []), ...(linkData.noFollow ? ["noFollow"] : [])]);
+		}
+	}, [linkData, selectedText]);
+
+	const handleInsert = () => {
+		const hasUrl = urlField?.href || urlField?.linkToURL;
+		if (hasUrl) {
+			const finalUrl = urlField.href || urlField.linkToURL || "";
+			const finalText = linkText || urlField.title || finalUrl;
+			const newTab = linkOptions.includes("newTab");
+			const noFollow = linkOptions.includes("noFollow");
+			const linkTo = urlField.linkToURL ? urlField.linkTo : undefined;
+			onInsert(finalUrl, finalText, { newTab, noFollow, linkTo });
+		}
+	};
+
+	const handleOverlayClick = () => {
+		onClose();
+	};
+
+	return createPortal(
+		<>
+			<S.PopoverOverlay onClick={handleOverlayClick} />
+			<S.PopoverContainer ref={popoverRef} x={position.x} y={position.y}>
+				{!linkData?.isImageLink && (
+					<FieldsBehavior
+						title="Text"
+						name="text"
+						fieldType="TextField"
+						value={linkText}
+						onChange={setLinkText}
+						placeholder="Type link text"
+					/>
+				)}
+				<FieldsBehavior
+					title="URL"
+					name="url"
+					fieldType="UrlField"
+					value={urlField}
+					onChange={setUrlField}
+					showAdvanced={false}
+					mandatory={true}
+				/>
+				<FieldsBehavior
+					title=""
+					name="linkOptions"
+					fieldType="CheckGroup"
+					value={linkOptions}
+					onChange={setLinkOptions}
+					options={[
+						{ name: "newTab", title: "Open in new tab", value: "newTab" },
+						{ name: "noFollow", title: "Add nofollow", value: "noFollow" },
+					]}
+				/>
+				<S.PopoverButtonWrapper>
+					<Button buttonStyle="text" onClick={handleInsert} disabled={!urlField?.href && !urlField?.linkToURL}>
+						INSERT
+					</Button>
+				</S.PopoverButtonWrapper>
+			</S.PopoverContainer>
+		</>,
+		document.body,
+	);
+};
+
+interface ILinkPopoverProps {
+	x: number;
+	y: number;
+	selectedText?: string;
+	linkData?: { url: string; newTab: boolean; noFollow: boolean; isEditing: boolean; linkPageId?: number | null; isImageLink?: boolean } | null;
+	onInsert: (url: string, text: string, options?: { newTab: boolean; noFollow: boolean; linkTo?: number | null }) => void;
+	onClose: () => void;
+}
+
+export { LinkPopover };