@griddo/ax 12.8.2 → 12.8.4

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.8.2",
+	"version": "12.8.4",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -201,5 +201,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "00a702fad2cd346b673d8454d818d9e0e9d470f3"
+	"gitHead": "3a207a967d89225272c5760824e1138d0b01b926"
 }

package/src/Style/index.tsx

@@ -40,6 +40,7 @@ const GlobalStyle = createGlobalStyle`
     background: transparent;
     padding: 0;
     border: none;
+    color: inherit;
   }
 
   #root {

package/src/__tests__/components/Fields/VisualUniqueSelection/VisualUniqueSelection.test.tsx

@@ -48,6 +48,30 @@ describe("VisualUniqueSelection component rendering", () => {
 		expect(screen.getByTestId("imageSelectionComponent")).toBeTruthy();
 	});
 
+	// Las opciones por tema son una lista de `{ theme, options }`; el campo tiene que
+	// quedarse con la entrada del tema que recibe, y con sus miniaturas.
+	test("should render only the options of the given theme", () => {
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<VisualUniqueSelection
+					{...makeProps({
+						theme: "griddo-alt-theme",
+						options: [
+							{ theme: "default-theme", options: [{ value: "square", img: "/img/default/square.png" }] },
+							{ theme: "griddo-alt-theme", options: [{ value: "round", img: "/img/alt/round.png" }] },
+						],
+					})}
+				/>
+			</ThemeProvider>,
+		);
+
+		const values = screen.getAllByTestId("radioButtons").map((radio) => (radio as HTMLInputElement).value);
+		expect(values).toEqual(["round"]);
+
+		const sources = Array.from(container.querySelectorAll("img")).map((img) => img.getAttribute("src"));
+		expect(sources).toEqual(["/img/alt/round.png"]);
+	});
+
 	test("should render the component with ScrollableSelection", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

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

@@ -209,3 +209,50 @@ describe("Tabs component events", () => {
 		expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
 	});
 });
+
+describe("Tabs component auto selection", () => {
+	it("should select the only tab once, although the tabs array is new on each render", () => {
+		const setSelectedTabAction = vi.fn();
+
+		// A new array on each render, as the callers that build the tabs inline do.
+		const renderTabs = () => (
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Tabs {...makeProps({ tabs: ["content"], active: "content", setSelectedTab: setSelectedTabAction })} />
+			</ThemeProvider>
+		);
+
+		const { rerender } = render(renderTabs());
+		rerender(renderTabs());
+		rerender(renderTabs());
+
+		expect(setSelectedTabAction).toHaveBeenCalledTimes(1);
+	});
+
+	it("should select the new tab when the only tab changes", () => {
+		const setSelectedTabAction = vi.fn();
+
+		const renderTabs = (tab: string) => (
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Tabs {...makeProps({ tabs: [tab], active: tab, setSelectedTab: setSelectedTabAction })} />
+			</ThemeProvider>
+		);
+
+		const { rerender } = render(renderTabs("content"));
+		rerender(renderTabs("config"));
+
+		expect(setSelectedTabAction).toHaveBeenNthCalledWith(1, "content");
+		expect(setSelectedTabAction).toHaveBeenNthCalledWith(2, "config");
+	});
+
+	it("should not select any tab when there is more than one", () => {
+		const setSelectedTabAction = vi.fn();
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
+			</ThemeProvider>,
+		);
+
+		expect(setSelectedTabAction).not.toBeCalled();
+	});
+});

package/src/__tests__/containers/PageEditor/sendPagePing.test.ts

@@ -0,0 +1,61 @@
+import { pages } from "@ax/api";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { SET_USER_EDITING } from "@ax/containers/PageEditor/constants";
+import type { IUserEditing } from "@ax/types";
+
+const PAGE = 213;
+const OTHER_AUTHOR: IUserEditing = { id: 12, name: "Otra autora", username: "otra" };
+const THIRD_AUTHOR: IUserEditing = { id: 13, name: "Tercera autora", username: "tercera" };
+
+const lockedResponse = (user: IUserEditing) => ({ status: 400, data: { code: 400, user } });
+
+describe("sendPagePing action", () => {
+	const runPing = async (params: { onStart: IUserEditing | null; onAnswer: IUserEditing | null; answer: any }) => {
+		const dispatch = vi.fn();
+		const getState = vi.fn().mockReturnValue({ pageEditor: { userEditing: params.onStart } } as any) as unknown as any;
+
+		vi.spyOn(pages, "sendPagePing").mockImplementation(async () => {
+			// El ping sale antes de que getPage responda: el lock del store cambia
+			// mientras la petición está en vuelo.
+			getState.mockReturnValue({ pageEditor: { userEditing: params.onAnswer } });
+			return params.answer;
+		});
+
+		await pageEditorActions.sendPagePing(PAGE)(dispatch, getState);
+
+		return dispatch;
+	};
+
+	it("does not dispatch the author the store already has", async () => {
+		const dispatch = await runPing({
+			onStart: null,
+			onAnswer: OTHER_AUTHOR,
+			answer: lockedResponse(OTHER_AUTHOR),
+		});
+
+		expect(dispatch).not.toHaveBeenCalled();
+	});
+
+	it("dispatches the author that took the page", async () => {
+		const dispatch = await runPing({
+			onStart: OTHER_AUTHOR,
+			onAnswer: OTHER_AUTHOR,
+			answer: lockedResponse(THIRD_AUTHOR),
+		});
+
+		expect(dispatch).toHaveBeenCalledWith({
+			type: SET_USER_EDITING,
+			payload: { userEditing: THIRD_AUTHOR },
+		});
+	});
+
+	it("dispatches nothing while nobody holds the page", async () => {
+		const dispatch = await runPing({
+			onStart: null,
+			onAnswer: null,
+			answer: { status: 200, data: {} },
+		});
+
+		expect(dispatch).not.toHaveBeenCalled();
+	});
+});

package/src/__tests__/hooks/editingLock.test.tsx

@@ -0,0 +1,92 @@
+import "@testing-library/jest-dom";
+
+import { useEditingLock } from "@ax/hooks";
+import type { IUserEditing } from "@ax/types";
+
+import { renderHook } from "@testing-library/react";
+
+const CURRENT_USER = 7;
+const OTHER_AUTHOR: IUserEditing = { id: 12, name: "Otra autora", username: "otra" };
+const THIRD_AUTHOR: IUserEditing = { id: 13, name: "Tercera autora", username: "tercera" };
+
+describe("useEditingLock hook", () => {
+	const renderLock = (userEditing: IUserEditing | null, callbacks: { onLocked: () => void; onUnlocked: () => void }) =>
+		renderHook(
+			({ userEditing }) =>
+				useEditingLock({
+					userEditing,
+					currentUserID: CURRENT_USER,
+					...callbacks,
+				}),
+			{ initialProps: { userEditing } },
+		);
+
+	const callbacks = () => ({ onLocked: vi.fn(), onUnlocked: vi.fn() });
+
+	it("locks the editor when another author holds the page", () => {
+		const spies = callbacks();
+
+		const { result } = renderLock(OTHER_AUTHOR, spies);
+
+		expect(result.current.isReadOnly).toBe(true);
+		expect(spies.onLocked).toHaveBeenCalledTimes(1);
+		expect(spies.onUnlocked).not.toHaveBeenCalled();
+	});
+
+	it("leaves the editor open when the page is free", () => {
+		const spies = callbacks();
+
+		const { result } = renderLock(null, spies);
+
+		expect(result.current.isReadOnly).toBe(false);
+		expect(spies.onUnlocked).toHaveBeenCalledTimes(1);
+		expect(spies.onLocked).not.toHaveBeenCalled();
+	});
+
+	it("leaves the editor open when the lock is your own", () => {
+		const spies = callbacks();
+
+		const { result } = renderLock({ id: CURRENT_USER, name: "Yo", username: "yo" }, spies);
+
+		expect(result.current.isReadOnly).toBe(false);
+		expect(spies.onLocked).not.toHaveBeenCalled();
+	});
+
+	// El motivo del bug: getPage y el ping despachan cada uno su propio objeto
+	// para el mismo autor, y reaccionar a la referencia reabría el modal que la
+	// autora acababa de cerrar con «Preview Page».
+	it("does not lock again when the same author is dispatched in a new object", () => {
+		const spies = callbacks();
+
+		const { rerender, result } = renderLock(OTHER_AUTHOR, spies);
+		expect(spies.onLocked).toHaveBeenCalledTimes(1);
+
+		rerender({ userEditing: { ...OTHER_AUTHOR } });
+
+		expect(spies.onLocked).toHaveBeenCalledTimes(1);
+		expect(spies.onUnlocked).not.toHaveBeenCalled();
+		expect(result.current.isReadOnly).toBe(true);
+	});
+
+	it("unlocks the editor when the author leaves the page", () => {
+		const spies = callbacks();
+
+		const { rerender, result } = renderLock(OTHER_AUTHOR, spies);
+
+		rerender({ userEditing: null });
+
+		expect(result.current.isReadOnly).toBe(false);
+		expect(spies.onUnlocked).toHaveBeenCalledTimes(1);
+	});
+
+	it("locks again when a different author takes the page", () => {
+		const spies = callbacks();
+
+		const { rerender, result } = renderLock(OTHER_AUTHOR, spies);
+
+		rerender({ userEditing: THIRD_AUTHOR });
+
+		expect(result.current.isReadOnly).toBe(true);
+		expect(spies.onLocked).toHaveBeenCalledTimes(2);
+	});
+});

package/src/__tests__/modules/Content/Content.test.tsx

@@ -0,0 +1,263 @@
+import { Router } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Content from "@ax/modules/Content";
+import { history } from "@ax/routes";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+import { mock } from "vitest-mock-extended";
+
+import { act, cleanup, fireEvent, render, screen } from "./../../../../config/tests/test-utils";
+
+const bulkDelete = vi.fn();
+const getSitePages = vi.fn();
+
+vi.mock("@ax/api", async (importOriginal) => {
+	const actual = (await importOriginal()) as any;
+
+	return {
+		...actual,
+		pages: {
+			...actual.pages,
+			bulkDelete: (...args: any[]) => bulkDelete(...args),
+			getSitePages: (...args: any[]) => getSitePages(...args),
+		},
+	};
+});
+
+// El mock global de `components` (config/tests/componentsMock.cjs) trae una plantilla
+// `default` sin `type` que no existe en el catálogo real. getTemplatesFilters lee
+// `type.value` de cada plantilla, así que esa entrada rompe el montaje del listado.
+vi.mock("components", async (importOriginal) => {
+	const actual = (await importOriginal()) as any;
+	const source = actual.config ? actual : actual.default;
+	const { default: _defaultTemplate, ...templates } = source.config.schemas.ui.templates;
+
+	return {
+		...source,
+		config: {
+			...source.config,
+			schemas: {
+				...source.config.schemas,
+				ui: { ...source.config.schemas.ui, templates },
+			},
+		},
+	};
+});
+
+afterEach(cleanup);
+
+const buildPage = (id: number) => ({
+	id,
+	editorID: id,
+	title: `Page ${id}`,
+	slug: `/page-${id}`,
+	fullPath: { site: "/site-1", page: `/page-${id}` },
+	templateId: "BasicTemplate",
+	origin: "SITE",
+	isHome: false,
+	canBeUnpublished: true,
+	manuallyImported: false,
+	structuredDataContent: null,
+	publicationScheduled: null,
+	accessGrants: null,
+	haveDraftPage: null,
+	liveStatus: { status: "offline" },
+	pageLanguages: [
+		{ pageId: id, languageId: 4, locale: "en_GB" },
+		{ pageId: id + 100, languageId: 2, locale: "es_ES" },
+	],
+	modified: "2026-08-01T10:00:00.000Z",
+	categories: [],
+	isIndexed: true,
+	metaTitle: "",
+	metaDescription: "",
+});
+
+const pages = [1, 2, 3, 4, 5].map(buildPage);
+const language = { id: 4, locale: "en_GB", language: "English", label: "EN", isDefault: true };
+
+const initialStore = {
+	app: {
+		isLoading: false,
+		isSaving: false,
+		lang: { id: 4, locale: "en_GB" },
+		globalLangs: [language],
+		globalSettings: { skipReviewOnPublish: false },
+		error: null,
+		token: "eyJhbGciOiJIUzI",
+	},
+	sites: {
+		currentSiteInfo: { id: 1, name: "Site 1", hidden: false },
+		currentSitePages: pages,
+		allSitePages: pages,
+		currentFilter: "unique-pages",
+		totalItems: pages.length,
+		currentSiteLanguages: [language],
+		currentSiteErrorPages: [],
+		sitesByLang: [],
+		contentFilters: null,
+		currentSearch: "",
+	},
+	pageEditor: { template: null, currentPageLanguages: [], errors: [] },
+	structuredData: {
+		structuredData: { global: [], site: [] },
+		currentDataContent: [],
+		currentStructuredData: null,
+	},
+	dataPacks: { activated: [], templates: [] },
+	users: {
+		currentUser: { id: 1, isSuperAdmin: true },
+		currentPermissions: [],
+		globalPermissions: [],
+		roles: [],
+	},
+};
+
+// El store se lee de una variable mutable para poder simular el paginador: cambiar
+// de página sustituye `currentSitePages` sin desmontar el componente, que es lo que
+// hace la app de verdad. `redux-mock-store` admite una función como estado.
+const renderContent = async (visiblePages = pages) => {
+	let state = { ...initialStore, sites: { ...initialStore.sites, currentSitePages: visiblePages } };
+	const store = configureStore([thunk])(() => state);
+
+	await act(async () => {
+		render(
+			<Router history={history}>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<Content {...mock<any>()} />
+				</ThemeProvider>
+			</Router>,
+			{ store },
+		);
+	});
+
+	const goToPageWith = async (nextPages: ReturnType<typeof buildPage>[]) => {
+		state = { ...state, sites: { ...state.sites, currentSitePages: nextPages } };
+		await act(async () => {
+			store.dispatch({ type: "@@test/PAGINATE" });
+		});
+	};
+
+	return { store, goToPageWith };
+};
+
+const checkboxOf = (pageId: number) =>
+	screen
+		.getAllByTestId("check-field-input")
+		.find((input) => input.getAttribute("value") === String(pageId)) as HTMLElement;
+
+const selectPage = async (pageId: number) => {
+	await act(async () => {
+		fireEvent.click(checkboxOf(pageId));
+	});
+};
+
+const selectRangeTo = async (pageId: number) => {
+	await act(async () => {
+		fireEvent.keyDown(window, { key: "Shift" });
+	});
+	await selectPage(pageId);
+	await act(async () => {
+		fireEvent.keyUp(window, { key: "Shift" });
+	});
+};
+
+const confirmBulkDelete = async (allLanguages = false) => {
+	await act(async () => {
+		fireEvent.click(screen.getByText("delete"));
+	});
+	if (allLanguages) {
+		await act(async () => {
+			fireEvent.click(screen.getByText("Delete all languages versions"));
+		});
+	}
+	await act(async () => {
+		fireEvent.click(screen.getByText("Delete page"));
+	});
+};
+
+describe("[UC-AX-explore-manage-pages] Content — borrado en bulk", () => {
+	beforeEach(() => {
+		bulkDelete.mockResolvedValue({ status: 200, data: {} });
+		getSitePages.mockResolvedValue({ status: 200, data: { items: [], totalItems: 0 } });
+		window.HTMLElement.prototype.scrollTo = vi.fn();
+	});
+
+	it("borra todas las páginas de un rango seleccionado con Shift+click", async () => {
+		await renderContent();
+
+		await selectPage(1);
+		await selectRangeTo(5);
+
+		// El contador de la barra y el borrado tienen que ver lo mismo.
+		expect(screen.getByText("5 selected")).toBeInTheDocument();
+
+		await confirmBulkDelete();
+
+		expect(bulkDelete).toHaveBeenCalledTimes(1);
+		expect(bulkDelete.mock.calls[0][0]).toEqual([1, 2, 3, 4, 5]);
+	});
+
+	it("con 'all languages versions' borra las versiones de todo el rango", async () => {
+		await renderContent();
+
+		await selectPage(1);
+		await selectRangeTo(5);
+
+		await confirmBulkDelete(true);
+
+		expect(bulkDelete).toHaveBeenCalledTimes(1);
+		// Cada página lleva su versión en inglés (id) y en español (id + 100).
+		expect([...bulkDelete.mock.calls[0][0]].sort((a, b) => a - b)).toEqual([1, 2, 3, 4, 5, 101, 102, 103, 104, 105]);
+	});
+
+	it("borra las páginas seleccionadas en otra página del paginador", async () => {
+		const firstPage = pages.slice(0, 3);
+		const secondPage = [6, 7, 8].map(buildPage);
+		const { goToPageWith } = await renderContent(firstPage);
+
+		await selectPage(1);
+		await goToPageWith(secondPage);
+		await selectPage(7);
+
+		await confirmBulkDelete();
+
+		expect(bulkDelete).toHaveBeenCalledTimes(1);
+		expect(bulkDelete.mock.calls[0][0]).toEqual([1, 7]);
+	});
+
+	it("con 'all languages versions' incluye las versiones de las páginas fuera de vista", async () => {
+		const firstPage = pages.slice(0, 3);
+		const secondPage = [6, 7, 8].map(buildPage);
+		const { goToPageWith } = await renderContent(firstPage);
+
+		await selectPage(1);
+		await goToPageWith(secondPage);
+		await selectPage(7);
+
+		await confirmBulkDelete(true);
+
+		expect(bulkDelete).toHaveBeenCalledTimes(1);
+		// La página 1 ya no está a la vista, pero sus dos versiones tienen que caer igual.
+		expect([...bulkDelete.mock.calls[0][0]].sort((a, b) => a - b)).toEqual([1, 7, 101, 107]);
+	});
+
+	it("borra todas las páginas seleccionadas con clics sueltos", async () => {
+		await renderContent();
+
+		await selectPage(1);
+		await selectPage(3);
+		await selectPage(5);
+
+		expect(screen.getByText("3 selected")).toBeInTheDocument();
+
+		await confirmBulkDelete();
+
+		expect(bulkDelete).toHaveBeenCalledTimes(1);
+		expect(bulkDelete.mock.calls[0][0]).toEqual([1, 3, 5]);
+	});
+});

package/src/__tests__/modules/Content/hooks.test.tsx

@@ -0,0 +1,42 @@
+import { useSelectedPages } from "@ax/modules/Content/hooks";
+import type { IPage } from "@ax/types";
+
+import { renderHook } from "@testing-library/react";
+
+const buildPage = (id: number, languages = 1) =>
+	({
+		id,
+		title: `Page ${id}`,
+		pageLanguages: Array.from({ length: languages }, (_, index) => ({ pageId: id + index * 100 })),
+	}) as unknown as IPage;
+
+describe("[UC-AX-explore-manage-pages] useSelectedPages", () => {
+	it("resuelve una página por cada id seleccionado", () => {
+		const visiblePages = [buildPage(1), buildPage(2), buildPage(3)];
+
+		const { result } = renderHook(() => useSelectedPages([1, 3], visiblePages));
+
+		expect(result.current.map((page) => page.id)).toEqual([1, 3]);
+	});
+
+	it("recuerda las páginas seleccionadas en otra página del paginador", () => {
+		const firstPage = [buildPage(1), buildPage(2)];
+		const secondPage = [buildPage(3), buildPage(4)];
+
+		const { result, rerender } = renderHook(
+			({ selectedIds, visiblePages }) => useSelectedPages(selectedIds, visiblePages),
+			{ initialProps: { selectedIds: [1], visiblePages: firstPage } },
+		);
+
+		// El usuario pasa a la siguiente página del paginador y sigue seleccionando.
+		rerender({ selectedIds: [1, 3], visiblePages: secondPage });
+
+		expect(result.current.map((page) => page.id)).toEqual([1, 3]);
+	});
+
+	it("descarta los ids que no corresponden a ninguna página conocida", () => {
+		const { result } = renderHook(() => useSelectedPages([1, 999], [buildPage(1)]));
+
+		expect(result.current.map((page) => page.id)).toEqual([1]);
+	});
+});

package/src/__tests__/modules/Forms/FormEditor/FormEditor.test.tsx

@@ -0,0 +1,88 @@
+import { Route, Router } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import FormEditor from "@ax/modules/Forms/FormEditor";
+import history from "@ax/routes/history";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { act, cleanup, render, screen } from "../../../../../config/tests/test-utils";
+
+// El editor real monta el panel de configuración entero. Aquí solo interesa el
+// tema que le entrega FormEditor, así que el doble lo expone en el DOM.
+vi.mock("@ax/modules/Forms/FormEditor/Editor", () => ({
+	default: ({ theme }: { theme: string }) => <div data-testid="form-editor-editor" data-theme={theme} />,
+}));
+
+// `getForm` es un thunk que pide el formulario y luego selecciona su contenido.
+// Sobre un mock store el estado nunca avanza, así que la cadena rompe y deja un
+// rechazo sin capturar. El tema no depende de ella: se anula y ya.
+vi.mock("@ax/containers/Forms", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("@ax/containers/Forms")>();
+	return {
+		...actual,
+		formsActions: { ...actual.formsActions, getForm: () => async () => undefined },
+	};
+});
+
+afterEach(cleanup);
+
+// El componentsMock declara un único tema, `1`, y ninguno marcado por defecto:
+// getDefaultTheme() cae al primero de la lista.
+const DEFAULT_THEME = "1";
+const SITE_THEME = "griddo-alt-theme";
+
+const createMockStore = (currentSiteInfo: Record<string, unknown> | null) => {
+	const mockStore = configureStore([thunk] as any);
+	return mockStore({
+		app: {
+			isSaving: false,
+			isLoading: false,
+			lang: { locale: "en-US", id: 1 },
+			globalLangs: [],
+			globalSettings: {},
+		},
+		forms: {
+			currentFormID: null,
+			formContent: null,
+			isNewTranslation: false,
+			selectedEditorID: null,
+			selectedContent: {},
+			template: "",
+			moduleCopy: null,
+		},
+		sites: { currentSiteInfo, currentSiteLanguages: [], currentSitePages: [] },
+		users: { currentUser: null, currentPermissions: [], globalPermissions: [], roles: [] },
+	});
+};
+
+const renderEditor = async (currentSiteInfo: Record<string, unknown> | null) => {
+	const store = createMockStore(currentSiteInfo);
+
+	await act(async () => {
+		render(
+			<Router history={history}>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					{/* El editor está conectado y espera las props de ruta; la Route se las da. */}
+					<Route component={FormEditor} />
+				</ThemeProvider>
+			</Router>,
+			{ store },
+		);
+	});
+
+	return screen.getByTestId("form-editor-editor").getAttribute("data-theme");
+};
+
+describe("FormEditor theme", () => {
+	it("should use the theme of the current site", async () => {
+		expect(await renderEditor({ id: 1, theme: SITE_THEME })).toBe(SITE_THEME);
+	});
+
+	it("should fall back to the default theme on global forms", async () => {
+		expect(await renderEditor(null)).toBe(DEFAULT_THEME);
+	});
+});

package/src/components/ConfigPanel/PreviewForm/index.tsx

@@ -5,9 +5,10 @@ import type { IUserEditing } from "@ax/types";
 
 import * as S from "./style";
 
+const tabs = ["content"];
+
 const PreviewForm = (props: IPreviewFormProps): JSX.Element => {
 	const { selectedTab, setSelectedTab, userEditing } = props;
-	const tabs = ["content"];
 
 	const noteText = `${
 		userEditing && userEditing.name

package/src/components/Login/LoginForm/style.tsx

@@ -49,7 +49,7 @@ const Password = styled.div`
   width: 100%;
   text-align: right;
 
-  span {
+  button {
     cursor: pointer;
   }
 `;

package/src/components/Tabs/index.tsx

@@ -6,10 +6,14 @@ import * as S from "./style";
 const Tabs = (props: ITabsProps): JSX.Element => {
 	const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed, disabled } = props;
 
+	// Depend on the tab itself, not on the array: callers that build the array inline
+	// give a new reference on each render and would re-run the effect every time.
+	const onlyTab = tabs && tabs.length === 1 ? tabs[0] : undefined;
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: setSelectedTab is stable and should not trigger re-renders
 	useEffect(() => {
-		tabs && tabs.length === 1 && setSelectedTab(tabs[0]);
-	}, [tabs]);
+		onlyTab !== undefined && setSelectedTab(onlyTab);
+	}, [onlyTab]);
 
 	if (tabs) {
 		return (

package/src/containers/PageEditor/actions.tsx

@@ -1477,14 +1477,18 @@ function getGlobalFromLocalPage(): (dispatch: Dispatch, getState: any) => Promis
 function sendPagePing(pageID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
-			const {
-				pageEditor: { userEditing },
-			} = getState();
-
 			const responseActions = {
 				handleSuccess: () => null,
+				// sc-119017: the state is read when the answer lands, not when the ping leaves:
+				// the first ping of the editor starts before getPage has resolved, so
+				// a lock read here would still be null and this would dispatch a
+				// second object for the same author. That dispatch is what reopened
+				// the "page being edited" modal after the author dismissed it.
 				handleError: (response: any) => {
 					const { data } = response;
+					const {
+						pageEditor: { userEditing },
+					} = getState();
 					if (data.code === 400 && (!userEditing || userEditing.id !== data.user.id)) {
 						dispatch(setUserEditing(data.user));
 					}

package/src/hooks/editingLock.ts

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+import type { IUserEditing } from "@ax/types";
+
+/**
+ * Puts the editor in read only while another author holds the page, and tells
+ * the caller when to open and to close the modal that names that author.
+ *
+ * sc-119017: the effect watches the author's **id**, not the object. The
+ * store gets a new object for the same author more than once per page: getPage
+ * dispatches `setUserEditing(page.editing)` and the lock ping dispatches
+ * `setUserEditing(data.user)` on its 400, and both are in flight together when
+ * the editor mounts. Watching the reference reopened the modal that the author
+ * had already dismissed, because the guard of the effect read a stale `isOpen`
+ * from the render that opened it — the second dispatch looked like a new lock.
+ * With the id as the dependency, a repeated dispatch for the same author is a
+ * no-op and the modal stays closed.
+ *
+ * `onLocked` and `onUnlocked` are not dependencies on purpose: React keeps the
+ * closure of the last render, so both callbacks are always the current ones,
+ * and adding them would run the effect on every render.
+ */
+const useEditingLock = (params: {
+	userEditing: IUserEditing | null;
+	currentUserID: number | null;
+	onLocked: () => void;
+	onUnlocked: () => void;
+}): { isReadOnly: boolean } => {
+	const { userEditing, currentUserID, onLocked, onUnlocked } = params;
+
+	const lockedByOtherUserID = userEditing && userEditing.id !== currentUserID ? userEditing.id : null;
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: see the note above
+	useEffect(() => {
+		if (lockedByOtherUserID) {
+			onLocked();
+		} else {
+			onUnlocked();
+		}
+	}, [lockedByOtherUserID]);
+
+	return { isReadOnly: lockedByOtherUserID !== null };
+};
+
+export { useEditingLock };

package/src/hooks/index.tsx

@@ -1,6 +1,7 @@
 import { useBroadcastChannel, useBroadcastClipboard, useBroadcastContentUpdate, useBroadcastLogout } from "./broadcast";
 import { type IBulkSelectedItems, useBulkSelection } from "./bulk";
 import { useAdaptiveText, useCategoryColors, useEmptyState } from "./content";
+import { useEditingLock } from "./editingLock";
 import {
 	useDebounce,
 	useDebouncedCallback,
@@ -36,6 +37,7 @@ export {
 	useDebounce,
 	useDebouncedCallback,
 	useEditingHeartbeat,
+	useEditingLock,
 	useEmptyState,
 	useEqualStructured,
 	useFirefoxScrollLock,

package/src/modules/Content/hooks.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
-import type { IQueryValue } from "@ax/types";
+import { useRef, useState } from "react";
+
+import type { IPage, IQueryValue } from "@ax/types";
 
 const useSortedListStatus = () => {
 	const sortedInitialState: {
@@ -106,4 +107,16 @@ const useFilterQuery = (values?: Record<string, IQueryValue[]> | null) => {
 	};
 };
 
-export { useSortedListStatus, useFilterQuery };
+const useSelectedPages = (selectedIds: number[], visiblePages: IPage[]): IPage[] => {
+	// La selección sobrevive al cambio de página del paginador, así que hay que
+	// recordar las páginas que ya no están a la vista para poder resolverlas.
+	const knownPages = useRef(new Map<number, IPage>());
+
+	visiblePages.forEach((page) => {
+		knownPages.current.set(page.id, page);
+	});
+
+	return selectedIds.map((id) => knownPages.current.get(id)).filter((page): page is IPage => !!page);
+};
+
+export { useSortedListStatus, useFilterQuery, useSelectedPages };

package/src/modules/Content/index.tsx

@@ -58,7 +58,7 @@ import StructuredDataItem from "./../StructuredData/StructuredDataList/Structure
 import { DeleteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
 import ContentFilters from "./ContentFilters";
-import { useFilterQuery, useSortedListStatus } from "./hooks";
+import { useFilterQuery, useSelectedPages, useSortedListStatus } from "./hooks";
 import NewContentModal from "./NewContentModal";
 import PageItem from "./PageItem";
 import {
@@ -194,7 +194,6 @@ const Content = (props: IProps): JSX.Element => {
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [arePagesTranslated, setArePagesTranslated] = useState(false);
 	const [templateInstanceError, setTemplateInstanceError] = useState({ error: false, templateName: "" });
-	const [pagesSelected, setPagesSelected] = useState<any[]>([]);
 	const [selectedOption, setSelectedOption] = useState<string | null>(null);
 	const history = useHistory();
 
@@ -220,6 +219,8 @@ const Content = (props: IProps): JSX.Element => {
 		setHoverCheck,
 	} = useBulkSelection(contentIds);
 
+	const pagesSelected = useSelectedPages(selectedItems.all, currentSitePages);
+
 	const { isVisible, toggleToast, setIsVisible } = useToast();
 	const {
 		isVisible: isVisibleRemovedToast,
@@ -390,25 +391,11 @@ const Content = (props: IProps): JSX.Element => {
 
 	const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
 
-	const handleAddToBulk = (item: ICheck) => {
-		const page = currentSitePages.find((page: IPage) => page.id === item.value);
+	const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
 
-		item.isChecked && !pagesSelected.includes(item)
-			? setPagesSelected((pagesSelected) => [...pagesSelected, page])
-			: setPagesSelected(pagesSelected.filter((page: IPage) => page.id !== item.value));
+	const handleSelectAll = () => selectAllItems(bulkFilter);
 
-		addToBulkSelection(item, bulkFilter);
-	};
-
-	const handleSelectAll = () => {
-		selectAllItems(bulkFilter);
-		setPagesSelected(isStructuredData ? currentDataContent : currentSitePages);
-	};
-
-	const unselectAllItems = () => {
-		resetBulkSelection();
-		setPagesSelected([]);
-	};
+	const unselectAllItems = () => resetBulkSelection();
 
 	const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
 
@@ -485,12 +472,9 @@ const Content = (props: IProps): JSX.Element => {
 	const bulkDelete = async () => {
 		let allPageVersions: number[] = [];
 		if (deleteAllVersions) {
-			const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
-			const pageLanguages = selectedPages.map((element) => element.pageLanguages);
-			pageLanguages.forEach((element) => {
-				const ids = element.map((lang: IPageLanguage) => lang.pageId);
-				allPageVersions = [...allPageVersions, ...ids];
-			});
+			allPageVersions = pagesSelected.flatMap((page: IPage) =>
+				page.pageLanguages.map((lang: IPageLanguage) => lang.pageId),
+			);
 		}
 
 		isStructuredData
@@ -511,8 +495,7 @@ const Content = (props: IProps): JSX.Element => {
 	};
 
 	const handleToggleDeleteModal = () => {
-		const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
-		const hasTranslations = selectedPages.some((page) => page.pageLanguages.length > 1);
+		const hasTranslations = pagesSelected.some((page: IPage) => page.pageLanguages.length > 1);
 		setArePagesTranslated(hasTranslations);
 		toggleDeleteModal();
 	};

package/src/modules/Forms/FormEditor/index.tsx

@@ -98,7 +98,9 @@ const FormEditor = (props: IProps) => {
 	);
 
 	const backLinkRoute = isSiteView ? "/sites/forms" : "/forms";
-	const theme = getDefaultTheme();
+	// El tema manda en los campos temáticos (VisualUniqueSelection, ColorPicker) y en las
+	// miniaturas: en un site vale el suyo, y solo los formularios globales caen al principal.
+	const theme = currentSiteInfo?.theme || getDefaultTheme();
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {

package/src/modules/GlobalEditor/index.tsx

@@ -30,6 +30,7 @@ import {
 	useBroadcastClipboard,
 	useBroadcastContentUpdate,
 	useEditingHeartbeat,
+	useEditingLock,
 	useIsDirty,
 	useModals,
 	usePermissionsForPage,
@@ -106,7 +107,6 @@ const GlobalEditor = (props: IProps) => {
 	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
-	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [toastMsg, setToastMsg] = useState<string | null>(null);
@@ -125,7 +125,7 @@ const GlobalEditor = (props: IProps) => {
 	const { broadcastPageSave, remotePageUpdate, clearRemoteUpdate } = useBroadcastContentUpdate(pageID);
 	useBroadcastClipboard();
 
-	const { isOpen, toggleModal, closeModal } = useModals([
+	const { isOpen, toggleModal, openModal, closeModal } = useModals([
 		"userEditing",
 		"unpublish",
 		"schedule",
@@ -139,6 +139,16 @@ const GlobalEditor = (props: IProps) => {
 		"conflictSave",
 	]);
 
+	const { isReadOnly } = useEditingLock({
+		userEditing,
+		currentUserID: props.currentUserID,
+		onLocked: () => openModal("userEditing"),
+		onUnlocked: () => {
+			pageID && sendPagePing(pageID);
+			closeModal("userEditing");
+		},
+	});
+
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
 
 	const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
@@ -207,19 +217,6 @@ const GlobalEditor = (props: IProps) => {
 		resetDirty();
 	}, [lang]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	useEffect(() => {
-		const { currentUserID } = props;
-		if (userEditing && userEditing.id !== currentUserID) {
-			setIsReadOnly(true);
-			!isOpen("userEditing") && toggleModal("userEditing");
-		} else {
-			setIsReadOnly(false);
-			pageID && sendPagePing(pageID);
-			isOpen("userEditing") && toggleModal("userEditing");
-		}
-	}, [userEditing]);
-
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		if (!errorPagesChecked && !isLoading && editorContent) {

package/src/modules/PageEditor/index.tsx

@@ -28,6 +28,7 @@ import {
 	useBroadcastClipboard,
 	useBroadcastContentUpdate,
 	useEditingHeartbeat,
+	useEditingLock,
 	useIsDirty,
 	useModals,
 	usePermissionsForPage,
@@ -111,7 +112,6 @@ const PageEditor = (props: IProps) => {
 	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
-	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [toastMsg, setToastMsg] = useState<string | null>(null);
@@ -127,7 +127,7 @@ const PageEditor = (props: IProps) => {
 	const { broadcastPageSave, remotePageUpdate, clearRemoteUpdate } = useBroadcastContentUpdate(pageID);
 	useBroadcastClipboard();
 
-	const { isOpen, toggleModal, closeModal } = useModals([
+	const { isOpen, toggleModal, openModal, closeModal } = useModals([
 		"userEditing",
 		"unpublish",
 		"delete",
@@ -141,6 +141,16 @@ const PageEditor = (props: IProps) => {
 		"conflictSave",
 	]);
 
+	const { isReadOnly } = useEditingLock({
+		userEditing,
+		currentUserID: props.currentUserID,
+		onLocked: () => openModal("userEditing"),
+		onUnlocked: () => {
+			pageID && sendPagePing(pageID);
+			closeModal("userEditing");
+		},
+	});
+
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
 
 	const isGlobal = editorContent && editorContent.origin === "GLOBAL";
@@ -212,19 +222,6 @@ const PageEditor = (props: IProps) => {
 		setSelectedTab(defaultTab);
 	}, [defaultTab]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	useEffect(() => {
-		const { currentUserID } = props;
-		if (userEditing && userEditing.id !== currentUserID) {
-			setIsReadOnly(true);
-			!isOpen("userEditing") && toggleModal("userEditing");
-		} else {
-			setIsReadOnly(false);
-			pageID && sendPagePing(pageID);
-			isOpen("userEditing") && toggleModal("userEditing");
-		}
-	}, [userEditing]);
-
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		if (!errorPagesChecked && !isLoading && editorContent) {