fix: Propagate URL changes to react state

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx

@@ -10,6 +10,7 @@ import {Loading} from '../../../shared/components/loading';
 import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {Utils} from '../../../shared/utils';
 import {SubmitWorkflowPanel} from '../../../workflows/components/submit-workflow-panel';
 import {ClusterWorkflowTemplateEditor} from '../cluster-workflow-template-editor';
@@ -30,6 +31,14 @@ export const ClusterWorkflowTemplateDetails = ({history, location, match}: Route
     const [template, setTemplate] = useState<ClusterWorkflowTemplate>();
     const [edited, setEdited] = useState(false);
 
+    useEffect(
+        useQueryParams(history, p => {
+            setSidePanel(p.get('sidePanel') === 'true');
+            setTab(p.get('tab'));
+        }),
+        [history]
+    );
+
     useEffect(() => setEdited(true), [template]);
     useEffect(() => {
         history.push(historyUrl('cluster-workflow-templates/{name}', {name, sidePanel, tab}));

ui/src/app/cron-workflows/components/cron-workflow-details/cron-workflow-details.tsx

@@ -9,6 +9,7 @@ import {Loading} from '../../../shared/components/loading';
 import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {WidgetGallery} from '../../../widgets/widget-gallery';
 import {CronWorkflowEditor} from '../cron-workflow-editor';
 
@@ -28,6 +29,14 @@ export const CronWorkflowDetails = ({match, location, history}: RouteComponentPr
     const [edited, setEdited] = useState(false);
     const [error, setError] = useState<Error>();
 
+    useEffect(
+        useQueryParams(history, p => {
+            setSidePanel(p.get('sidePanel'));
+            setTab(p.get('tab'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx

@@ -22,6 +22,7 @@ import {historyUrl} from '../../../shared/history';
 import {ListWatch} from '../../../shared/list-watch';
 import {RetryObservable} from '../../../shared/retry-observable';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {EventsPanel} from '../../../workflows/components/events-panel';
 import {FullHeightLogsViewer} from '../../../workflows/components/workflow-logs-viewer/full-height-logs-viewer';
 import {buildGraph} from './build-graph';
@@ -42,6 +43,18 @@ export const EventFlowPage = ({history, location, match}: RouteComponentProps<an
     const [expanded, setExpanded] = useState(queryParams.get('expanded') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
     const [tab, setTab] = useState<Node>(queryParams.get('tab'));
+
+    useEffect(
+        useQueryParams(history, p => {
+            setShowFlow(p.get('showFlow') === 'true');
+            setShowWorkflows(p.get('showWorkflows') !== 'false');
+            setExpanded(p.get('expanded') === 'true');
+            setSelectedNode(p.get('selectedNode'));
+            setTab(p.get('tab'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/event-sources/components/event-source-details/event-source-details.tsx

@@ -11,6 +11,7 @@ import {Loading} from '../../../shared/components/loading';
 import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {EventsPanel} from '../../../workflows/components/events-panel';
 import {EventSourceEditor} from '../event-source-editor';
 import {EventSourceLogsViewer} from '../event-source-log-viewer';
@@ -26,6 +27,14 @@ export const EventSourceDetails = ({history, location, match}: RouteComponentPro
     const [tab, setTab] = useState<string>(queryParams.get('tab'));
     const [selectedNode, setSelectedNode] = useState<string>(queryParams.get('selectedNode'));
 
+    useEffect(
+        useQueryParams(history, p => {
+            setTab(p.get('tab'));
+            setSelectedNode(p.get('selectedNode'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/event-sources/components/event-source-list/event-source-list.tsx

@@ -18,6 +18,7 @@ import {Context} from '../../../shared/context';
 import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {EventsPanel} from '../../../workflows/components/events-panel';
 import {EventSourceCreator} from '../event-source-creator';
 import {EventSourceLogsViewer} from '../event-source-log-viewer';
@@ -34,6 +35,16 @@ export const EventSourceList = ({match, location, history}: RouteComponentProps<
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
     const [tab, setTab] = useState<Node>(queryParams.get('tab'));
+
+    useEffect(
+        useQueryParams(history, p => {
+            setSidePanel(p.get('sidePanel') === 'true');
+            setSelectedNode(p.get('selectedNode'));
+            setTab(p.get('tab'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/sensors/components/sensor-details/sensor-details.tsx

@@ -11,6 +11,7 @@ import {Loading} from '../../../shared/components/loading';
 import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {SensorEditor} from '../sensor-editor';
 import {SensorSidePanel} from '../sensor-side-panel';
 
@@ -30,6 +31,14 @@ export const SensorDetails = ({match, location, history}: RouteComponentProps<an
     const [selectedLogNode, setSelectedLogNode] = useState<Node>(queryParams.get('selectedLogNode'));
     const [error, setError] = useState<Error>();
 
+    useEffect(
+        useQueryParams(history, p => {
+            setTab(p.get('tab'));
+            setSelectedLogNode(p.get('selectedLogNode'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/sensors/components/sensor-list/sensor-list.tsx

@@ -17,6 +17,7 @@ import {Context} from '../../../shared/context';
 import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {SensorCreator} from '../sensor-creator';
 import {SensorSidePanel} from '../sensor-side-panel';
 import {Utils as EventsUtils} from '../utils';
@@ -32,6 +33,15 @@ export const SensorList = ({match, location, history}: RouteComponentProps<any>)
     const [namespace, setNamespace] = useState(match.params.namespace || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
+
+    useEffect(
+        useQueryParams(history, p => {
+            setSidePanel(p.get('sidePanel') === 'true');
+            setSelectedNode(p.get('selectedNode'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/shared/use-query-params.ts

@@ -0,0 +1,10 @@
+import {History} from 'history';
+
+export function useQueryParams(history: History, set: (p: URLSearchParams) => void): () => void {
+    return () => {
+        history.listen(newLocation => {
+            const newQueryParams = new URLSearchParams(newLocation.search);
+            set(newQueryParams);
+        });
+    };
+}

ui/src/app/workflow-event-bindings/components/workflow-event-bindings/workflow-event-bindings.tsx

@@ -16,6 +16,7 @@ import {Context} from '../../../shared/context';
 import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {ID} from './id';
 
 const introductionText = (
@@ -34,6 +35,14 @@ export const WorkflowEventBindings = ({match, location, history}: RouteComponent
     // state for URL and query parameters
     const [namespace, setNamespace] = useState(match.params.namespace || '');
     const [selectedWorkflowEventBinding, setSelectedWorkflowEventBinding] = useState(queryParams.get('selectedWorkflowEventBinding'));
+
+    useEffect(
+        useQueryParams(history, p => {
+            setSelectedWorkflowEventBinding(p.get('selectedWorkflowEventBinding'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx

@@ -10,6 +10,7 @@ import {Loading} from '../../../shared/components/loading';
 import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {WidgetGallery} from '../../../widgets/widget-gallery';
 import {SubmitWorkflowPanel} from '../../../workflows/components/submit-workflow-panel';
 import {WorkflowTemplateEditor} from '../workflow-template-editor';
@@ -25,6 +26,14 @@ export const WorkflowTemplateDetails = ({history, location, match}: RouteCompone
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
     const [tab, setTab] = useState<string>(queryParams.get('tab'));
 
+    useEffect(
+        useQueryParams(history, p => {
+            setSidePanel(p.get('sidePanel'));
+            setTab(p.get('tab'));
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx

@@ -15,6 +15,7 @@ import {Context} from '../../../shared/context';
 import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import {WorkflowTemplateCreator} from '../workflow-template-creator';
 
 require('./workflow-template-list.scss');
@@ -29,6 +30,14 @@ export const WorkflowTemplateList = ({match, location, history}: RouteComponentP
     // state for URL and query parameters
     const [namespace, setNamespace] = useState(match.params.namespace || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
+
+    useEffect(
+        useQueryParams(history, p => {
+            setSidePanel(p.get('sidePanel') === 'true');
+        }),
+        [history]
+    );
+
     useEffect(
         () =>
             history.push(

ui/src/app/workflows/components/workflow-details/workflow-details.tsx

@@ -14,6 +14,7 @@ import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {RetryWatch} from '../../../shared/retry-watch';
 import {services} from '../../../shared/services';
+import {useQueryParams} from '../../../shared/use-query-params';
 import * as Operations from '../../../shared/workflow-operations-map';
 import {WorkflowOperations} from '../../../shared/workflow-operations-map';
 import {WidgetGallery} from '../../../widgets/widget-gallery';
@@ -46,6 +47,15 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
     const [nodeId, setNodeId] = useState(queryParams.get('nodeId'));
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
 
+    useEffect(
+        useQueryParams(history, p => {
+            setTab(p.get('tab') || 'workflow');
+            setNodeId(p.get('nodeId'));
+            setSidePanel(p.get('sidePanel'));
+        }),
+        [history]
+    );
+
     useEffect(() => {
         history.push(historyUrl('workflows/{namespace}/{name}', {namespace, name, tab, nodeId, sidePanel}));
     }, [namespace, name, tab, nodeId, sidePanel]);