@griddo/ax 12.8.1 → 12.8.3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.8.1",
+	"version": "12.8.3",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -44,36 +44,36 @@
 	"dependencies": {
 		"@dnd-kit/core": "6.3.1",
 		"@dnd-kit/sortable": "10.0.0",
-		"@griddo/api-types": "^1.0.12",
-		"@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
+		"@griddo/api-types": "1.1.3",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
 		"@styled-system/prop-types": "5.1.5",
 		"@styled-system/theme-get": "5.1.2",
 		"@svgr/webpack": "8.1.0",
-		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/jest-dom": "5.17.0",
 		"@testing-library/react": "13.4.0",
-		"@testing-library/user-event": "14.6.1",
+		"@testing-library/user-event": "14.6.6",
 		"@types/compress.js": "1.1.3",
-		"@types/draft-js": "0.11.18",
+		"@types/draft-js": "0.11.20",
 		"@types/lodash.isequal": "4.5.8",
 		"@types/markdown-draft-js": "2.2.7",
-		"@types/node": "20.17.10",
+		"@types/node": "20.19.43",
 		"@types/react": "18.2.79",
-		"@types/react-beautiful-dnd": "13.1.3",
+		"@types/react-beautiful-dnd": "13.1.8",
 		"@types/react-datepicker": "4.19.6",
 		"@types/react-dom": "18.2.25",
-		"@types/react-draft-wysiwyg": "1.13.8",
-		"@types/react-redux": "7.1.25",
+		"@types/react-draft-wysiwyg": "1.13.9",
+		"@types/react-redux": "7.1.34",
 		"@types/react-router-dom": "5.3.3",
 		"@types/react-slick": "0.23.13",
-		"@types/react-test-renderer": "17.0.1",
-		"@types/styled-components": "5.1.26",
+		"@types/react-test-renderer": "17.0.9",
+		"@types/styled-components": "5.1.36",
 		"@types/uuid": "8.3.4",
-		"@types/webpack-env": "1.18.0",
+		"@types/webpack-env": "1.18.8",
 		"axios": "0.19.0",
 		"babel-loader": "9.2.1",
 		"babel-plugin-named-asset-import": "0.3.8",
 		"babel-plugin-root-import": "6.6.0",
-		"babel-plugin-styled-components": "2.1.4",
+		"babel-plugin-styled-components": "2.3.0",
 		"babel-preset-react-app": "10.1.0",
 		"case-sensitive-paths-webpack-plugin": "2.4.0",
 		"compress.js": "1.2.2",
@@ -102,12 +102,12 @@
 		"mini-css-extract-plugin": "2.10.2",
 		"node-polyfill-webpack-plugin": "3.0.0",
 		"pkg-dir": "5.0.0",
-		"polished": "3.4.1",
-		"postcss": "8.5.3",
+		"polished": "3.7.2",
+		"postcss": "8.5.26",
 		"postcss-flexbugs-fixes": "5.0.2",
 		"postcss-loader": "7.3.4",
 		"postcss-normalize": "7.0.1",
-		"postcss-preset-env": "6.7.0",
+		"postcss-preset-env": "6.7.2",
 		"react": "18.2.0",
 		"react-app-polyfill": "1.0.6",
 		"react-datepicker": "4.25.0",
@@ -115,13 +115,13 @@
 		"react-dom": "18.2.0",
 		"react-draft-wysiwyg": "1.15.0",
 		"react-easy-crop": "5.5.7",
-		"react-error-boundary": "4.0.13",
+		"react-error-boundary": "4.1.2",
 		"react-froala-wysiwyg": "4.0.4",
-		"react-qr-code": "2.0.18",
+		"react-qr-code": "2.2.0",
 		"react-redux": "7.2.9",
 		"react-refresh": "0.14.2",
-		"react-router-dom": "5.1.2",
-		"react-select": "5.10.1",
+		"react-router-dom": "5.3.4",
+		"react-select": "5.10.2",
 		"react-slick": "0.30.3",
 		"react-textarea-autosize": "8.5.9",
 		"react-timezone-map-select": "1.2.25",
@@ -129,11 +129,11 @@
 		"redux-devtools-extension": "2.13.9",
 		"redux-persist": "6.0.0",
 		"reflect-metadata": "0.1.13",
-		"resolve": "1.22.10",
+		"resolve": "1.22.12",
 		"resolve-url-loader": "4.0.0",
 		"sass-alias": "1.0.5",
 		"sass-loader": "16.0.8",
-		"semver": "7.6.3",
+		"semver": "7.8.5",
 		"slick-carousel": "1.8.1",
 		"source-map-loader": "1.1.3",
 		"string-replace-loader": "3.1.0",
@@ -149,18 +149,18 @@
 		"webpack-manifest-plugin": "5.0.1"
 	},
 	"devDependencies": {
-		"@babel/core": "7.26.10",
+		"@babel/core": "7.29.7",
 		"@babel/helper-environment-visitor": "7.24.7",
 		"@babel/helper-function-name": "7.24.7",
 		"@babel/helper-hoist-variables": "7.24.7",
 		"@babel/helper-split-export-declaration": "7.24.7",
-		"@babel/plugin-transform-optional-chaining": "7.25.9",
-		"@babel/preset-env": "7.26.9",
-		"@babel/preset-react": "7.26.3",
-		"@babel/preset-typescript": "7.26.0",
+		"@babel/plugin-transform-optional-chaining": "7.29.7",
+		"@babel/preset-env": "7.29.7",
+		"@babel/preset-react": "7.29.7",
+		"@babel/preset-typescript": "7.29.7",
 		"@biomejs/biome": "2.3.8",
-		"@types/redux-mock-store": "1.0.3",
-		"@vitest/coverage-v8": "4.1.6",
+		"@types/redux-mock-store": "1.5.0",
+		"@vitest/coverage-v8": "4.1.10",
 		"axios-mock-adapter": "1.22.0",
 		"prettier": "3.4.2",
 		"react-test-renderer": "18.2.0",
@@ -201,5 +201,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f035f7339bf7550addec2f02e9c9257cd3de5ccc"
+	"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();
 	};