From d49c7e9a76379d12b96b3ceee0bd59896ba697cd Mon Sep 17 00:00:00 2001
From: Gordon Smith <GordonJSmith@gmail.com>
Date: Wed, 30 Oct 2024 10:50:08 +0000
Subject: [PATCH] HPCC-32834 Refactor WU Details fullscreen

Move fullscreen logic to WU Details to allow switching tabs in fullscreen mode

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
---
 esp/src/src-react/components/Helpers.tsx      |   7 +-
 esp/src/src-react/components/Metrics.tsx      |  45 ++---
 esp/src/src-react/components/Resources.tsx    |   8 +-
 esp/src/src-react/components/Results.tsx      |   9 +-
 .../src-react/components/WorkunitDetails.tsx  | 159 +++++++++++-------
 .../src-react/components/WorkunitSummary.tsx  |  15 +-
 esp/src/src-react/routes.tsx                  |   8 +-
 esp/src/src-react/util/hashUrl.ts             | 141 ++++++++++++++++
 esp/src/src-react/util/history.ts             |  32 ++--
 9 files changed, 293 insertions(+), 131 deletions(-)
 create mode 100644 esp/src/src-react/util/hashUrl.ts

diff --git a/esp/src/src-react/components/Helpers.tsx b/esp/src/src-react/components/Helpers.tsx
index 73fed185eca..972a7453a4c 100644
--- a/esp/src/src-react/components/Helpers.tsx
+++ b/esp/src/src-react/components/Helpers.tsx
@@ -6,6 +6,8 @@ import { HelperRow, useWorkunitHelpers } from "../hooks/workunit";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
+import { SearchParams } from "../util/hashUrl";
+import { hashHistory } from "../util/history";
 
 function canShowContent(type: string) {
     switch (type) {
@@ -135,8 +137,11 @@ export const Helpers: React.FunctionComponent<HelpersProps> = ({
                 formatter: (Type, row) => {
                     const target = getTarget(row.id, row);
                     if (target) {
+                        const searchParams = new SearchParams(hashHistory.location.search);
+                        searchParams.param("mode", encodeURIComponent(target.sourceMode));
+                        searchParams.param("src", encodeURIComponent(target.url));
                         const linkText = Type.replace("Slave", "Worker") + (row?.Description ? " (" + row.Description + ")" : "");
-                        return <Link href={`#/workunits/${row?.workunit?.Wuid}/helpers/${row.Type}?mode=${encodeURIComponent(target.sourceMode)}&src=${encodeURIComponent(target.url)}`}>{linkText}</Link>;
+                        return <Link href={`#/workunits/${row?.workunit?.Wuid}/helpers/${row.Type}?${searchParams.serialize()}`}>{linkText}</Link>;
                     }
                     return Type;
                 }
diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
index 3d1f91cc2bd..d16a0d00fc1 100644
--- a/esp/src/src-react/components/Metrics.tsx
+++ b/esp/src/src-react/components/Metrics.tsx
@@ -15,7 +15,7 @@ import { HolyGrail } from "../layouts/HolyGrail";
 import { AutosizeComponent, AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
 import { DockPanel, DockPanelItem, ResetableDockPanel } from "../layouts/DockPanel";
 import { LayoutStatus, MetricGraph, MetricGraphWidget, isGraphvizWorkerResponse, layoutCache } from "../util/metricGraph";
-import { pushUrl as _pushUrl } from "../util/history";
+import { pushUrl } from "../util/history";
 import { debounce } from "../util/throttle";
 import { ErrorBoundary } from "../util/errorBoundary";
 import { ShortVerticalDivider } from "./Common";
@@ -45,7 +45,6 @@ interface MetricsProps {
     queryId?: string;
     parentUrl?: string;
     selection?: string;
-    fullscreen?: boolean;
 }
 
 export const Metrics: React.FunctionComponent<MetricsProps> = ({
@@ -53,8 +52,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     querySet = "",
     queryId = "",
     parentUrl = `/workunits/${wuid}/metrics`,
-    selection,
-    fullscreen = false
+    selection
 }) => {
     const [_uiState, _setUIState] = React.useState({ ...defaultUIState });
     const [selectedMetricsSource, setSelectedMetricsSource] = React.useState<SelectedMetricsSource>("");
@@ -97,24 +95,10 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         }).catch(err => logger.error(err));
     }, [wuid]);
 
-    const pushUrl = React.useCallback((selection?: string, fullscreen?: boolean) => {
-        const selectionStr = selection?.length ? `/${selection}` : "";
-        const fullscreenStr = fullscreen ? "?fullscreen" : "";
-        _pushUrl(`${parentUrl}${selectionStr}${fullscreenStr}`);
-    }, [parentUrl]);
-
-    const pushSelectionUrl = React.useCallback((selection: string) => {
-        pushUrl(selection, fullscreen);
-    }, [fullscreen, pushUrl]);
-
-    const pushFullscreenUrl = React.useCallback((fullscreen: boolean) => {
-        pushUrl(selection, fullscreen);
-    }, [pushUrl, selection]);
-
     const onHotspot = React.useCallback(() => {
         setSelectedMetricsSource("hotspot");
-        pushSelectionUrl(selection);
-    }, [pushSelectionUrl, selection]);
+        pushUrl(`${parentUrl}/${selection}`);
+    }, [parentUrl, selection]);
 
     //  Timeline ---
     const timeline = useConst(() => new WUTimelineNoFetch()
@@ -129,11 +113,11 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                     timeline.selection([]);
                     setSelectedMetricsSource("scopesTable");
                     setScopeFilter(`name:${row[7].__hpcc_id}`);
-                    pushSelectionUrl(row[7].id);
+                    pushUrl(`${parentUrl}/${row[7].id}`);
                 }
             }, true)
             ;
