HPCC-30535 ECL Watch allow v5 and v9 UI in different tabs

Signed-off-by: Jeremy Clements <[email protected]>

esp/src/eclwatch/stub.js

@@ -30,8 +30,14 @@ define([
     const params = ioQuery.queryToObject(dojo.doc.location.search.substr((dojo.doc.location.search.substr(0, 1) === "?" ? 1 : 0)));
     const hpccWidget = params.Widget ? params.Widget : "HPCCPlatformWidget";
 
-    const store = KeyValStore.userKeyValStore();
-    store.getEx(BuildInfo.ModernMode, { defaultValue: String(true) }).then(modernMode => {
+    const sessionStore = KeyValStore.sessionKeyValStore();
+    const userStore = KeyValStore.userKeyValStore();
+    Promise.all([
+        sessionStore.get(BuildInfo.ModernMode),
+        userStore.getEx(BuildInfo.ModernMode, { defaultValue: String(true) })
+    ]).then(([sessionModernMode, userModernMode]) => {
+        return sessionModernMode ?? userModernMode;
+    }).then(modernMode => {
         if (modernMode === String(true) && hpccWidget !== "IFrameWidget") {
             switch (hpccWidget) {
                 case "WUDetailsWidget":

esp/src/src-react/components/Title.tsx

@@ -8,12 +8,11 @@ import { cookie } from "dojo/main";
 
 import nlsHPCC from "src/nlsHPCC";
 import * as Utility from "src/Utility";
-import { ModernMode } from "src/BuildInfo";
 
 import { useBanner } from "../hooks/banner";
 import { useECLWatchLogger } from "../hooks/logging";
-import { useBuildInfo } from "../hooks/platform";
-import { useGlobalStore, useUserStore } from "../hooks/store";
+import { useBuildInfo, useModernMode } from "../hooks/platform";
+import { useGlobalStore } from "../hooks/store";
 import { useMyAccount, useUserSession } from "../hooks/user";
 import { replaceUrl } from "../util/history";
 
@@ -71,7 +70,7 @@ export const DevTitle: React.FunctionComponent<DevTitleProps> = ({
 
     const [log, logLastUpdated] = useECLWatchLogger();
 
-    const [_modernMode, setModernMode] = useUserStore(ModernMode, String(true));
+    const { setModernMode } = useModernMode();
     const onTechPreviewClick = React.useCallback(
         (ev?: React.MouseEvent<HTMLButtonElement>, item?: IContextualMenuItem): void => {
             setModernMode(String(false));

esp/src/src-react/components/controls/ComingSoon.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
 import { IStyle, Toggle } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
-import { ModernMode } from "src/BuildInfo";
-import { useUserStore } from "../../hooks/store";
-import { useBuildInfo } from "../../hooks/platform";
+import { useBuildInfo, useModernMode } from "../../hooks/platform";
 
 const legacyIndex = {};
 const modernIndex = {};
@@ -75,7 +73,7 @@ export const ComingSoon: React.FunctionComponent<ComingSoon> = ({
 }) => {
 
     const [, { opsCategory }] = useBuildInfo();
-    const [modernMode, setModernMode] = useUserStore(ModernMode, String(defaultValue));
+    const { modernMode, setModernMode } = useModernMode();
 
     React.useEffect(() => {
         if (value !== undefined) {

esp/src/src-react/hooks/platform.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
+import { useConst } from "@fluentui/react-hooks";
 import { scopedLogger } from "@hpcc-js/util";
 import { Topology, TpLogicalClusterQuery } from "@hpcc-js/comms";
 import { getBuildInfo, BuildInfo } from "src/Session";
-import { cmake_build_type, containerized } from "src/BuildInfo";
+import { cmake_build_type, containerized, ModernMode } from "src/BuildInfo";
+import { sessionKeyValStore, userKeyValStore } from "src/KeyValStore";
 
 const logger = scopedLogger("src-react/hooks/platform.ts");
 
@@ -66,3 +68,32 @@ export function useLogicalClusters(): [TpLogicalClusterQuery.TpLogicalCluster[]
 
     return [targetClusters, defaultCluster];
 }
+
+export function useModernMode(): {
+    modernMode: string;
+    setModernMode: (value: string) => void;
+} {
+    const userStore = useConst(() => userKeyValStore());
+    const sessionStore = useConst(() => sessionKeyValStore());
+
+    const [modernMode, setModernMode] = React.useState<string>("");
+
+    React.useEffect(() => {
+        Promise.all([
+            sessionStore.get(ModernMode),
+            userStore.getEx(ModernMode, { defaultValue: String(true) })
+        ]).then(([sessionModernMode, userModernMode]) => {
+            return sessionModernMode ?? userModernMode;
+        }).then(mode => {
+            setModernMode(String(mode));
+        })
+    }, [sessionStore, userStore]);
+
+    React.useEffect(() => {
+        if (modernMode === "") return;
+        sessionStore.set(ModernMode, modernMode);
+        userStore.set(ModernMode, modernMode);
+    }, [modernMode, sessionStore, userStore]);
+
+    return { modernMode, setModernMode };
+}

esp/src/src-react/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { initializeIcons } from "@fluentui/react";
 import { scopedLogger } from "@hpcc-js/util";
-import { cookieKeyValStore, userKeyValStore } from "src/KeyValStore";
+import { cookieKeyValStore, sessionKeyValStore, userKeyValStore } from "src/KeyValStore";
 import { ModernMode } from "src/BuildInfo";
 import { ECLWatchLogger } from "./hooks/logging";
 
@@ -31,8 +31,14 @@ dojoConfig.urlInfo = {
 };
 dojoConfig.disableLegacyHashing = true;
 
-const store = userKeyValStore();
-store.getEx(ModernMode, { defaultValue: String(true) }).then(async modernMode => {
+const sessionStore = sessionKeyValStore();
+const userStore = userKeyValStore();
+Promise.all([
+    sessionStore.get(ModernMode),
+    userStore.getEx(ModernMode, { defaultValue: String(true) })
+]).then(([sessionModernMode, userModernMode]) => {
+    return sessionModernMode ?? userModernMode;
+}).then(async modernMode => {
     if (modernMode === String(false)) {
         window.location.replace("/esp/files/stub.htm");
     } else {