@griddo/ax 11.15.9 → 11.16.0-rc.0

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

@@ -0,0 +1,382 @@
+import "@testing-library/jest-dom";
+
+import * as reactRedux from "react-redux";
+
+import { usePermissionsForPage } from "@ax/hooks";
+import type { PageAccessGrantsSummary } from "@ax/types";
+
+import { renderHook } from "@testing-library/react";
+
+jest.mock("react-redux", () => {
+	const actual = jest.requireActual("react-redux");
+	return {
+		...actual,
+		useSelector: jest.fn(),
+	};
+});
+
+const { useSelector } = reactRedux;
+
+describe("usePermissionsForPage hook", () => {
+	const mockRole = {
+		id: 1,
+		name: "Editor",
+		permissions: {
+			sitePermissions: [{ key: "edit_page" }, { key: "delete_page" }],
+			globalPermissions: [{ key: "manage_users" }],
+		},
+	};
+
+	const mockUser = {
+		id: 1,
+		email: "user@test.com",
+		isSuperAdmin: false,
+		roles: [{ siteId: 1, roles: [1] }],
+		pagePermissions: undefined,
+	};
+
+	const mockSuperAdmin = {
+		...mockUser,
+		isSuperAdmin: true,
+	};
+
+	const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
+
+	const setupMockState = (state: any) => {
+		mockUseSelector.mockImplementation((selector: any) => selector(state));
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("1. User authentication", () => {
+		it("should deny all permissions when user is not authenticated", () => {
+			setupMockState({ users: { currentUser: null, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page", delete: "delete_page" }));
+
+			expect(result.current.edit).toBe(false);
+			expect(result.current.delete).toBe(false);
+		});
+	});
+
+	describe("2. Super admin", () => {
+		it("should grant all permissions to super admin", () => {
+			setupMockState({ users: { currentUser: mockSuperAdmin, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page", delete: "delete_page" }));
+
+			expect(result.current.edit).toBe(true);
+			expect(result.current.delete).toBe(true);
+		});
+	});
+
+	describe("3. Site roles", () => {
+		it("should deny all permissions when user has no roles for the site", () => {
+			const userWithoutRoles = { ...mockUser, roles: [] };
+			setupMockState({ users: { currentUser: userWithoutRoles, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(false);
+		});
+
+		it("should allow access when user has roles for the site", () => {
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(true);
+		});
+	});
+
+	describe("4. Page permission access (pagePermissions)", () => {
+		it("should allow access when user has no pagePermissions restrictions", () => {
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should deny access when site is not in pagePermissions (user is restricted to other sites)", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 2, pageIds: [5] }],
+			};
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(false);
+		});
+
+		it("should allow access when site is not in pagePermissions but user is in accessGrants", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 2, pageIds: [5] }],
+			};
+			const accessGrants: PageAccessGrantsSummary = { users: [1], roles: [] };
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, accessGrants));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should deny access when site is in pagePermissions but page is not in pageIds", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [5, 6] }],
+			};
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(false);
+		});
+
+		it("should allow access when page is in pagePermissions list", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [1, 2, 3] }],
+			};
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should allow access with global pagePermissions entry", () => {
+			const userWithGlobalPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: "global", pageIds: [1, 2] }],
+			};
+			setupMockState({ users: { currentUser: userWithGlobalPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(true);
+		});
+	});
+
+	describe("5. Access grants", () => {
+		it("should allow access when no accessGrants are defined", () => {
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, undefined));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should allow access when accessGrants is empty", () => {
+			const emptyAccessGrants: PageAccessGrantsSummary = { users: [], roles: [] };
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, emptyAccessGrants));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should allow access when user is in accessGrants.users", () => {
+			const accessGrants: PageAccessGrantsSummary = { users: [1, 2, 3], roles: [] };
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, accessGrants));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should allow access when user role is in accessGrants.roles", () => {
+			const accessGrants: PageAccessGrantsSummary = { users: [], roles: [1, 2, 3] };
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, accessGrants));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should deny access when user is not in accessGrants and no pagePermissionAccess", () => {
+			const userWithPageRestriction = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [2, 3] }], // Different pages
+			};
+			const accessGrants: PageAccessGrantsSummary = { users: [2, 3], roles: [2, 3] };
+			setupMockState({ users: { currentUser: userWithPageRestriction, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, accessGrants));
+
+			expect(result.current.edit).toBe(false);
+		});
+
+		it("should allow access when accessGrants denies but hasPagePermissionAccess is true", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [1] }],
+			};
+			const accessGrants: PageAccessGrantsSummary = { users: [2, 3], roles: [2, 3] };
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, accessGrants));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should allow access when user has no pagePermissions and accessGrants is defined but user is not in list", () => {
+			const accessGrants: PageAccessGrantsSummary = { users: [2, 3], roles: [2, 3] };
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, accessGrants));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should allow access when user is restricted by pagePermissions but in accessGrants for the page", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [2, 3] }], // Page 1 not in list
+			};
+			const accessGrants: PageAccessGrantsSummary = { users: [1], roles: [] }; // User 1 in accessGrants
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }, accessGrants));
+
+			expect(result.current.edit).toBe(true);
+		});
+	});
+
+	describe("6. Role permissions", () => {
+		it("should check specific permissions against role permissions", () => {
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() =>
+				usePermissionsForPage(1, 1, {
+					edit: "edit_page",
+					delete: "delete_page",
+					publish: "publish_page",
+				}),
+			);
+
+			expect(result.current.edit).toBe(true);
+			expect(result.current.delete).toBe(true);
+			expect(result.current.publish).toBe(false);
+		});
+
+		it("should use global permissions when siteId is global", () => {
+			const userWithGlobalRoles = {
+				...mockUser,
+				roles: [{ siteId: "global", roles: [1] }],
+			};
+			setupMockState({ users: { currentUser: userWithGlobalRoles, roles: [mockRole] } });
+
+			const { result } = renderHook(() =>
+				usePermissionsForPage("global", 1, {
+					manageUsers: "manage_users",
+					editPage: "edit_page",
+				}),
+			);
+
+			expect(result.current.manageUsers).toBe(true);
+			expect(result.current.editPage).toBe(false);
+		});
+
+		it("should support array of permission keys (OR logic)", () => {
+			setupMockState({ users: { currentUser: mockUser, roles: [mockRole] } });
+
+			const { result } = renderHook(() =>
+				usePermissionsForPage(1, 1, {
+					canModify: ["edit_page", "publish_page"],
+				}),
+			);
+
+			expect(result.current.canModify).toBe(true);
+		});
+	});
+
+	describe("7. Page languages (translations)", () => {
+		it("should allow access to a translation if user has access to any translation in the group", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [100] }],
+			};
+			const pageLanguages = [
+				{ pageId: 100, languageId: 1 }, // English
+				{ pageId: 200, languageId: 2 }, // Spanish
+				{ pageId: 300, languageId: 3 }, // French
+			];
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			// User has access to pageId 100 (English), should also have access to 200 (Spanish)
+			const { result } = renderHook(() => usePermissionsForPage(1, 200, { edit: "edit_page" }, undefined, pageLanguages));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should deny access to a translation if user has no access to any translation in the group", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [999] }],
+			};
+			const pageLanguages = [
+				{ pageId: 100, languageId: 1 },
+				{ pageId: 200, languageId: 2 },
+				{ pageId: 300, languageId: 3 },
+			];
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			// User has no access to any translation in the group
+			const { result } = renderHook(() => usePermissionsForPage(1, 200, { edit: "edit_page" }, undefined, pageLanguages));
+
+			expect(result.current.edit).toBe(false);
+		});
+
+		it("should work without pageLanguages (backward compatibility)", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [1] }],
+			};
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			const { result } = renderHook(() => usePermissionsForPage(1, 1, { edit: "edit_page" }));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should allow access to translation via accessGrants", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [999] }], // No access to translation group
+			};
+			const accessGrants: PageAccessGrantsSummary = { users: [1], roles: [] };
+			const pageLanguages = [
+				{ pageId: 100, languageId: 1 },
+				{ pageId: 200, languageId: 2 },
+			];
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			// User not in translation group perms but is in accessGrants
+			const { result } = renderHook(() => usePermissionsForPage(1, 200, { edit: "edit_page" }, accessGrants, pageLanguages));
+
+			expect(result.current.edit).toBe(true);
+		});
+
+		it("should deny access when pageId is not part of any translation group", () => {
+			const userWithPagePerms = {
+				...mockUser,
+				pagePermissions: [{ siteId: 1, pageIds: [100] }],
+			};
+			const pageLanguages = [
+				{ pageId: 100, languageId: 1 },
+				{ pageId: 200, languageId: 2 },
+			];
+			setupMockState({ users: { currentUser: userWithPagePerms, roles: [mockRole] } });
+
+			// pageId 999 is not in pageLanguages, so treat it as a regular page
+			const { result } = renderHook(() => usePermissionsForPage(1, 999, { edit: "edit_page" }, undefined, pageLanguages));
+
+			expect(result.current.edit).toBe(false);
+		});
+	});
+});