-    }, [pushSelectionUrl, timeline]);
+    }, [parentUrl, timeline]);
 
     React.useEffect(() => {
         if (view.showTimeline) {
@@ -157,10 +141,10 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
             .on("selectionChanged", () => {
                 const selection = metricGraphWidget.selection().filter(id => metricGraph.item(id)).map(id => metricGraph.item(id).id);
                 setSelectedMetricsSource("metricGraphWidget");
-                pushSelectionUrl(selection.join(","));
+                pushUrl(`${parentUrl}/${selection.join(",")}`);
             }, true)
             ;
-    }, [metricGraph, metricGraphWidget, pushSelectionUrl]);
+    }, [metricGraph, metricGraphWidget, parentUrl]);
 
     React.useEffect(() => {
         metricGraph.load(metrics);
@@ -316,8 +300,8 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
 
     const scopesSelectionChanged = React.useCallback((source: SelectedMetricsSource, selection: IScope[]) => {
         setSelectedMetricsSource(source);
-        pushSelectionUrl(selection.map(row => row.__lparam?.id ?? row.id).join(","));
-    }, [pushSelectionUrl]);
+        pushUrl(selection.map(row => row.__lparam?.id ?? row.id).join(","));
+    }, [pushUrl]);
 
     const scopesTable = useConst(() => new ScopesTable()
         .multiSelect(true)
@@ -532,18 +516,13 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                 }]
             }
         },
-        { key: "divider_2", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
-        {
-            key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
-            onClick: () => pushFullscreenUrl(!fullscreen)
-        }
-    ], [dot, formatColumns, fullscreen, metrics, pushFullscreenUrl, wuid]);
+    ], [dot, formatColumns, metrics, wuid]);
 
     const setShowMetricOptionsHook = React.useCallback((show: boolean) => {
         setShowMetricOptions(show);
     }, []);
 
