@griddo/ax 12.7.0 → 12.8.0

package/src/modules/PageEditor/index.tsx

@@ -24,7 +24,15 @@ 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 { 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,
@@ -38,7 +46,7 @@ import type {
 	PageAccessGrantsSummary,
 } from "@ax/types";
 
-import { DeleteModal, DirtyNavigateModal, UnpublishModal, UserEditingModal } from "./atoms";
+import { ConflictSaveModal, DeleteModal, DirtyNavigateModal, UnpublishModal, UserEditingModal } from "./atoms";
 import Editor from "./Editor";
 import Preview from "./Preview";
 
@@ -81,6 +89,7 @@ const PageEditor = (props: IProps) => {
 		updatePageAccessGrants,
 		accessGrants,
 		sendPagePing,
+		match,
 	} = props;
 
 	const isAllowedTo = usePermissionsForPage(
@@ -111,9 +120,14 @@ const PageEditor = (props: IProps) => {
 	const [errorPagesChecked, setErrorPagesChecked] = useState(false);
 	const [headingsFilter, setHeadingsFilter] = useState<HeadingFilter>("all");
 	const [keywordsFilter, setKeywordsFilter] = useState<string[]>([]);
+	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",
 		"delete",
@@ -124,6 +138,7 @@ const PageEditor = (props: IProps) => {
 		"keywordsPreview",
 		"dirtyNavigate",
 		"userAccess",
+		"conflictSave",
 	]);
 
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
@@ -159,11 +174,15 @@ const PageEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
+		const urlPageID = match?.params?.pageID ? parseInt(match.params.pageID, 10) : undefined;
+		if (urlPageID) setCurrentPageID(urlPageID);
+		const resolvedPageID = urlPageID ?? pageID;
+
 		const handleGetPage = async () => {
 			if (isNewTranslation) {
 				await getDefaults();
 			}
-			await getPage(pageID);
+			await getPage(resolvedPageID);
 		};
 
 		setTab(defaultContentTab);
@@ -171,13 +190,24 @@ const PageEditor = (props: IProps) => {
 		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. `replace` and
+	// not `push`: for the author this is the same screen, not a step to go back to.
+	useEffect(() => {
+		const urlPageID = match?.params?.pageID ? parseInt(match.params.pageID, 10) : undefined;
+		if (pageID && urlPageID && pageID !== urlPageID) {
+			history.replace(`/sites/pages/editor/${pageID}`);
+		}
+	}, [pageID, match]);
+
 	useEffect(() => {
 		setSelectedTab(defaultTab);
 	}, [defaultTab]);
@@ -205,6 +235,12 @@ const PageEditor = (props: IProps) => {
 		}
 	}, [editorContent]);
 
+	useEffect(() => {
+		if (remotePageUpdate) {
+			setShowPageUpdateNotification(true);
+		}
+	}, [remotePageUpdate]);
+
 	const setRoute = (path: string) => props.setHistoryPush(path, true);
 
 	const removePage = async () => {
@@ -222,31 +258,52 @@ const PageEditor = (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);
 
@@ -255,21 +312,23 @@ const PageEditor = (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);
 		}
 	};
 
@@ -283,14 +342,13 @@ const PageEditor = (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" });
 		}
@@ -309,29 +367,38 @@ const PageEditor = (props: IProps) => {
 		getPage(pageID);
 	};
 
-	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");
 		}
 	};
 
@@ -438,16 +505,38 @@ const PageEditor = (props: IProps) => {
 		options: !isGlobal ? menuOptions : [],
 	};
 
