@griddo/ax 12.9.0-rc.1 → 12.9.0

package/package.json

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

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

@@ -157,10 +157,16 @@ describe("Translate Button component rendering", () => {
 		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
 		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
 		expect(translatedNotificationWrapper).toBeTruthy();
+		expect(translatedNotificationWrapper?.textContent).toContain("You can update it");
+		expect(screen.queryByText("Update translation with AI")).toBeTruthy();
 		expect(translateButtonWrapper).toBeFalsy();
 	});
 
-	it("should render the notification if structured data is already translated", () => {
+	// sc-119164 — la retraducción solo existe para páginas. El aviso se mostraba también en
+	// datos y formularios, y al pulsarlo no se llamaba a ninguna API: `getRetranslationAction`
+	// es undefined ahí, así que el componente pintaba «The translation could not be completed»
+	// sin haber intentado nada. Mientras no haya endpoint, no se ofrece la acción.
+	it("should show the already-translated notice for structured data but NOT offer the update action", () => {
 		const initialStore = {
 			app: { globalSettings: { autoTranslation: true } },
 			pageEditor: { editorContent: null, isIATranslated: false },
@@ -178,10 +184,35 @@ describe("Translate Button component rendering", () => {
 			{ store },
 		);
 
-		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
-		const translatedNotificationWrapper = screen.queryByTestId("update-translation-button-wrapper");
-		expect(translatedNotificationWrapper).toBeTruthy();
-		expect(translateButtonWrapper).toBeFalsy();
+		const translatedNotificationWrapper = screen.getByTestId("update-translation-button-wrapper");
+		expect(translatedNotificationWrapper.textContent).toContain("already been translated");
+		expect(translatedNotificationWrapper.textContent).not.toContain("You can update it");
+		expect(screen.queryByText("Update translation with AI")).toBeFalsy();
+		expect(screen.queryByTestId("translate-button-wrapper")).toBeFalsy();
+	});
+
+	it("should show the already-translated notice for forms but NOT offer the update action", () => {
+		const initialStore = {
+			app: { globalSettings: { autoTranslation: true } },
+			pageEditor: { editorContent: null, isIATranslated: false },
+			structuredData: { form: null, isIATranslated: false },
+			forms: { formContent: { canBeTranslated: false, originalLanguage: 2 } },
+		};
+		const store = mockStore(initialStore);
+
+		defaultProps.contentType = "form";
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<TranslateButton {...defaultProps} />
+			</ThemeProvider>,
+			{ store },
+		);
+
+		const wrapper = screen.getByTestId("update-translation-button-wrapper");
+		expect(wrapper.textContent).toContain("already been translated");
+		expect(screen.queryByText("Update translation with AI")).toBeFalsy();
+		expect(screen.queryByTestId("translate-button-wrapper")).toBeFalsy();
 	});
 
 	it("should render the component if page is already translated but can be translated", () => {

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

@@ -4,7 +4,7 @@ import "@testing-library/jest-dom";
 import * as reactRedux from "react-redux";
 
 import { usePermissionsForPage } from "@ax/hooks";
-import type { PageAccessGrantsSummary } from "@ax/types";
+import type { IPageLanguage, PageAccessGrantsSummary } from "@ax/types";
 
 import { renderHook } from "@testing-library/react";
 
@@ -388,4 +388,39 @@ describe("usePermissionsForPage hook", () => {
 			expect(result.current.edit).toBe(false);
 		});
 	});
+
+	describe("8. Drafts (sc-119759)", () => {
+		it("should not restrict a page missing from the translation group when user has no pagePermissions", () => {
+			// El draft nunca aparece en pageLanguages: el backend filtra draft_from_page IS NULL
+			const pageLanguages = [
+				{ pageId: 100, languageId: 1 },
+				{ pageId: 200, languageId: 2 },
+			] as unknown as IPageLanguage[];
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() =>
+				usePermissionsForPage(1, 555, { edit: "edit_page" }, undefined, pageLanguages),
+			);
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should keep denying a page missing from the group when user IS restricted by pagePermissions", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [100] }],
+			};
+			const pageLanguages = [
+				{ pageId: 100, languageId: 1 },
+				{ pageId: 200, languageId: 2 },
+			] as unknown as IPageLanguage[];
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() =>
+				usePermissionsForPage(1, 555, { edit: "edit_page" }, undefined, pageLanguages),
+			);
+
+			expect(result.current.edit).toBe(false);
+		});
+	});
 });

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -2,7 +2,7 @@ import { getInnerFields } from "@ax/forms";
 import { FieldContainer, FieldGroup } from "@ax/components";
 import type { IErrorItem, IPage, ISite, ILanguage } from "@ax/types";
 