-    return <HolyGrail fullscreen={fullscreen}
+    return <HolyGrail
         header={<>
             <CommandBar items={buttons} farItems={rightButtons} />
             <AutosizeHpccJSComponent widget={timeline} fixedHeight={`${TIMELINE_FIXEDHEIGHT + 8}px`} padding={4} hidden={!view.showTimeline} />
diff --git a/esp/src/src-react/components/Resources.tsx b/esp/src/src-react/components/Resources.tsx
index ccae64dfa5e..b084802d30c 100644
--- a/esp/src/src-react/components/Resources.tsx
+++ b/esp/src/src-react/components/Resources.tsx
@@ -3,7 +3,8 @@ import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResources } from "../hooks/workunit";
-import { updateParam } from "../util/history";
+import { hashHistory, updateParam } from "../util/history";
+import { SearchParams } from "../util/hashUrl";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
@@ -22,7 +23,9 @@ interface ResourcesProps {
 const defaultSort = { attribute: "Wuid", descending: true };
 
 function formatUrl(wuid: string, url: string) {
-    return `#/workunits/${wuid}/resources/content?url=/WsWorkunits/${url}`;
+    const searchParams = new SearchParams(hashHistory.location.search);
+    searchParams.param("url", `/WsWorkunits/${url}`);
+    return `#/workunits/${wuid}/resources/content?${searchParams.serialize()}`;
 }
 
 export const Resources: React.FunctionComponent<ResourcesProps> = ({
@@ -48,6 +51,7 @@ export const Resources: React.FunctionComponent<ResourcesProps> = ({
             },
             DisplayPath: {
                 label: nlsHPCC.Name, sortable: true,
+                width: 800,
                 formatter: (url, row) => {
                     return <Link href={formatUrl(wuid, row.URL)}>{url}</Link>;
                 }
diff --git a/esp/src/src-react/components/Results.tsx b/esp/src/src-react/components/Results.tsx
index 1343c84268d..516103282af 100644
--- a/esp/src/src-react/components/Results.tsx
+++ b/esp/src/src-react/components/Results.tsx
@@ -6,6 +6,7 @@ import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResults } from "../hooks/workunit";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { pivotItemStyle } from "../layouts/pivot";
+import { hashHistory } from "../util/history";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 import { Result } from "./Result";
@@ -44,13 +45,13 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
             Name: {
                 label: nlsHPCC.Name, width: 180, sortable: true,
                 formatter: (Name, row) => {
-                    return <Link href={`#/workunits/${row.Wuid}/outputs/${Name}`}>{Name}</Link>;
+                    return <Link href={`#/workunits/${row.Wuid}/outputs/${Name}${hashHistory.location.search}`}>{Name}</Link>;
                 }
             },
             FileName: {
                 label: nlsHPCC.FileName, sortable: true,
                 formatter: (FileName, row) => {
-                    return <Link href={`#/files/${FileName}`}>{FileName}</Link>;
+                    return <Link href={`#/files/${FileName}${hashHistory.location.search}`}>{FileName}</Link>;
                 }
             },
             Value: {
@@ -80,10 +81,10 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
             key: "open", text: nlsHPCC.Open, disabled: !uiState.hasSelection, iconProps: { iconName: "WindowEdit" },
             onClick: () => {
                 if (selection.length === 1) {
-                    window.location.href = `#/workunits/${wuid}/outputs/${selection[0].Name}`;
+                    window.location.href = `#/workunits/${wuid}/outputs/${selection[0].Name}${hashHistory.location.search}`;
                 } else {
                     for (let i = selection.length - 1; i >= 0; --i) {
-                        window.open(`#/workunits/${wuid}/outputs/${selection[i].Name}`, "_blank");
+                        window.open(`#/workunits/${wuid}/outputs/${selection[i].Name}${hashHistory.location.search}`, "_blank");
                     }
                 }
             }
diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
index 47d632db043..1f7dbe69317 100644
--- a/esp/src/src-react/components/WorkunitDetails.tsx
+++ b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Icon, Shimmer } from "@fluentui/react";
+import { Icon, IconButton, IIconProps, mergeStyleSets, Shimmer, Stack } from "@fluentui/react";
 import { WsWorkunits, WorkunitsService } from "@hpcc-js/comms";
 import { scopedLogger } from "@hpcc-js/util";
 import { SizeMe } from "react-sizeme";
@@ -10,7 +10,8 @@ import { emptyFilter, formatQuery } from "src/ESPWorkunit";
 import { useWorkunit } from "../hooks/workunit";
 import { useDeepEffect } from "../hooks/deepHooks";
 import { DojoAdapter } from "../layouts/DojoAdapter";
-import { parseQuery, pushUrl } from "../util/history";
+import { parseQuery, pushUrl, updateFullscreen } from "../util/history";
+import { useUserTheme } from "../hooks/theme";
 import { WorkunitPersona } from "./controls/StateIcon";
 import { Helpers } from "./Helpers";
 import { IFrame } from "./IFrame";
@@ -31,6 +32,9 @@ import { Metrics } from "./Metrics";
 
 const logger = scopedLogger("src-react/components/WorkunitDetails.tsx");
 
+const FullscreenIcon: IIconProps = { iconName: "FullScreen" };
+const RestoreIcon: IIconProps = { iconName: "ChromeRestore" };
+
 const workunitService = new WorkunitsService({ baseUrl: "" });
 
 type StringStringMap = { [key: string]: string };
@@ -39,6 +43,7 @@ interface WorkunitDetailsProps {
     wuid: string;
     parentUrl?: string;
     tab?: string;
+    fullscreen?: boolean;
     state?: { outputs?: string, metrics?: string, resources?: string, helpers?: string, eclsummary?: string };
     queryParams?: { summary?: StringStringMap, outputs?: StringStringMap, inputs?: StringStringMap, metrics?: StringStringMap, resources?: StringStringMap, helpers?: StringStringMap, logs?: StringStringMap };
 }
@@ -48,6 +53,7 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
     parentUrl = "/workunits",
     tab = "summary",
     state,
+    fullscreen = false,
     queryParams = {}
 }) => {
 
@@ -120,7 +126,8 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
 
     const onTabSelect = React.useCallback((tab: TabInfo) => {
         pushUrl(tab.__state ?? `${parentUrl}/${wuid}/${tab.id}`);
-    }, [parentUrl, wuid]);
+        updateFullscreen(fullscreen);
+    }, [fullscreen, parentUrl, wuid]);
 
     const tabs = React.useMemo((): TabInfo[] => {
         return [{
@@ -173,65 +180,89 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
         }];
     }, [logCount, logsDisabled, workunit?.ApplicationValueCount, workunit?.DebugValueCount, workunit?.GraphCount, workunit?.HelpersCount, workunit?.ResourceURLCount, workunit?.ResultCount, workunit?.SourceFileCount, workunit?.VariableCount, workunit?.WorkflowCount, wuid]);
 
-    return <SizeMe monitorHeight>{({ size }) =>
-        <div style={{ height: "100%" }}>
-            <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
-            <DelayLoadedPanel visible={tab === "summary"} size={size}>
-                <WorkunitSummary wuid={wuid} fullscreen={queryParams.summary?.fullscreen !== undefined} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "variables"} size={size}>
-                <Variables wuid={wuid} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "outputs"} size={size}>
-                {state?.outputs ?
-                    queryParams.outputs?.hasOwnProperty("__legacy") ? <IFrame src={`/WsWorkunits/WUResult?Wuid=${wuid}&ResultName=${state?.outputs}`} height="99%" /> :
-                        queryParams.outputs?.hasOwnProperty("__visualize") ? <DojoAdapter widgetClassID="VizWidget" params={{ Wuid: wuid, Sequence: state?.outputs }} /> :
-                            <Result wuid={wuid} resultName={state?.outputs} filter={queryParams.outputs} /> :
-                    <Results wuid={wuid} />
-                }
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "inputs"} size={size}>
-                <SourceFiles wuid={wuid} filter={queryParams.inputs} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "metrics"} size={size}>
-                <React.Suspense fallback={
-                    <>
-                        <Shimmer />
-                        <Shimmer />
-                        <Shimmer />
-                        <Shimmer />
-                    </>
-                }>
-                    <Metrics wuid={wuid} parentUrl={`${parentUrl}/${wuid}/metrics`} selection={state?.metrics} fullscreen={queryParams.metrics?.fullscreen !== undefined} />
-                </React.Suspense>
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "workflows"} size={size}>
-                <Workflows wuid={wuid} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "queries"} size={size}>
-                <Queries filter={{ WUID: wuid }} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "resources"} size={size}>
-                {state?.resources ?
-                    <FetchEditor mode={queryParams.resources?.mode as any} url={queryParams.resources?.url as string} /> :
-                    <Resources wuid={wuid} preview={queryParams.resources?.preview as any} />
-                }
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "helpers"} size={size}>
-                {state?.helpers ?
-                    <FetchEditor mode={queryParams.helpers?.mode as any} url={queryParams.helpers?.src as string} wuid={queryParams.helpers?.mode?.toLowerCase() === "ecl" ? wuid : ""} /> :
-                    <Helpers wuid={wuid} />
-                }
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "logs"} size={size}>
-                <Logs wuid={wuid} filter={queryParams.logs} setLogCount={setLogCount} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "eclsummary"} size={size}>
-                <ECLArchive wuid={wuid} parentUrl={`${parentUrl}/${wuid}/eclsummary`} selection={state?.eclsummary} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "xml"} size={size}>
-                <WUXMLSourceEditor wuid={wuid} />
-            </DelayLoadedPanel>
-        </div>
-    }</SizeMe>;
+    const { themeV9 } = useUserTheme();
+    const layoutStyles = React.useMemo(() => mergeStyleSets({
+        fullscreen: {
+            position: "fixed",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            background: themeV9.colorNeutralBackground1,
+        },
+        normal: {
+            height: "100%"
+        }
+    }), [themeV9.colorNeutralBackground1]);
+
+    return <div className={fullscreen ? layoutStyles.fullscreen : layoutStyles.normal}>
+        <SizeMe monitorHeight>{({ size }) =>
+            <div style={{ height: "100%" }}>
+                <Stack horizontal>
+                    <Stack.Item grow>
+                        <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
+                    </Stack.Item>
+                    <Stack.Item align="center">
+                        <IconButton iconProps={fullscreen ? RestoreIcon : FullscreenIcon} onClick={() => updateFullscreen(!fullscreen)} />
+                    </Stack.Item>
+                </Stack>
+                <DelayLoadedPanel visible={tab === "summary"} size={size}>
+                    <WorkunitSummary wuid={wuid} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "variables"} size={size}>
+                    <Variables wuid={wuid} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "outputs"} size={size}>
+                    {state?.outputs ?
+                        queryParams.outputs?.hasOwnProperty("__legacy") ? <IFrame src={`/ WsWorkunits / WUResult ? Wuid = ${wuid} & ResultName= ${state?.outputs}`} height="99%" /> :
+                            queryParams.outputs?.hasOwnProperty("__visualize") ? <DojoAdapter widgetClassID="VizWidget" params={{ Wuid: wuid, Sequence: state?.outputs }} /> :
+                                <Result wuid={wuid} resultName={state?.outputs} filter={queryParams.outputs} /> :
+                        <Results wuid={wuid} />
+                    }
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "inputs"} size={size}>
+                    <SourceFiles wuid={wuid} filter={queryParams.inputs} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "metrics"} size={size}>
+                    <React.Suspense fallback={
+                        <>
+                            <Shimmer />
+                            <Shimmer />
+                            <Shimmer />
+                            <Shimmer />
+                        </>
+                    }>
+                        <Metrics wuid={wuid} parentUrl={`${parentUrl}/${wuid}/metrics`} selection={state?.metrics} />
+                    </React.Suspense>
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "workflows"} size={size}>
+                    <Workflows wuid={wuid} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "queries"} size={size}>
+                    <Queries filter={{ WUID: wuid }} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "resources"} size={size}>
+                    {state?.resources ?
+                        <FetchEditor mode={queryParams.resources?.mode as any} url={queryParams.resources?.url as string} /> :
+                        <Resources wuid={wuid} preview={queryParams.resources?.preview as any} />
+                    }
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "helpers"} size={size}>
+                    {state?.helpers ?
+                        <FetchEditor mode={queryParams.helpers?.mode as any} url={queryParams.helpers?.src as string} wuid={queryParams.helpers?.mode?.toLowerCase() === "ecl" ? wuid : ""} /> :
+                        <Helpers wuid={wuid} />
+                    }
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "logs"} size={size}>
+                    <Logs wuid={wuid} filter={queryParams.logs} setLogCount={setLogCount} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "eclsummary"} size={size}>
+                    <ECLArchive wuid={wuid} parentUrl={`${parentUrl}/${wuid}/eclsummary`} selection={state?.eclsummary} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "xml"} size={size}>
+                    <WUXMLSourceEditor wuid={wuid} />
+                </DelayLoadedPanel>
+            </div>
+        }</SizeMe>
+    </div>;
 };
