@griddo/ax 11.15.9 → 11.16.0-rc.1

package/src/modules/GlobalEditor/index.tsx

@@ -15,6 +15,7 @@ import {
 	Notification,
 	OcassionalToast,
 	RestoreModal,
+	RestrictionsModal,
 	ScheduleModal,
 } from "@ax/components";
 import { appActions } from "@ax/containers/App";
@@ -25,7 +26,7 @@ import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getDefaultTheme } from "@ax/helpers";
-import { useIsDirty, useModals, usePermissions } from "@ax/hooks";
+import { useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	HeadingFilter,
 	IErrorItem,
@@ -36,6 +37,7 @@ import type {
 	ISavePageParams,
 	ISite,
 	IUserEditing,
+	PageAccessGrantsSummary,
 } from "@ax/types";
 
 import { DeleteModal } from "./atoms";
@@ -73,14 +75,23 @@ const GlobalEditor = (props: IProps) => {
 		restorePage,
 		updateEditorContent,
 		schemaVersion,
+		updatePageAccessGrants,
+		accessGrants,
 	} = props;
 
-	const isAllowedTo = usePermissions({
-		publishPages: "global.globalData.publishUnpublishAllGlobalData",
-		createPages: "global.globalData.createAllGlobalData",
-		deletePages: "global.globalData.deleteAllGlobalData",
-		editContentPages: "global.globalData.editAllGlobalData",
-	});
+	const isAllowedTo = usePermissionsForPage(
+		"global",
+		pageID,
+		{
+			publishPages: "global.globalData.publishUnpublishAllGlobalData",
+			createPages: "global.globalData.createAllGlobalData",
+			deletePages: "global.globalData.deleteAllGlobalData",
+			editContentPages: "global.globalData.editAllGlobalData",
+			setPagePermissions: "global.globalData.setPermissionPerPage",
+		},
+		accessGrants,
+		pageLanguages,
+	);
 
 	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
@@ -108,6 +119,7 @@ const GlobalEditor = (props: IProps) => {
 		"headingsPreview",
 		"keywordsPreview",
 		"dirtyNavigate",
+		"userAccess",
 		"delete",
 	]);
 
@@ -158,6 +170,10 @@ const GlobalEditor = (props: IProps) => {
 		return () => clearInterval(interval);
 	}, []);
 
