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

Signed-off-by: Jeremy Clements <[email protected]>
hpcc-systems · Oct 25, 2023 · 424b323 · 424b323
1 parent 472e200
commit 424b323
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 12 deletions.
diff --git a/esp/src/eclwatch/stub.js b/esp/src/eclwatch/stub.js
@@ -30,7 +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();
+    const store = KeyValStore.sessionKeyValStore();
     store.getEx(BuildInfo.ModernMode, { defaultValue: String(true) }).then(modernMode => {
         if (modernMode === String(true) && hpccWidget !== "IFrameWidget") {
             switch (hpccWidget) {

diff --git a/esp/src/src-react/components/Title.tsx b/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));

diff --git a/esp/src/src-react/components/controls/ComingSoon.tsx b/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) {

diff --git a/esp/src/src-react/hooks/platform.ts b/esp/src/src-react/hooks/platform.ts
@@ -2,7 +2,8 @@ import * as React from "react";
 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 +67,28 @@ export function useLogicalClusters(): [TpLogicalClusterQuery.TpLogicalCluster[]
 
     return [targetClusters, defaultCluster];
 }
+
+export function useModernMode(): {
+    modernMode: string;
+    setModernMode: (value: string) => void;
+} {
+    const userStore = userKeyValStore();
+    const sessionStore = sessionKeyValStore();
+
+    const modernMode = React.useRef(String(true));
+    const setModernMode = React.useCallback((value) => {
+        sessionStore.set(ModernMode, value);
+        userStore.set(ModernMode, value);
+    }, []);
+
+    React.useEffect(() => {
+        sessionStore.get(ModernMode).then(async value => {
+            modernMode.current = value;
+            if (!!modernMode) {
+                modernMode.current = await userStore.getEx(ModernMode, { defaultValue: String(true) });
+            }
+        });
+    }, []);
+
+    return { modernMode: modernMode.current, setModernMode };
+}
diff --git a/esp/src/src-react/index.tsx b/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 } from "src/KeyValStore";
 import { ModernMode } from "src/BuildInfo";
 import { ECLWatchLogger } from "./hooks/logging";
 
@@ -31,7 +31,7 @@ dojoConfig.urlInfo = {
 };
 dojoConfig.disableLegacyHashing = true;
 
-const store = userKeyValStore();
+const store = sessionKeyValStore();
 store.getEx(ModernMode, { defaultValue: String(true) }).then(async modernMode => {
     if (modernMode === String(false)) {
         window.location.replace("/esp/files/stub.htm");