@griddo/ax 12.7.1 → 12.8.0

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { type MouseEvent as ReactMouseEvent, useState } from "react";
 import { connect } from "react-redux";
 
 import {
@@ -125,11 +125,20 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 		scheduled: `Scheduled publication: ${isScheduledPub ? getScheduleFormatDate(publicationScheduled) : ""}`,
 	};
 
-	const _handleClick = () => {
+	const _handleClick = (e?: ReactMouseEvent) => {
+		const pageID = globalPage.haveDraftPage ? globalPage.haveDraftPage : globalPage.id;
+		if (e?.ctrlKey || e?.metaKey) {
+			window.open(`/data/pages/editor/${pageID}`, "_blank");
+			return;
+		}
 		handleClick(true, globalPage);
 	};
 
-	const handleEditLivePage = () => {
+	const handleEditLivePage = (e?: ReactMouseEvent) => {
+		if (e?.ctrlKey || e?.metaKey) {
+			window.open(`/data/pages/editor/${globalPage.id}`, "_blank");
+			return;
+		}
 		handleClick(true, globalPage, true);
 	};
 
@@ -215,13 +224,18 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 	};
 
 	const handleDuplicatePage = async () => {
-		const isDuplicated = await duplicatePage(globalPage.id, duplicateModalState);
-		if (isDuplicated) {
+		const duplicatedID = await duplicatePage(globalPage.id, duplicateModalState);
+		if (duplicatedID) {
 			toggleModal("duplicate");
-			setHistoryPush("data/pages/editor", true);
+			setHistoryPush(`/data/pages/editor/${duplicatedID}`, true);
 		}
 	};
 
+	const handleOpenInNewTab = () => {
+		const pageID = globalPage.haveDraftPage ? globalPage.haveDraftPage : globalPage.id;
+		window.open(`/data/pages/editor/${pageID}`, "_blank");
+	};
+
 	let menuOptions: IPageOption[] = [];
 
 	if (isAllowedTo.duplicatePages) {
@@ -276,6 +290,12 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 		action: viewPage,
 	};
 
+	const newTabOption = {
+		label: "Open in new tab",
+		icon: "openOutside",
+		action: handleOpenInNewTab,
+	};
+
 	const editOptions = [
 		{
 			label: "View live",
@@ -300,7 +320,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	menuOptions = globalPage.haveDraftPage ? [...editOptions, ...menuOptions] : menuOptions;
 
-	menuOptions = globalPage.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
+	menuOptions = globalPage.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, newTabOption, ...menuOptions] : [newTabOption, ...menuOptions];
 
 	const isTranslated = globalPage.pageLanguages.length > 1;
 
@@ -333,10 +353,10 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 		languageActions.setLanguage(lang);
 
 		const selectedPageLanguage = getSelectedPageLanguage(language);
+		const targetPageID = selectedPageLanguage ? selectedPageLanguage.pageId : globalPage.id;
+		if (!selectedPageLanguage) languageActions.createNewTranslation?.(true);
 
-		selectedPageLanguage ? setCurrentPageID(selectedPageLanguage.pageId) : languageActions.createNewTranslation?.(true);
-
-		setHistoryPush("data/pages/editor", true);
+		setHistoryPush(`data/pages/editor/${targetPageID}`, true);
 	};
 
 	const languageMenu = () => (
@@ -481,7 +501,7 @@ interface IGlobalPageItemProps {
 	isAllPages?: boolean;
 	globalPage: IPage;
 	updatePageStatus(ids: number[], status: string, updatedFromList: boolean): Promise<boolean>;
-	duplicatePage(pageID: number, data: { title: string; slug: string }, siteID?: number): Promise<boolean>;
+	duplicatePage(pageID: number, data: { title: string; slug: string }, siteID?: number): Promise<number | false>;
 	getPage(pageID?: number, global?: boolean): Promise<void>;
 	validatePage(publish?: boolean, browserRef?: any, currentPage?: IPage): Promise<boolean>;
 	setHistoryPush(path: string, isEditor: boolean): void;

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { type MouseEvent as ReactMouseEvent, useState } from "react";
 import { connect } from "react-redux";
 
 import {
@@ -103,7 +103,12 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		scheduled: `Scheduled publication: ${isScheduledPub ? getScheduleFormatDate(publicationScheduled) : ""}`,
 	};
 
-	const _handleClick = () => {
+	const _handleClick = (e?: ReactMouseEvent<HTMLDivElement>) => {
+		if (e?.ctrlKey || e?.metaKey) {
+			const prefix = currentSiteInfo ? "/sites" : "";
+			window.open(`${prefix}/data/${currentStructuredData?.id}/content/${structuredData.id}`, "_blank");
+			return;
+		}
 		getDataContent(structuredData.id);
 		setCurrentDataID(structuredData.id);
 		handleClick();
@@ -130,6 +135,11 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		handleClick();
 	};
 
+	const handleOpenInNewTab = () => {
+		const prefix = currentSiteInfo ? "/sites" : "";
+		window.open(`${prefix}/data/${currentStructuredData?.id}/content/${structuredData.id}`, "_blank");
+	};
+
 	const checkStatus = () => {
 		return isScheduledPub ? "scheduled" : structuredData.draft ? "offline" : "active";
 	};
@@ -210,7 +220,11 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		"Not translatable"
 	);
 
-	const menuOptions = [];
+	const menuOptions = [{
+		label: "Open in new tab",
+		icon: "openOutside",
+		action: handleOpenInNewTab,
+	}];
 
 	if (!isDisabled && isEditable && isAllowedTo.duplicatePages) {
 		menuOptions.push({

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

@@ -324,11 +324,13 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	}, [filterValues]);
 
 	const handleClick = (isFromPage?: boolean, globalPage?: IPage, forceLive?: boolean) => {
+		let path: string;
 		if (isFromPage && globalPage) {
 			const pageID = globalPage.haveDraftPage && !forceLive ? globalPage.haveDraftPage : globalPage.id;
-			setCurrentPageID(pageID);
+			path = `data/pages/editor/${pageID}`;
+		} else {
+			path = `data/${currentStructuredData?.id}/content`;
 		}
-		const path = isFromPage ? "data/pages/editor" : `data/${currentStructuredData?.id}/editor`;
 		setHistoryPush(path, isFromPage);
 	};
 
@@ -516,14 +518,14 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			setSelectedStructuredData(dataID, scope);
 			setCurrentDataID(null);
 			resetForm(true);
-			const path = `data/${dataID}/editor`;
+			const path = `data/${dataID}/content`;
 			setHistoryPush(path, false);
 		} else {
 			addTemplate(template);
 			setCurrentPageID(null);
 			setCurrentPageStatus("offline");
 			setCurrentPageName("New Global Page");
-			const path = "/data/pages/editor/new";
+			const path = "/data/pages/editor";
 			setHistoryPush(path, true);
 		}
 	};

package/src/modules/StructuredData/atoms.tsx

@@ -84,4 +84,38 @@ interface IDeleteModal extends IModal {
 	title?: string;
 }
 
-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 content <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 };

package/src/routes/multisite.tsx

@@ -1,21 +1,21 @@
-import StructuredDataList from "./../modules/StructuredData/StructuredDataList";
+import ActivityLog from "../modules/ActivityLog";
+import AnalyticsSettings from "../modules/Analytics";
 import CategoriesList from "./../modules/Categories/CategoriesList";
+import FileDrive from "../modules/FileDrive";
+import FormCategoriesList from "../modules/Forms/FormCategoriesList";
+import FormEditor from "../modules/Forms/FormEditor";
+import FormList from "../modules/Forms/FormList";
+import FramePreview from "../modules/FramePreview";
+import Editor from "./../modules/GlobalEditor";
+import GlobalSettings from "./../modules/GlobalSettings";
+import MediaGallery from "../modules/MediaGallery";
 import Sites from "./../modules/Sites";
-import StructuredData from "./../modules/StructuredData";
+import StructuredDataForm from "./../modules/StructuredData/Form";
+import StructuredDataList from "./../modules/StructuredData/StructuredDataList";
 import Users from "./../modules/Users";
 import Profile from "../modules/Users/Profile";
 import UserCreate from "../modules/Users/UserCreate";
 import UserEdit from "../modules/Users/UserEdit";
-import Editor from "./../modules/GlobalEditor";
-import GlobalSettings from "./../modules/GlobalSettings";
-import AnalyticsSettings from "../modules/Analytics";
-import FramePreview from "../modules/FramePreview";
-import FileDrive from "../modules/FileDrive";
-import FormList from "../modules/Forms/FormList";
-import FormEditor from "../modules/Forms/FormEditor";
-import FormCategoriesList from "../modules/Forms/FormCategoriesList";
-import MediaGallery from "../modules/MediaGallery";
-import ActivityLog from "../modules/ActivityLog";
 
 export default [
 	{
@@ -37,27 +37,43 @@ export default [
 	{
 		path: `/data/pages/editor`,
 		component: Editor,
+		name: "New Page Editor",
+		showInNav: false,
+		hideNav: true,
+		permission: "global.globalData.createAllGlobalData",
+	},
+	{
+		path: `/data/pages/editor/:pageID`,
+		component: Editor,
 		name: "Page Editor",
 		showInNav: false,
 		hideNav: true,
 		permission: "global.globalData.readGlobalData",
 	},
 	{
-		path: `/data/pages/editor/new`,
-		component: Editor,
-		name: "New Page Editor",
+		path: "/data/:id/content/:contentId",
+		component: StructuredDataForm,
 		showInNav: false,
+		name: "StructuredData Item",
+		permission: "global.globalData.readGlobalData",
 		hideNav: true,
-		permission: "global.globalData.createAllGlobalData",
 	},
 	{
-		path: "/data/:id/editor",
-		component: StructuredData,
+		path: "/data/:id/content",
+		component: StructuredDataForm,
 		showInNav: false,
 		name: "New StructuredData",
 		permission: "global.globalData.readGlobalData",
 		hideNav: true,
 	},
+	{
+		path: "/data/:id",
+		component: StructuredDataList,
+		showInNav: false,
+		name: "StructuredData List",
+		permission: "global.globalData.accessToGlobalData",
+		hideNav: true,
+	},
 	{
 		path: "/categories",
 		component: CategoriesList,

package/src/routes/site.tsx

@@ -1,25 +1,26 @@
-import Menus from "./../modules/Navigation/Menus";
+import CategoriesList from "./../modules/Categories/CategoriesList";
+import Content from "./../modules/Content";
+import FileDrive from "./../modules/FileDrive";
+import FormCategoriesList from "../modules/Forms/FormCategoriesList";
+import FormEditor from "../modules/Forms/FormEditor";
+import FormList from "../modules/Forms/FormList";
+import MediaGallery from "../modules/MediaGallery";
 import Defaults from "./../modules/Navigation/Defaults";
 import DefaultsEditor from "../modules/Navigation/Defaults/DefaultsEditor";
+import Menus from "./../modules/Navigation/Menus";
 import Editor from "./../modules/PageEditor";
-import Content from "./../modules/Content";
-import ContentTypes from "./../modules/Settings/ContentTypes";
 import Settings from "./../modules/Settings";
-import CategoriesList from "./../modules/Categories/CategoriesList";
-import StructuredData from "./../modules/StructuredData";
-import SeoAnalyticsSettings from "./../modules/Settings/SeoAnalyticsSettings";
+import ContentTypes from "./../modules/Settings/ContentTypes";
 import TemplateEditor from "../modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor";
+import Integrations from "./../modules/Settings/Integrations";
+import IntegrationForm from "./../modules/Settings/Integrations/IntegrationForm";
+import SeoAnalyticsSettings from "./../modules/Settings/SeoAnalyticsSettings";
+import StructuredDataForm from "./../modules/StructuredData/Form";
+import StructuredDataList from "./../modules/StructuredData/StructuredDataList";
 import Users from "./../modules/Users";
+import Profile from "./../modules/Users/Profile";
 import UserCreate from "./../modules/Users/UserCreate";
 import UserEdit from "./../modules/Users/UserEdit";
-import Profile from "./../modules/Users/Profile";
-import Integrations from "./../modules/Settings/Integrations";
-import IntegrationForm from "./../modules/Settings/Integrations/IntegrationForm";
-import FileDrive from "./../modules/FileDrive";
-import FormList from "../modules/Forms/FormList";
-import FormEditor from "../modules/Forms/FormEditor";
-import FormCategoriesList from "../modules/Forms/FormCategoriesList";
-import MediaGallery from "../modules/MediaGallery";
 
 const BASE_PATH = "/sites";
 
@@ -35,18 +36,18 @@ export default [
 	{
 		path: `${BASE_PATH}/pages/editor`,
 		component: Editor,
-		name: "Page Editor",
+		name: "New Page Editor",
 		showInNav: false,
 		hideNav: true,
-		permission: "content.accessToPages",
+		permission: "content.createPages",
 	},
 	{
-		path: `${BASE_PATH}/pages/editor/new`,
+		path: `${BASE_PATH}/pages/editor/:pageID`,
 		component: Editor,
-		name: "New Page Editor",
+		name: "Page Editor",
 		showInNav: false,
 		hideNav: true,
-		permission: "content.createPages",
+		permission: "content.accessToPages",
 	},
 	{
 		path: `${BASE_PATH}/categories`,
@@ -57,14 +58,32 @@ export default [
 		permission: "categories.accessToSiteCategories",
 	},
 	{
-		path: `${BASE_PATH}/data/:id/editor`,
-		component: StructuredData,
+		path: `${BASE_PATH}/data/:id/content/:contentId`,
+		component: StructuredDataForm,
+		showInNav: false,
+		icon: "",
+		name: "StructuredData Item",
+		permission: "content.accessToPages",
+		hideNav: true,
+	},
+	{
+		path: `${BASE_PATH}/data/:id/content`,
+		component: StructuredDataForm,
 		showInNav: false,
 		icon: "",
 		name: "New StructuredData",
 		permission: "content.accessToPages",
 		hideNav: true,
 	},
+	{
+		path: `${BASE_PATH}/data/:id`,
+		component: StructuredDataList,
+		showInNav: false,
+		icon: "",
+		name: "StructuredData List",
+		permission: "content.accessToPages",
+		hideNav: true,
+	},
 	{ path: `${BASE_PATH}/profile`, component: Profile, name: "Profile", showInNav: false, icon: "User" },
 	{
 		path: `${BASE_PATH}/navigations`,

package/src/storeRegistry.ts

@@ -0,0 +1,5 @@
+let _store: any = null;
+export const setStore = (store: any): void => {
+	_store = store;
+};
+export const getStore = (): any => _store;

package/src/modules/StructuredData/index.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
-
-import StructuredDataList from "./StructuredDataList";
-import Form from "./Form";
-
-const StructuredData = (): JSX.Element => {
-	return (
-		<Switch>
-			<Route exact path="/data/:id" component={StructuredDataList} />
-			<Route exact path="/data/pages/editor" />
-			<Route exact path="/data/:id/editor" component={Form} />
-			<Route exact path="/sites/data/:id/editor" component={Form} />
-		</Switch>
-	);
-};
-
-export default StructuredData;