search

backstage / backstage

Backstage is an open framework for building developer portals
https://backstage.io/
Apache License 2.0
27.02k stars 5.63k forks source link

🐛 Bug Report: Double Error Display in Scaffolder Form #23912

Open terencenjr opened 3 months ago

terencenjr commented 3 months ago

📜 Description

Hi,

I am writing a custom field extension with validation and I saw the errors displayed when validation fails. The errors are displayed once at the top and another time below the field. I am not sure if this is a bug or it is just a behavior by rsjf so pardon me if I have logged the issue under the wrong category.

👍 Expected behavior

I believe displaying errors once is sufficient. I do have a preference for it to be displayed under the TextField only.

👎 Actual Behavior with Screenshots

From the screenshot below, we can see that the errors are displayed below the steps' breadcrumb and below the TextField when validation failed.

image

👟 Reproduction steps

  1. Create a string input within the form template
  2. Configure the field to have validation
  3. Import the template's catalog-info.yaml into Backstage
  4. Launch the template
  5. Input an invalid input
  6. Click the Next/Review button
  7. Error message is displayed

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

I'm using Backstage version 1.21.0.

👀 Have you spent some time to check if this bug has been raised before?

🏢 Have you read the Code of Conduct?

Are you willing to submit PR?

Yes I am willing to submit a PR!

github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

acierto commented 1 month ago

@benjdlambert maybe we can make it configurable?

benjdlambert commented 2 weeks ago

@acierto do you wanna raise a PR making this configurable on the Stepper component? Not sure we want to add these props to the router yet.

stephenglass commented 1 week ago

I'm also interested in this being configurable. In my case, I actually only want the stepper error to appear and not the error below the component. This is because I'm doing my own validation in my custom field extension. I only need validation to prevent user from moving onto next step. Also, on this topic the ".propertyName " formatting of the error is quite odd when you think about an end user seeing it. It should be converted into a readable string like it does on the review page.

@benjdlambert @acierto I can also try to help on a PR for this

acierto commented 6 days ago

@stephenglass That would be nice! ❤️