-	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) => {
@@ -693,7 +782,15 @@ const PageEditor = (props: IProps) => {
 		setPendingNavigateCallback(null);
 	};
 
-	return isLoading ? (
+	const handleConfirmConflictSave = async () => {
+		toggleModal("conflictSave");
+		await pendingConflictAction?.();
+		setPendingConflictAction(null);
+	};
+
+	const isContentReady = !!(editorContent as any)?.template;
+
+	return isLoading || !isContentReady ? (
 		<Loading />
 	) : (
 		<>
@@ -723,6 +820,22 @@ const PageEditor = (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>
+						)}
 						{(!isTemplateActivated || hasDeactivatedModules) && !isGlobal && (
 							<S.NotificationWrapper>
 								<Notification
@@ -855,6 +968,11 @@ const PageEditor = (props: IProps) => {
 					onUpdateAccessGrants={handleUpdateAccessGrants}
 					isSaving={isSaving}
 				/>
+				<ConflictSaveModal
+					isOpen={isOpen("conflictSave")}
+					toggleModal={() => toggleModal("conflictSave")}
+					onSaveAnyway={handleConfirmConflictSave}
+				/>
 			</MainWrapper>
 		</>
 	);
@@ -935,14 +1053,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>;
@@ -969,7 +1089,7 @@ interface IPageEditorDispatchProps {
 	}): Promise<boolean>;
 }
 
-type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;
+type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps<{ pageID?: string }>;
 
 const PageEditorWithErrorBoundary = withErrorBoundary(PageEditor, { fallback: <ErrorPage type="wrongEditor" /> });
 

package/src/modules/Redirects/index.tsx

@@ -253,6 +253,7 @@ const Redirects = (props: IProps): JSX.Element => {
 		<MainWrapper
 			backLink={false}
 			title="SEO Settings"
+			screen="redirects"
 			rightButton={rightButtonProps}
 			rightLineButton={rightLineButtonProps}
 			searchAction={handleSearch}

package/src/modules/Settings/Languages/index.tsx

@@ -24,7 +24,7 @@ const Languages = (props: IProps): JSX.Element => {
 	};
 
 	return (
-		<MainWrapper title={`Languages`}>
+		<MainWrapper title={`Languages`} screen="languages">
 			<S.Wrapper>
 				<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
 				<S.ContentWrapper>

package/src/modules/Settings/SeoAnalyticsSettings/Analytics/index.tsx

@@ -106,6 +106,7 @@ const Analytics = (props: IProps): JSX.Element => {
 			<MainWrapper
 				backLink={false}
 				title="Analytics Settings"
+				screen="analytics-site"
 				rightButton={rightButtonProps}
 				rightLineButton={secondaryButtonProps}
 			>

package/src/modules/Settings/Social/index.tsx

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

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

@@ -16,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, useModals, usePermissionsForPage } from "@ax/hooks";
+import { useBroadcastContentUpdate, useIsDirty, useModals, usePermissionsForPage } from "@ax/hooks";
 import type {
 	IDataLanguage,
 	IDataPack,
@@ -32,7 +32,7 @@ import type {
 	PageAccessGrantsSummary,
 } from "@ax/types";
 
-import { DeleteModal } from "../atoms";
+import { ConflictSaveModal, DeleteModal } from "../atoms";
 import { getPermission } from "../utils";
 import ConnectedField from "./ConnectedField";
 
@@ -86,15 +86,31 @@ const Form = (props: IProps) => {
 		form?.dataLanguages,
 	);
 
-	const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
+	const urlItemId = parseInt((props as any).match?.params?.contentId ?? "", 10);
+	const hasUrlItemId = !Number.isNaN(urlItemId);
+
+	const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId && !hasUrlItemId);
+	const [isItemLoading, setIsItemLoading] = useState(hasUrlItemId);
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [scheduleDate, setScheduleDate] = useState({
 		date: dateToString(new Date(), "yyy/MM/dd"),
 		time: "12:00 am",
 	});
-	const { isOpen, toggleModal } = useModals(["schedule", "cancelSchedule", "restore", "userAccess", "delete"]);
+	const { isOpen, toggleModal } = useModals([
+		"schedule",
+		"cancelSchedule",
+		"restore",
+		"userAccess",
+		"delete",
+		"conflictSave",
+	]);
+
+	const [showRemoteUpdateNotification, setShowRemoteUpdateNotification] = useState(false);
+
+	const { broadcastPageSave, remotePageUpdate, clearRemoteUpdate } = useBroadcastContentUpdate(currentStructuredDataId);
 	const [isDeleting, setIsDeleting] = useState(false);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+	const [pendingConflictAction, setPendingConflictAction] = useState<(() => Promise<void>) | null>(null);
 	const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);
 	const path = site ? "/sites/pages" : "/data";
 
@@ -139,13 +155,29 @@ const Form = (props: IProps) => {
 
 	const theme = getDefaultTheme();
 
+	// Load item from URL param when opening via Ctrl+Click (new tab)
+	// biome-ignore lint/correctness/useExhaustiveDependencies: intentional one-time load
+	useEffect(() => {
+		if (hasUrlItemId) {
+			setCurrentDataID(urlItemId);
+			setIsNewStructuredData(false);
+			getDataContent(urlItemId).finally(() => setIsItemLoading(false));
+		}
+	}, []);
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		if (!currentStructuredDataId) {
+		if (!currentStructuredDataId && !hasUrlItemId) {
 			setIsDirty(true);
 		}
 	}, []);
 
+	useEffect(() => {
+		if (remotePageUpdate) {
+			setShowRemoteUpdateNotification(true);
+		}
+	}, [remotePageUpdate]);
+
 	const Fields = fieldsTranslate
 		?.filter((field: ISchemaField) => !field.hidden)
 		.map((field: ISchemaField, i: number) => {
@@ -166,7 +198,29 @@ const Form = (props: IProps) => {
 			);
 		});
 
-	const handleSave = async (publish: boolean, scheduleDate?: string | null, formToSave?: any) => {
+	// Mismo guard que en los editores de página: solo un `true` explícito cuenta como
+	// confirmado (estas acciones cuelgan de un onClick y reciben el evento), y el reintento
+	// se guarda tal cual, porque `() => retry()` lo convertiría en un updater de React y
+	// ejecutaría la escritura antes de que el autor decida.
+	const blockedByConflict = (retry: () => Promise<void>, skipConflictCheck?: boolean) => {
+		if (skipConflictCheck === true || !isDirty || !remotePageUpdate) {
+			return false;
+		}
+		setPendingConflictAction(() => retry);
+		toggleModal("conflictSave");
+		return true;
+	};
+
+	const handleSave = async (
+		publish: boolean,
+		scheduleDate?: string | null,
+		formToSave?: any,
+		skipConflictCheck?: boolean,
+	) => {
+		if (blockedByConflict(() => handleSave(publish, scheduleDate, formToSave, true), skipConflictCheck)) {
+			return;
+		}
+
 		const currentForm = formToSave || form;
 		const validated = publish && !skipReviewOnPublish ? await validateForm(true) : true;
 
@@ -188,7 +242,13 @@ const Form = (props: IProps) => {
 			} else {
 				saved = await updateStructuredDataContent(payload);
 			}
-			saved && resetDirty();
+			if (saved) {
+				resetDirty();
+				clearRemoteUpdate();
+				if (currentStructuredDataId) {
+					broadcastPageSave(currentStructuredDataId);
+				}
+			}
 		}
 	};
 
@@ -248,15 +308,20 @@ const Form = (props: IProps) => {
 		}
 	};
 
-	const publishItem = async () => {
+	const publishItem = async (skipConflictCheck?: boolean) => {
 		if (!form) return;
 		const validated = skipReviewOnPublish ? true : await validateForm(true);
 		if (!validated) return;
 
 		if (!isNewStructuredData) {
+			if (blockedByConflict(() => publishItem(true), skipConflictCheck)) {
+				return;
+			}
+
 			await setDataStatus(form.id, "undraft").then(async (updated: boolean) => {
 				if (updated) {
 					await getDataContent(form.id);
+					broadcastPageSave(form.id);
 				}
 			});
 		} else {
@@ -264,11 +329,17 @@ const Form = (props: IProps) => {
 		}
 	};
 
-	const unpublishItem = async () => {
+	const unpublishItem = async (skipConflictCheck?: boolean) => {
 		if (!form) return;
+
+		if (blockedByConflict(() => unpublishItem(true), skipConflictCheck)) {
+			return;
+		}
+
 		await setDataStatus(form.id, "draft").then(async (updated: boolean) => {
 			if (updated) {
 				await getDataContent(form.id);
+				broadcastPageSave(form.id);
 			}
 		});
 	};
@@ -387,7 +458,13 @@ const Form = (props: IProps) => {
 		toggleModal("userAccess");
 	};
 
-	return isLoading && !isDeleting ? (
+	const handleConfirmConflictSave = async () => {
+		toggleModal("conflictSave");
+		await pendingConflictAction?.();
+		setPendingConflictAction(null);
+	};
+
+	return (isLoading && !isDeleting) || isItemLoading ? (
 		<Loading />
 	) : (
 		<>
@@ -410,6 +487,22 @@ const Form = (props: IProps) => {
 				scheduledPublication={form?.publicationScheduled}
 				isSaving={isSaving}
 			>
+				{showRemoteUpdateNotification && (
+					<S.NotificationWrapper data-testid="page-update-notification">
+						<Notification
+							type="info"
+							text="This content 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 Content"
+							onClick={() => {
+								window.location.reload();
+							}}
+							resetError={() => {
+								setShowRemoteUpdateNotification(false);
+								clearRemoteUpdate();
+							}}
+						/>
+					</S.NotificationWrapper>
+				)}
 				{disabledDatapack && (
 					<S.NotificationWrapper>
 						<Notification
@@ -492,6 +585,11 @@ const Form = (props: IProps) => {
 				onUpdateAccessGrants={handleUpdateAccessGrants}
 				isSaving={isSaving}
 			/>
+			<ConflictSaveModal
+				isOpen={isOpen("conflictSave")}
+				toggleModal={() => toggleModal("conflictSave")}
+				onSaveAnyway={handleConfirmConflictSave}
+			/>
 		</>
 	);
 };