diff --git a/esp/src/src-react/components/WorkunitSummary.tsx b/esp/src/src-react/components/WorkunitSummary.tsx
index a519dd1a36c..85b00921166 100644
--- a/esp/src/src-react/components/WorkunitSummary.tsx
+++ b/esp/src/src-react/components/WorkunitSummary.tsx
@@ -27,12 +27,10 @@ interface MessageBarContent {
 
 interface WorkunitSummaryProps {
     wuid: string;
-    fullscreen?: boolean;
 }
 
 export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
-    wuid,
-    fullscreen = false
+    wuid
 }) => {
 
     const [workunit, , , , refresh] = useWorkunit(wuid, true);
@@ -174,13 +172,6 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
         },
     ], [_protected, canDelete, canDeschedule, canReschedule, canSave, description, jobname, refresh, refreshSavings, setShowDeleteConfirm, showMessageBar, workunit, wuid]);
 
-    const rightButtons = React.useMemo((): ICommandBarItemProps[] => [
-        {
-            key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
-            onClick: () => pushUrl(`/workunits/${wuid}${fullscreen ? "" : "?fullscreen"}`)
-        }
-    ], [fullscreen, wuid]);
-
     const serviceNames = React.useMemo(() => {
         return workunit?.ServiceNames?.Item?.join("\n") || "";
     }, [workunit?.ServiceNames?.Item]);
