diff --git a/esp/src/eclwatch/stub.js b/esp/src/eclwatch/stub.js index cd91622159f..f56fe35a010 100644 --- a/esp/src/eclwatch/stub.js +++ b/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": diff --git a/esp/src/src-react/components/Title.tsx b/esp/src/src-react/components/Title.tsx index b482d08fadd..fe0ee520aea 100644 --- 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 = ({ const [log, logLastUpdated] = useECLWatchLogger(); - const [_modernMode, setModernMode] = useUserStore(ModernMode, String(true)); + const { setModernMode } = useModernMode(); const onTechPreviewClick = React.useCallback( (ev?: React.MouseEvent, 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 index 2ebc88d4562..211c667d70a 100644 --- 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 = ({ }) => { 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 index 9a278eaff34..d98f74f545e 100644 --- a/esp/src/src-react/hooks/platform.ts +++ b/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(""); + + 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 }; +} \ No newline at end of file diff --git a/esp/src/src-react/index.tsx b/esp/src/src-react/index.tsx index 3203e3f27ed..99a2d0b09c7 100644 --- a/esp/src/src-react/index.tsx +++ b/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 { diff --git a/esp/src/src/Session.ts b/esp/src/src/Session.ts index 6d86536a919..06de1672db0 100644 --- a/esp/src/src/Session.ts +++ b/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 { + 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();