@griddo/ax 11.15.9 → 11.16.0-rc.1

package/src/modules/PageEditor/index.tsx

@@ -11,10 +11,10 @@ import {
 	KeywordsPreviewModal,
 	Loading,
 	MainWrapper,
-	Modal,
 	Notification,
 	OcassionalToast,
 	RestoreModal,
+	RestrictionsModal,
 	ScheduleModal,
 } from "@ax/components";
 import { appActions } from "@ax/containers/App";
@@ -24,7 +24,7 @@ import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getDeactivatedModules, isModuleDisabled } from "@ax/helpers";
-import { useIsDirty, useModals, usePermissions } from "@ax/hooks";
+import { useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	HeadingFilter,
 	IErrorItem,
@@ -33,10 +33,12 @@ import type {
 	IPageLanguage,
 	IRootState,
 	ISavePageParams,
+	ISite,
 	IUserEditing,
+	PageAccessGrantsSummary,
 } from "@ax/types";
 
-import { DeleteModal } from "./atoms";
+import { DeleteModal, DirtyNavigateModal, UnpublishModal, UserEditingModal } from "./atoms";
 import Editor from "./Editor";
 import Preview from "./Preview";
 
@@ -75,15 +77,25 @@ const PageEditor = (props: IProps) => {
 		schemaVersion,
 		setIsLoading,
 		updateEditorContent,
+		currentSiteInfo,
+		updatePageAccessGrants,
+		accessGrants,
 	} = props;
 
-	const isAllowedTo = usePermissions({
-		publishPages: "content.publishUnpublishPages",
-		createPages: "content.createPages",
-		deletePages: "content.deletePages",
-		deletePublishedPages: "content.deletePublishedPages",
-		editContentPages: "content.editContentPages",
-	});
+	const isAllowedTo = usePermissionsForPage(
+		currentSiteInfo.id,
+		pageID,
+		{
+			publishPages: "content.publishUnpublishPages",
+			createPages: "content.createPages",
+			deletePages: "content.deletePages",
+			deletePublishedPages: "content.deletePublishedPages",
+			editContentPages: "content.editContentPages",
+			setPagePermissions: "general.setPermissionPerPage",
+		},
+		accessGrants,
+		pageLanguages,
+	);
 
 	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
@@ -109,6 +121,7 @@ const PageEditor = (props: IProps) => {
 		"headingsPreview",
 		"keywordsPreview",
 		"dirtyNavigate",
+		"userAccess",
 	]);
 
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
@@ -128,6 +141,7 @@ const PageEditor = (props: IProps) => {
 	const deleteHelpText = !canBeUnpublished ? "This is the canonical site of the page. You cannot unpublish it." : null;
 	const isScheduled = !!editorContent && !!editorContent.publicationScheduled;
 	const isDeleted = editorContent.deleted;
+	const isRestricted = !!(accessGrants.users.length || accessGrants.roles.length);
 	const defaultContentTab = "content";
 
 	const errorNotificationText =
@@ -167,6 +181,10 @@ const PageEditor = (props: IProps) => {
 		return () => clearInterval(interval);
 	}, []);
 
