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.

Sign up for GitHub

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
Merged

feat: New static error summary component #3107

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a1cbeeb
create new static error summary component
AbhineetJain Jul 22, 2022
935d4bf
fix import path
AbhineetJain Jul 22, 2022
3f8c631
Merge branch 'main' into abhineetjain/error-summary-component
AbhineetJain Jul 22, 2022
793c689
add aria-expanded
AbhineetJain Jul 22, 2022
8334a6c
add detail background, redesign retry button
AbhineetJain Jul 22, 2022
66fd954
Merge branch 'main' into abhineetjain/error-summary-component
AbhineetJain Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add detail background, redesign retry button
  • Loading branch information
@AbhineetJain
AbhineetJain committed Jul 22, 2022
commit 8334a6c8b3dc9669b0b32947a2b937edeae70339
65 changes: 37 additions & 28 deletions site/src/components/ErrorSummary/ErrorSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
import Collapse from "@material-ui/core/Collapse"
import IconButton from "@material-ui/core/IconButton"
import Link from "@material-ui/core/Link"
import { makeStyles, Theme } from "@material-ui/core/styles"
import { darken, makeStyles, Theme } from "@material-ui/core/styles"
import CloseIcon from "@material-ui/icons/Close"
import RefreshIcon from "@material-ui/icons/Refresh"
import { ApiError, getErrorDetail, getErrorMessage } from "api/errors"
Expand Down Expand Up @@ -49,33 +49,33 @@ export const ErrorSummary: FC<ErrorSummaryProps> = ({
}

return (
<Stack>
<Stack className={styles.root}>
<Stack direction="row" alignItems="center" className={styles.message}>
<div>
<span className={styles.errorMessage}>{message}</span>
{!!detail && (
<Link
aria-expanded={showDetails}
onClick={toggleShowDetails}
className={styles.detailsLink}
>
{showDetails ? Language.lessDetails : Language.moreDetails}
</Link>
)}
</div>
{dismissible && (
<IconButton onClick={closeError} className={styles.iconButton}>
<CloseIcon className={styles.closeIcon} />
</IconButton>
<Stack className={styles.root}>
<Stack direction="row" alignItems="center" className={styles.messageBox}>
<div>
<span className={styles.errorMessage}>{message}</span>
{!!detail && (
<Link
aria-expanded={showDetails}
onClick={toggleShowDetails}
className={styles.detailsLink}
tabIndex={0}
>
{showDetails ? Language.lessDetails : Language.moreDetails}
</Link>
)}
</Stack>
<Collapse in={showDetails}>{detail}</Collapse>
</div>
{dismissible && (
<IconButton onClick={closeError} className={styles.iconButton}>
<CloseIcon className={styles.closeIcon} />
</IconButton>
)}
</Stack>

<Collapse in={showDetails}>
<div className={styles.details}>{detail}</div>
</Collapse>
{retry && (
<div>
<Button onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
<div className={styles.retry}>
<Button size="small" onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
{Language.retryMessage}
</Button>
</div>
Expand All @@ -90,13 +90,13 @@ interface StyleProps {

const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
root: {
background: `${theme.palette.error.main}60`,
background: darken(theme.palette.error.main, 0.6),
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.

padding: `${theme.spacing(2)}px`,
borderRadius: theme.shape.borderRadius,
gap: (props) => (props.showDetails ? `${theme.spacing(2)}px` : 0),
gap: 0,
},
message: {
messageBox: {
justifyContent: "space-between",
},
errorMessage: {
Expand All @@ -105,6 +105,12 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
detailsLink: {
cursor: "pointer",
},
details: {
marginTop: `${theme.spacing(2)}px`,
padding: `${theme.spacing(2)}px`,
background: darken(theme.palette.error.main, 0.7),
borderRadius: theme.shape.borderRadius,
},
iconButton: {
padding: 0,
},
Expand All @@ -113,4 +119,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
height: 25,
color: theme.palette.primary.contrastText,
},
retry: {
marginTop: `${theme.spacing(2)}px`,
},
}))