@griddo/ax 12.7.0 → 12.8.0

package/src/modules/GlobalEditor/index.tsx

@@ -26,7 +26,15 @@ import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getDefaultTheme } from "@ax/helpers";
-import { useEditingHeartbeat, useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
+import {
+	useBroadcastClipboard,
+	useBroadcastContentUpdate,
+	useEditingHeartbeat,
+	useIsDirty,
+	useModals,
+	usePermissionsForPage,
+} from "@ax/hooks";
+import history from "@ax/routes/history";
 import type {
 	HeadingFilter,
 	IErrorItem,
@@ -40,7 +48,7 @@ import type {
 	PageAccessGrantsSummary,
 } from "@ax/types";
 
-import { DeleteModal } from "./atoms";
+import { ConflictSaveModal, DeleteModal } from "./atoms";
 import Editor from "./Editor";
 import Preview from "./Preview";
 
@@ -78,6 +86,7 @@ const GlobalEditor = (props: IProps) => {
 		updatePageAccessGrants,
 		accessGrants,
 		sendPagePing,
+		match,
 	} = props;
 
 	const isAllowedTo = usePermissionsForPage(
@@ -109,9 +118,14 @@ const GlobalEditor = (props: IProps) => {
 		time: "12:00 am",
 	});
 	const [pendingNavigateCallback, setPendingNavigateCallback] = useState<(() => void) | null>(null);
+	const [showPageUpdateNotification, setShowPageUpdateNotification] = useState(false);
+	const [pendingConflictAction, setPendingConflictAction] = useState<(() => Promise<void>) | null>(null);
 	const browserRef = useRef<HTMLDivElement>(null);
 
-	const { isOpen, toggleModal } = useModals([
+	const { broadcastPageSave, remotePageUpdate, clearRemoteUpdate } = useBroadcastContentUpdate(pageID);
+	useBroadcastClipboard();
+
+	const { isOpen, toggleModal, closeModal } = useModals([
 		"userEditing",
 		"unpublish",
 		"schedule",
@@ -122,6 +136,7 @@ const GlobalEditor = (props: IProps) => {
 		"dirtyNavigate",
 		"userAccess",
 		"delete",
+		"conflictSave",
 	]);
 
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
@@ -155,19 +170,34 @@ const GlobalEditor = (props: IProps) => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		const { setStructuredDataFilter } = props;
+		const urlPageID = match?.params?.pageID ? parseInt(match.params.pageID, 10) : undefined;
+		if (urlPageID) setCurrentPageID(urlPageID);
+		const resolvedPageID = urlPageID ?? pageID;
 
 		editorContent?.structuredData && setStructuredDataFilter(editorContent.structuredData);
-		const handleGetPage = async () => await getPage(pageID, true);
+		const handleGetPage = async () => await getPage(resolvedPageID, true);
 		setTab(defaultContentTab);
 		setToastMsg(null);
 		handleGetPage();
-		if (!pageID) {
+		if (!resolvedPageID) {
 			setIsDirty(false);
 		}
 	}, []);
 
 	useEditingHeartbeat(pageID, sendPagePing);
 
+	// sc-111850: the route carries the page id and the mount effect above seeds
+	// currentPageID from it, so a URL still pointing at the previous page is not cosmetic —
+	// it re-enters on the next mount and drags the editor back to that page. The global
+	// editor lives under /data, not /sites: this module is the one routes/multisite.tsx
+	// mounts, and routes/site.tsx mounts PageEditor instead.
+	useEffect(() => {
+		const urlPageID = match?.params?.pageID ? parseInt(match.params.pageID, 10) : undefined;
+		if (pageID && urlPageID && pageID !== urlPageID) {
+			history.replace(`/data/pages/editor/${pageID}`);
+		}
+	}, [pageID, match]);
+
 	useEffect(() => {
 		setSelectedTab(defaultTab);
 	}, [defaultTab]);
@@ -200,6 +230,12 @@ const GlobalEditor = (props: IProps) => {
 		}
 	}, [editorContent]);
 
+	useEffect(() => {
+		if (remotePageUpdate) {
+			setShowPageUpdateNotification(true);
+		}
+	}, [remotePageUpdate]);
+
 	const setRoute = (path: string) => props.setHistoryPush(path, true);
 
 	const removePage = async () => {
@@ -217,31 +253,52 @@ const GlobalEditor = (props: IProps) => {
 		}
 	};
 
-	const publishPage = async () => {
-		const { updatePageStatus, savePage, pageID, validatePage, skipReviewOnPublish } = props;
+	// A warned tab must ask before ANY write, not only before the ones that go through
+	// savePage. Two traps here: these actions are wired straight to onClick, so their first
+	// argument can be a click event and only an explicit `true` may count as "already
+	// confirmed"; and the retry is stored as-is, because `() => retry()` would make React
+	// read it as a state updater and run the write before the author decides.
+	const blockedByConflict = (retry: () => Promise<void>, skipConflictCheck?: boolean) => {
+		if (skipConflictCheck === true || !isDirty || !remotePageUpdate) {
+			return false;
+		}
+		setPendingConflictAction(() => retry);
+		toggleModal("conflictSave");
+		return true;
+	};
+
+	const publishPage = async (skipConflictCheck?: boolean) => {
+		const { updatePageStatus, pageID, validatePage, skipReviewOnPublish } = props;
 
 		const validated = skipReviewOnPublish ? true : await validatePage(true);
 
 		if (validated) {
-			const publishPage = {
-				status: pageStatus.UPLOAD_PENDING,
-			};
-
-			const isSaved =
-				pageID && !isNewTranslation
-					? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-					: await savePage({ publishPage });
+			if (pageID && !isNewTranslation) {
+				if (blockedByConflict(() => publishPage(true), skipConflictCheck)) {
+					return;
+				}
+
+				const isSaved = await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING);
+				if (isSaved) {
+					resetDirty();
+					broadcastPageSave(pageID);
+				}
+			} else {
+				const publishPageData = {
+					status: pageStatus.UPLOAD_PENDING,
+				};
 
-			if (isSaved) {
-				resetDirty();
+				await handleSavePageCommon({ publishPage: publishPageData }, undefined, skipConflictCheck, () =>
+					publishPage(true),
+				);
 			}
 		} else {
 			setNotification({ text: errorNotificationText, type: "error" });
 		}
 	};
 
-	const publishChanges = async () => {
-		const { savePage, validatePage, skipReviewOnPublish } = props;
+	const publishChanges = async (skipConflictCheck?: boolean) => {
+		const { validatePage, skipReviewOnPublish } = props;
 
 		const validated = skipReviewOnPublish ? true : await validatePage(true);
 
@@ -250,21 +307,23 @@ const GlobalEditor = (props: IProps) => {
 				status: pageStatus.UPLOAD_PENDING,
 			};
 
-			const isSaved = await savePage({ publishPage });
-			if (isSaved) {
-				resetDirty();
-			}
+			await handleSavePageCommon({ publishPage }, undefined, skipConflictCheck, () => publishChanges(true));
 		} else {
 			setNotification({ text: errorNotificationText, type: "error" });
 		}
 	};
 
-	const unpublishPage = async () => {
+	const unpublishPage = async (skipConflictCheck?: boolean) => {
 		const { updatePageStatus, pageID } = props;
 
+		if (blockedByConflict(() => unpublishPage(true), skipConflictCheck)) {
+			return;
+		}
+
 		const isSaved = await updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
 		if (isSaved) {
 			resetDirty();
+			broadcastPageSave(pageID);
 		}
 	};
 
@@ -278,14 +337,13 @@ const GlobalEditor = (props: IProps) => {
 		}
 	};
 
-	const handlePublishDraft = async () => {
-		const { savePage, validatePage, skipReviewOnPublish } = props;
+	const handlePublishDraft = async (skipConflictCheck?: boolean) => {
+		const { validatePage, skipReviewOnPublish } = props;
 
 		const validated = skipReviewOnPublish ? true : await validatePage(true);
 
 		if (validated) {
-			const isSaved = await savePage({ publishDraft: true });
-			if (isSaved) resetDirty();
+			await handleSavePageCommon({ publishDraft: true }, undefined, skipConflictCheck, () => handlePublishDraft(true));
 		} else {
 			setNotification({ text: errorNotificationText, type: "error" });
 		}
@@ -303,29 +361,38 @@ const GlobalEditor = (props: IProps) => {
 		getPage(pageID, true);
 	};
 
-	const handleCreateDraft = async () => {
-		const { savePage } = props;
-
-		const isSaved = await savePage({ createDraft: true });
-		if (isSaved) resetDirty();
+	const handleCreateDraft = async (skipConflictCheck?: boolean) => {
+		await handleSavePageCommon({ createDraft: true }, undefined, skipConflictCheck, () => handleCreateDraft(true));
 	};
 
-	const handleSchedulePublication = async () => {
+	const handleSchedulePublication = async (skipConflictCheck?: boolean) => {
+		if (blockedByConflict(() => handleSchedulePublication(true), skipConflictCheck)) {
+			closeModal("schedule");
+			return;
+		}
+
 		const date = new Date(`${scheduleDate.date} ${scheduleDate.time}`);
 		const dateString = dateToString(date, "dd/MM/yyyy HH:mm:ss");
 		const saved = await schedulePublication(dateString, isDraft);
 		if (saved) {
 			resetDirty();
-			toggleModal("schedule");
+			broadcastPageSave(pageID);
+			closeModal("schedule");
 		}
 	};
 
-	const handleCancelSchedulePublication = async () => {
+	const handleCancelSchedulePublication = async (skipConflictCheck?: boolean) => {
+		if (blockedByConflict(() => handleCancelSchedulePublication(true), skipConflictCheck)) {
+			closeModal("cancelSchedule");
+			return;
+		}
+
 		const saved = await schedulePublication(null, isDraft);
 		if (saved) {
 			setScheduleDate({ date: "", time: "12:00 am" });
 			resetDirty();
-			toggleModal("cancelSchedule");
+			broadcastPageSave(pageID);
+			closeModal("cancelSchedule");
 		}
 	};
 
@@ -433,16 +500,38 @@ const GlobalEditor = (props: IProps) => {
 	const isEditable = editorContent?.editable;
 	const isRestricted = !!(accessGrants.users.length || accessGrants.roles.length);
 
-	const handleSavePage = async (setToast?: (msg: string) => void) => {
+	const handleSavePageCommon = async (
+		saveOptions: SavePageOptions,
+		onSuccess?: () => void,
+		skipConflictCheck?: boolean,
+		recursiveCall: () => Promise<void> = () => Promise.resolve(),
+	) => {
+		if (blockedByConflict(recursiveCall, skipConflictCheck)) {
+			return;
+		}
+
 		const { savePage } = props;
 
-		const isSaved = await savePage({ setToast });
+		const isSaved = await savePage(saveOptions);
 		if (isSaved) {
 			resetDirty();
-			setToastMsg(null);
+			clearRemoteUpdate();
+			if (pageID) {
+				broadcastPageSave(pageID);
+			}
+			onSuccess?.();
 		}
 	};
 
+	const handleSavePage = async (setToast?: (msg: string) => void, skipConflictCheck?: boolean) => {
+		await handleSavePageCommon(
+			{ setToast },
+			() => setToastMsg(null),
+			skipConflictCheck,
+			() => handleSavePage(setToast, true),
+		);
+	};
+
 	const goToPages = (path: string) => setRoute(path);
 
 	const goToError = async (editorID: number | null, tab: string, template: boolean, parentEditorID?: number) => {
@@ -523,6 +612,12 @@ const GlobalEditor = (props: IProps) => {
 		setPendingNavigateCallback(null);
 	};
 
+	const handleConfirmConflictSave = async () => {
+		toggleModal("conflictSave");
+		await pendingConflictAction?.();
+		setPendingConflictAction(null);
+	};
+
 	let pageStatusActions =
 		props.pageStatus === pageStatus.PUBLISHED || isDraft
 			? [
@@ -549,10 +644,8 @@ const GlobalEditor = (props: IProps) => {
 	const goBackToSite = () => {
 		if (sitePageID) {
 			setCurrentSiteInfo(savedSiteInfo);
-			setCurrentPageID(sitePageID);
 			getUserCurrentPermissions();
-			const path = "/sites/pages/editor";
-			setHistoryPush(path, true);
+			setHistoryPush(`/sites/pages/editor/${sitePageID}`, true);
 		}
 	};
 
@@ -656,7 +749,9 @@ const GlobalEditor = (props: IProps) => {
 		}
 	};
 
-	return isLoading ? (
+	const isContentReady = !!(editorContent as any)?.template;
+
+	return isLoading || !isContentReady ? (
 		<Loading />
 	) : (
 		<>
@@ -687,6 +782,22 @@ const GlobalEditor = (props: IProps) => {
 			>
 				{selectedTab === "edit" ? (
 					<>
+						{showPageUpdateNotification && (
+							<S.NotificationWrapper data-testid="page-update-notification">
+								<Notification
+									type="info"
+									text="This page was edited in another tab and you're viewing an older version. Reload to see the latest changes. Any unsaved edits here will be lost."
+									btnText="Reload Page"
+									onClick={() => {
+										window.location.reload();
+									}}
+									resetError={() => {
+										setShowPageUpdateNotification(false);
+										clearRemoteUpdate();
+									}}
+								/>
+							</S.NotificationWrapper>
+						)}
 						{isLivePageChanged && (
 							<S.NotificationWrapper>
 								<Notification type="warning" text={modifiedNotificationText} />
@@ -844,6 +955,11 @@ const GlobalEditor = (props: IProps) => {
 						you want to discard your changes?
 					</S.ModalContent>
 				</Modal>
+				<ConflictSaveModal
+					isOpen={isOpen("conflictSave")}
+					toggleModal={() => toggleModal("conflictSave")}
+					onSaveAnyway={handleConfirmConflictSave}
+				/>
 			</MainWrapper>
 		</>
 	);
@@ -917,14 +1033,16 @@ const mapDispatchToProps = {
 	updatePageAccessGrants: pageEditorActions.updatePageAccessGrants,
 };
 
+type SavePageOptions = {
+	createDraft?: boolean;
+	publishPage?: { status: string };
+	publishDraft?: boolean;
+	setToast?: (msg: string) => void;
+};
+
 interface IPageEditorDispatchProps {
 	getPage(pageID?: number, global?: boolean, preferDraft?: boolean): Promise<void>;
-	savePage(data?: {
-		createDraft?: boolean;
-		publishPage?: { status: string };
-		publishDraft?: boolean;
-		setToast?: (msg: string) => void;
-	}): Promise<boolean>;
+	savePage(data?: SavePageOptions): Promise<boolean>;
 	deletePage(params?: ISavePageParams): Promise<boolean>;
 	validatePage(publish?: boolean): Promise<boolean>;
 	updatePageStatus(id: number[], status: string): Promise<boolean>;
@@ -950,7 +1068,7 @@ interface IPageEditorDispatchProps {
 	}): Promise<boolean>;
 }
 
-type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;
+type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps<{ pageID?: string }>;
 
 const GlobalEditorWithErrorBoundary = withErrorBoundary(GlobalEditor, {
 	fallback: <ErrorPage type="wrongEditor" />,

package/src/modules/GlobalSettings/Robots/index.tsx

@@ -76,7 +76,7 @@ const Robots = (props: IProps): JSX.Element => {
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps}>
+			<MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps} screen="robots">
 				<S.Wrapper>
 					<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
 					<S.ContentWrapper>

package/src/modules/MediaGallery/ImageModal/DetailPanel/UsageContent/index.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { appActions } from "@ax/containers/App";
-import { pageEditorActions } from "@ax/containers/PageEditor";
 import { sitesActions } from "@ax/containers/Sites";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
-import type { ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import type { IImage, IRootState, ISite, IUser } from "@ax/types";
 import { images } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
@@ -23,7 +21,6 @@ const UsageContent = (props: IProps) => {
 		selectedTab,
 		currentUser,
 		setHistoryPush,
-		setCurrentPageID,
 		getSite,
 		setCurrentDataID,
 		setSelectedStructuredData,
@@ -71,8 +68,7 @@ const UsageContent = (props: IProps) => {
 			const data = items.sites.find((site) => site.id === currentSiteID)?.simpleContent || [];
 			const pageItems = pages.map((item: IImageUseItem) => {
 				const handleClick = () => {
-					setCurrentPageID(item.id);
-					setHistoryPush("/sites/pages/editor", true);
+					setHistoryPush(`/sites/pages/editor/${item.id}`, true);
 				};
 
 				return <Item title={item.title} type="Page" date={item.date} key={item.id} onClick={handleClick} />;
@@ -84,7 +80,7 @@ const UsageContent = (props: IProps) => {
 					setSelectedStructuredData(item.structuredData.id, "site");
 					setCurrentDataID(item.id);
 					await getDataContent(item.id);
-					setHistoryPush(`/sites/data/${item.structuredData.id}/editor`);
+					setHistoryPush(`/sites/data/${item.structuredData.id}/content`);
 				};
 
 				return (
@@ -104,13 +100,12 @@ const UsageContent = (props: IProps) => {
 				const handleClick = async (page: IImageUseItem) => {
 					await getSite(item.id);
 					if (!page.structuredData) {
-						setCurrentPageID(page.id);
-						setHistoryPush("/sites/pages/editor", true);
+						setHistoryPush(`/sites/pages/editor/${page.id}`, true);
 					} else {
 						setSelectedStructuredData(page.structuredData.id, "site");
 						setCurrentDataID(page.id);
 						await getDataContent(page.id);
-						setHistoryPush(`/sites/data/${page.structuredData.id}/editor`);
+						setHistoryPush(`/sites/data/${page.structuredData.id}/content`);
 					}
 				};
 				return (
@@ -132,13 +127,11 @@ const UsageContent = (props: IProps) => {
 		}
 		const hasGlobal = currentUser?.isSuperAdmin || !!currentUser?.roles.find((rol) => rol.siteId === "global");
 		const handleClick = (item: IImageUseItem) => {
-			setCurrentPageID(item.id);
 			if (isSiteView) {
 				setCurrentSiteInfo(null);
 				getUserCurrentPermissions();
 			}
-			const path = "/data/pages/editor";
-			setHistoryPush(path, true);
+			setHistoryPush(`/data/pages/editor/${item.id}`, true);
 		};
 		return <ItemGroup title="Global Pages" items={items.globalPages} onClick={handleClick} disabled={!hasGlobal} />;
 	};
@@ -157,7 +150,7 @@ const UsageContent = (props: IProps) => {
 				setCurrentSiteInfo(null);
 				getUserCurrentPermissions();
 			}
-			setHistoryPush(`/data/${item.structuredData.id}/editor`);
+			setHistoryPush(`/data/${item.structuredData.id}/content`);
 		};
 		return (
 			<ItemGroup title="Global Simple Content" items={items.simpleData} onClick={handleClick} disabled={!hasGlobal} />
@@ -196,7 +189,6 @@ interface IProps {
 	selectedTab: "site" | "global";
 	currentUser: IUser | null;
 	setHistoryPush(page: string, isEditor?: boolean): Promise<void>;
-	setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
 	getSite(siteID: number): Promise<void>;
 	setCurrentDataID(id: number | null): void;
 	setSelectedStructuredData(id: string, scope: string): void;
@@ -220,7 +212,6 @@ export interface IImageUseItem {
 
 const mapDispatchToProps = {
 	setHistoryPush: appActions.setHistoryPush,
-	setCurrentPageID: pageEditorActions.setCurrentPageID,
 	getSite: sitesActions.getSite,
 	setCurrentSiteInfo: sitesActions.setCurrentSiteInfo,
 	setCurrentDataID: structuredDataActions.setCurrentDataID,

package/src/modules/MediaGallery/index.tsx

@@ -623,7 +623,7 @@ const MediaGallery = (props: IProps) => {
 	);
 
 	return (
-		<MainWrapper backLink={false} title="Media Gallery" rightButton={rightButtonProps}>
+		<MainWrapper backLink={false} title="Media Gallery" rightButton={rightButtonProps} screen="gallery">
 			<S.Wrapper ref={wrapperRef}>
 				<S.FolderPanel
 					isOpen={isPanelOpen}

package/src/modules/PageEditor/atoms.tsx

@@ -154,6 +154,40 @@ interface IUserEditingModal {
 	onBack: () => void;
 }
 
+const ConflictSaveModal = (props: IConflictSaveModal): JSX.Element => {
+	const { isOpen, toggleModal, onSaveAnyway } = props;
+
+	const mainAction = {
+		title: "Continue anyway",
+		onClick: onSaveAnyway,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			size="S"
+			height="auto"
+			title="Continue with an outdated version?"
+			mainAction={mainAction}
+			secondaryAction={secondaryAction}
+		>
+			<S.ModalContent>
+				<p>
+					This page <strong>was updated in another tab</strong> after you opened it, so what you see here{" "}
+					<strong>is out of date</strong>. Reload to get the latest version first.
+				</p>
+			</S.ModalContent>
+		</Modal>
+	);
+};
+
+interface IConflictSaveModal extends IModal {
+	onSaveAnyway: () => void;
+}
+
 const UnpublishModal = (props: IUnpublishModal): JSX.Element => {
 	const { isOpen, toggleModal } = props;
 
@@ -181,4 +215,4 @@ interface IUnpublishModal {
 	toggleModal: () => void;
 }
 
-export { UnpublishModal, UserEditingModal, DeleteModal, DirtyNavigateModal };
+export { UnpublishModal, UserEditingModal, DeleteModal, DirtyNavigateModal, ConflictSaveModal };