From 51df92199d9cfa57c01e2ae3c7e16f86a1183d63 Mon Sep 17 00:00:00 2001 From: Matthew Prinold Date: Fri, 15 Dec 2023 10:05:04 +0000 Subject: [PATCH 1/3] feat(Stepper): adds custom error list for the top of the form Signed-off-by: Matthew Prinold --- .../errorListTemplate.test.tsx | 43 ++++++++++++ .../ErrorListTemplate/errorListTemplate.tsx | 66 +++++++++++++++++++ .../Stepper/ErrorListTemplate/index.ts | 16 +++++ .../src/next/components/Stepper/Stepper.tsx | 4 +- 4 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx create mode 100644 plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx create mode 100644 plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/index.ts diff --git a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx new file mode 100644 index 0000000000..d096f046bf --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { ErrorListTemplate } from './ErrorListTemplate'; +import { renderInTestApp } from '@backstage/test-utils'; +import { ErrorListProps } from '@rjsf/utils'; + +describe('Error List Template', () => { + const errorList = { + errors: [ + { + stack: 'Test error 1', + }, + { + stack: 'Test error 2', + }, + ], + errorSchema: {}, + } as Partial as ErrorListProps; + + it('should render the error messages', async () => { + const { getByText } = await renderInTestApp( + , + ); + + for (const error of errorList.errors) { + expect(getByText(error.stack)).toBeInTheDocument(); + } + }); +}); diff --git a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx new file mode 100644 index 0000000000..9b6920108b --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx @@ -0,0 +1,66 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { ErrorListProps } from '@rjsf/utils'; +import { + List, + ListItem, + ListItemIcon, + ListItemText, + Paper, + Theme, + createStyles, + makeStyles, +} from '@material-ui/core'; +import ErrorIcon from '@material-ui/icons/Error'; + +const useStyles = makeStyles((_theme: Theme) => + createStyles({ + list: { + width: '100%', + }, + text: { + textWrap: 'wrap', + }, + }), +); + +/** + * Shows a list of errors found in the form + * + * @public + */ +export const ErrorListTemplate = ({ errors }: ErrorListProps) => { + const classes = useStyles(); + + return ( + + + {errors.map((error, index) => ( + + + + + + + ))} + + + ); +}; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/index.ts b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/index.ts new file mode 100644 index 0000000000..8a982bc68b --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export { ErrorListTemplate } from './errorListTemplate'; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 5b41163ae4..9b475870d2 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -51,6 +51,7 @@ import { FormProps, } from '@backstage/plugin-scaffolder-react'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; +import { ErrorListTemplate } from './ErrorListTemplate'; const useStyles = makeStyles(theme => ({ backButton: { @@ -228,7 +229,8 @@ export const Stepper = (stepperProps: StepperProps) => { uiSchema={currentStep.uiSchema} onSubmit={handleNext} fields={fields} - showErrorList={false} + showErrorList="top" + templates={{ ErrorListTemplate }} onChange={handleChange} experimental_defaultFormStateBehavior={{ allOf: 'populateDefaults', From c28f281266da4563ca1b74e4c7dce9a9099bed37 Mon Sep 17 00:00:00 2001 From: Matthew Prinold Date: Fri, 15 Dec 2023 10:10:27 +0000 Subject: [PATCH 2/3] chore(changeset): adds changeset Signed-off-by: Matthew Prinold --- .changeset/brown-planes-sort.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/brown-planes-sort.md diff --git a/.changeset/brown-planes-sort.md b/.changeset/brown-planes-sort.md new file mode 100644 index 0000000000..2291f950c0 --- /dev/null +++ b/.changeset/brown-planes-sort.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Scaffolder form now shows a list of errors at the top of the form. From 2f0a55bce57530f31b5285ba9f222772db2bb252 Mon Sep 17 00:00:00 2001 From: Matthew Prinold Date: Fri, 15 Dec 2023 10:20:15 +0000 Subject: [PATCH 3/3] fix(errorListTemplate.test): updates import Signed-off-by: Matthew Prinold --- .../Stepper/ErrorListTemplate/errorListTemplate.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx index d096f046bf..c5ddf6854f 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React from 'react'; -import { ErrorListTemplate } from './ErrorListTemplate'; +import { ErrorListTemplate } from './errorListTemplate'; import { renderInTestApp } from '@backstage/test-utils'; import { ErrorListProps } from '@rjsf/utils';