+	useEffect(() => {
+		setSelectedTab(defaultTab);
+	}, [defaultTab]);
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		resetDirty();
@@ -347,6 +363,14 @@ const GlobalEditor = (props: IProps) => {
 
 	const menuOptions = [];
 
+	if (isAllowedTo.setPagePermissions) {
+		menuOptions.push({
+			label: "Page user access",
+			icon: "users",
+			action: () => toggleModal("userAccess"),
+		});
+	}
+
 	if (isAllowedTo.publishPages && !isScheduled && !isPublished && props.pageStatus !== pageStatus.OFFLINE_PENDING) {
 		menuOptions.push({
 			label: "Schedule",
@@ -409,6 +433,7 @@ const GlobalEditor = (props: IProps) => {
 	};
 
 	const isEditable = editorContent?.editable;
+	const isRestricted = !!(accessGrants.users.length || accessGrants.roles.length);
 
 	const handleSavePage = async (setToast?: (msg: string) => void) => {
 		const { savePage } = props;
@@ -542,26 +567,6 @@ const GlobalEditor = (props: IProps) => {
 
 	const mainUnpublishAction = { title: "Ok", onClick: () => toggleModal("unpublish") };
 
-	const mainScheduleModalAction = {
-		title: "Schedule",
-		onClick: handleSchedulePublication,
-	};
-
-	const secondaryScheduleModalAction = {
-		title: "Cancel",
-		onClick: () => toggleModal("schedule"),
-	};
-
-	const mainCancelScheduleModalAction = {
-		title: "Cancel Schedule",
-		onClick: handleCancelSchedulePublication,
-	};
-
-	const secondaryCancelScheduleModalAction = {
-		title: "Back",
-		onClick: () => toggleModal("cancelSchedule"),
-	};
-
 	const tabIcons = isAllowedTo.editContentPages
 		? [
 				{ name: "edit", text: "Edit mode" },
@@ -646,6 +651,13 @@ const GlobalEditor = (props: IProps) => {
 		setTab(defaultContentTab);
 	};
 
+	const handleUpdateAccessGrants = async (accessGrants: PageAccessGrantsSummary) => {
+		const isUpdated = await updatePageAccessGrants({ siteID: "global", pageID, accessGrants });
+		if (isUpdated) {
+			toggleModal("userAccess");
+		}
+	};
+
 	return isLoading ? (
 		<Loading />
 	) : (
@@ -725,12 +737,14 @@ const GlobalEditor = (props: IProps) => {
 								toggleKeywordsPreview={handleToggleKeywordsEditor}
 								isKeywordsPreviewOpen={isOpen("keywordsPreview")}
 								keywordsFilter={keywordsFilter}
+								isRestrictedPage={isRestricted}
+								onRestrictionsClick={isAllowedTo.setPagePermissions ? () => toggleModal("userAccess") : undefined}
 							/>
 						</S.Content>
 					</>
 				) : (
 					<>
-						<Preview theme={theme} />
+						<Preview theme={theme} isRestrictedPage={isRestricted} />
 						{toastMsg?.length && <OcassionalToast icon="warning" message={toastMsg} />}
 					</>
 				)}
@@ -777,16 +791,14 @@ const GlobalEditor = (props: IProps) => {
 				<ScheduleModal
 					isOpen={isOpen("schedule")}
 					toggleModal={() => toggleModal("schedule")}
-					mainModalAction={mainScheduleModalAction}
-					secondaryModalAction={secondaryScheduleModalAction}
+					onSchedule={handleSchedulePublication}
 					scheduleDate={scheduleDate}
 					setScheduleDate={setScheduleDate}
 				/>
 				<CancelScheduleModal
 					isOpen={isOpen("cancelSchedule")}
 					toggleModal={() => toggleModal("cancelSchedule")}
-					mainModalAction={mainCancelScheduleModalAction}
-					secondaryModalAction={secondaryCancelScheduleModalAction}
+					onCancelSchedule={handleCancelSchedulePublication}
 				/>
 				<RestoreModal
 					isOpen={isOpen("restore")}
@@ -814,20 +826,27 @@ const GlobalEditor = (props: IProps) => {
 					addKeywords={handleAddKeywords}
 					deleteKeyword={handledeleteKeyword}
 				/>
+				<RestrictionsModal
+					isOpen={isOpen("userAccess")}
+					toggleModal={() => toggleModal("userAccess")}
+					currentAccessGrants={accessGrants}
+					onUpdateAccessGrants={handleUpdateAccessGrants}
+					isSaving={isSaving}
+				/>
+				<Modal
+					isOpen={isOpen("dirtyNavigate")}
+					hide={handleCancelDirtyNavigation}
+					size="S"
+					title="Unsaved changes"
+					mainAction={{ title: "Yes, discard changes", onClick: handleConfirmDirtyNavigation }}
+					secondaryAction={{ title: "Cancel", onClick: handleCancelDirtyNavigation }}
+				>
+					<S.ModalContent>
+						Some content <strong>is not saved</strong> on this page. If you exit without saving it, it will be lost. Do
+						you want to discard your changes?
+					</S.ModalContent>
+				</Modal>
 			</MainWrapper>
-			<Modal
-				isOpen={isOpen("dirtyNavigate")}
-				hide={handleCancelDirtyNavigation}
-				size="S"
-				title="Unsaved changes"
-				mainAction={{ title: "Yes, discard changes", onClick: handleConfirmDirtyNavigation }}
-				secondaryAction={{ title: "Cancel", onClick: handleCancelDirtyNavigation }}
-			>
-				<S.ModalContent>
-					Some content <strong>is not saved</strong> on this page. If you exit without saving it, it will be lost. Do
-					you want to discard your changes?
-				</S.ModalContent>
-			</Modal>
 		</>
 	);
 };
@@ -851,6 +870,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
 	currentSiteErrorPages: state.sites.currentSiteErrorPages,
 	skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
 	schemaVersion: state.structuredData.schemaVersion,
+	accessGrants: state.pageEditor.accessGrants,
 });
 
 interface IPageEditorStateProps {
@@ -872,6 +892,7 @@ interface IPageEditorStateProps {
 	currentSiteErrorPages: number[];
 	skipReviewOnPublish?: boolean;
 	schemaVersion: string;
+	accessGrants: PageAccessGrantsSummary;
 }
 
 const mapDispatchToProps = {
@@ -895,6 +916,7 @@ const mapDispatchToProps = {
 	schedulePublication: pageEditorActions.schedulePublication,
 	restorePage: pageEditorActions.restorePage,
 	updateEditorContent: pageEditorActions.updateEditorContent,
+	updatePageAccessGrants: pageEditorActions.updatePageAccessGrants,
 };
 
 interface IPageEditorDispatchProps {
@@ -923,6 +945,11 @@ interface IPageEditorDispatchProps {
 	schedulePublication(date: string | null, isDraft: boolean): Promise<boolean>;
 	restorePage(id: number | number[]): Promise<boolean>;
 	updateEditorContent(selectedEditorID: number, key: string, value: any): void;
+	updatePageAccessGrants(data: {
+		siteID: number | "global";
+		pageID: number | null;
+		accessGrants: PageAccessGrantsSummary;
+	}): Promise<boolean>;
 }
 
 type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;

package/src/modules/Navigation/Menus/List/Table/ConfigPanel/Form/index.tsx

@@ -1,8 +1,6 @@
-import React from "react";
-
 import { FieldsBehavior } from "@ax/components";
 import { getModuleStyles } from "@ax/helpers";
-import { IMenuItemConfig } from "@ax/types";
+import type { IMenuItemConfig } from "@ax/types";
 
 import * as S from "./style";
 
@@ -25,8 +23,8 @@ const Form = (props: IProps): JSX.Element => {
 		text: "You can choose how to view the children of this section in navigation modules.",
 	};
 
-	const headerValue = form && form.headerStyle ? form.headerStyle : headerOptions[0] ? headerOptions[0].value : null;
-	const footerValue = form && form.footerStyle ? form.footerStyle : footerOptions[0] ? footerOptions[0].value : null;
+	const headerValue = form?.headerStyle ? form.headerStyle : headerOptions[0] ? headerOptions[0].value : null;
+	const footerValue = form?.footerStyle ? form.footerStyle : footerOptions[0] ? footerOptions[0].value : null;
 
 	return (
 		<>

package/src/modules/Navigation/Menus/List/Table/ConfigPanel/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
-
+import { useState } from "react";
 import { connect } from "react-redux";
+
+import { Button, FloatingPanel } from "@ax/components";
 import { menuActions } from "@ax/containers/Navigation";
-import { IRootState, IMenuItem, IMenuItemConfig } from "@ax/types";
-import { FloatingPanel, Button } from "@ax/components";
+import type { IMenuItem, IMenuItemConfig, IRootState } from "@ax/types";
 
 import Form from "./Form";
 

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/ConnectedField/index.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { IRootState } from "@ax/types";
-import { menuActions } from "@ax/containers/Navigation/Menu";
 import { FieldsBehavior } from "@ax/components";
+import { menuActions } from "@ax/containers/Navigation/Menu";
+import type { IRootState } from "@ax/types";
 
 const ConnectedField = (props: IProps) => {
 	const { form, type, name, updateFormValue, setIsGalleryOpened } = props;

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/index.tsx

@@ -1,11 +1,10 @@
-import React from "react";
 import { connect } from "react-redux";
 
+import { FieldsBehavior } from "@ax/components";
 import { menuActions } from "@ax/containers/Navigation";
 import { sitesActions } from "@ax/containers/Sites";
-import { FieldsBehavior } from "@ax/components";
-import { IRootState, IMenuForm, ISchemaField } from "@ax/types";
 import { getMenuItems } from "@ax/helpers";
+import type { IMenuForm, IRootState, ISchemaField } from "@ax/types";
 
 import ConnectedField from "./ConnectedField";
 
@@ -34,7 +33,7 @@ const Form = (props: IProps): JSX.Element => {
 	const typeLink = type ? type : "link";
 
 	const menuItems = getMenuItems(typeLink);
-	const schemaFields = menuItems && menuItems.fields ? menuItems.fields : [];
+	const schemaFields = menuItems?.fields ? menuItems.fields : [];
 
 	const generateFields = (fields: ISchemaField[]) =>
 		fields.map((field: ISchemaField) => (

package/src/modules/Navigation/Menus/List/Table/SidePanel/index.tsx

@@ -1,13 +1,12 @@
-import React, { useState } from "react";
-
+import { useState } from "react";
 import { connect } from "react-redux";
-import { menuActions } from "@ax/containers/Navigation";
 
-import { FloatingPanel, Button } from "@ax/components";
+import { Button, FloatingPanel } from "@ax/components";
+import { menuActions } from "@ax/containers/Navigation";
+import type { IMenuForm, IMenuItem, IRootState } from "@ax/types";
 
 import Form from "./Form";
 
-import { IRootState, IMenuItem, IMenuForm } from "@ax/types";
 import * as S from "./style";
 
 const SidePanel = (props: IProps): JSX.Element => {
@@ -40,7 +39,7 @@ const SidePanel = (props: IProps): JSX.Element => {
 	};
 
 	const editItemAction = () => {
-		menuItem = { ...menuItem, editorID: item && item.editorID };
+		menuItem = { ...menuItem, editorID: item?.editorID };
 		updateMenuItem(menuItem);
 		toggleModal();
 	};

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

@@ -61,6 +61,8 @@ const Editor = (props: IProps) => {
 		keywordsFilter,
 		isDirty,
 		onNavigateWithDirty,
+		isRestrictedPage,
+		onRestrictionsClick,
 	} = props;
 
 	if (!site) {
@@ -102,6 +104,8 @@ const Editor = (props: IProps) => {
 					toggleKeywordsPreview={toggleKeywordsPreview}
 					isKeywordsPreviewOpen={isKeywordsPreviewOpen}
 					keywordsFilter={keywordsFilter}
+					isRestrictedPage={isRestrictedPage}
+					onRestrictionsClick={onRestrictionsClick}
 				/>
 			}
 			rightPanel={
@@ -183,6 +187,8 @@ interface IPageBrowserDispatchProps {
 	keywordsFilter: string[];
 	isDirty?: boolean;
 	onNavigateWithDirty?: (navigateCallback: () => void) => void;
+	isRestrictedPage?: boolean;
+	onRestrictionsClick?(): void;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

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

@@ -26,6 +26,8 @@ const PageBrowser = (props: IProps) => {
 		setScrollEditorID,
 		toggleHeadingsPreview,
 		toggleKeywordsPreview,
+		isRestrictedPage,
+		onRestrictionsClick,
 	} = props;
 
 	if (!currentSiteInfo) {
@@ -70,6 +72,8 @@ const PageBrowser = (props: IProps) => {
 			toggleKeywordsPreview={toggleKeywordsPreview}
 			headingFilter={headingsFilter}
 			keywordsFilter={keywordsFilter}
+			isRestrictedPage={isRestrictedPage}
+			onRestrictionsClick={onRestrictionsClick}
 		/>
 	);
 };
@@ -100,6 +104,8 @@ interface IPageBrowserDispatchProps {
 	setScrollEditorID(editorID: number | null): void;
 	toggleHeadingsPreview?(): void;
 	toggleKeywordsPreview?(): void;
+	isRestrictedPage?: boolean;
+	onRestrictionsClick?(): void;
 }
 
 type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;

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

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

package/src/modules/PageEditor/atoms.tsx

@@ -1,10 +1,49 @@
-import React from "react";
+import type React from "react";
 
+import { FieldsBehavior, Modal } from "@ax/components";
 import type { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
 
 import * as S from "./style";
 
+const DirtyNavigateModal = (props: IDirtyNavigateModal): JSX.Element => {
+	const { isOpen, onConfirm, onCancel } = props;
+
+	const mainAction = {
+		title: "Yes, discard changes",
+		onClick: onConfirm,
+	};
+
+	const secondaryAction = {
+		title: "Cancel",
+		onClick: onCancel,
+	};
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={onCancel}
+			size="S"
+			title="Unsaved changes"
+			mainAction={mainAction}
+			secondaryAction={secondaryAction}
+			height="auto"
+		>
+			<S.ModalContent>
+				<>
+					Some content <strong>is not saved</strong> on this page. If you exit without saving it, it will be lost. Do
+					you want to discard your changes?
+				</>
+			</S.ModalContent>
+		</Modal>
+	);
+};
+
+interface IDirtyNavigateModal {
+	isOpen: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
 const DeleteModal = (props: IDeleteModal): JSX.Element => {
 	const { isOpen, toggleModal, isTranslated, deleteAllVersions, setDeleteAllVersions, onDelete, isDeleting } = props;
 
@@ -74,4 +113,72 @@ interface IDeleteModal extends IModal {
 	isDeleting?: boolean;
 }
 
-export { DeleteModal };
+const UserEditingModal = (props: IUserEditingModal): JSX.Element => {
+	const { isOpen, toggleModal, userEditing, onBack } = props;
+
+	const mainAction = {
+		title: "Preview Page",
+		onClick: () => toggleModal(),
+	};
+
+	const secondaryAction = {
+		title: "Ok, go back",
+		onClick: onBack,
+	};
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={() => toggleModal()}
+			size="S"
+			title="This page is currently being edited"
+			mainAction={mainAction}
+			secondaryAction={secondaryAction}
+		>
+			{isOpen && (
+				<S.ModalContent>
+					<p>
+						<strong>{userEditing?.name}</strong> is currently working on this page. You can preview the page but{" "}
+						<strong>you cannot make changes to it</strong> until {userEditing?.name} leaves the page.
+					</p>
+				</S.ModalContent>
+			)}
+		</Modal>
+	);
+};
+
+interface IUserEditingModal {
+	isOpen: boolean;
+	toggleModal: () => void;
+	userEditing?: { name: string; id: number } | null;
+	onBack: () => void;
+}
+
+const UnpublishModal = (props: IUnpublishModal): JSX.Element => {
+	const { isOpen, toggleModal } = props;
+
+	const mainAction = {
+		title: "Ok",
+		onClick: () => toggleModal(),
+	};
+
+	return (
+		<Modal isOpen={isOpen} hide={() => toggleModal()} size="S" title="Unpublish Modified Page" mainAction={mainAction}>
+			{isOpen && (
+				<S.ModalContent>
+					<p>
+						There are some saved changes that are not published on this page. To Unpublish this page,{" "}
+						<strong>you must publish these changes or discard them.</strong>
+					</p>
+				</S.ModalContent>
+			)}
+		</Modal>
+	);
+};
+
+interface IUnpublishModal {
+	isOpen: boolean;
+	toggleModal: () => void;
+}
+
+export { UnpublishModal, UserEditingModal, DeleteModal, DirtyNavigateModal };