Skip to content

Commit

Permalink
fix(ui): use router navigation instead of page load after submit (#12950
Browse files Browse the repository at this point in the history
)

Signed-off-by: Anton Gilgur <[email protected]>
  • Loading branch information
agilgur5 authored Apr 21, 2024
1 parent 08772fb commit a537033
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 26 deletions.
6 changes: 4 additions & 2 deletions ui/src/app/workflows/components/resubmit-workflow-panel.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
Expand All @@ -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);
Expand Down
6 changes: 4 additions & 2 deletions ui/src/app/workflows/components/retry-workflow-panel.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 || [])));
Expand All @@ -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);
Expand Down
6 changes: 4 additions & 2 deletions ui/src/app/workflows/components/submit-workflow-panel.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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)));
Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,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'));
Expand All @@ -107,8 +107,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);
Expand Down Expand Up @@ -197,9 +197,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)) {
Expand All @@ -224,16 +222,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);
});
}
}
Expand Down Expand Up @@ -481,9 +472,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).catch(setError);
});
Expand Down

0 comments on commit a537033

Please sign in to comment.