Merge pull request #9925 from keithjgrant/4249-prevent-double-launch

Prevent double-clicking/double-launching jobs

SUMMARY
Prevents double-launching a job if the user double-clicks the launch icon. This is done by disabling the button upon first launch. Applied to all instances of <LaunchButton>.
Addresses: #4249
ISSUE TYPE

Bugfix Pull Request

COMPONENT NAME

UI

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>
This commit is contained in:
softwarefactory-project-zuul[bot] 2021-04-19 22:17:21 +00:00 committed by GitHub
commit 19da1ad263
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 90 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, isLaunching }) => (
<ReLaunchDropDown
handleRelaunch={handleRelaunch}
isLaunching={isLaunching}
/>
)}
</LaunchButton>
) : (
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
{({ handleRelaunch, isLaunching }) => (
<Button
ouiaId={`${job.id}-relaunch-button`}
variant="plain"
onClick={handleRelaunch}
aria-label={i18n._(t`Relaunch`)}
isDisabled={isLaunching}
>
<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 [isLaunching, setIsLaunching] = useState(false);
const [resourceCredentials, setResourceCredentials] = useState([]);
const [error, setError] = useState(null);
const handleLaunch = async () => {
setIsLaunching(true);
const readLaunch =
resource.type === 'workflow_job_template'
? WorkflowJobTemplatesAPI.readLaunch(resource.id)
@ -96,6 +99,8 @@ function LaunchButton({ resource, i18n, children, history }) {
history.push(`/jobs/${job.id}/output`);
} catch (launchError) {
setError(launchError);
} finally {
setIsLaunching(false);
}
};
@ -103,6 +108,7 @@ function LaunchButton({ resource, i18n, children, history }) {
let readRelaunch;
let relaunch;
setIsLaunching(true);
if (resource.type === 'inventory_update') {
// We'll need to handle the scenario where the src no longer exists
readRelaunch = InventorySourcesAPI.readLaunchUpdate(
@ -146,6 +152,8 @@ function LaunchButton({ resource, i18n, children, history }) {
}
} catch (err) {
setError(err);
} finally {
setIsLaunching(false);
}
};
@ -154,6 +162,7 @@ function LaunchButton({ resource, i18n, children, history }) {
{children({
handleLaunch,
handleRelaunch,
isLaunching,
})}
{error && (
<AlertModal

View File

@ -114,6 +114,49 @@ describe('LaunchButton', () => {
expect(history.location.pathname).toEqual('/jobs/9000/output');
});
test('should disable button to prevent duplicate clicks', async () => {
WorkflowJobTemplatesAPI.readLaunch.mockResolvedValue({
data: {
can_start_without_user_input: true,
},
});
const history = createMemoryHistory({
initialEntries: ['/jobs/9000'],
});
WorkflowJobTemplatesAPI.launch.mockImplementation(async () => {
// return asynchronously so isLaunching isn't set back to false in the
// same tick
await sleep(10);
return {
data: {
id: 9000,
},
};
});
const wrapper = mountWithContexts(
<LaunchButton
resource={{
id: 1,
type: 'workflow_job_template',
}}
>
{({ handleLaunch, isLaunching }) => (
<button type="submit" onClick={handleLaunch} disabled={isLaunching} />
)}
</LaunchButton>,
{
context: {
router: { history },
},
}
);
const button = wrapper.find('button');
await act(() => button.prop('onClick')());
wrapper.update();
expect(wrapper.find('button').prop('disabled')).toEqual(true);
});
test('should relaunch job correctly', async () => {
JobsAPI.readRelaunch.mockResolvedValue({
data: {

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,
isLaunching,
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={isLaunching}
>
{i18n._(t`All`)}
</DropdownItem>,
@ -46,6 +53,7 @@ function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) {
onClick={() => {
handleRelaunch({ hosts: 'failed' });
}}
isDisabled={isLaunching}
>
{i18n._(t`Failed hosts`)}
</DropdownItem>,

View File

@ -176,11 +176,11 @@ function TemplateListItem({
tooltip={i18n._(t`Launch Template`)}
>
<LaunchButton resource={template}>
{({ handleLaunch }) => (
{({ handleLaunch, isLaunching }) => (
<Button
ouiaId={`${template.id}-launch-button`}
id={`template-action-launch-${template.id}`}
isDisabled={isDisabled}
isDisabled={isDisabled || isLaunching}
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, isLaunching }) => (
<ReLaunchDropDown
ouiaId="job-detail-relaunch-dropdown"
isPrimary
handleRelaunch={handleRelaunch}
isLaunching={isLaunching}
/>
)}
</LaunchButton>
) : (
<LaunchButton resource={job} aria-label={i18n._(t`Relaunch`)}>
{({ handleRelaunch }) => (
{({ handleRelaunch, isLaunching }) => (
<Button
ouiaId="job-detail-relaunch-button"
type="submit"
onClick={handleRelaunch}
isDisabled={isLaunching}
>
{i18n._(t`Relaunch`)}
</Button>

View File

@ -144,21 +144,23 @@ const OutputToolbar = ({
>
{job.status === 'failed' && job.type === 'job' ? (
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
{({ handleRelaunch, isLaunching }) => (
<ReLaunchDropDown
handleRelaunch={handleRelaunch}
ouiaId="job-output-relaunch-dropdown"
isLaunching={isLaunching}
/>
)}
</LaunchButton>
) : (
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
{({ handleRelaunch, isLaunching }) => (
<Button
ouiaId="job-output-relaunch-button"
variant="plain"
onClick={handleRelaunch}
aria-label={i18n._(t`Relaunch`)}
isDisabled={isLaunching}
>
<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, isLaunching }) => (
<Button
ouiaId={`${template.id}-launch-button`}
css="grid-column: 1"
variant="plain"
onClick={handleLaunch}
isDisabled={isLaunching}
>
<RocketIcon />
</Button>

View File

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

View File

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