From 17e7efdc9f47e41723e858013862b529da9cb6de Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Thu, 8 Oct 2020 15:06:32 +0200 Subject: [PATCH 1/2] remove on close from component creation modal --- .../src/components/JobStatusModal/JobStatusModal.tsx | 10 ++-------- .../MultistepJsonForm/MultistepJsonForm.tsx | 12 ++++++++---- .../src/components/TemplatePage/TemplatePage.tsx | 2 -- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx index c531e0ec2c..149f7a47d7 100644 --- a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx +++ b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx @@ -30,18 +30,12 @@ import { entityRoute } from '@backstage/plugin-catalog'; import { generatePath } from 'react-router-dom'; type Props = { - onClose: () => void; onComplete: (job: Job) => void; jobId: string; entity: TemplateEntityV1alpha1 | null; }; -export const JobStatusModal = ({ - onClose, - jobId, - onComplete, - entity, -}: Props) => { +export const JobStatusModal = ({ jobId, onComplete, entity }: Props) => { const job = useJobPolling(jobId); const [dialogTitle, setDialogTitle] = useState('Creating component...'); @@ -54,7 +48,7 @@ export const JobStatusModal = ({ }, [job, onComplete, setDialogTitle]); return ( - + {dialogTitle} {!job ? ( diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx index f0ba720b39..9700d43c00 100644 --- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx +++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx @@ -27,7 +27,7 @@ import { } from '@material-ui/core'; import { FormProps, IChangeEvent, withTheme } from '@rjsf/core'; import { Theme as MuiTheme } from '@rjsf/material-ui'; -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; const Form = withTheme(MuiTheme); type Step = { @@ -54,6 +54,7 @@ export const MultistepJsonForm = ({ onFinish, }: Props) => { const [activeStep, setActiveStep] = useState(0); + const [formDataEvent, setFormDataEvent] = useState({ formData: {} }); const handleReset = () => { setActiveStep(0); @@ -62,18 +63,21 @@ export const MultistepJsonForm = ({ const handleNext = () => setActiveStep(Math.min(activeStep + 1, steps.length)); const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0)); - + useEffect(() => { + onChange(formDataEvent as IChangeEvent); + }, [formDataEvent, onChange]); return ( <> {steps.map(({ label, schema, ...formProps }) => ( {label} - +
setFormDataEvent(e)} schema={schema as FormProps['schema']} onSubmit={e => { if (e.errors.length === 0) handleNext(); diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index e68c795bd6..19196d39ad 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx @@ -93,7 +93,6 @@ export const TemplatePage = () => { setFormState({ ...formState, ...e.formData }); const [jobId, setJobId] = useState(null); - const handleClose = () => setJobId(null); const handleCreate = async () => { try { @@ -161,7 +160,6 @@ export const TemplatePage = () => { )} From 11598f6324397c26352d926e1619f8dd8b0731cd Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 20 Nov 2020 14:37:09 +0100 Subject: [PATCH 2/2] chore: fixing up the test timeout --- .../components/MultistepJsonForm/MultistepJsonForm.tsx | 9 +++------ .../src/components/TemplatePage/TemplatePage.tsx | 8 +++++--- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx index 9700d43c00..528d42b94f 100644 --- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx +++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx @@ -27,7 +27,7 @@ import { } from '@material-ui/core'; import { FormProps, IChangeEvent, withTheme } from '@rjsf/core'; import { Theme as MuiTheme } from '@rjsf/material-ui'; -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; const Form = withTheme(MuiTheme); type Step = { @@ -54,7 +54,6 @@ export const MultistepJsonForm = ({ onFinish, }: Props) => { const [activeStep, setActiveStep] = useState(0); - const [formDataEvent, setFormDataEvent] = useState({ formData: {} }); const handleReset = () => { setActiveStep(0); @@ -63,9 +62,7 @@ export const MultistepJsonForm = ({ const handleNext = () => setActiveStep(Math.min(activeStep + 1, steps.length)); const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0)); - useEffect(() => { - onChange(formDataEvent as IChangeEvent); - }, [formDataEvent, onChange]); + return ( <> @@ -77,7 +74,7 @@ export const MultistepJsonForm = ({ key={label} noHtml5Validate formData={formData} - onChange={e => setFormDataEvent(e)} + onChange={onChange} schema={schema as FormProps['schema']} onSubmit={e => { if (e.errors.length === 0) handleNext(); diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index ebefc6522d..d8b803f893 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx @@ -26,7 +26,7 @@ import { import { catalogApiRef } from '@backstage/plugin-catalog'; import { LinearProgress } from '@material-ui/core'; import { IChangeEvent } from '@rjsf/core'; -import React, { useState } from 'react'; +import React, { useState, useCallback } from 'react'; import { Navigate } from 'react-router'; import { useParams } from 'react-router-dom'; import { useAsync } from 'react-use'; @@ -86,8 +86,10 @@ export const TemplatePage = () => { const [formState, setFormState] = useState({}); const handleFormReset = () => setFormState({}); - const handleChange = (e: IChangeEvent) => - setFormState({ ...formState, ...e.formData }); + const handleChange = useCallback( + (e: IChangeEvent) => setFormState({ ...formState, ...e.formData }), + [setFormState, formState], + ); const [jobId, setJobId] = useState(null);