@griddo/ax 12.8.2 → 12.8.3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.8.2",
+	"version": "12.8.3",
 	"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": "2583a2f1211251425b5766dd3377e5ec38db7a89"
 }

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/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();
 	};