diff --git a/.changeset/real-turkeys-hunt.md b/.changeset/real-turkeys-hunt.md new file mode 100644 index 0000000000..ba8fe44518 --- /dev/null +++ b/.changeset/real-turkeys-hunt.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-scaffolder': patch +'@backstage/plugin-scaffolder-react': patch +--- + +Disable the submit button on creating diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx index 5f3dfdfa1d..c1d24ac6c6 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx @@ -15,17 +15,16 @@ */ import { renderInTestApp } from '@backstage/test-utils'; import { JsonValue } from '@backstage/types'; +import type { RJSFValidationError } from '@rjsf/utils'; import { act, fireEvent, waitFor } from '@testing-library/react'; import React, { useEffect } from 'react'; +import { FieldExtensionComponentProps } from '../../../extensions'; import { LayoutTemplate } from '../../../layouts'; import { SecretsContextProvider } from '../../../secrets'; import { TemplateParameterSchema } from '../../../types'; import { Stepper } from './Stepper'; -import type { RJSFValidationError } from '@rjsf/utils'; -import { FieldExtensionComponentProps } from '../../../extensions'; - describe('Stepper', () => { it('should render the step titles for each step of the manifest', async () => { const manifest: TemplateParameterSchema = { @@ -762,7 +761,10 @@ describe('Stepper', () => { ], }; - const onCreate = jest.fn(); + // `onCreate` must be async to mock the submit button disabled behavior + const onCreate = jest.fn( + () => new Promise(resolve => setTimeout(resolve, 0)), + ); const { getByRole } = await renderInTestApp( @@ -783,10 +785,18 @@ describe('Stepper', () => { fireEvent.click(getByRole('button', { name: 'Review' })); }); + fireEvent.click(getByRole('button', { name: 'Create' })); + + await waitFor(() => + expect(getByRole('button', { name: 'Create' })).toBeDisabled(), + ); + await act(async () => { fireEvent.click(getByRole('button', { name: 'Create' })); }); + expect(onCreate).toHaveBeenCalledTimes(1); + expect(onCreate).toHaveBeenCalledWith( expect.objectContaining({ thing: { repoOrg: 'backstage' }, diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 9ca37e284a..7508985a5c 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -115,7 +115,7 @@ export type StepperProps = { */ export const Stepper = (stepperProps: StepperProps) => { const { t } = useTranslationRef(scaffolderReactTranslationRef); - const { layouts = [], components = {}, ...props } = stepperProps; + const { layouts = [], components = {}, onCreate, ...props } = stepperProps; const { ReviewStateComponent = ReviewState, ReviewStepComponent, @@ -220,10 +220,17 @@ export const Stepper = (stepperProps: StepperProps) => { const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema); - const handleCreate = useCallback(() => { - props.onCreate(stepsState); + const [isCreating, setIsCreating] = useState(false); + + const handleCreate = useCallback(async () => { + setIsCreating(true); analytics.captureEvent('click', `${createLabel}`); - }, [props, stepsState, analytics, createLabel]); + try { + await onCreate(stepsState); + } finally { + setIsCreating(false); + } + }, [analytics, createLabel, onCreate, stepsState]); return ( <> @@ -318,6 +325,7 @@ export const Stepper = (stepperProps: StepperProps) => { {backLabel}