disable launch buttons to prevent double-clicking

This commit is contained in:
Keith J. Grant
2021-04-15 14:51:39 -07:00
parent ad07d31b9a
commit dc0256441f
10 changed files with 45 additions and 17 deletions

View File

@@ -91,18 +91,22 @@ function JobListItem({
> >
{job.status === 'failed' && job.type === 'job' ? ( {job.status === 'failed' && job.type === 'job' ? (
<LaunchButton resource={job}> <LaunchButton resource={job}>
{({ handleRelaunch }) => ( {({ handleRelaunch, isSending }) => (
<ReLaunchDropDown handleRelaunch={handleRelaunch} /> <ReLaunchDropDown
handleRelaunch={handleRelaunch}
isSending={isSending}
/>
)} )}
</LaunchButton> </LaunchButton>
) : ( ) : (
<LaunchButton resource={job}> <LaunchButton resource={job}>
{({ handleRelaunch }) => ( {({ handleRelaunch, isSending }) => (
<Button <Button
ouiaId={`${job.id}-relaunch-button`} ouiaId={`${job.id}-relaunch-button`}
variant="plain" variant="plain"
onClick={handleRelaunch} onClick={handleRelaunch}
aria-label={i18n._(t`Relaunch`)} aria-label={i18n._(t`Relaunch`)}
isDisabled={isSending}
> >
<RocketIcon /> <RocketIcon />
</Button> </Button>

View File

@@ -36,9 +36,12 @@ function LaunchButton({ resource, i18n, children, history }) {
const [showLaunchPrompt, setShowLaunchPrompt] = useState(false); const [showLaunchPrompt, setShowLaunchPrompt] = useState(false);
const [launchConfig, setLaunchConfig] = useState(null); const [launchConfig, setLaunchConfig] = useState(null);
const [surveyConfig, setSurveyConfig] = useState(null); const [surveyConfig, setSurveyConfig] = useState(null);
const [isSending, setIsSending] = useState(false);
const [resourceCredentials, setResourceCredentials] = useState([]); const [resourceCredentials, setResourceCredentials] = useState([]);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const handleLaunch = async () => { const handleLaunch = async () => {
setIsSending(true);
const readLaunch = const readLaunch =
resource.type === 'workflow_job_template' resource.type === 'workflow_job_template'
? WorkflowJobTemplatesAPI.readLaunch(resource.id) ? WorkflowJobTemplatesAPI.readLaunch(resource.id)
@@ -96,6 +99,7 @@ function LaunchButton({ resource, i18n, children, history }) {
history.push(`/jobs/${job.id}/output`); history.push(`/jobs/${job.id}/output`);
} catch (launchError) { } catch (launchError) {
setError(launchError); setError(launchError);
setIsSending(false);
} }
}; };
@@ -103,6 +107,7 @@ function LaunchButton({ resource, i18n, children, history }) {
let readRelaunch; let readRelaunch;
let relaunch; let relaunch;
setIsSending(true);
if (resource.type === 'inventory_update') { if (resource.type === 'inventory_update') {
// We'll need to handle the scenario where the src no longer exists // We'll need to handle the scenario where the src no longer exists
readRelaunch = InventorySourcesAPI.readLaunchUpdate( readRelaunch = InventorySourcesAPI.readLaunchUpdate(
@@ -146,6 +151,7 @@ function LaunchButton({ resource, i18n, children, history }) {
} }
} catch (err) { } catch (err) {
setError(err); setError(err);
setIsSending(false);
} }
}; };
@@ -154,6 +160,7 @@ function LaunchButton({ resource, i18n, children, history }) {
{children({ {children({
handleLaunch, handleLaunch,
handleRelaunch, handleRelaunch,
isSending,
})} })}
{error && ( {error && (
<AlertModal <AlertModal

View File

@@ -11,11 +11,17 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { RocketIcon } from '@patternfly/react-icons'; import { RocketIcon } from '@patternfly/react-icons';
function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) { function ReLaunchDropDown({
const [isOpen, setIsOPen] = useState(false); isPrimary = false,
handleRelaunch,
isSending,
i18n,
ouiaId,
}) {
const [isOpen, setIsOpen] = useState(false);
const onToggle = () => { const onToggle = () => {
setIsOPen(prev => !prev); setIsOpen(prev => !prev);
}; };
const dropdownItems = [ const dropdownItems = [
@@ -35,6 +41,7 @@ function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) {
onClick={() => { onClick={() => {
handleRelaunch({ hosts: 'all' }); handleRelaunch({ hosts: 'all' });
}} }}
isDisabled={isSending}
> >
{i18n._(t`All`)} {i18n._(t`All`)}
</DropdownItem>, </DropdownItem>,
@@ -46,6 +53,7 @@ function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) {
onClick={() => { onClick={() => {
handleRelaunch({ hosts: 'failed' }); handleRelaunch({ hosts: 'failed' });
}} }}
isDisabled={isSending}
> >
{i18n._(t`Failed hosts`)} {i18n._(t`Failed hosts`)}
</DropdownItem>, </DropdownItem>,

View File

@@ -176,11 +176,11 @@ function TemplateListItem({
tooltip={i18n._(t`Launch Template`)} tooltip={i18n._(t`Launch Template`)}
> >
<LaunchButton resource={template}> <LaunchButton resource={template}>
{({ handleLaunch }) => ( {({ handleLaunch, isSending }) => (
<Button <Button
ouiaId={`${template.id}-launch-button`} ouiaId={`${template.id}-launch-button`}
id={`template-action-launch-${template.id}`} id={`template-action-launch-${template.id}`}
isDisabled={isDisabled} isDisabled={isDisabled || isSending}
aria-label={i18n._(t`Launch template`)} aria-label={i18n._(t`Launch template`)}
variant="plain" variant="plain"
onClick={handleLaunch} onClick={handleLaunch}

View File

@@ -371,21 +371,23 @@ function JobDetail({ job, i18n }) {
job.summary_fields.user_capabilities.start && job.summary_fields.user_capabilities.start &&
(job.status === 'failed' && job.type === 'job' ? ( (job.status === 'failed' && job.type === 'job' ? (
<LaunchButton resource={job}> <LaunchButton resource={job}>
{({ handleRelaunch }) => ( {({ handleRelaunch, isSending }) => (
<ReLaunchDropDown <ReLaunchDropDown
ouiaId="job-detail-relaunch-dropdown" ouiaId="job-detail-relaunch-dropdown"
isPrimary isPrimary
handleRelaunch={handleRelaunch} handleRelaunch={handleRelaunch}
isSending={isSending}
/> />
)} )}
</LaunchButton> </LaunchButton>
) : ( ) : (
<LaunchButton resource={job} aria-label={i18n._(t`Relaunch`)}> <LaunchButton resource={job} aria-label={i18n._(t`Relaunch`)}>
{({ handleRelaunch }) => ( {({ handleRelaunch, isSending }) => (
<Button <Button
ouiaId="job-detail-relaunch-button" ouiaId="job-detail-relaunch-button"
type="submit" type="submit"
onClick={handleRelaunch} onClick={handleRelaunch}
isDisabled={isSending}
> >
{i18n._(t`Relaunch`)} {i18n._(t`Relaunch`)}
</Button> </Button>

View File

@@ -144,21 +144,23 @@ const OutputToolbar = ({
> >
{job.status === 'failed' && job.type === 'job' ? ( {job.status === 'failed' && job.type === 'job' ? (
<LaunchButton resource={job}> <LaunchButton resource={job}>
{({ handleRelaunch }) => ( {({ handleRelaunch, isSending }) => (
<ReLaunchDropDown <ReLaunchDropDown
handleRelaunch={handleRelaunch} handleRelaunch={handleRelaunch}
ouiaId="job-output-relaunch-dropdown" ouiaId="job-output-relaunch-dropdown"
isSending={isSending}
/> />
)} )}
</LaunchButton> </LaunchButton>
) : ( ) : (
<LaunchButton resource={job}> <LaunchButton resource={job}>
{({ handleRelaunch }) => ( {({ handleRelaunch, isSending }) => (
<Button <Button
ouiaId="job-output-relaunch-button" ouiaId="job-output-relaunch-button"
variant="plain" variant="plain"
onClick={handleRelaunch} onClick={handleRelaunch}
aria-label={i18n._(t`Relaunch`)} aria-label={i18n._(t`Relaunch`)}
isDisabled={isSending}
> >
<RocketIcon /> <RocketIcon />
</Button> </Button>

View File

@@ -116,12 +116,13 @@ function ProjectJobTemplateListItem({
{canLaunch && template.type === 'job_template' && ( {canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch Template`)} position="top"> <Tooltip content={i18n._(t`Launch Template`)} position="top">
<LaunchButton resource={template}> <LaunchButton resource={template}>
{({ handleLaunch }) => ( {({ handleLaunch, isSending }) => (
<Button <Button
ouiaId={`${template.id}-launch-button`} ouiaId={`${template.id}-launch-button`}
css="grid-column: 1" css="grid-column: 1"
variant="plain" variant="plain"
onClick={handleLaunch} onClick={handleLaunch}
isDisabled={isSending}
> >
<RocketIcon /> <RocketIcon />
</Button> </Button>

View File

@@ -387,12 +387,13 @@ function JobTemplateDetail({ i18n, template }) {
)} )}
{canLaunch && ( {canLaunch && (
<LaunchButton resource={template} aria-label={i18n._(t`Launch`)}> <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
{({ handleLaunch }) => ( {({ handleLaunch, isSending }) => (
<Button <Button
ouiaId="job-template-detail-launch-button" ouiaId="job-template-detail-launch-button"
variant="secondary" variant="secondary"
type="submit" type="submit"
onClick={handleLaunch} onClick={handleLaunch}
isDisabled={isSending}
> >
{i18n._(t`Launch`)} {i18n._(t`Launch`)}
</Button> </Button>

View File

@@ -227,12 +227,13 @@ function WorkflowJobTemplateDetail({ template, i18n }) {
)} )}
{canLaunch && ( {canLaunch && (
<LaunchButton resource={template} aria-label={i18n._(t`Launch`)}> <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
{({ handleLaunch }) => ( {({ handleLaunch, isSending }) => (
<Button <Button
ouiaId="workflow-job-template-detail-launch-button" ouiaId="workflow-job-template-detail-launch-button"
variant="secondary" variant="secondary"
type="submit" type="submit"
onClick={handleLaunch} onClick={handleLaunch}
isDisabled={isSending}
> >
{i18n._(t`Launch`)} {i18n._(t`Launch`)}
</Button> </Button>

View File

@@ -125,11 +125,13 @@ function VisualizerToolbar({
resource={template} resource={template}
aria-label={i18n._(t`Launch workflow`)} aria-label={i18n._(t`Launch workflow`)}
> >
{({ handleLaunch }) => ( {({ handleLaunch, isSending }) => (
<ActionButton <ActionButton
id="visualizer-launch" id="visualizer-launch"
variant="plain" variant="plain"
isDisabled={hasUnsavedChanges || totalNodes === 0} isDisabled={
hasUnsavedChanges || totalNodes === 0 || isSending
}
onClick={handleLaunch} onClick={handleLaunch}
> >
<RocketIcon /> <RocketIcon />