@@ -200,14 +191,14 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
         }, 0) || 0;
     }, [exceptions]);
 
-    return <HolyGrail fullscreen={fullscreen}
+    return <HolyGrail
         main={<>
             <ReflexContainer orientation="horizontal">
                 <ReflexElement>
                     <div className="pane-content">
                         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
                             <Sticky stickyPosition={StickyPositionType.Header}>
-                                <CommandBar items={buttons} farItems={rightButtons} />
+                                <CommandBar items={buttons} />
                                 {messageBarContent &&
                                     <MessageBar messageBarType={messageBarContent.type} dismissButtonAriaLabel={nlsHPCC.Close} onDismiss={dismissMessageBar} >
                                         {messageBarContent.message}
diff --git a/esp/src/src-react/routes.tsx b/esp/src/src-react/routes.tsx
index e73d78d9823..f90d5757cbd 100644
--- a/esp/src/src-react/routes.tsx
+++ b/esp/src/src-react/routes.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Route, RouterContext } from "universal-router";
-import { initialize, parsePage, parseSearch, parseSort, pushUrl, replaceUrl } from "./util/history";
+import { initialize, parsePage, parseSearch, parseSort, parseFullscreen, pushUrl, replaceUrl } from "./util/history";
 
 declare const dojoConfig;
 
@@ -25,17 +25,17 @@ const workunitsChildren: Route[] = [
     },
     {
         path: "/:Wuid", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} queryParams={{ summary: parseSearch(ctx.search) as any }} />;
+            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} fullscreen={parseFullscreen(ctx.search)} queryParams={{ summary: parseSearch(ctx.search) as any }} />;
         })
     },
     {
         path: "/:Wuid/:Tab", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} tab={params.Tab as string} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
