feat(Stepper): adds custom error list for the top of the form

Signed-off-by: Matthew Prinold <matthewprinold@gmail.com>
2023-12-15 10:05:04 +00:00
parent 79bff053f1
commit 51df92199d
4 changed files with 128 additions and 1 deletions
@@ -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<ErrorListProps> as ErrorListProps;
+
+  it('should render the error messages', async () => {
+    const { getByText } = await renderInTestApp(
+      <ErrorListTemplate {...errorList} />,
+    );
+
+    for (const error of errorList.errors) {
+      expect(getByText(error.stack)).toBeInTheDocument();
+    }
+  });
+});
@@ -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 (
+    <Paper>
+      <List dense className={classes.list}>
+        {errors.map((error, index) => (
+          <ListItem key={index}>
+            <ListItemIcon>
+              <ErrorIcon color="error" />
+            </ListItemIcon>
+            <ListItemText
+              classes={{ primary: classes.text }}
+              primary={error.stack}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Paper>
+  );
+};
@@ -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';
@@ -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',