Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: New static error summary component #3107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 22, 2022

Conversation

AbhineetJain
Copy link
Contributor

This PR repurposes the existing ErrorSummary component to create a static component to display error messages with details from the backend.

We want to make the details section collapsible and the error summary optionally dismissible.

Subtasks

  • create new component with collapsible details section
  • add an option to dismiss the component
  • add unit tests
  • add stories

Fixes #3106

Screenshots

Screen Shot 2022-07-22 at 1 01 00 AM

Dismissible

Screen Shot 2022-07-22 at 1 01 35 AM

Collapsed details

Screen Shot 2022-07-22 at 1 02 00 AM

With details

Screen Shot 2022-07-22 at 1 02 09 AM

@AbhineetJain AbhineetJain requested a review from a team as a code owner July 22, 2022 05:04

return (
<Stack>
<Stack className={styles.root}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this outermost element need to be a Stack or can it just be a fragment, i.e. <></>?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adds the gap for the retry component. I am fine with keeping this as a Stack.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactored it now!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, that looks great!

const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
root: {
background: `${theme.palette.error.main}60`,
margin: `${theme.spacing(2)}px`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a suggestion: this component might be a little more flexible if we leave off the margin and instead let the parent decide what the margin should be (it will probably vary). If you feel like it, you could even pass in a style prop so that the parent can pass through its own styles.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're going to use this component a lot and I'd like it to look decent without additional styling. Maybe we can give it margins we think are typical and then override when necessary.

Copy link
Member

@Kira-Pilot Kira-Pilot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks super!

Copy link
Contributor

@presleyp presleyp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great finishing touches!

@AbhineetJain AbhineetJain enabled auto-merge (squash) July 22, 2022 19:10
@AbhineetJain AbhineetJain merged commit 1b19a09 into main Jul 22, 2022
@AbhineetJain AbhineetJain deleted the abhineetjain/error-summary-component branch July 22, 2022 19:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create new component to display error messages with details
3 participants