+            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} fullscreen={parseFullscreen(ctx.search)} tab={params.Tab as string} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
         })
     },
     {
         path: "/:Wuid/:Tab/:State", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} tab={params.Tab as string} state={{ [params.Tab as string]: (params.State as string) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
+            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} fullscreen={parseFullscreen(ctx.search)} tab={params.Tab as string} state={{ [params.Tab as string]: (params.State as string) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
         })
     },
 ];
diff --git a/esp/src/src-react/util/hashUrl.ts b/esp/src/src-react/util/hashUrl.ts
new file mode 100644
index 00000000000..43dcbf40839
--- /dev/null
+++ b/esp/src/src-react/util/hashUrl.ts
@@ -0,0 +1,141 @@
+import { parse, stringify } from "query-string";
+
+class SortBy {
+    readonly attribute: string = "";
+    readonly descending: boolean = false;
+
+    constructor(sortBy: string);
+    constructor(attribute: string, descending: boolean);
+    constructor(attribute_sortBy: string, descending: boolean = false) {
+        if (descending === undefined) {
+            this.attribute = attribute_sortBy;
+            this.descending = false;
+            if (attribute_sortBy.charAt(0) === "-") {
+                this.attribute = attribute_sortBy.substring(1);
+                this.descending = true;
+            }
+        } else {
+            this.attribute = attribute_sortBy;
+            this.descending = descending;
+        }
+    }
+
+    serialize(): string {
+        return (this.descending ? "-" : "") + this.attribute;
+    }
+
+    static deserialize(sortBy: string): SortBy {
+        return new SortBy(sortBy);
+    }
+
+}
+
+export type ParamValue = string | boolean | number | null;
+export interface Params {
+    sortBy?: string;
+    pageNum?: number;
+    fullscreen?: boolean;
+    [key: string]: ParamValue | Array<ParamValue>;
+}
+
+export class SearchParams {
+    readonly params: Params = {};
+
+    constructor();
+    constructor(search: string);
+    constructor(params: Params);
+    constructor(search?: string | Params) {
+        if (typeof search === "string") {
+            this.params = parse(search, { parseBooleans: true, parseNumbers: true });
+        } else if (search) {
+            this.params = search;
+        }
+    }
+
+    serialize(): string {
+        return stringify(this.params, {
+            encode: false,
+            skipEmptyString: true
+        });
+    }
+
+    static deserialize(search: string): SearchParams {
+        return new SearchParams(search);
+    }
+
+    sortBy(): SortBy | undefined;
+    sortBy(sortBy: SortBy | null): this;
+    sortBy(sortBy?: SortBy | null): SortBy | undefined | this {
+        if (sortBy !== undefined) {
+            if (sortBy === null) {
+                delete this.params["sortBy"];
+            } else {
+                this.params["sortBy"] = sortBy.serialize();
+            }
+            return this;
+        }
+        return this.params["sortBy"] ? SortBy.deserialize(this.params["sortBy"]) : undefined;
+    }
+
+    pageNum(): number | undefined;
+    pageNum(pageNum: number | null): this;
+    pageNum(pageNum?: number | null): number | undefined | this {
+        if (pageNum !== undefined) {
+            if (pageNum === null) {
+                delete this.params["pageNum"];
+            } else {
+                this.params["pageNum"] = pageNum;
+            }
+            return this;
+        }
+        return this.params["pageNum"];
+    }
+
+    fullscreen(): boolean | undefined;
+    fullscreen(fullscreen: boolean): this;
+    fullscreen(fullscreen?: boolean): boolean | undefined | this {
+        if (fullscreen !== undefined) {
+            if (fullscreen === false) {
+                delete this.params["fullscreen"];
+            } else {
+                this.params["fullscreen"] = null;
+            }
+            return this;
+        }
+        return this.params["fullscreen"] === null || this.params["fullscreen"] === true;
+    }
+
+    param(key: string): ParamValue | ParamValue[] | undefined;
+    param(key: string, val: ParamValue | null): this;
+    param(key: string, val?: ParamValue | null): ParamValue | ParamValue[] | undefined | this {
+        if (val !== undefined) {
+            if (val === null) {
+                delete this.params[key];
+            } else {
+                switch (key) {
+                    case "sortBy":
+                        this.sortBy(new SortBy(val as string));
+                        break;
+                    case "pageNum":
+                        this.pageNum(val as number);
+                        break;
+                    case "fullscreen":
+                        this.fullscreen(val as boolean);
+                        break;
+                    default:
+                        this.params[key] = val;
+                }
+            }
+            return this;
+        }
+        switch (key) {
+            case "sortBy":
+                return this.sortBy()?.serialize();
+            case "pageNum":
+                return this.pageNum(val as number);
+            case "fullscreen":
+                return this.fullscreen();
+        }
+        return this.params[key];
+    }
+}
diff --git a/esp/src/src-react/util/history.ts b/esp/src/src-react/util/history.ts
index 6f54845db45..009a122a80f 100644
--- a/esp/src/src-react/util/history.ts
+++ b/esp/src/src-react/util/history.ts
@@ -3,8 +3,9 @@ import { parse, ParsedQuery, pick, stringify } from "query-string";
 import { hashSum, scopedLogger } from "@hpcc-js/util";
 import { userKeyValStore } from "src/KeyValStore";
 import { QuerySortItem } from "src/store/Store";
