@griddo/ax 11.15.9 → 11.16.0-rc.1

package/src/containers/PageEditor/interfaces.tsx

@@ -1,30 +1,32 @@
-import {
+import type { IBreadcrumbItem, IErrorItem, IPage, ISchema, IUserEditing, PageAccessGrantsSummary } from "@ax/types";
+
+import type {
+	RESET_PAGE_EDITOR_STORE,
 	SET_BREADCRUMB,
-	SET_SCHEMA,
-	SET_TAB,
-	SET_SELECTED_EDITOR_ID,
-	SET_EDITOR_CONTENT,
-	SET_TEMPLATE,
-	SET_SELECTED_CONTENT,
-	SET_SELECTED_PARENT,
+	SET_COPY_MODULE,
 	SET_CURRENT_PAGE_ID,
-	SET_CURRENT_PAGE_STATUS,
-	SET_CURRENT_PAGE_NAME,
 	SET_CURRENT_PAGE_LANGUAGES,
-	SET_IS_NEW_TRANSLATION,
-	SET_TEMPLATE_CONFIG,
+	SET_CURRENT_PAGE_NAME,
+	SET_CURRENT_PAGE_STATUS,
+	SET_EDITOR_CONTENT,
 	SET_ERRORS,
-	SET_VALIDATED,
-	SET_SITE_PAGE_ID,
-	SET_USER_EDITING,
-	SET_LAST_ELEMENT_ADDED_ID,
-	SET_COPY_MODULE,
 	SET_IS_IA_TRANSLATED,
+	SET_IS_NEW_TRANSLATION,
+	SET_LAST_ELEMENT_ADDED_ID,
 	SET_LAST_TIMEOUT,
-	RESET_PAGE_EDITOR_STORE,
+	SET_PAGE_ACCESS_GRANTS,
+	SET_SCHEMA,
 	SET_SCROLL_EDITOR_ID,
+	SET_SELECTED_CONTENT,
+	SET_SELECTED_EDITOR_ID,
+	SET_SELECTED_PARENT,
+	SET_SITE_PAGE_ID,
+	SET_TAB,
+	SET_TEMPLATE,
+	SET_TEMPLATE_CONFIG,
+	SET_USER_EDITING,
+	SET_VALIDATED,
 } from "./constants";
-import { IBreadcrumbItem, ISchema, IPage, IErrorItem, IUserEditing } from "@ax/types";
 
 export interface ISetEditorContent {
 	type: typeof SET_EDITOR_CONTENT;
@@ -145,6 +147,11 @@ export interface ISetScrollEditorID {
 	payload: { scrollEditorID: number | null };
 }
 
+export interface ISetPageAccessGrants {
+	type: typeof SET_PAGE_ACCESS_GRANTS;
+	payload: { accessGrants: PageAccessGrantsSummary };
+}
+
 export interface IFieldProps {
 	id: number;
 	key: string;

package/src/containers/PageEditor/reducer.tsx

@@ -1,31 +1,41 @@
-import type { IPage, IBreadcrumbItem, ISchema, IErrorItem, IUserEditing, IModule, IPageLanguage } from "@ax/types";
+import type {
+	IBreadcrumbItem,
+	IErrorItem,
+	IModule,
+	IPage,
+	IPageLanguage,
+	ISchema,
+	IUserEditing,
+	PageAccessGrantsSummary,
+} from "@ax/types";
 
 import {
-	SET_EDITOR_CONTENT,
-	SET_TEMPLATE,
+	INITIAL_TEMPLATE,
+	RESET_PAGE_EDITOR_STORE,
 	SET_BREADCRUMB,
-	SET_SCHEMA,
-	SET_SELECTED_CONTENT,
-	SET_TAB,
-	SET_SELECTED_EDITOR_ID,
+	SET_COPY_MODULE,
 	SET_CURRENT_PAGE_ID,
-	SET_CURRENT_PAGE_STATUS,
-	SET_CURRENT_PAGE_NAME,
 	SET_CURRENT_PAGE_LANGUAGES,
-	SET_IS_NEW_TRANSLATION,
-	INITIAL_TEMPLATE,
-	SET_TEMPLATE_CONFIG,
-	SET_SELECTED_PARENT,
+	SET_CURRENT_PAGE_NAME,
+	SET_CURRENT_PAGE_STATUS,
+	SET_EDITOR_CONTENT,
 	SET_ERRORS,
-	SET_VALIDATED,
-	SET_SITE_PAGE_ID,
-	SET_USER_EDITING,
-	SET_LAST_ELEMENT_ADDED_ID,
-	SET_COPY_MODULE,
 	SET_IS_IA_TRANSLATED,
+	SET_IS_NEW_TRANSLATION,
+	SET_LAST_ELEMENT_ADDED_ID,
 	SET_LAST_TIMEOUT,
-	RESET_PAGE_EDITOR_STORE,
+	SET_PAGE_ACCESS_GRANTS,
+	SET_SCHEMA,
 	SET_SCROLL_EDITOR_ID,
+	SET_SELECTED_CONTENT,
+	SET_SELECTED_EDITOR_ID,
+	SET_SELECTED_PARENT,
+	SET_SITE_PAGE_ID,
+	SET_TAB,
+	SET_TEMPLATE,
+	SET_TEMPLATE_CONFIG,
+	SET_USER_EDITING,
+	SET_VALIDATED,
 } from "./constants";
 
 export interface IPageEditorState {
@@ -52,6 +62,7 @@ export interface IPageEditorState {
 	isIATranslated: boolean;
 	lastTimeout: NodeJS.Timeout | null;
 	scrollEditorID: number | null;
+	accessGrants: PageAccessGrantsSummary;
 }
 
 export const initialState = {
@@ -78,6 +89,7 @@ export const initialState = {
 	isIATranslated: false,
 	lastTimeout: null,
 	scrollEditorID: null,
+	accessGrants: { users: [], roles: [] },
 };
 
 export function reducer(state = initialState, action: any): IPageEditorState {
@@ -106,6 +118,7 @@ export function reducer(state = initialState, action: any): IPageEditorState {
 		case SET_IS_IA_TRANSLATED:
 		case SET_LAST_TIMEOUT:
 		case SET_SCROLL_EDITOR_ID:
+		case SET_PAGE_ACCESS_GRANTS:
 			return { ...state, ...action.payload };
 		case RESET_PAGE_EDITOR_STORE:
 			return { ...initialState, moduleCopy: state.moduleCopy };

package/src/containers/Users/reducer.tsx

@@ -28,6 +28,7 @@ export const initialState = {
 		failed: 0,
 		roles: [],
 		isSuperAdmin: false,
+		pagePermissions: [],
 	},
 	currentUser: null,
 	currentPermissions: [],

package/src/helpers/forms.tsx

@@ -15,4 +15,6 @@ const protectFormKeys = (content: any, key: string, editorID: number) => {
 	return formComponent;
 };
 
-export { protectFormKeys };
+const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+export { protectFormKeys, isValidEmail };

package/src/hooks/index.tsx

@@ -13,7 +13,7 @@ import { useURLSearchParam } from "./location";
 import { useHandleClickOutside, useModal, useModals, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
-import { useGlobalPermission, usePermission, usePermissions, usePermissionsForSite } from "./users";
+import { useGlobalPermission, usePermission, usePermissions, usePermissionsForPage, usePermissionsForSite } from "./users";
 import { useFirefoxScrollLock, useWindowSize } from "./window";
 
 export {
@@ -35,6 +35,7 @@ export {
 	useOnMessageReceivedFromOutside,
 	usePermission,
 	usePermissions,
+	usePermissionsForPage,
 	usePermissionsForSite,
 	usePrevious,
 	useResizable,

package/src/hooks/users.tsx

@@ -1,12 +1,19 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
 
-import type { IRootState } from "@ax/types";
+import type { IDataLanguage, IPageLanguage, IRootState, PageAccessGrantsSummary } from "@ax/types";
+
+const useUserState = () =>
+	useSelector((state: IRootState) => ({
+		currentUser: state.users.currentUser,
+		userPermissions: state.users.currentPermissions,
+		globalPermissions: state.users.globalPermissions,
+		roles: state.users.roles,
+		isSuperAdmin: state.users.currentUser?.isSuperAdmin,
+	}));
 
 const usePermission = (permission: string | string[] | undefined): boolean => {
-	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
-	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
-	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+	const { currentUser, userPermissions, isSuperAdmin } = useUserState();
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
@@ -29,9 +36,7 @@ const usePermission = (permission: string | string[] | undefined): boolean => {
 };
 
 const usePermissions = <T extends Record<string, string | string[]>>(permissions: T): Record<keyof T, boolean> => {
-	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
-	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
-	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+	const { currentUser, userPermissions, isSuperAdmin } = useUserState();
 
 	return useMemo(() => {
 		if (!currentUser) {
@@ -59,9 +64,7 @@ const usePermissions = <T extends Record<string, string | string[]>>(permissions
 };
 
 const useGlobalPermission = (permission: string | string[] | undefined): boolean => {
-	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
-	const userPermissions = useSelector((state: IRootState) => state.users.globalPermissions);
-	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+	const { currentUser, globalPermissions: userPermissions, isSuperAdmin } = useUserState();
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
@@ -87,9 +90,7 @@ const usePermissionsForSite = <T extends Record<string, string | string[]>>(
 	siteId: number | string,
 	permissions: T,
 ): Record<keyof T, boolean> => {
-	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
-	const roles = useSelector((state: IRootState) => state.users.roles);
-	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+	const { currentUser, roles, isSuperAdmin } = useUserState();
 
 	return useMemo(() => {
 		if (!currentUser) {
@@ -145,4 +146,143 @@ const usePermissionsForSite = <T extends Record<string, string | string[]>>(
 	}, [siteId, permissions, currentUser, roles, isSuperAdmin]);
 };
 
-export { usePermission, usePermissions, useGlobalPermission, usePermissionsForSite };
+const usePermissionsForPage = <T extends Record<string, string | string[]>>(
+	siteId: number | string,
+	pageId: number,
+	permissions: T,
+	accessGrants?: PageAccessGrantsSummary | null,
+	pageLanguages?: (IDataLanguage | IPageLanguage)[],
+): Record<keyof T, boolean> => {
+	const { currentUser, roles, isSuperAdmin } = useUserState();
+
+	return useMemo(() => {
+		const createPermissionResult = (value: boolean): Record<keyof T, boolean> =>
+			Object.keys(permissions).reduce(
+				(acc, key) => {
+					acc[key as keyof T] = value;
+					return acc;
+				},
+				{} as Record<keyof T, boolean>,
+			);
+
+		if (!currentUser) {
+			return createPermissionResult(false);
+		}
+
+		if (isSuperAdmin) {
+			return createPermissionResult(true);
+		}
+
+		const userRoles = currentUser.roles.find(
+			(roleSite) => roleSite.siteId === siteId || roleSite.siteId === "all",
+		)?.roles;
+
+		// Check if pageId is part of a translation group in pageLanguages
+		// If yes, user can access it if they have access to ANY translation
+		const getLanguagePageId = (lang: IDataLanguage | IPageLanguage): number | undefined => {
+			if ("pageId" in lang) {
+				return lang.pageId;
+			}
+			if ("id" in lang) {
+				return lang.id;
+			}
+			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
+					}
+
+					// 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) {
+						const siteEntry = currentUser.pagePermissions.find(
+							(entry) => entry.siteId === siteId || entry.siteId === "global",
+						);
+						if (!siteEntry) {
+							return false;
+						}
+						return translationPageIds.some((translationPageId) => siteEntry.pageIds.includes(translationPageId));
+					}
+
+					return true; // No pagePermissions restrictions, allow access
+				})()
+			: undefined;
+
+		// If pageId is part of a translation group, use the translation group access result
+		const isPagePermissionRestricted =
+			hasAccessToTranslationGroup !== undefined
+				? !hasAccessToTranslationGroup
+				: currentUser.pagePermissions?.length
+					? (() => {
+							const siteEntry = currentUser.pagePermissions.find(
+								(entry) => entry.siteId === siteId || entry.siteId === "global",
+							);
+							// Page is restricted if site is not in pagePermissions or page is not in the site's pageIds
+							if (!siteEntry) {
+								return true;
+							}
+							return !siteEntry.pageIds.includes(pageId);
+						})()
+					: false;
+
+		// User is restricted by pagePermissions and page is not in their list
+		// But they can still access if in accessGrants
+		if (isPagePermissionRestricted) {
+			const pageHasAccessGrants = accessGrants?.users?.length || accessGrants?.roles?.length;
+
+			if (pageHasAccessGrants) {
+				const hasAccessGrantsAccess =
+					accessGrants.users?.includes(currentUser.id || -1) ||
+					userRoles?.some((roleId) => accessGrants.roles?.includes(roleId));
+
+				if (!hasAccessGrantsAccess) {
+					return createPermissionResult(false);
+				}
+			} else {
+				return createPermissionResult(false);
+			}
+		}
+
+		if (!userRoles?.length) {
+			return createPermissionResult(false);
+		}
+
+		const roleMap = new Map(roles?.map((r) => [r.id, r]) || []);
+		const sitePermissionsSet = new Set<string>();
+
+		userRoles.forEach((roleID: number) => {
+			const role = roleMap.get(roleID);
+			if (role) {
+				const permissions = siteId === "global" ? role.permissions.globalPermissions : role.permissions.sitePermissions;
+				permissions.forEach((perm) => {
+					sitePermissionsSet.add(perm.key);
+				});
+			}
+		});
+
+		const result: Record<string, boolean> = {};
+		for (const key of Object.keys(permissions)) {
+			const permission = permissions[key as keyof T];
+			const arrayPermission = Array.isArray(permission) ? permission : [permission];
+			result[key] = arrayPermission.some((perm: string) => sitePermissionsSet.has(perm));
+		}
+		return result as Record<keyof T, boolean>;
+	}, [siteId, pageId, permissions, accessGrants, currentUser, roles, isSuperAdmin, pageLanguages]);
+};
+
+export {
+	useUserState,
+	usePermission,
+	usePermissions,
+	useGlobalPermission,
+	usePermissionsForSite,
+	usePermissionsForPage,
+};

package/src/modules/ActivityLog/LogFilters/UserFilter/index.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
+import { users } from "@ax/api";
 import { CheckGroupFilter } from "@ax/components";
 import { isReqOk } from "@ax/helpers";
-import { users } from "@ax/api";
-import { IQueryValue, IUser } from "@ax/types";
+import type { IQueryValue, IUser } from "@ax/types";
 
 const UserFilter = (props: IUserFilterProps): JSX.Element => {
 	const { filterItems, value } = props;
@@ -39,15 +39,14 @@ const UserFilter = (props: IUserFilterProps): JSX.Element => {
 	useEffect(() => {
 		getUsers()
 			.then((items: IUser[]) => {
-				items &&
-					items.forEach((item) => {
-						const newFilter = {
-							name: item.id?.toString() || "",
-							value: item.id?.toString() || "",
-							title: item.name,
-						};
-						filters.push(newFilter);
-					});
+				items?.forEach((item) => {
+					const newFilter = {
+						name: item.id?.toString() || "",
+						value: item.id?.toString() || "",
+						title: item.name,
+					};
+					filters.push(newFilter);
+				});
 
 				setOptions(filters);
 			})

package/src/modules/Content/PageItem/index.tsx

@@ -12,7 +12,7 @@ import {
 	getTemplateDisplayName,
 	slugify,
 } from "@ax/helpers";
-import { useModals, usePermissions } from "@ax/hooks";
+import { useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -85,6 +85,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		publicationScheduled,
 		haveDraftPage,
 		title,
+		accessGrants,
 	} = page;
 
 	const displayName = getTemplateDisplayName(templateId);
@@ -95,15 +96,21 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const { toggleModal, isOpen } = useModals(["duplicate", "remove", "unpublish", "delete", "copy"]);
 
-	const isAllowedTo = usePermissions({
-		duplicatePages: "content.duplicatePages",
-		publishUnpublishPages: "content.publishUnpublishPages",
-		createPages: "content.createPages",
-		copyPageInOtherSite: "content.copyPageInOtherSite",
-		deletePages: "content.deletePages",
-		deletePublishedPages: "content.deletePublishedPages",
-		editContentPages: "content.editContentPages",
-	});
+	const isAllowedTo = usePermissionsForPage(
+		page.site!,
+		page.id,
+		{
+			duplicatePages: "content.duplicatePages",
+			publishUnpublishPages: "content.publishUnpublishPages",
+			createPages: "content.createPages",
+			copyPageInOtherSite: "content.copyPageInOtherSite",
+			deletePages: "content.deletePages",
+			deletePublishedPages: "content.deletePublishedPages",
+			editContentPages: "content.editContentPages",
+		},
+		accessGrants,
+		pageLanguages,
+	);
 
 	const currentTemplateDataPacks = schemas.templates[templateId].dataPacks;
 

package/src/modules/Content/index.tsx

@@ -47,7 +47,6 @@ import type {
 	ISavePageParams,
 	ISchemaField,
 	ISite,
-	ISiteRoles,
 	IStructuredData,
 	IStructuredDataContent,
 	IUser,
@@ -176,8 +175,7 @@ const Content = (props: IProps): JSX.Element => {
 	const currentSitePagesTemplatesIds = allSitePages?.map((page) => page.templateId);
 	const currentSitesByLang = sitesByLang?.filter(
 		(site: ISite) =>
-			user?.isSuperAdmin ||
-			user?.roles.find((siteRole: ISiteRoles) => siteRole.siteId === site.id || siteRole.siteId === "all"),
+			user?.isSuperAdmin || user?.roles.find((siteRole) => siteRole.siteId === site.id || siteRole.siteId === "all"),
 	);
 	const categoryColumns: ISchemaField[] = currentStructuredData?.schema
 		? currentStructuredData.schema.fields.filter((field: ISchemaField) => field.showList)

package/src/modules/GlobalEditor/Editor/index.tsx

@@ -46,6 +46,8 @@ const Editor = (props: IProps) => {
 		isKeywordsPreviewOpen,
 		headingsFilter,
 		keywordsFilter,
+		isRestrictedPage,
+		onRestrictionsClick,
 	} = props;
 
 	const actions = {
@@ -77,6 +79,8 @@ const Editor = (props: IProps) => {
 					toggleKeywordsPreview={toggleKeywordsPreview}
 					isKeywordsPreviewOpen={isKeywordsPreviewOpen}
 					keywordsFilter={keywordsFilter}
+					isRestrictedPage={isRestrictedPage}
+					onRestrictionsClick={onRestrictionsClick}
 				/>
 			}
 			rightPanel={
@@ -141,6 +145,8 @@ interface IPageBrowserDispatchProps {
 	isKeywordsPreviewOpen: boolean;
 	headingsFilter: HeadingFilter;
 	keywordsFilter: string[];
+	isRestrictedPage?: boolean;
+	onRestrictionsClick?(): void;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/PageBrowser/index.tsx

@@ -24,6 +24,8 @@ const PageBrowser = (props: IProps) => {
 		setScrollEditorID,
 		toggleHeadingsPreview,
 		toggleKeywordsPreview,
+		isRestrictedPage,
+		onRestrictionsClick,
 	} = props;
 
 	const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -59,6 +61,8 @@ const PageBrowser = (props: IProps) => {
 			headingFilter={headingsFilter}
 			toggleKeywordsPreview={toggleKeywordsPreview}
 			keywordsFilter={keywordsFilter}
+			isRestrictedPage={isRestrictedPage}
+			onRestrictionsClick={onRestrictionsClick}
 		/>
 	);
 };
@@ -89,6 +93,8 @@ interface IPageBrowserDispatchProps {
 	setScrollEditorID(editorID: number | null): void;
 	toggleHeadingsPreview?(): void;
 	toggleKeywordsPreview?(): void;
+	isRestrictedPage?: boolean;
+	onRestrictionsClick?(): void;
 }
 
 type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/Preview/index.tsx

@@ -1,17 +1,19 @@
 import PageBrowser from "../PageBrowser";
+
 import * as S from "./style";
 
 const PreviewBrowser = (props: IProps) => {
-	const { theme } = props;
+	const { theme, isRestrictedPage } = props;
 	return (
 		<S.BrowserWrapper>
-			<PageBrowser isReadOnly={true} isPreview={true} theme={theme} />
+			<PageBrowser isReadOnly={true} isPreview={true} theme={theme} isRestrictedPage={isRestrictedPage} />
 		</S.BrowserWrapper>
 	);
 };
 
 interface IProps {
 	theme: string;
+	isRestrictedPage: boolean;
 }
 
 export default PreviewBrowser;