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' ? (
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
<ReLaunchDropDown handleRelaunch={handleRelaunch} />
{({ handleRelaunch, isSending }) => (
<ReLaunchDropDown
handleRelaunch={handleRelaunch}
isSending={isSending}
/>
)}
</LaunchButton>
) : (
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
{({ handleRelaunch, isSending }) => (
<Button
ouiaId={`${job.id}-relaunch-button`}
variant="plain"
onClick={handleRelaunch}
aria-label={i18n._(t`Relaunch`)}
isDisabled={isSending}
>
<RocketIcon />
</Button>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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