+import { ParamValue, SearchParams } from "./hashUrl";
 
-const logger = scopedLogger("../util/history.ts");
+const logger = scopedLogger("src-react/util/history.ts");
 
 let g_router: UniversalRouter;
 
@@ -79,6 +80,17 @@ export function updatePage(pageNum: string) {
     updateParam("pageNum", pageNum);
 }
 
+export function parseFullscreen(_: string): boolean {
+    const searchParams = new SearchParams(_);
+    return searchParams.fullscreen();
+}
+
+export function updateFullscreen(fullscreen: boolean) {
+    const searchParams = new SearchParams(hashHistory.location.search);
+    searchParams.fullscreen(fullscreen);
+    updateSearch(searchParams);
+}
+
 interface HistoryLocation {
     pathname: string;
     search: string;
@@ -148,6 +160,8 @@ class History<S extends object = object> {
     }
 
     push(to: { pathname?: string, search?: string }) {
+        to.pathname = to.pathname ?? this.location.pathname;
+        to.search = to.search ?? this.location.search;
         const newHash = this.fixHash(`${this.trimRightSlash(to.pathname || this.location.pathname)}${to.search || ""}`);
         if (window.location.hash !== newHash) {
             globalHistory.pushState(undefined, "", newHash);
@@ -209,8 +223,8 @@ export function pushSearch(_: object) {
     });
 }
 
-export function updateSearch(_: object) {
-    const search = stringify(_ as any);
+export function updateSearch(searchParams: SearchParams) {
+    const search = searchParams.serialize();
     hashHistory.replace({
         search: search ? "?" + search : ""
     });
@@ -259,14 +273,10 @@ export function pushParams(search: { [key: string]: string | string[] | number |
     pushSearch(calcParams(search, keepEmpty));
 }
 
-export function updateParam(key: string, val?: string | string[] | number | boolean) {
-    const params = parseQuery(hashHistory.location.search);
-    if (val === undefined) {
-        delete params[key];
-    } else {
-        params[key] = val;
-    }
-    updateSearch(params);
+export function updateParam(key: string, val?: ParamValue) {
+    const searchParams = new SearchParams(hashHistory.location.search);
+    searchParams.param(key, val);
+    updateSearch(searchParams);
 }
 
 export function updateState(key: string, val?: string | string[] | number | boolean) {