coder · Kira-Pilot · Oct 7, 2022 · Oct 7, 2022 · Oct 7, 2022 · Oct 7, 2022
diff --git a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
diff --git a/site/src/components/ErrorSummary/ErrorSummary.test.tsx b/site/src/components/ErrorSummary/ErrorSummary.test.tsx
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -9,7 +9,6 @@ import TableRow from "@material-ui/core/TableRow"
 import { Skeleton } from "@material-ui/lab"
 import useTheme from "@material-ui/styles/useTheme"
 import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
-import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
 import { TableCellDataPrimary } from "components/TableCellData/TableCellData"
 import { FC, useState } from "react"
@@ -25,6 +24,7 @@ import { AgentOutdatedTooltip } from "../Tooltips/AgentOutdatedTooltip"
 import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
 import { ResourceAgentLatency } from "./ResourceAgentLatency"
 import { ResourceAvatarData } from "./ResourceAvatarData"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
 
 const Language = {
   resources: "Resources",
@@ -68,7 +68,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
     <Stack direction="column" spacing={1}>
       <div aria-label={Language.resources} className={styles.wrapper}>
         {getResourcesError ? (
-          <ErrorSummary error={getResourcesError} />
+          <AlertBanner severity="error" error={getResourcesError} />
         ) : (
           <TableContainer className={styles.tableContainer}>
             <Table>

diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -1,11 +1,11 @@
 import TextField from "@material-ui/core/TextField"
-import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
 
 export interface AccountFormValues {
   username: string
@@ -53,7 +53,9 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
     <>
       <form onSubmit={form.handleSubmit}>
         <Stack>
-          {updateProfileError ? <ErrorSummary error={updateProfileError} /> : <></>}
+          {Boolean(updateProfileError) && (
+            <AlertBanner severity="error" error={updateProfileError} />
+          )}
           <TextField
             disabled
             fullWidth

diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -1,11 +1,11 @@
 import TextField from "@material-ui/core/TextField"
-import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
 
 interface SecurityFormValues {
   old_password: string
@@ -68,7 +68,9 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
     <>
       <form onSubmit={form.handleSubmit}>
         <Stack>
-          {updateSecurityError ? <ErrorSummary error={updateSecurityError} /> : <></>}
+          {Boolean(updateSecurityError) && (
+            <AlertBanner severity="error" error={updateSecurityError} />
+          )}
           <TextField
             {...getFieldHelpers("old_password")}
             onChange={onChangeTrimmed(form)}

diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
@@ -5,7 +5,6 @@ import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import GitHubIcon from "@material-ui/icons/GitHub"
 import KeyIcon from "@material-ui/icons/VpnKey"
-import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { Stack } from "components/Stack/Stack"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
@@ -14,6 +13,7 @@ import { AuthMethods } from "../../api/typesGenerated"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { Welcome } from "../Welcome/Welcome"
 import { LoadingButton } from "./../LoadingButton/LoadingButton"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)
@@ -120,14 +120,16 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
       <Welcome />
       <form onSubmit={form.handleSubmit}>
         <Stack>
-          {Object.keys(loginErrors).map((errorKey: string) =>
-            loginErrors[errorKey as LoginErrors] ? (
-              <ErrorSummary
-                key={errorKey}
-                error={loginErrors[errorKey as LoginErrors]}
-                defaultMessage={Language.errorMessages[errorKey as LoginErrors]}
-              />
-            ) : null,
+          {Object.keys(loginErrors).map(
+            (errorKey: string) =>
+              Boolean(loginErrors[errorKey as LoginErrors]) && (
+                <AlertBanner
+                  key={errorKey}
+                  severity="error"
+                  error={loginErrors[errorKey as LoginErrors]}
+                  text={Language.errorMessages[errorKey as LoginErrors]}
+                />
+              ),
           )}
           <TextField
             {...getFieldHelpers("email")}