package/src/api/pages.tsx

@@ -1,4 +1,4 @@
-import type { IGetPagesParams } from "@ax/types";
+import type { IGetPagesParams, PageAccessGrantsSummary } from "@ax/types";
 
 import type { AxiosResponse } from "axios";
 
@@ -99,6 +99,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 		endpoint: "/translations/page/",
 		method: "POST",
 	},
+	SET_PAGE_ACCESS_GRANTS: {
+		...template,
+		endpoint: ["/site/", "/pages/", "/access-grant"],
+		method: "PUT",
+	},
 };
 
 const getPages = async (params: IGetPagesParams, filterQuery = ""): Promise<AxiosResponse> => {
@@ -280,6 +285,23 @@ const getPageTranslation = async (data: any, langID: number) => {
 	return sendRequest(SERVICES.PAGE_AI_TRANSLATION, { ...data });
 };
 
+const setPageAccessGrants = async (data: {
+	siteID: number | "global";
+	pageID: number;
+	accessGrants: PageAccessGrantsSummary;
+}) => {
+	const { siteID, pageID, accessGrants } = data;
+
+	const {
+		host,
+		endpoint: [prefix, middle, suffix],
+	} = SERVICES.SET_PAGE_ACCESS_GRANTS;
+
+	SERVICES.SET_PAGE_ACCESS_GRANTS.dynamicUrl = `${host}${prefix}${siteID}${middle}${pageID}${suffix}`;
+
+	return sendRequest(SERVICES.SET_PAGE_ACCESS_GRANTS, { ...accessGrants });
+};
+
 export default {
 	getPages,
 	getPageInfo,
@@ -299,4 +321,5 @@ export default {
 	pageCheck,
 	getPageSummary,
 	getPageTranslation,
+	setPageAccessGrants,
 };

package/src/api/sites.tsx

@@ -1,7 +1,9 @@
-import type { AxiosResponse } from "axios";
 import type { IGetGlobalPagesParams, IGetSitePagesParams, IGetSitesParams, ISite } from "@ax/types";
+
+import type { AxiosResponse } from "axios";
+
 import { template } from "./config";
-import { sendRequest, type IServiceConfig, sendInitialRequest } from "./utils";
+import { type IServiceConfig, sendInitialRequest, sendRequest } from "./utils";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
 	GET_ALL_SITES: {
@@ -168,9 +170,9 @@ const getStructuredSitePages = async (params: IGetSitePagesParams, structuredDat
 	SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = `${host}${prefix}${siteID}${suffix}${structuredData}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}${filterQuery}`;
 
 	if (query && query.trim() !== "")
-		SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl + `&query=${query}`;
+		SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = `${SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl}&query=${query}`;
 	if (format)
-		SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl + `&format=${format}`;
+		SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl = `${SERVICES.GET_SITE_STRUCTURED_PAGES.dynamicUrl}&format=${format}`;
 
 	return sendRequest(SERVICES.GET_SITE_STRUCTURED_PAGES);
 };
@@ -187,17 +189,15 @@ const getSitePages = async (params: IGetSitePagesParams, filterQuery = ""): Prom
 	SERVICES.GET_SITE_PAGES.dynamicUrl = `${host}${prefix}${siteID}${suffix}?deleted=${deleted}${filterQuery}`;
 
 	if (page && itemsPerPage)
-		SERVICES.GET_SITE_PAGES.dynamicUrl =
-			SERVICES.GET_SITE_PAGES.dynamicUrl + `&page=${page}&itemsPerPage=${itemsPerPage}`;
+		SERVICES.GET_SITE_PAGES.dynamicUrl = `${SERVICES.GET_SITE_PAGES.dynamicUrl}&page=${page}&itemsPerPage=${itemsPerPage}`;
 	if (query && query.trim() !== "")
-		SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&query=${query}`;
+		SERVICES.GET_SITE_PAGES.dynamicUrl = `${SERVICES.GET_SITE_PAGES.dynamicUrl}&query=${query}`;
 	if (filterStructuredData)
-		SERVICES.GET_SITE_PAGES.dynamicUrl =
-			SERVICES.GET_SITE_PAGES.dynamicUrl + `&filterStructuredData=${filterStructuredData}`;
-	if (format) SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&format=${format}`;
+		SERVICES.GET_SITE_PAGES.dynamicUrl = `${SERVICES.GET_SITE_PAGES.dynamicUrl}&filterStructuredData=${filterStructuredData}`;
+	if (format) SERVICES.GET_SITE_PAGES.dynamicUrl = `${SERVICES.GET_SITE_PAGES.dynamicUrl}&format=${format}`;
 	if (filterPages)
-		SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&filterPages=${filterPages.join(",")}`;
-	if (ignoreLang) SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&ignoreLang=${ignoreLang}`;
+		SERVICES.GET_SITE_PAGES.dynamicUrl = `${SERVICES.GET_SITE_PAGES.dynamicUrl}&filterPages=${filterPages.join(",")}`;
+	if (ignoreLang) SERVICES.GET_SITE_PAGES.dynamicUrl = `${SERVICES.GET_SITE_PAGES.dynamicUrl}&ignoreLang=${ignoreLang}`;
 
 	const dataHeader = {
 		...(lang && { lang }),
@@ -215,7 +215,7 @@ const getGlobalPages = async (params: IGetGlobalPagesParams, filterQuery?: strin
 	if (query && query.trim() !== "") SERVICES.GET_GLOBAL_PAGES.dynamicUrl += `&query=${query}`;
 	if (filterStructuredData) SERVICES.GET_GLOBAL_PAGES.dynamicUrl += `&filterStructuredData=${filterStructuredData}`;
 	if (filterQuery) SERVICES.GET_GLOBAL_PAGES.dynamicUrl += filterQuery;
-	if (format) SERVICES.GET_GLOBAL_PAGES.dynamicUrl = SERVICES.GET_GLOBAL_PAGES.dynamicUrl + `&format=${format}`;
+	if (format) SERVICES.GET_GLOBAL_PAGES.dynamicUrl = `${SERVICES.GET_GLOBAL_PAGES.dynamicUrl}&format=${format}`;
 
 	return sendRequest(SERVICES.GET_GLOBAL_PAGES);
 };
@@ -325,7 +325,7 @@ const getSiteImages = async (
 	const items = itemsPerPage ? `&itemsPerPage=${itemsPerPage}` : "";
 	const thumb = thumbWidth && thumbHeight ? `&thumbWidth=${thumbWidth}&thumbHeight=${thumbHeight}` : "";
 	SERVICES.GET_SITE_IMAGES.dynamicUrl = `${host}${prefix}${site}${suffix}?page=${page}${items}${thumb}${query}`;
-	if (search) SERVICES.GET_SITE_IMAGES.dynamicUrl = SERVICES.GET_SITE_IMAGES.dynamicUrl + `&query=${search}`;
+	if (search) SERVICES.GET_SITE_IMAGES.dynamicUrl = `${SERVICES.GET_SITE_IMAGES.dynamicUrl}&query=${search}`;
 
 	return sendRequest(SERVICES.GET_SITE_IMAGES);
 };

package/src/api/structuredData.tsx

@@ -1,7 +1,14 @@
+import type {
+	ICategoryGroupParams,
+	IExportDataParams,
+	IGetStructuredDataParams,
+	IOrderCategoryParams,
+} from "@ax/types";
+
+import type { AxiosResponse } from "axios";
+
 import { template } from "./config";
-import { IServiceConfig, sendRequest, sendInitialRequest } from "./utils";
-import { ICategoryGroupParams, IExportDataParams, IGetStructuredDataParams, IOrderCategoryParams } from "@ax/types";
-import { AxiosResponse } from "axios";
+import { type IServiceConfig, sendInitialRequest, sendRequest } from "./utils";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
 	GET_DATA: {
@@ -127,7 +134,7 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 	},
 };
 
-const getData = (token: string | null, siteID?: number | null): Promise<AxiosResponse> => {
+const getData = (token: string | null, siteID?: number | null, lang?: number): Promise<AxiosResponse> => {
 	const { host, endpoint } = SERVICES.GET_DATA;
 
 	if (siteID) {
@@ -136,10 +143,13 @@ const getData = (token: string | null, siteID?: number | null): Promise<AxiosRes
 		SERVICES.GET_DATA.dynamicUrl = "";
 	}
 
+	const dataHeader = {} as { lang: number };
+	if (lang) dataHeader.lang = lang;
+
 	if (token) {
-		return sendInitialRequest(SERVICES.GET_DATA, token);
+		return sendInitialRequest(SERVICES.GET_DATA, token, dataHeader);
 	} else {
-		return sendRequest(SERVICES.GET_DATA, {});
+		return sendRequest(SERVICES.GET_DATA, null, dataHeader);
 	}
 };
 
@@ -267,7 +277,7 @@ const setDataStatusBulk = (dataContentID: number[], status: string): Promise<Axi
 	return sendRequest(SERVICES.SET_DATA_STATUS_BULK, { ids: dataContentID });
 };
 
-const getContentTypes = (siteID: number | null, lang?: number): Promise<AxiosResponse> => {
+const getContentTypes = (siteID: number, lang?: number): Promise<AxiosResponse> => {
 	const { host, endpoint } = SERVICES.GET_CONTENT_TYPES;
 	const [prefix, suffix] = endpoint;
 

package/src/components/Browser/index.tsx

@@ -51,8 +51,10 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		editorType = "page",
 		headingFilter,
 		keywordsFilter,
+		isRestrictedPage = false,
 		toggleHeadingsPreview,
 		toggleKeywordsPreview,
+		onRestrictionsClick,
 	} = props;
 
 	const { id, entity, haveDraftPage } = content;
@@ -294,6 +296,14 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 				)}
 				{showIframe ? (
 					<S.ContentWrapper>
+						{isRestrictedPage && (
+							<S.StyledFloatingNote
+								message="Only some users can edit this page."
+								icon="users"
+								$short={true}
+								onClick={onRestrictionsClick}
+							/>
+						)}
 						{floatingNoteConfig && (
 							<S.StyledFloatingNote
 								message={`You are viewing the ${floatingNoteConfig.label} editor${isCompact ? "" : " of this page"}`}
@@ -420,8 +430,10 @@ export interface IBrowserProps {
 	editorType?: "form" | "page" | "headings" | "keywords";
 	headingFilter?: HeadingFilter;
 	keywordsFilter?: string[];
+	isRestrictedPage?: boolean;
 	toggleHeadingsPreview?(): void;
 	toggleKeywordsPreview?(): void;
+	onRestrictionsClick?(): void;
 	actions?: {
 		setSelectedContentAction(editorID: number): void;
 		deleteModuleAction?(editorID: number[]): void;

package/src/components/Browser/style.tsx

@@ -108,12 +108,16 @@ const ContentWrapper = styled.div`
   min-height: 0;
 `;
 
-const StyledFloatingNote = styled(({ $compact: _, ...props }) => <FloatingNote {...props} />)<{ $compact?: boolean }>`
+const StyledFloatingNote = styled(({ $compact: _, ...props }) => <FloatingNote {...props} />)<{
+	$compact?: boolean;
+	$short?: boolean;
+}>`
   position: absolute;
   left: ${(p) => p.theme.spacing.s};
   top: ${(p) => p.theme.spacing.s};
   right: ${(p) => p.theme.spacing.s};
   ${(p) => p.$compact && `&& { padding: ${p.theme.spacing.xs} ${p.theme.spacing.s}; }`}
+  width: ${(p) => (p.$short ? "268px" : "auto")};
 `;
 
 const ResolutionWrapper = styled.div`

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Tabs } from "@ax/components";
 import { usePermission } from "@ax/hooks";
@@ -44,11 +44,14 @@ export const Form = (props: IFormProps): JSX.Element => {
 		(!isGlobal && isAllowedToEditConfigPages) || (isGlobal && isAllowedToEditGlobalData);
 	const isAllowedToEditPageSEO = (!isGlobal && isAllowedToEditSiteSeo) || (isGlobal && isAllowedToEditGlobalSeo);
 
-	const permissionsByTab: Record<string, boolean | undefined> = {
-		content: isAllowedToEditPageContent,
-		config: isAllowedToEditPageConfig,
-		seo: isAllowedToEditPageSEO,
-	};
+	const permissionsByTab: Record<string, boolean | undefined> = useMemo(
+		() => ({
+			content: isAllowedToEditPageContent,
+			config: isAllowedToEditPageConfig,
+			seo: isAllowedToEditPageSEO,
+		}),
+		[isAllowedToEditPageContent, isAllowedToEditPageConfig, isAllowedToEditPageSEO],
+	);
 
 	const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title.toLowerCase() === selectedTab);
 
@@ -78,7 +81,7 @@ export const Form = (props: IFormProps): JSX.Element => {
 		);
 	};
 
-	const getTabs = (): string[] => {
+	const tabs = useMemo(() => {
 		const isHeader = schema.type === "header";
 		const isPageSchema = schema.schemaType === "page";
 
@@ -95,9 +98,7 @@ export const Form = (props: IFormProps): JSX.Element => {
 				return !isPageSchema || (permKey && permissionsByTab[permKey]);
 			})
 			.map((tab: ISchemaTab) => tab.title.toLowerCase());
-	};
-
-	const tabs = getTabs();
+	}, [schema, isPage, permissionsByTab]);
 
 	const handleRestore = (type: "header" | "footer") => actions.restorePageNavigationAction?.(type);
 

package/src/components/ContentItem/index.tsx

@@ -0,0 +1,31 @@
+import { getFormattedDateWithTimezone } from "@ax/helpers";
+
+import * as S from "./style";
+
+const ContentItem = (props: IContentItemProps): JSX.Element => {
+	const { title, type, date, slug } = props;
+
+	const pageType = type || "Page";
+
+	return (
+		<S.ListItem>
+			<S.Content data-testid="content-item">
+				<S.Header>
+					<S.Type>{pageType}</S.Type>
+					<S.ContentDate>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.ContentDate>
+				</S.Header>
+				<S.Title>{title}</S.Title>
+				{slug && <S.Slug>{slug}</S.Slug>}
+			</S.Content>
+		</S.ListItem>
+	);
+};
+
+interface IContentItemProps {
+	title: string;
+	type: string;
+	date: Date;
+	slug?: string;
+}
+
+export default ContentItem;