@griddo/ax 12.7.0 → 12.8.0

package/src/helpers/containerEvaluations.tsx

@@ -1,4 +1,5 @@
 import type { IComponent, IContainedComponent, IContainerEvaluation } from "@ax/types";
+
 import { getDisplayName } from "./schemas";
 
 const isComponentEmpty = (component: IComponent): boolean => {
@@ -58,6 +59,13 @@ const areEqual = (prevProps: any, newProps: any): boolean => {
 		return false;
 	}
 
+	// Re-render si moduleCopy cambia (e.g. cross-tab clipboard broadcast)
+	const prevModuleCopyDate = prevProps.moduleCopy?.date?.getTime?.();
+	const newModuleCopyDate = newProps.moduleCopy?.date?.getTime?.();
+	if (prevModuleCopyDate !== newModuleCopyDate) {
+		return false;
+	}
+
 	const {
 		selectedContent: { type },
 	} = prevProps;

package/src/hooks/broadcast.ts

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { SET_COPY_MODULE } from "@ax/containers/PageEditor/constants";
+import type { IRootState } from "@ax/types";
+
+// Types
+interface BroadcastMessage {
+	type: string;
+	payload?: any;
+	timestamp?: number;
+	senderId?: string;
+}
+
+interface ContentUpdateMessage {
+	contentID: number;
+	timestamp: number;
+}
+
+// Unique ID for this tab instance to filter own broadcasts
+const TAB_ID = Math.random().toString(36).substring(2, 11);
+
+// Generic Broadcast Channel wrapper
+const useBroadcastChannel = (channelName: string, onMessage: (message: BroadcastMessage) => void) => {
+	const channelRef = useRef<BroadcastChannel | null>(null);
+	const onMessageRef = useRef(onMessage);
+
+	useEffect(() => {
+		onMessageRef.current = onMessage;
+	}, [onMessage]);
+
+	useEffect(() => {
+		const channel = new BroadcastChannel(channelName);
+		channelRef.current = channel;
+
+		const handleMessage = (event: MessageEvent<BroadcastMessage>) => {
+			onMessageRef.current(event.data);
+		};
+
+		channel.addEventListener("message", handleMessage);
+
+		return () => {
+			channel.removeEventListener("message", handleMessage);
+			channel.close();
+		};
+	}, [channelName]);
+
+	const postMessage = useCallback((message: BroadcastMessage) => {
+		if (channelRef.current) {
+			channelRef.current.postMessage({
+				...message,
+				timestamp: Date.now(),
+			});
+		}
+	}, []);
+
+	return { postMessage };
+};
+
+// Broadcast clipboard (module copy) across tabs
+const useBroadcastClipboard = () => {
+	const dispatch = useDispatch();
+	const channelName = "griddo-clipboard";
+	const moduleCopy = useSelector((state: IRootState) => state.pageEditor.moduleCopy);
+	const isFromBroadcastRef = useRef(false);
+
+	const handleMessage = useCallback(
+		(message: any) => {
+			if (message.senderId === TAB_ID) {
+				return;
+			}
+			if (message.type === "module-copied" && message.payload) {
+				isFromBroadcastRef.current = true;
+				const moduleDataWithDate = {
+					...message.payload,
+					date: new Date(message.payload.date),
+				};
+				dispatch({
+					type: SET_COPY_MODULE,
+					payload: { moduleCopy: moduleDataWithDate },
+				});
+			}
+		},
+		[dispatch],
+	);
+
+	const { postMessage } = useBroadcastChannel(channelName, handleMessage);
+
+	useEffect(() => {
+		if (moduleCopy) {
+			if (isFromBroadcastRef.current) {
+				isFromBroadcastRef.current = false;
+				return;
+			}
+			postMessage({
+				type: "module-copied",
+				payload: moduleCopy,
+				senderId: TAB_ID,
+			});
+		}
+	}, [moduleCopy, postMessage]);
+
+	return {};
+};
+
+// Broadcast content updates (page/data saves) across tabs
+const useBroadcastContentUpdate = (contentID: number | null) => {
+	const [remotePageUpdate, setRemotePageUpdate] = useState<ContentUpdateMessage | null>(null);
+
+	const handleMessage = useCallback(
+		(message: any) => {
+			if (message.type === "page-saved" && message.payload?.contentID === contentID) {
+				setRemotePageUpdate(message.payload);
+			}
+		},
+		[contentID],
+	);
+
+	const { postMessage } = useBroadcastChannel("griddo-page-updates", handleMessage);
+
+	const broadcastPageSave = useCallback(
+		(id: number) => {
+			postMessage({
+				type: "page-saved",
+				payload: { contentID: id },
+			});
+		},
+		[postMessage],
+	);
+
+	return { broadcastPageSave, remotePageUpdate, clearRemoteUpdate: () => setRemotePageUpdate(null) };
+};
+
+// Broadcast logout across tabs.
+// The logout action is injected by the consumer so this generic hook does not depend on
+// the App container (which would create a load-time circular dependency: hooks → App → … → hooks).
+const useBroadcastLogout = (onRemoteLogout?: () => void) => {
+	const channelName = "griddo-logout";
+
+	const handleMessage = useCallback(
+		(message: any) => {
+			if (message.type === "user-logout") {
+				onRemoteLogout?.();
+			}
+		},
+		[onRemoteLogout],
+	);
+
+	const { postMessage } = useBroadcastChannel(channelName, handleMessage);
+
+	const broadcastLogout = useCallback(() => {
+		postMessage({
+			type: "user-logout",
+		});
+	}, [postMessage]);
+
+	return { broadcastLogout };
+};
+
+export { useBroadcastChannel, useBroadcastClipboard, useBroadcastContentUpdate, useBroadcastLogout };

package/src/hooks/index.tsx

@@ -1,3 +1,4 @@
+import { useBroadcastChannel, useBroadcastClipboard, useBroadcastContentUpdate, useBroadcastLogout } from "./broadcast";
 import { type IBulkSelectedItems, useBulkSelection } from "./bulk";
 import { useAdaptiveText, useCategoryColors, useEmptyState } from "./content";
 import {
@@ -25,6 +26,10 @@ import { useFirefoxScrollLock, useWindowSize } from "./window";
 
 export {
 	useAdaptiveText,
+	useBroadcastChannel,
+	useBroadcastClipboard,
+	useBroadcastLogout,
+	useBroadcastContentUpdate,
 	useBulkSelection,
 	useCategoryColors,
 	useContextMenu,

package/src/modules/ActivityLog/index.tsx

@@ -211,6 +211,7 @@ const ActivityLog = (props: IActivityLogProps) => {
 	return (
 		<MainWrapper
 			title="Logs"
+			screen="activity-log"
 			rightButton={rightButtonProps}
 			rightLineButton={rightLineButtonProps}
 			searchAction={handleSearch}

package/src/modules/Analytics/index.tsx

@@ -123,7 +123,7 @@ const Analytics = (props: IProps): JSX.Element => {
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
+			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps} screen="analytics-global">
 				<ErrorToast />
 				<S.Wrapper>
 					<S.FormWrapper>

package/src/modules/App/index.tsx

@@ -1,15 +1,25 @@
-import React from "react";
-import { connect } from "react-redux";
+import { useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { connect, useSelector } from "react-redux";
 
-import type { IRootState } from "@ax/types";
 import { ErrorPage, Loading } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { useBroadcastLogout } from "@ax/hooks";
+import type { IRootState } from "@ax/types";
 
-import Routing from "./Routing";
 import Style from "../../Style";
+import Routing from "./Routing";
 
 const App = (props: IProps) => {
-	const { isRehydrated } = props;
+	const { isRehydrated, logoutAndNavigate } = props;
+	const token = useSelector((state: IRootState) => state.app.token);
+	const { broadcastLogout } = useBroadcastLogout(logoutAndNavigate);
+
+	useEffect(() => {
+		if (token === "") {
+			broadcastLogout();
+		}
+	}, [token, broadcastLogout]);
 
 	return (
 		<Style>
@@ -32,8 +42,13 @@ function mapStateToProps(state: IRootState) {
 	};
 }
 
+const mapDispatchToProps = {
+	logoutAndNavigate: appActions.logoutAndNavigate,
+};
+
 interface IProps {
 	isRehydrated: boolean;
+	logoutAndNavigate: () => void;
 }
 
-export default connect(mapStateToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

package/src/modules/Content/PageItem/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { type MouseEvent as ReactMouseEvent, useState } from "react";
 import { connect } from "react-redux";
 
 import {
@@ -14,7 +14,7 @@ import {
 } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { type ISetCurrentPageIDAction, pageStatus } from "@ax/containers/PageEditor/interfaces";
+import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import {
 	buildCategoryColumns,
 	getHumanLastModifiedDate,
@@ -71,7 +71,6 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		getSiteContent,
 		setHistoryPush,
 		updatePageStatus,
-		setCurrentPageID,
 		duplicatePage,
 		validatePage,
 		getPage,
@@ -147,20 +146,27 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
 	const setRoute = (path: string) => setHistoryPush(path, true);
 
-	const goToPage = async () => {
+	const goToPage = async (e?: ReactMouseEvent) => {
 		const pageID = page.haveDraftPage ? page.haveDraftPage : page.id;
-		setCurrentPageID(pageID);
 
 		const { templateId } = item.page;
 		const dataPack = dataPacks.find((pack) => pack.templates.some((template) => template.id === templateId));
 		dataPack && (await getDataPack(dataPack.id));
 
-		setRoute("pages/editor");
+		if (e?.ctrlKey || e?.metaKey) {
+			window.open(`/sites/pages/editor/${pageID}`, "_blank");
+			return;
+		}
+
+		setRoute(`/sites/pages/editor/${pageID}`);
 	};
 
-	const editLivePage = () => {
-		setCurrentPageID(page.id);
-		setRoute("pages/editor");
+	const editLivePage = (e?: ReactMouseEvent) => {
+		if (e?.ctrlKey || e?.metaKey) {
+			window.open(`/sites/pages/editor/${page.id}`, "_blank");
+			return;
+		}
+		setRoute(`/sites/pages/editor/${page.id}`);
 	};
 
 	const handleOnChange = (value: ICheck) => onCheck(value);
@@ -265,8 +271,9 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		});
 
 		const selectedPageLanguage = getSelectedPageLanguage(language);
-		selectedPageLanguage ? setCurrentPageID(selectedPageLanguage.pageId) : createNewTranslation(true);
-		setHistoryPush("pages/editor", true);
+		const targetPageID = selectedPageLanguage ? selectedPageLanguage.pageId : page.id;
+		if (!selectedPageLanguage) createNewTranslation(true);
+		setHistoryPush(`pages/editor/${targetPageID}`, true);
 	};
 
 	const getCurrentPageLanguages = () => {
@@ -286,10 +293,10 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const handleDuplicatePage = async () => {
 		setTemplateInstanceError({ error: false, templateName: "" });
 		if (isDuplicable) {
-			const isDuplicated = await duplicatePage(page.id, modalState);
-			if (isDuplicated) {
+			const duplicatedID = await duplicatePage(page.id, modalState);
+			if (duplicatedID) {
 				toggleModal("duplicate");
-				setRoute("pages/editor");
+				setRoute(`pages/editor/${duplicatedID}`);
 			}
 		} else {
 			toggleModal("duplicate");
@@ -303,6 +310,11 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		setModalState({ title: "", slug: "" });
 	};
 
+	const handleOpenInNewTab = () => {
+		const pageID = page.haveDraftPage ? page.haveDraftPage : page.id;
+		window.open(`/sites/pages/editor/${pageID}`, "_blank");
+	};
+
 	const currentLanguages = getCurrentPageLanguages();
 
 	const isTemplateActivated = activatedTemplates.some((temp: any) => temp.id === templateId);
@@ -418,6 +430,12 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		action: viewPage,
 	};
 
+	const newTabOption = {
+		label: "Open in new tab",
+		icon: "openOutside",
+		action: handleOpenInNewTab,
+	};
+
 	const publishAction = getPublishItem(page.liveStatus?.status, canBeUnpublished);
 
 	menuOptions = publishAction && isAllowedTo.publishUnpublishPages ? [publishAction, ...menuOptions] : menuOptions;
@@ -442,7 +460,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
 	menuOptions = page.haveDraftPage ? [...editOptions, ...menuOptions] : menuOptions;
 
-	menuOptions = page.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
+	menuOptions = page.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, newTabOption, ...menuOptions] : [newTabOption, ...menuOptions];
 
 	const GlobalMark = () => (
 		<Tooltip content="Global Page">
@@ -454,8 +472,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		if (site) {
 			const siteID = parseInt(site);
 
-			duplicatePage(page.id, null, siteID).then((successEvent: boolean) => {
-				if (successEvent === true) {
+			duplicatePage(page.id, null, siteID).then((successEvent) => {
+				if (successEvent) {
 					toggleCopiedToast();
 				}
 				toggleModal("copy");
@@ -596,8 +614,7 @@ interface IPageItemProps {
 		getSiteContent(): any;
 		setHistoryPush(path: string, isEditor: boolean): void;
 		updatePageStatus(ids: number[], status: string, updatedFromList: boolean): Promise<boolean>;
-		setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
-		duplicatePage(pageID: number, data: any, siteID?: number): Promise<boolean>;
+		duplicatePage(pageID: number, data: any, siteID?: number): Promise<number | false>;
 		removePageFromSite(pageID: number): Promise<boolean>;
 		deleteBulk(ids: number[]): Promise<boolean>;
 		setTemplateInstanceError(error: any): void;

package/src/modules/Content/index.tsx

@@ -414,7 +414,7 @@ const Content = (props: IProps): JSX.Element => {
 
 	const addNewData = () => {
 		resetForm(true);
-		const path = `/sites/data/${currentStructuredData?.id}/editor`;
+		const path = `/sites/data/${currentStructuredData?.id}/content`;
 		setHistoryPush(path, false);
 	};
 
@@ -431,7 +431,7 @@ const Content = (props: IProps): JSX.Element => {
 			setCurrentPageID(null);
 			setCurrentPageStatus("offline");
 			setCurrentPageName("New Page");
-			const path = "/sites/pages/editor/new";
+			const path = "/sites/pages/editor";
 			setHistoryPush(path, true);
 		}
 	};
@@ -625,11 +625,10 @@ const Content = (props: IProps): JSX.Element => {
 		let path: string;
 
 		if (isFromPage) {
-			setCurrentPageID(item.relatedPage?.pageId || null);
-			path = "/sites/pages/editor";
+			path = `/sites/pages/editor/${item.relatedPage?.pageId}`;
 		} else {
 			setSelectedStructuredData(item.structuredData, "site");
-			path = `/sites/data/${item.structuredData}/editor`;
+			path = `/sites/data/${item.structuredData}/content`;
 		}
 
 		setHistoryPush(path, isFromPage);
@@ -714,7 +713,6 @@ const Content = (props: IProps): JSX.Element => {
 				deletePage: deleteCurrentPage,
 				getSiteContent,
 				setHistoryPush,
-				setCurrentPageID,
 				duplicatePage,
 				removePageFromSite,
 				deleteBulk: deleteCurrentPageBulk,
@@ -1027,7 +1025,7 @@ interface IDispatchProps {
 	getStructuredDataContents(params: any, siteID: number): Promise<void>;
 	resetForm(setDefault?: boolean): void;
 	deleteBulk(ids: any): Promise<boolean>;
-	duplicatePage(pageID: number, data?: any, siteID?: number): Promise<boolean>;
+	duplicatePage(pageID: number, data?: any, siteID?: number): Promise<number | false>;
 	getPage(pageID?: number, global?: boolean): Promise<void>;
 	validatePage(publish?: boolean, browserRef?: any, currentPage?: IPage): Promise<boolean>;
 	deleteDataContent(dataID: number[]): Promise<boolean>;

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/index.tsx

@@ -1,10 +1,8 @@
 import React 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 type { ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import type { IFile, IFileUseItem, IFileUsePages, IRootState } from "@ax/types";
 import Item from "./Item";
 import ItemGroup from "./ItemGroup";
@@ -17,7 +15,6 @@ const UsageContent = (props: IProps) => {
 		currentSiteID,
 		selectedTab,
 		setHistoryPush,
-		setCurrentPageID,
 		getSite,
 		setCurrentDataID,
 		setSelectedStructuredData,
@@ -34,8 +31,7 @@ const UsageContent = (props: IProps) => {
 			const pageItems = pages[0] ? pages[0].pages : [];
 			return pageItems.map((item: IFileUseItem) => {
 				const handleClick = () => {
-					setCurrentPageID(item.id);
-					setHistoryPush("pages/editor", true);
+					setHistoryPush(`pages/editor/${item.id}`, true);
 				};
 
 				return <Item title={item.title} date={item.published} key={item.id} onClick={handleClick} />;
@@ -44,8 +40,7 @@ const UsageContent = (props: IProps) => {
 			return pages.map((item: IFileUsePages) => {
 				const handleClick = async (page: IFileUseItem) => {
 					await getSite(item.siteId);
-					setCurrentPageID(page.id);
-					setHistoryPush("/sites/pages/editor", true);
+					setHistoryPush(`/sites/pages/editor/${page.id}`, true);
 				};
 				return <ItemGroup key={item.siteId} title={item.siteName} items={item.pages} onClick={handleClick} />;
 			});
@@ -57,9 +52,7 @@ const UsageContent = (props: IProps) => {
 			return <></>;
 		} else {
 			const handleClick = (item: IFileUseItem) => {
-				setCurrentPageID(item.id);
-				const path = isSiteView ? "/data/pages/editor" : "data/pages/editor";
-				setHistoryPush(path, true);
+				setHistoryPush(`${isSiteView ? "/data" : "data"}/pages/editor/${item.id}`, true);
 			};
 			return <ItemGroup title="Global Pages" items={globalPages} onClick={handleClick} />;
 		}
@@ -75,7 +68,7 @@ const UsageContent = (props: IProps) => {
 					item.structuredDataId && setSelectedStructuredData(item.structuredDataId, "site");
 					setCurrentDataID(item.id);
 					await getDataContent(item.id);
-					setHistoryPush(`data/${item.structuredDataId}/editor`, true);
+					setHistoryPush(`data/${item.structuredDataId}/content`, true);
 				};
 
 				return (
@@ -93,7 +86,7 @@ const UsageContent = (props: IProps) => {
 				item.structuredDataId && setSelectedStructuredData(item.structuredDataId, "global");
 				setCurrentDataID(item.id);
 				await getDataContent(item.id);
-				setHistoryPush(`/data/${item.structuredDataId}/editor`, true);
+				setHistoryPush(`/data/${item.structuredDataId}/content`, true);
 			};
 			return <ItemGroup title="Global Simple Content" items={simpleStructuredData} onClick={handleClick} />;
 		}
@@ -119,7 +112,6 @@ interface IProps {
 	currentSiteID: number | null;
 	selectedTab: "site" | "global";
 	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;
@@ -128,7 +120,6 @@ interface IProps {
 
 const mapDispatchToProps = {
 	setHistoryPush: appActions.setHistoryPush,
-	setCurrentPageID: pageEditorActions.setCurrentPageID,
 	getSite: sitesActions.getSite,
 	setCurrentDataID: structuredDataActions.setCurrentDataID,
 	setSelectedStructuredData: structuredDataActions.setSelectedStructuredData,

package/src/modules/FileDrive/index.tsx

@@ -605,7 +605,7 @@ const FileDrive = (props: IProps) => {
 	);
 
 	return (
-		<MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps}>
+		<MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps} screen="file-drive">
 			<S.Wrapper ref={wrapperRef}>
 				<S.FolderPanel
 					isOpen={isPanelOpen}

package/src/modules/Forms/FormUseModal/index.tsx

@@ -15,7 +15,6 @@ import { CheckGroupFilter, Loading, Modal } from "@ax/components";
 import { getStructuredDataTitle } from "@ax/helpers";
 import { useCategoryColors } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
-import { pageEditorActions } from "@ax/containers/PageEditor";
 import { navigationActions } from "@ax/containers/Navigation";
 import { sitesActions } from "@ax/containers/Sites";
 import {
@@ -143,17 +142,15 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
 	};
 
 	const goToPage = async (pageID: number, siteID: number | null) => {
-		const { setCurrentPageID, setSiteInfo, setHistoryPush } = props;
+		const { setSiteInfo, setHistoryPush } = props;
 		if (!isSiteView && siteID) {
 			const siteInfo = await getSite(siteID);
 			if (siteInfo) {
 				await setSiteInfo(siteInfo);
 			}
-			setCurrentPageID(pageID);
-			setHistoryPush("/sites/pages/editor", true);
+			setHistoryPush(`/sites/pages/editor/${pageID}`, true);
 		} else {
-			setCurrentPageID(pageID);
-			setHistoryPush(isSiteView ? "/sites/pages/editor" : "/data/pages/editor", true);
+			setHistoryPush(isSiteView ? `/sites/pages/editor/${pageID}` : `/data/pages/editor/${pageID}`, true);
 		}
 	};
 
@@ -271,7 +268,6 @@ interface IFormUseModalModal extends IModal {
 	formInUse: { page?: number[]; header?: number[]; footer?: number[] } | null;
 	isSiteView: boolean;
 	setHistoryPush: (path: string, isEditor: boolean) => void;
-	setCurrentPageID: (currentPageID: number | null) => void;
 	setSiteInfo(currentSiteInfo: ISite): Promise<void>;
 	setSelectedDefault(selectedDefault: string): void;
 	setHeader(id: number | null): void;
@@ -280,7 +276,6 @@ interface IFormUseModalModal extends IModal {
 
 const mapDispatchToProps = {
 	setHistoryPush: appActions.setHistoryPush,
-	setCurrentPageID: pageEditorActions.setCurrentPageID,
 	setSiteInfo: sitesActions.setSiteInfo,
 	setSelectedDefault: navigationActions.setSelectedDefault,
 	setHeader: navigationActions.setHeader,

package/src/modules/GlobalEditor/atoms.tsx

@@ -74,4 +74,38 @@ interface IDeleteModal extends IModal {
 	isDeleting?: boolean;
 }
 
-export { DeleteModal };
+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;
+}
+
+export { DeleteModal, ConflictSaveModal };