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,7 @@ 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 => {
+    Session.fetchModernMode().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, WsTopology } from "@hpcc-js/comms";
-import { getBuildInfo, BuildInfo } from "src/Session";
-import { cmake_build_type, containerized } from "src/BuildInfo";
+import { getBuildInfo, BuildInfo, fetchModernMode } from "src/Session";
+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,27 @@ export function useLogicalClusters(): [WsTopology.TpLogicalCluster[] | undefined
 
     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(() => {
+        fetchModernMode().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,8 +2,8 @@ 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 { ModernMode } from "src/BuildInfo";
+import { cookieKeyValStore } from "src/KeyValStore";
+import { fetchModernMode } from "src/Session";
 import { ECLWatchLogger } from "./hooks/logging";
 
 import "css!dijit-themes/flat/flat.css";
@@ -31,8 +31,7 @@ dojoConfig.urlInfo = {
 };
 dojoConfig.disableLegacyHashing = true;
 
-const store = userKeyValStore();
-store.getEx(ModernMode, { defaultValue: String(true) }).then(async modernMode => {
+fetchModernMode().then(async modernMode => {
     if (modernMode === String(false)) {
         window.location.replace("/esp/files/stub.htm");
     } else {

esp/src/src/Session.ts

@@ -3,8 +3,9 @@ import * as xhr from "dojo/request/xhr";
 import * as topic from "dojo/topic";
 import { format as d3Format } from "@hpcc-js/common";
 import { SMCService } from "@hpcc-js/comms";
-import { cookieKeyValStore } from "src/KeyValStore";
+import { cookieKeyValStore, sessionKeyValStore, userKeyValStore } from "src/KeyValStore";
 import { singletonDebounce } from "../src-react/util/throttle";
+import { ModernMode } from "./BuildInfo";
 import * as ESPUtil from "./ESPUtil";
 import { scopedLogger } from "@hpcc-js/util";
 
@@ -21,7 +22,18 @@ let _prevReset = Date.now();
 
 declare const dojoConfig;
 
-const userStore = cookieKeyValStore();
+const cookieStore = cookieKeyValStore();
+const sessionStore = sessionKeyValStore();
+const userStore = userKeyValStore();
+
+export async function fetchModernMode(): Promise<string> {
+    return Promise.all([
+        sessionStore.get(ModernMode),
+        userStore.getEx(ModernMode, { defaultValue: String(true) })
+    ]).then(([sessionModernMode, userModernMode]) => {
+        return sessionModernMode ?? userModernMode;
+    });
+}
 
 const smc = new SMCService({ baseUrl: "" });
 
@@ -96,7 +108,7 @@ export function fireIdle() {
 }
 
 async function resetESPTime() {
-    const userSession = userStore.getAll();
+    const userSession = cookieStore.getAll();
     if (!userSession || !userSession["ECLWatchUser"] || !userSession["Status"] || userSession["Status"] === "Locked") return;
     if (Date.now() - _prevReset > SESSION_RESET_FREQ) {
         _prevReset = Date.now();