@griddo/ax 11.15.9 → 11.16.0-rc.1

package/src/modules/StructuredData/Form/index.tsx

@@ -8,6 +8,7 @@ import {
 	MainWrapper,
 	Notification,
 	RestoreModal,
+	RestrictionsModal,
 	ScheduleModal,
 } from "@ax/components";
 import { appActions } from "@ax/containers/App";
@@ -15,7 +16,7 @@ import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
-import { useIsDirty, useModal } from "@ax/hooks";
+import { useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	IDataLanguage,
 	IDataPack,
@@ -23,11 +24,16 @@ import type {
 	ILanguage,
 	INotification,
 	IRootState,
+	ISchema,
 	ISchemaField,
 	ISite,
+	IStructuredData,
+	IStructuredDataContent,
+	PageAccessGrantsSummary,
 } from "@ax/types";
 
 import { DeleteModal } from "../atoms";
+import { getPermission } from "../utils";
 import ConnectedField from "./ConnectedField";
 
 import * as S from "./style";
@@ -62,16 +68,31 @@ const Form = (props: IProps) => {
 		restoreDataContent,
 	} = props;
 
+	const isPrivateData = currentStructuredData?.private || false;
+
+	const isAllowedTo = usePermissionsForPage(
+		site?.id || "global",
+		form?.id || 0,
+		{
+			publishPages: getPermission("publish", !site, isPrivateData),
+			createPages: getPermission("create", !site, isPrivateData),
+			deletePages: getPermission("delete", !site, isPrivateData),
+			editPages: getPermission("edit", !site, isPrivateData),
+			setPagePermissions: site
+				? "general.setPermissionPerSimpleContent"
+				: "global.globalData.setPermissionPerSimpleContent",
+		},
+		form?.accessGrants,
+		form?.dataLanguages,
+	);
+
 	const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [scheduleDate, setScheduleDate] = useState({
 		date: dateToString(new Date(), "yyy/MM/dd"),
 		time: "12:00 am",
 	});
-	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
-	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
-	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["schedule", "cancelSchedule", "restore", "userAccess", "delete"]);
 	const [isDeleting, setIsDeleting] = useState(false);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);
@@ -94,10 +115,11 @@ const Form = (props: IProps) => {
 
 	const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
 	const disabledDatapack =
-		currentStructuredData.local &&
-		!activatedDataPacksIds.some((pack: string) => currentStructuredData.dataPacks.includes(pack));
+		currentStructuredData?.local &&
+		!activatedDataPacksIds.some((pack: string) => currentStructuredData!.dataPacks.includes(pack));
 	const isDeleted = !!form?.deleted;
-	const isDisabled = isDeleted || disabledDatapack;
+	const isDisabled = isDeleted || disabledDatapack || !isAllowedTo.editPages;
+	const isRestricted = !!(form?.accessGrants?.users.length || form?.accessGrants?.roles.length);
 
 	const isDataTranslatable = currentStructuredData?.translate;
 	const isScheduled = !!form && !!form.publicationScheduled;
@@ -144,18 +166,19 @@ const Form = (props: IProps) => {
 			);
 		});
 