-const Field = (props: IFieldProps) => {
+const Field = (props: IFieldProps): JSX.Element => {
 	const {
 		whiteList,
 		objKey,

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -7,7 +7,7 @@ import Field from "../Field";
 
 import * as S from "./style";
 
-export const TemplateManager = (props: IProps) => {
+export const TemplateManager = (props: IProps): JSX.Element => {
 	const {
 		template,
 		selectedTab,
@@ -52,8 +52,13 @@ export const TemplateManager = (props: IProps) => {
 		const isComputedField = Object.prototype.hasOwnProperty.call(field, "computed");
 
 		const addedModules: string[] = modulesDataPacks.reduce((acc: string[], current: any) => {
-			if (current.sectionList?.[template.component]?.includes(key) && !acc.includes(current.id)) {
-				acc.push(current.id);
+			if (
+				current.sectionList &&
+				current.sectionList[template.component] &&
+				current.sectionList[template.component].includes(key) &&
+				!acc.includes(current.id)
+			) {
+				return [...acc, current.id];
 			}
 			return acc;
 		}, []);
@@ -79,56 +84,57 @@ export const TemplateManager = (props: IProps) => {
 	return (
 		<>
 			{isConfig && templateFields && !isForm && <S.Title>Template Options</S.Title>}
-			{templateFields
-				?.filter((templateField: ISchemaField) => {
-					const isHidden = templateField.hidden || (isForm && !templateField.overwrite);
-					return !isHidden;
-				})
-				.map((templateField: ISchemaField, index: number) => {
-					const {
-						whiteList,
-						categories,
-						key,
-						fieldObjKey,
-						mappedField,
-						currentContent,
-						handleUpdate,
-						error,
-						readonly,
-						disabledField,
-					} = getFieldProps(templateField);
+			{templateFields &&
+				templateFields
+					.filter((templateField: ISchemaField) => {
+						const isHidden = templateField.hidden || (isForm && !templateField.overwrite);
+						return !isHidden;
+					})
+					.map((templateField: ISchemaField, index: number) => {
+						const {
+							whiteList,
+							categories,
+							key,
+							fieldObjKey,
+							mappedField,
+							currentContent,
+							handleUpdate,
+							error,
+							readonly,
+							disabledField,
+						} = getFieldProps(templateField);
 
-					return (
-						<Field
-							whiteList={whiteList}
-							key={`${objKey}.${key}${index}`}
-							objKey={fieldObjKey}
-							field={mappedField}
-							selectedContent={currentContent}
-							goTo={goTo}
-							updateValue={handleUpdate}
-							pages={pages}
-							actions={actions}
-							site={site}
-							disabled={disabled || disabledField}
-							activatedModules={activatedModules}
-							isTemplateActivated={isTemplateActivated}
-							categories={categories}
-							error={error}
-							deleteError={deleteError}
-							errors={errors}
-							theme={theme}
-							moduleCopy={moduleCopy}
-							availableDataPacks={availableDataPacks}
-							template={template}
-							setHistoryPush={setHistoryPush}
-							lang={lang}
-							readonly={readonly}
-							scrollEditorID={scrollEditorID}
-							languages={languages}
-						/>
-					);
-				})}
+						return (
+							<Field
+								whiteList={whiteList}
+								key={`${objKey}.${key}${index}`}
+								objKey={fieldObjKey}
+								field={mappedField}
+								selectedContent={currentContent}
+								goTo={goTo}
+								updateValue={handleUpdate}
+								pages={pages}
+								actions={actions}
+								site={site}
+								disabled={disabled || disabledField}
+								activatedModules={activatedModules}
+								isTemplateActivated={isTemplateActivated}
+								categories={categories}
+								error={error}
+								deleteError={deleteError}
+								errors={errors}
+								theme={theme}
+								moduleCopy={moduleCopy}
+								availableDataPacks={availableDataPacks}
+								template={template}
+								setHistoryPush={setHistoryPush}
+								lang={lang}
+								readonly={readonly}
+								scrollEditorID={scrollEditorID}
+								languages={languages}
+							/>
+						);
+					})}
 		</>
 	);
 };

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

@@ -47,6 +47,14 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
 
 	const isOriginal = content?.originalLanguage === lang;
 
+	// La retraducción solo está implementada para páginas: `getContent` no define
+	// `getRetranslationAction` para datos ni formularios. Sin ella, el botón despachaba
+	// `undefined?.(...)` y pintaba «The translation could not be completed» sin haber llamado a
+	// ninguna API (sc-119164). Se mantiene el aviso de que el contenido ya está traducido, pero
+	// no se ofrece una acción inexistente. El día que Back añada el endpoint para datos o
+	// formularios, basta con registrar la acción en `getContent`.
+	const canRetranslate = !!getRetranslationAction;
+
 	const initialState = {
 		isLoading: false,
 		error: false,
@@ -88,42 +96,48 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
 				<>
 					<S.Wrapper data-testid="update-translation-button-wrapper" isSmall={!!structuredDataForm}>
 						<S.Text>
-							This page has <strong>already been translated</strong>. You can update it with the latest changes from the
-							source language.
+							This {canRetranslate ? "page" : "content"} has <strong>already been translated</strong>.
+							{canRetranslate && " You can update it with the latest changes from the source language."}
 						</S.Text>
-						<S.ButtonWrapper>
-							<S.StyledButton
-								type="button"
-								onClick={() => toggleModal("update")}
-								icon={!state.isLoading ? "Ia" : undefined}
-								loader={state.isLoading ? "circle" : undefined}
-								disabled={disabled}
-								buttonStyle="line"
-							>
-								{updateButtonText}
-							</S.StyledButton>
-						</S.ButtonWrapper>
-						{state.error && (
-							<S.ErrorText>
-								The translation could not be completed. Your previous content has been preserved.
-							</S.ErrorText>
+						{canRetranslate && (
+							<>
+								<S.ButtonWrapper>
+									<S.StyledButton
+										type="button"
+										onClick={() => toggleModal("update")}
+										icon={!state.isLoading ? "Ia" : undefined}
+										loader={state.isLoading ? "circle" : undefined}
+										disabled={disabled}
+										buttonStyle="line"
+									>
+										{updateButtonText}
+									</S.StyledButton>
+								</S.ButtonWrapper>
+								{state.error && (
+									<S.ErrorText>
+										The translation could not be completed. Your previous content has been preserved.
+									</S.ErrorText>
+								)}
+							</>
 						)}
 					</S.Wrapper>
-					<Modal
-						isOpen={isOpen("update")}
-						hide={() => toggleModal("update")}
-						size="S"
-						title="Update translation page with AI"
-						mainAction={{ title: "Update translation with AI", icon: "Ia", onClick: handleUpdateClick }}
-						secondaryAction={{ title: "Cancel", onClick: () => toggleModal("update") }}
-						height="auto"
-					>
-						<S.ModalContent>
-							This page <strong>already has a translation</strong>. Updating it{" "}
-							<strong>will replace all existing text in this language</strong>, including any manual edits made after
-							the previous translation. This action cannot be undone.
-						</S.ModalContent>
-					</Modal>
+					{canRetranslate && (
+						<Modal
+							isOpen={isOpen("update")}
+							hide={() => toggleModal("update")}
+							size="S"
+							title="Update translation page with AI"
+							mainAction={{ title: "Update translation with AI", icon: "Ia", onClick: handleUpdateClick }}
+							secondaryAction={{ title: "Cancel", onClick: () => toggleModal("update") }}
+							height="auto"
+						>
+							<S.ModalContent>
+								This page <strong>already has a translation</strong>. Updating it{" "}
+								<strong>will replace all existing text in this language</strong>, including any manual edits made after
+								the previous translation. This action cannot be undone.
+							</S.ModalContent>
+						</Modal>
+					)}
 				</>
 			)}
 			{autoTranslation && content?.canBeTranslated ? (

package/src/hooks/users.tsx

@@ -190,20 +190,24 @@ const usePermissionsForPage = <T extends Record<string, string | string[]>>(
 			return undefined;
 		};
 
-		const hasAccessToTranslationGroup = pageLanguages?.length
-			? (() => {
-					const isPartOfGroup = pageLanguages.some((lang) => getLanguagePageId(lang) === pageId);
-					if (!isPartOfGroup) {
-						return false; // pageId is not in this translation group
-					}
+		// La restricción por grupo de traducción solo aplica a usuarios limitados por
+		// pagePermissions. Sin esa restricción el grupo no debe denegar nada: para un draft
+		// pageLanguages es el grupo de su página original —el backend resuelve el borrador a su
+		// original y filtra draft_from_page IS NULL—, así que su propio id nunca aparece ahí.
+		const hasAccessToTranslationGroup =
+			pageLanguages?.length && currentUser.pagePermissions?.length
+				? (() => {
+						const isPartOfGroup = pageLanguages.some((lang) => getLanguagePageId(lang) === pageId);
+						if (!isPartOfGroup) {
+							return false; // pageId is not in this translation group
+						}
 
-					// Get all pageIds in this translation group
-					const translationPageIds = pageLanguages
-						.map((lang) => getLanguagePageId(lang))
-						.filter((id): id is number => id !== undefined);
+						// Get all pageIds in this translation group
+						const translationPageIds = pageLanguages
+							.map((lang) => getLanguagePageId(lang))
+							.filter((id): id is number => id !== undefined);
 
-					// Check if user has access to ANY of the translation pageIds
-					if (currentUser.pagePermissions?.length) {
+						// Check if user has access to ANY of the translation pageIds
 						const siteEntry = currentUser.pagePermissions.find(
 							(entry) => entry.siteId === siteId || entry.siteId === "global",
 						);
@@ -211,11 +215,8 @@ const usePermissionsForPage = <T extends Record<string, string | string[]>>(
 							return false;
 						}
 						return translationPageIds.some((translationPageId) => siteEntry.pageIds.includes(translationPageId));
-					}
-
-					return true; // No pagePermissions restrictions, allow access
-				})()
-			: undefined;
+					})()
+				: undefined;
 
 		// If pageId is part of a translation group, use the translation group access result
 		const isPagePermissionRestricted =