+	useEffect(() => {
+		setSelectedTab(defaultTab);
+	}, [defaultTab]);
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		const { pageID, sendPagePing, currentUserID } = props;
@@ -354,6 +372,14 @@ const PageEditor = (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",
@@ -561,25 +587,6 @@ const PageEditor = (props: IProps) => {
 		props.setHistoryPush(backLinkRoute, false);
 	};
 
-	const mainAction = { title: "Preview Page", onClick: () => toggleModal("userEditing") };
-	const secondaryAction = { title: "Ok, go back", onClick: handleGoBack };
-
-	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" },
@@ -664,17 +671,24 @@ const PageEditor = (props: IProps) => {
 		setTab(defaultContentTab);
 	};
 
+	const handleUpdateAccessGrants = async (accessGrants: PageAccessGrantsSummary) => {
+		const isUpdated = await updatePageAccessGrants({ siteID: currentSiteInfo.id, pageID, accessGrants });
+		if (isUpdated) {
+			toggleModal("userAccess");
+		}
+	};
+
 	const onNavigateWithDirty = (navigateCallback: () => void) => {
 		setPendingNavigateCallback(() => navigateCallback);
 		toggleModal("dirtyNavigate");
 	};
 
 	const handleConfirmDirtyNavigation = () => {
-		toggleModal("dirtyNavigate");
 		if (pendingNavigateCallback) {
 			pendingNavigateCallback();
 			setPendingNavigateCallback(null);
 		}
+		toggleModal("dirtyNavigate");
 	};
 
 	const handleCancelDirtyNavigation = () => {
@@ -682,22 +696,6 @@ const PageEditor = (props: IProps) => {
 		setPendingNavigateCallback(null);
 	};
 
-	const dirtyNavigateModalText = (
-		<>
-			Some content <strong>is not saved</strong> on this page.
-		</>
-	);
-
-	const mainDirtyNavigateAction = {
-		title: "Yes, discard changes",
-		onClick: handleConfirmDirtyNavigation,
-	};
-
-	const secondaryDirtyNavigateAction = {
-		title: "Cancel",
-		onClick: handleCancelDirtyNavigation,
-	};
-
 	return isLoading ? (
 		<Loading />
 	) : (
@@ -784,49 +782,25 @@ const PageEditor = (props: IProps) => {
 								keywordsFilter={keywordsFilter}
 								isDirty={isDirty}
 								onNavigateWithDirty={onNavigateWithDirty}
+								isRestrictedPage={isRestricted}
+								onRestrictionsClick={isAllowedTo.setPagePermissions ? () => toggleModal("userAccess") : undefined}
 							/>
 						</S.Content>
 					</>
 				) : (
 					<>
-						<Preview />
+						<Preview isRestrictedPage={isRestricted} />
 						{toastMsg?.length && <OcassionalToast icon="warning" message={toastMsg} />}
 					</>
 				)}
 
-				<Modal
+				<UserEditingModal
 					isOpen={isOpen("userEditing")}
-					hide={() => toggleModal("userEditing")}
-					size="S"
-					title="This page is currently being edited"
-					mainAction={mainAction}
-					secondaryAction={secondaryAction}
-				>
-					{isOpen("userEditing") && (
-						<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>
-				<Modal
-					isOpen={isOpen("unpublish")}
-					hide={() => toggleModal("unpublish")}
-					size="S"
-					title="Unpublish Modified Page"
-					mainAction={mainUnpublishAction}
-				>
-					{isOpen("unpublish") && (
-						<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>
+					toggleModal={() => toggleModal("userEditing")}
+					userEditing={userEditing}
+					onBack={handleGoBack}
+				/>
+				<UnpublishModal isOpen={isOpen("unpublish")} toggleModal={() => toggleModal("unpublish")} />
 				<DeleteModal
 					isOpen={isOpen("delete")}
 					toggleModal={() => toggleModal("delete")}
@@ -837,16 +811,14 @@ const PageEditor = (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")}
@@ -874,19 +846,18 @@ const PageEditor = (props: IProps) => {
 					addKeywords={handleAddKeywords}
 					deleteKeyword={handledeleteKeyword}
 				/>
-				<Modal
+				<DirtyNavigateModal
 					isOpen={isOpen("dirtyNavigate")}
-					hide={handleCancelDirtyNavigation}
-					size="S"
-					title="Unsaved changes"
-					mainAction={mainDirtyNavigateAction}
-					secondaryAction={secondaryDirtyNavigateAction}
-				>
-					<S.ModalContent>
-						{dirtyNavigateModalText} If you exit without saving it, it will be lost. Do you want to discard your
-						changes?
-					</S.ModalContent>
-				</Modal>
+					onConfirm={handleConfirmDirtyNavigation}
+					onCancel={handleCancelDirtyNavigation}
+				/>
+				<RestrictionsModal
+					isOpen={isOpen("userAccess")}
+					toggleModal={() => toggleModal("userAccess")}
+					currentAccessGrants={accessGrants}
+					onUpdateAccessGrants={handleUpdateAccessGrants}
+					isSaving={isSaving}
+				/>
 			</MainWrapper>
 		</>
 	);
@@ -913,6 +884,8 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
 	currentSiteErrorPages: state.sites.currentSiteErrorPages,
 	skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
 	schemaVersion: state.structuredData.schemaVersion,
+	currentSiteInfo: state.sites.currentSiteInfo!,
+	accessGrants: state.pageEditor.accessGrants,
 });
 
 interface IPageEditorStateProps {
@@ -936,6 +909,8 @@ interface IPageEditorStateProps {
 	skipReviewOnPublish?: boolean;
 	schema: any;
 	schemaVersion: string;
+	currentSiteInfo: ISite;
+	accessGrants: PageAccessGrantsSummary;
 }
 
 const mapDispatchToProps = {
@@ -960,6 +935,7 @@ const mapDispatchToProps = {
 	setCurrentPageID: pageEditorActions.setCurrentPageID,
 	restorePage: pageEditorActions.restorePage,
 	updateEditorContent: pageEditorActions.updateEditorContent,
+	updatePageAccessGrants: pageEditorActions.updatePageAccessGrants,
 };
 
 interface IPageEditorDispatchProps {
@@ -989,6 +965,11 @@ interface IPageEditorDispatchProps {
 	restorePage(id: number | number[]): Promise<boolean>;
 	setIsLoading(loading: boolean): void;
 	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/Settings/Integrations/IntegrationForm/index.tsx

@@ -273,9 +273,7 @@ const IntegrationForm = (props: IProps) => {
 				</S.SettingsWrapper>
 				<FloatingPanel title="Select pages" toggleModal={toggleModal} isOpen={isOpen}>
 					<S.ContentWrapper>
-						{isOpen && (
-							<PageFinder onClick={handleSetPage} isOpen={isOpen} multiple={true} hideSites={true} pages={pageIDs} />
-						)}
+						{isOpen && <PageFinder onClick={handleSetPage} isOpen={isOpen} pages={pageIDs} multiple hideSites />}
 					</S.ContentWrapper>
 				</FloatingPanel>
 				{isVariableOpen && (

package/src/modules/Sites/SitesList/GridView/GridSiteItem/style.tsx

@@ -1,10 +1,11 @@
-import styled from "styled-components";
 import { ActionMenu } from "@ax/components";
 
+import styled from "styled-components";
+
 const SiteWrapper = styled.div`
   position: relative;
   background: ${(p) => p.theme.color.uiBackground02};
-  border-radius: 4px;
+  border-radius: ${(p) => p.theme.radii.s};
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -13,6 +14,22 @@ const SiteWrapper = styled.div`
   div {
     max-width: 100%;
   }
+
+  :before {
+    content: "";
+    border-radius: ${(p) => p.theme.radii.s};
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.1s;
+  }
+  :hover:before {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    opacity: 1;
+  }
 `;
 
 const ImageContainer = styled.div`

package/src/modules/Sites/SitesList/WelcomeModal/FinalStep/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Icon, UserRolesAndSites } from "@ax/components";
-import type { IRole, ISite, ISiteRoles } from "@ax/types";
+import type { IRole, ISite, UserRoleAssignment } from "@ax/types";
 
 import { getMostFrequentRole } from "../utils";
 import { LEARN_ITEMS } from "./constants";
@@ -68,7 +68,7 @@ const FinalStep = (props: IFinalStepProps) => {
 
 interface IFinalStepProps {
 	isSuperAdmin: boolean;
-	userRoles: ISiteRoles[];
+	userRoles: UserRoleAssignment[];
 	roles: IRole[];
 	sites: ISite[];
 	onClose: () => void;

package/src/modules/Sites/SitesList/WelcomeModal/utils.ts

@@ -1,4 +1,4 @@
-import type { ISiteRoles } from "@ax/types";
+import type { UserRoleAssignment } from "@ax/types";
 
 const GENERIC_DOMAINS = new Set(["gmail", "hotmail", "outlook", "yahoo", "icloud", "live", "msn", "aol"]);
 
@@ -9,7 +9,7 @@ const getCompanyFromEmail = (email: string): string => {
 	return company.charAt(0).toUpperCase() + company.slice(1);
 };
 
-const getMostFrequentRole = (userRoles: ISiteRoles[]): number | null => {
+const getMostFrequentRole = (userRoles: UserRoleAssignment[]): number | null => {
 	const roleCounts: Record<number, number> = {};
 
 	userRoles.forEach(({ roles }) => {

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

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import type { IErrorItem, ILanguage, IRootState, ISite } from "@ax/types";
-import { structuredDataActions } from "@ax/containers/StructuredData";
 import { FieldsBehavior } from "@ax/components";
+import { structuredDataActions } from "@ax/containers/StructuredData";
 import { getStructuredDataInnerFields } from "@ax/forms";
+import type { IErrorItem, ILanguage, IRootState, ISite } from "@ax/types";
 
 import * as S from "./style";