-	const handleSave = async (publish: boolean, scheduleDate?: string | null) => {
+	const handleSave = async (publish: boolean, scheduleDate?: string | null, formToSave?: any) => {
+		const currentForm = formToSave || form;
 		const validated = publish && !skipReviewOnPublish ? await validateForm(true) : true;
 
 		if (validated) {
-			const status = isNewStructuredData ? true : form.draft;
+			const status = isNewStructuredData ? true : currentForm.draft;
 
 			const payload: any = {
-				...form,
+				...currentForm,
 				structuredData: currentStructuredData ? currentStructuredData.id : null,
 				draft: publish === true ? false : status,
 				relatedSite: site ? site.id : null,
-				publicationScheduled: scheduleDate !== undefined ? scheduleDate : form.publicationScheduled,
+				publicationScheduled: scheduleDate !== undefined ? scheduleDate : currentForm.publicationScheduled,
 			};
 
 			let saved = false;
@@ -174,7 +197,7 @@ const Form = (props: IProps) => {
 		return form?.draft ? "Save" : "Save & publish";
 	};
 
-	const handleSaveAndPublish = () => (isNewStructuredData || form.draft ? handleSave(false) : handleSave(true));
+	const handleSaveAndPublish = () => (isNewStructuredData || form?.draft ? handleSave(false) : handleSave(true));
 
 	const rightButtonProps = {
 		label: isSaving ? "Saving" : !isDirty ? "Saved" : getSaveLabel(),
@@ -197,7 +220,7 @@ const Form = (props: IProps) => {
 
 	const currentLanguages = getCurrentLanguages();
 
-	const availableLanguages = isDisabled ? currentLanguages : languages;
+	const availableLanguages = isDisabled || !isAllowedTo.createPages ? currentLanguages : languages;
 
 	const setRoute = (path: string) => setHistoryPush(path, true);
 
@@ -208,28 +231,32 @@ const Form = (props: IProps) => {
 	);
 
 	const handleClickNotification = () => {
-		getSiteDataPack(currentStructuredData.id);
-		setHistoryPush("/sites/settings/content-types", false);
+		if (currentStructuredData) {
+			getSiteDataPack(currentStructuredData.id);
+			setHistoryPush("/sites/settings/content-types", false);
+		}
 	};
 
 	const removeItem = async () => {
+		if (!form) return;
 		setIsDeleting(true);
 		const deleted = await deleteStructuredDataContent(form.id);
 		setIsDeleting(false);
-		toggleDeleteModal();
+		toggleModal("delete");
 		if (deleted) {
 			setHistoryPush(path, true);
 		}
 	};
 
 	const publishItem = async () => {
+		if (!form) return;
 		const validated = skipReviewOnPublish ? true : await validateForm(true);
 		if (!validated) return;
 
 		if (!isNewStructuredData) {
-			setDataStatus(form.id, "undraft").then((updated: boolean) => {
+			await setDataStatus(form.id, "undraft").then(async (updated: boolean) => {
 				if (updated) {
-					getDataContent(form.id);
+					await getDataContent(form.id);
 				}
 			});
 		} else {
@@ -237,12 +264,14 @@ const Form = (props: IProps) => {
 		}
 	};
 
-	const unpublishItem = async () =>
-		setDataStatus(form.id, "draft").then((updated: boolean) => {
+	const unpublishItem = async () => {
+		if (!form) return;
+		await setDataStatus(form.id, "draft").then(async (updated: boolean) => {
 			if (updated) {
-				getDataContent(form.id);
+				await getDataContent(form.id);
 			}
 		});
+	};
 
 	const getPublishButton = (draft: boolean) => {
 		if (draft === true || draft === undefined) {
@@ -266,50 +295,61 @@ const Form = (props: IProps) => {
 		const date = new Date(`${scheduleDate.date} ${scheduleDate.time}`);
 		const dateString = dateToString(date, "dd/MM/yyyy HH:mm:ss");
 		handleSave(false, dateString);
-		toggleScheduleModal();
+		toggleModal("schedule");
 	};
 
 	const handleCancelSchedulePublication = () => {
 		handleSave(false, null);
 		setScheduleDate({ date: "", time: "12:00 am" });
-		toggleCancelScheduleModal();
+		toggleModal("cancelSchedule");
 	};
 
 	const downArrowMenu = {
 		displayed: !isDeleted,
-		button: getPublishButton(form?.draft),
+		button: isAllowedTo.publishPages ? getPublishButton(form?.draft ?? false) : undefined,
 		options: [
 			{
 				label: "Review",
 				icon: "question",
 				action: reviewForm,
 			},
-			{
-				label: "Delete",
-				icon: "delete",
-				action: toggleDeleteModal,
-			},
 		],
 	};
 
-	if (status === "offline" && !isScheduled) {
+	if (isAllowedTo.deletePages) {
+		downArrowMenu.options.push({
+			label: "Delete",
+			icon: "delete",
+			action: async () => toggleModal("delete"),
+		});
+	}
+
+	if (status === "offline" && !isScheduled && isAllowedTo.publishPages) {
 		downArrowMenu.options.unshift({
 			label: "Schedule",
 			icon: "calendar",
-			action: toggleScheduleModal,
+			action: async () => toggleModal("schedule"),
 		});
 	}
 
-	if (isScheduled) {
+	if (isScheduled && isAllowedTo.publishPages) {
 		downArrowMenu.options.unshift({
 			label: "Cancel Schedule",
 			icon: "cancelEvent",
-			action: toggleCancelScheduleModal,
+			action: async () => toggleModal("cancelSchedule"),
+		});
+	}
+
+	if (isAllowedTo.setPagePermissions) {
+		downArrowMenu.options.unshift({
+			label: "Page user access",
+			icon: "users",
+			action: async () => toggleModal("userAccess"),
 		});
 	}
 
 	const getSelectedDataLanguage = (language: ILanguage): IDataLanguage | undefined =>
-		form.dataLanguages?.find((dataLang: IDataLanguage) => dataLang.language === language.id);
+		form?.dataLanguages?.find((dataLang: IDataLanguage) => dataLang.language === language.id);
 
 	const handleLanguage = async (language: ILanguage) => {
 		const { locale, id } = language;
@@ -323,7 +363,9 @@ const Form = (props: IProps) => {
 			resetDirty();
 		} else {
 			currentStructuredDataId && (await getDataContent(currentStructuredDataId));
-			setFormValues({ ...form, canBeTranslated: true });
+			if (form) {
+				setFormValues({ ...form, canBeTranslated: true } as IStructuredDataContent & Record<string, any>);
+			}
 			setIsNewStructuredData(true);
 		}
 	};
@@ -332,29 +374,17 @@ const Form = (props: IProps) => {
 		if (!currentStructuredDataId) return;
 		const isRestored = await restoreDataContent(currentStructuredDataId);
 		if (isRestored) {
-			isRestoreOpen && toggleRestoreModal();
+			isOpen("restore") && toggleModal("restore");
 			await getDataContent(currentStructuredDataId);
 		}
 	};
 
-	const mainScheduleModalAction = {
-		title: "Schedule",
-		onClick: handleSchedulePublication,
-	};
-
-	const secondaryScheduleModalAction = {
-		title: "Cancel",
-		onClick: toggleScheduleModal,
-	};
-
-	const mainCancelScheduleModalAction = {
-		title: "Cancel Schedule",
-		onClick: handleCancelSchedulePublication,
-	};
-
-	const secondaryCancelScheduleModalAction = {
-		title: "Back",
-		onClick: toggleCancelScheduleModal,
+	const handleUpdateAccessGrants = async (accessGrants: PageAccessGrantsSummary) => {
+		if (!form) return;
+		const updatedForm = { ...form, accessGrants } as IStructuredDataContent & Record<string, any>;
+		setFormValues(updatedForm);
+		await handleSave(false, undefined, updatedForm);
+		toggleModal("userAccess");
 	};
 
 	return isLoading && !isDeleting ? (
@@ -396,7 +426,7 @@ const Form = (props: IProps) => {
 							type="error"
 							text={deletedNotificationText}
 							btnText="Restore content"
-							onClick={toggleRestoreModal}
+							onClick={() => toggleModal("restore")}
 						/>
 					</S.NotificationWrapper>
 				)}
@@ -412,25 +442,33 @@ const Form = (props: IProps) => {
 					</S.NotificationWrapper>
 				)}
 				<ErrorToast size="l" />
-				<S.Wrapper>{Fields}</S.Wrapper>
+				<S.Wrapper>
+					{isRestricted && (
+						<S.StyledFloatingNote
+							message="Only some users can edit this page."
+							icon="users"
+							$short={true}
+							onClick={isAllowedTo.setPagePermissions ? () => toggleModal("userAccess") : undefined}
+						/>
+					)}
+					{Fields}
+				</S.Wrapper>
 			</MainWrapper>
 			<ScheduleModal
-				isOpen={isScheduleOpen}
-				toggleModal={toggleScheduleModal}
-				mainModalAction={mainScheduleModalAction}
-				secondaryModalAction={secondaryScheduleModalAction}
+				isOpen={isOpen("schedule")}
+				toggleModal={() => toggleModal("schedule")}
+				onSchedule={handleSchedulePublication}
 				scheduleDate={scheduleDate}
 				setScheduleDate={setScheduleDate}
 			/>
 			<CancelScheduleModal
-				isOpen={isCancelScheduleOpen}
-				toggleModal={toggleCancelScheduleModal}
-				mainModalAction={mainCancelScheduleModalAction}
-				secondaryModalAction={secondaryCancelScheduleModalAction}
+				isOpen={isOpen("cancelSchedule")}
+				toggleModal={() => toggleModal("cancelSchedule")}
+				onCancelSchedule={handleCancelSchedulePublication}
 			/>
 			<DeleteModal
-				isOpen={isDeleteOpen}
-				toggleModal={toggleDeleteModal}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
 				title={title || "this item"}
 				arePagesTranslated={arePagesTranslated}
 				deleteAllVersions={deleteAllVersions}
@@ -439,23 +477,30 @@ const Form = (props: IProps) => {
 				isDeleting={isDeleting}
 			/>
 			<RestoreModal
-				isOpen={isRestoreOpen}
-				toggleModal={toggleRestoreModal}
+				isOpen={isOpen("restore")}
+				toggleModal={() => toggleModal("restore")}
 				{...{
 					isChild: false,
 					hasIssues: schemaVersion !== form?.schemaVersionTimestamp,
 					restorePage: handleRestorePage,
 				}}
 			/>
+			<RestrictionsModal
+				isOpen={isOpen("userAccess")}
+				toggleModal={() => toggleModal("userAccess")}
+				currentAccessGrants={form?.accessGrants}
+				onUpdateAccessGrants={handleUpdateAccessGrants}
+				isSaving={isSaving}
+			/>
 		</>
 	);
 };
 
 interface IProps {
-	schema: any;
-	form: any | null;
+	schema: ISchema;
+	form: (IStructuredDataContent & { deleted?: boolean; canBeTranslated?: boolean }) | null;
 	site: ISite | null;
-	currentStructuredData: any;
+	currentStructuredData: IStructuredData | null;
 	isSaving: boolean;
 	isLoading: boolean;
 	siteLanguages: ILanguage[];
@@ -466,8 +511,8 @@ interface IProps {
 	currentStructuredDataId: number | null;
 	skipReviewOnPublish?: boolean;
 	schemaVersion: string;
-	createStructuredDataContent: (payload: any) => Promise<boolean>;
-	updateStructuredDataContent: (payload: any) => Promise<boolean>;
+	createStructuredDataContent: (payload: IStructuredDataContent & Record<string, any>) => Promise<boolean>;
+	updateStructuredDataContent: (payload: IStructuredDataContent & Record<string, any>) => Promise<boolean>;
 	setLanguage(lang: { locale: string; id: number | null }): void;
 	getDataContent(id: number): Promise<void>;
 	setHistoryPush(path: string, isEditor?: boolean): void;
@@ -475,7 +520,7 @@ interface IProps {
 	setDataStatus(id: number, status: string): Promise<boolean>;
 	deleteStructuredDataContent(id: number): Promise<boolean>;
 	validateForm(publish?: boolean): Promise<boolean>;
-	setFormValues(form: any): Promise<void>;
+	setFormValues(form: IStructuredDataContent & Record<string, any>): Promise<void>;
 	setCurrentDataID(currentStructuredDataId: number | null): void;
 	restoreDataContent(dataID: number | number[]): Promise<boolean>;
 }

package/src/modules/StructuredData/Form/style.tsx

@@ -1,3 +1,5 @@
+import { FloatingNote } from "@ax/components";
+
 import styled from "styled-components";
 
 const Wrapper = styled.section`
@@ -30,4 +32,8 @@ const ModalFields = styled.div`
   }
 `;
 
-export { Wrapper, NotificationWrapper, ModalContent, ModalFields };
+const StyledFloatingNote = styled((props) => <FloatingNote {...props} />)`
+  width: 268px;
+`;
+
+export { Wrapper, NotificationWrapper, ModalContent, ModalFields, StyledFloatingNote };

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -21,7 +21,7 @@ import {
 	getStructuredDataTitle,
 	trimText,
 } from "@ax/helpers";
-import { useModals, usePermissions } from "@ax/hooks";
+import { useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	IAvailableSites,
 	ICheck,
@@ -86,6 +86,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 		publicationScheduled,
 		liveStatus,
 		haveDraftPage,
+		accessGrants,
 	} = globalPage;
 
 	const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
@@ -99,13 +100,19 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 
-	const isAllowedTo = usePermissions({
-		duplicatePages: "global.globalData.duplicateGlobalData",
-		publishPages: "global.globalData.publishUnpublishAllGlobalData",
-		createPages: "global.globalData.createAllGlobalData",
-		deletePages: "global.globalData.deleteAllGlobalData",
-		editContentPages: "global.globalData.editAllGlobalData",
-	});
+	const isAllowedTo = usePermissionsForPage(
+		"global",
+		globalPage.id,
+		{
+			duplicatePages: "global.globalData.duplicateGlobalData",
+			publishPages: "global.globalData.publishUnpublishAllGlobalData",
+			createPages: "global.globalData.createAllGlobalData",
+			deletePages: "global.globalData.deleteAllGlobalData",
+			editContentPages: "global.globalData.editAllGlobalData",
+		},
+		accessGrants,
+		pageLanguages,
+	);
 
 	const publishedTooltip: Record<string, string> = {
 		active: "Live",

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -10,7 +10,7 @@ import {
 	getHumanLastModifiedDate,
 	getScheduleFormatDate,
 } from "@ax/helpers";
-import { useModal, usePermissions } from "@ax/hooks";
+import { useModal, usePermissionsForPage } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -25,7 +25,7 @@ import type {
 } from "@ax/types";
 
 import { DeleteModal } from "../../atoms";
-import { getPermission } from "./utils";
+import { getPermission } from "../../utils";
 
 import * as S from "./style";
 
@@ -61,19 +61,25 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
 	const isPrivateData = currentStructuredData?.private || false;
 	const isGlobal = !currentSiteInfo;
+	const { dataLanguages, publicationScheduled } = structuredData;
 
-	const isAllowedTo = usePermissions({
-		duplicatePages: getPermission("duplicate", isGlobal, isPrivateData),
-		publishPages: getPermission("publish", isGlobal, isPrivateData),
-		createPages: getPermission("create", isGlobal, isPrivateData),
-		deletePages: getPermission("delete", isGlobal, isPrivateData),
-	});
+	const isAllowedTo = usePermissionsForPage(
+		currentSiteInfo?.id || "global",
+		structuredData.id,
+		{
+			duplicatePages: getPermission("duplicate", isGlobal, isPrivateData),
+			publishPages: getPermission("publish", isGlobal, isPrivateData),
+			createPages: getPermission("create", isGlobal, isPrivateData),
+			deletePages: getPermission("delete", isGlobal, isPrivateData),
+		},
+		structuredData.accessGrants,
+		dataLanguages,
+	);
 
 	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 
 	const { locale } = lang;
-	const { dataLanguages, publicationScheduled } = structuredData;
 
 	const isScheduledPub = !!publicationScheduled && structuredData.draft;
 	const activeColumns = columns.filter((col) => col.show).map((col) => col.id);

package/src/modules/StructuredData/{StructuredDataList/StructuredDataItem/utils.tsx → utils.tsx}

@@ -1,6 +1,10 @@
-const getPermission = (type: "duplicate" | "create" | "delete" | "publish", isGlobal: boolean, isPrivate: boolean) => {
+const getPermission = (
+	type: "duplicate" | "create" | "delete" | "publish" | "edit",
+	isGlobal: boolean,
+	isPrivate: boolean,
+) => {
 	const permissions: Record<
-		"duplicate" | "create" | "delete" | "publish",
+		"duplicate" | "create" | "delete" | "publish" | "edit",
 		Record<"global" | "site", Record<"default" | "private", string>>
 	> = {
 		duplicate: {
@@ -43,6 +47,16 @@ const getPermission = (type: "duplicate" | "create" | "delete" | "publish", isGl
 				private: "content.publishUnpublishPrivateContentTypes",
 			},
 		},
+		edit: {
+			global: {
+				default: "global.globalData.editAllGlobalData",
+				private: "global.globalData.editContentPrivateContentTypes",
+			},
+			site: {
+				default: "content.editContentPages",
+				private: "content.editContentPrivateContentTypes",
+			},
+		},
 	};
 
 	const privateStr = isPrivate ? "private" : "default";

package/src/modules/Users/Profile/atoms.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import { useState } from "react";
 import QRCode from "react-qr-code";
 
-import { IModal } from "@ax/types";
-import { Modal } from "@ax/components";
+import { Modal, Pagination, Tag } from "@ax/components";
+import { getStructuredDataTitle } from "@ax/helpers";
+import type { IModal, IPage } from "@ax/types";
 
 import * as S from "./style";
 
@@ -44,4 +45,61 @@ interface ILinkDeviceModalProps extends IModal {
 	token: string;
 }
 
-export { LinkDeviceModal };
+const ProfilePagePermissionsList = ({ pages, testId, onPageChange }: IProfilePagePermissionsListProps) => {
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
+	const totalPages = Math.ceil(pages.length / itemsPerPage);
+	const startIndex = (currentPage - 1) * itemsPerPage;
+	const endIndex = startIndex + itemsPerPage;
+	const paginatedPages = pages.slice(startIndex, endIndex);
+
+	const handlePageChange = (page: number) => {
+		setCurrentPage(page);
+		onPageChange?.();
+	};
+
+	return (
+		<>
+			<S.PageList data-testid={testId || "profile-pages-list"}>
+				{paginatedPages.map((page: IPage) => {
+					const siteName = page.site
+						? page.availableSites?.find((site) => site.id === page.site)?.name || ""
+						: "Global";
+					return (
+						<S.PageListItem key={page.id}>
+							<S.PageItemContent>
+								<S.PageItemHeader>
+									<S.PageItemType>{getStructuredDataTitle(page.structuredData) || "Page"}</S.PageItemType>
+									<S.PageItemSiteTag>
+										<Tag text={siteName} type="square" />
+									</S.PageItemSiteTag>
+								</S.PageItemHeader>
+								<S.PageItemTitle>{page.title}</S.PageItemTitle>
+							</S.PageItemContent>
+						</S.PageListItem>
+					);
+				})}
+			</S.PageList>
+			{totalPages > 1 && (
+				<S.PaginationWrapper>
+					<Pagination
+						size="S"
+						currPage={currentPage}
+						totalItems={pages.length}
+						itemsPerPage={itemsPerPage}
+						setPage={handlePageChange}
+					/>
+				</S.PaginationWrapper>
+			)}
+		</>
+	);
+};
+
+interface IProfilePagePermissionsListProps {
+	pages: IPage[];
+	testId?: string;
+	onPageChange?: () => void;
+}
+
+export { LinkDeviceModal, ProfilePagePermissionsList };