Skip to content

Commit 257df81

Browse files
authored
chore: replace old ErrorSummary component (#4417)
* replaced error summary * fixed tests * positioning caret
1 parent 2b6586d commit 257df81

File tree

21 files changed

+103
-342
lines changed

21 files changed

+103
-342
lines changed

site/src/components/AlertBanner/AlertBanner.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
8585
padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
8686
backgroundColor: `${colors.gray[16]}`,
8787

88-
"& svg": {
88+
// targeting the alert icon rather than the expander icon
89+
"& svg:nth-child(2)": {
8990
marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit",
9091
marginRight: `${theme.spacing(1)}px`,
9192
},

site/src/components/ErrorSummary/ErrorSummary.stories.tsx

Lines changed: 0 additions & 61 deletions
This file was deleted.

site/src/components/ErrorSummary/ErrorSummary.test.tsx

Lines changed: 0 additions & 81 deletions
This file was deleted.

site/src/components/ErrorSummary/ErrorSummary.tsx

Lines changed: 0 additions & 129 deletions
This file was deleted.

site/src/components/Resources/Resources.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import TableRow from "@material-ui/core/TableRow"
99
import { Skeleton } from "@material-ui/lab"
1010
import useTheme from "@material-ui/styles/useTheme"
1111
import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
12-
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
1312
import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
1413
import { TableCellDataPrimary } from "components/TableCellData/TableCellData"
1514
import { FC, useState } from "react"
@@ -25,6 +24,7 @@ import { AgentOutdatedTooltip } from "../Tooltips/AgentOutdatedTooltip"
2524
import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
2625
import { ResourceAgentLatency } from "./ResourceAgentLatency"
2726
import { ResourceAvatarData } from "./ResourceAvatarData"
27+
import { AlertBanner } from "components/AlertBanner/AlertBanner"
2828

2929
const Language = {
3030
resources: "Resources",
@@ -68,7 +68,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
6868
<Stack direction="column" spacing={1}>
6969
<div aria-label={Language.resources} className={styles.wrapper}>
7070
{getResourcesError ? (
71-
<ErrorSummary error={getResourcesError} />
71+
<AlertBanner severity="error" error={getResourcesError} />
7272
) : (
7373
<TableContainer className={styles.tableContainer}>
7474
<Table>

site/src/components/SettingsAccountForm/SettingsAccountForm.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import TextField from "@material-ui/core/TextField"
2-
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
32
import { FormikContextType, FormikTouched, useFormik } from "formik"
43
import { FC } from "react"
54
import * as Yup from "yup"
65
import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
76
import { LoadingButton } from "../LoadingButton/LoadingButton"
87
import { Stack } from "../Stack/Stack"
8+
import { AlertBanner } from "components/AlertBanner/AlertBanner"
99

1010
export interface AccountFormValues {
1111
username: string
@@ -53,7 +53,9 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
5353
<>
5454
<form onSubmit={form.handleSubmit}>
5555
<Stack>
56-
{updateProfileError ? <ErrorSummary error={updateProfileError} /> : <></>}
56+
{Boolean(updateProfileError) && (
57+
<AlertBanner severity="error" error={updateProfileError} />
58+
)}
5759
<TextField
5860
disabled
5961
fullWidth

site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import TextField from "@material-ui/core/TextField"
2-
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
32
import { FormikContextType, FormikTouched, useFormik } from "formik"
43
import React from "react"
54
import * as Yup from "yup"
65
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
76
import { LoadingButton } from "../LoadingButton/LoadingButton"
87
import { Stack } from "../Stack/Stack"
8+
import { AlertBanner } from "components/AlertBanner/AlertBanner"
99

1010
interface SecurityFormValues {
1111
old_password: string
@@ -68,7 +68,9 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
6868
<>
6969
<form onSubmit={form.handleSubmit}>
7070
<Stack>
71-
{updateSecurityError ? <ErrorSummary error={updateSecurityError} /> : <></>}
71+
{Boolean(updateSecurityError) && (
72+
<AlertBanner severity="error" error={updateSecurityError} />
73+
)}
7274
<TextField
7375
{...getFieldHelpers("old_password")}
7476
onChange={onChangeTrimmed(form)}

site/src/components/SignInForm/SignInForm.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { makeStyles } from "@material-ui/core/styles"
55
import TextField from "@material-ui/core/TextField"
66
import GitHubIcon from "@material-ui/icons/GitHub"
77
import KeyIcon from "@material-ui/icons/VpnKey"
8-
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
98
import { Stack } from "components/Stack/Stack"
109
import { FormikContextType, FormikTouched, useFormik } from "formik"
1110
import { FC } from "react"
@@ -14,6 +13,7 @@ import { AuthMethods } from "../../api/typesGenerated"
1413
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
1514
import { Welcome } from "../Welcome/Welcome"
1615
import { LoadingButton } from "./../LoadingButton/LoadingButton"
16+
import { AlertBanner } from "components/AlertBanner/AlertBanner"
1717

1818
/**
1919
* BuiltInAuthFormValues describes a form using built-in (email/password)
@@ -120,14 +120,16 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
120120
<Welcome />
121121
<form onSubmit={form.handleSubmit}>
122122
<Stack>
123-
{Object.keys(loginErrors).map((errorKey: string) =>
124-
loginErrors[errorKey as LoginErrors] ? (
125-
<ErrorSummary
126-
key={errorKey}
127-
error={loginErrors[errorKey as LoginErrors]}
128-
defaultMessage={Language.errorMessages[errorKey as LoginErrors]}
129-
/>
130-
) : null,
123+
{Object.keys(loginErrors).map(
124+
(errorKey: string) =>
125+
Boolean(loginErrors[errorKey as LoginErrors]) && (
126+
<AlertBanner
127+
key={errorKey}
128+
severity="error"
129+
error={loginErrors[errorKey as LoginErrors]}
130+
text={Language.errorMessages[errorKey as LoginErrors]}
131+
/>
132+
),
131133
)}
132134
<TextField
133135
{...getFieldHelpers("email")}

0 commit comments

Comments
 (0)