fix(ui): use router navigation instead of page load after submit (#12950

) Signed-off-by: Anton Gilgur <agilgur5@gmail.com> (cherry picked from commit a537033)
argoproj · Apr 24, 2024 · 8d2bebc · 8d2bebc
1 parent 437044c
commit 8d2bebc
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 26 deletions.
diff --git a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
@@ -1,6 +1,7 @@
 import {Checkbox} from 'argo-ui';
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {Parameter, ResubmitOpts, Workflow} from '../../../models';
+import {Context} from '../../shared/context';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {ParametersInput} from '../../shared/components/parameters-input/parameters-input';
@@ -13,6 +14,7 @@ interface Props {
 }
 
 export function ResubmitWorkflowPanel(props: Props) {
+    const {navigation} = useContext(Context);
     const [overrideParameters, setOverrideParameters] = useState(false);
     const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflow.spec.arguments.parameters || [])));
     const [memoized, setMemoized] = useState(false);
@@ -33,7 +35,7 @@ export function ResubmitWorkflowPanel(props: Props) {
             const submitted = props.isArchived
                 ? await services.workflows.resubmitArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
                 : await services.workflows.resubmit(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
-            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+            navigation.goto(uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`));
         } catch (err) {
             setError(err);
             setIsSubmitting(false);

diff --git a/ui/src/app/workflows/components/retry-workflow-panel.tsx b/ui/src/app/workflows/components/retry-workflow-panel.tsx
@@ -1,6 +1,7 @@
 import {Checkbox} from 'argo-ui';
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {Parameter, RetryOpts, Workflow} from '../../../models';
+import {Context} from '../../shared/context';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {ParametersInput} from '../../shared/components/parameters-input/parameters-input';
@@ -14,6 +15,7 @@ interface Props {
 }
 
 export function RetryWorkflowPanel(props: Props) {
+    const {navigation} = useContext(Context);
     const [overrideParameters, setOverrideParameters] = useState(false);
     const [restartSuccessful, setRestartSuccessful] = useState(false);
     const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflow.spec.arguments.parameters || [])));
@@ -37,7 +39,7 @@ export function RetryWorkflowPanel(props: Props) {
                 props.isArchived && !props.isWorkflowInCluster
                     ? await services.workflows.retryArchived(props.workflow.metadata.uid, props.workflow.metadata.namespace, opts)
                     : await services.workflows.retry(props.workflow.metadata.name, props.workflow.metadata.namespace, opts);
-            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+            navigation.goto(uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}#`)); // add # at the end to reset query params to close panel
         } catch (err) {
             setError(err);
             setIsSubmitting(false);

diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,6 +1,7 @@
 import {Select} from 'argo-ui';
-import React, {useMemo, useState} from 'react';
+import React, {useContext, useMemo, useState} from 'react';
 import {Parameter, Template} from '../../../models';
+import {Context} from '../../shared/context';
 import {uiUrl} from '../../shared/base';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {ParametersInput} from '../../shared/components/parameters-input/parameters-input';
@@ -26,6 +27,7 @@ const defaultTemplate: Template = {
 };
 
 export function SubmitWorkflowPanel(props: Props) {
+    const {navigation} = useContext(Context);
     const [entrypoint, setEntrypoint] = useState(workflowEntrypoint);
     const [parameters, setParameters] = useState<Parameter[]>([]);
     const [workflowParameters, setWorkflowParameters] = useState<Parameter[]>(JSON.parse(JSON.stringify(props.workflowParameters)));
@@ -55,7 +57,7 @@ export function SubmitWorkflowPanel(props: Props) {
                 ],
                 labels: labels.join(',')
             });
-            document.location.href = uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`);
+            navigation.goto(uiUrl(`workflows/${submitted.metadata.namespace}/${submitted.metadata.name}`));
         } catch (err) {
             setError(err);
             setIsSubmitting(false);

diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -93,9 +93,9 @@ export function WorkflowDetails({history, location, match}: RouteComponentProps<
     // boiler-plate
     const {navigation, popup} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
+    const namespace = match.params.namespace;
+    const name = match.params.name;
 
-    const [namespace] = useState(match.params.namespace);
-    const [name, setName] = useState(match.params.name);
     const [tab, setTab] = useState(queryParams.get('tab') || 'workflow');
     const [uid, setUid] = useState(queryParams.get('uid') || '');
     const [nodeId, setNodeId] = useState(queryParams.get('nodeId'));
@@ -106,8 +106,8 @@ export function WorkflowDetails({history, location, match}: RouteComponentProps<
     const [workflow, setWorkflow] = useState<Workflow>();
     const [links, setLinks] = useState<Link[]>();
     const [error, setError] = useState<Error>();
-    const selectedNode = workflow && workflow.status && workflow.status.nodes && workflow.status.nodes[nodeId];
-    const selectedArtifact = workflow && workflow.status && findArtifact(workflow.status, nodeId);
+    const selectedNode = workflow?.status?.nodes?.[nodeId];
+    const selectedArtifact = workflow?.status && findArtifact(workflow.status, nodeId);
     const [selectedTemplateArtifactRepo, setSelectedTemplateArtifactRepo] = useState<ArtifactRepository>();
     const isSidePanelExpanded = !!(selectedNode || selectedArtifact);
     const isSidePanelAnimating = useTransition(isSidePanelExpanded, ANIMATION_MS + ANIMATION_BUFFER_MS);
@@ -196,9 +196,7 @@ export function WorkflowDetails({history, location, match}: RouteComponentProps<
                             popup
                                 .confirm('Confirm', () => <DeleteCheck isWfInDB={isArchivedWorkflow(workflow)} isWfInCluster={isWorkflowInCluster(workflow)} />)
                                 .then(async yes => {
-                                    if (!yes) {
-                                        return;
-                                    }
+                                    if (!yes) return;
 
                                     const allPromises = [];
                                     if (isWorkflowInCluster(workflow)) {
@@ -223,16 +221,9 @@ export function WorkflowDetails({history, location, match}: RouteComponentProps<
                             setSidePanel('retry');
                         } else {
                             popup.confirm('Confirm', `Are you sure you want to ${workflowOperation.title.toLowerCase()} this workflow?`).then(yes => {
-                                if (!yes) {
-                                    return;
-                                }
-
-                                workflowOperation
-                                    .action(workflow)
-                                    .then((wf: Workflow) => {
-                                        setName(wf.metadata.name);
-                                    })
-                                    .catch(setError);
+                                if (!yes) return;
+
+                                workflowOperation.action(workflow).catch(setError);
                             });
                         }
                     }
@@ -480,9 +471,7 @@ export function WorkflowDetails({history, location, match}: RouteComponentProps<
 
     function renderResumePopup() {
         return popup.confirm('Confirm', renderSuspendNodeOptions).then(yes => {
-            if (!yes) {
-                return;
-            }
+            if (!yes) return;
 
             updateOutputParametersForNodeIfRequired()
                 .then(resumeNode)