Oct 7, 2022 · Oct 7, 2022 · Oct 7, 2022 · Oct 7, 2022
diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx
    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
    backgroundColor: `${colors.gray[16]}`,

    "& svg": {
    // targeting the alert icon rather than the expander icon
    "& svg:nth-child(2)": {
      marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit",
      marginRight: `${theme.spacing(1)}px`,
    },
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
 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"
 import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip"
 import { ResourceAgentLatency } from "./ResourceAgentLatency"
 import { ResourceAvatarData } from "./ResourceAvatarData"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"

 const Language = {
  resources: "Resources",
    <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
 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
    <>
      <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
 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
    <>
      <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
 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"
 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)
      <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")}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -85,7 +85,8 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
		padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
		backgroundColor: `${colors.gray[16]}`,

		"& svg": {
		// targeting the alert icon rather than the expander icon
		"& svg:nth-child(2)": {
		marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit",
		marginRight: `${theme.spacing(1)}px`,
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Expand All		@@ -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",
Expand DownExpand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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
Expand DownExpand Up		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Expand All		@@ -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)
Expand DownExpand Up		@@ -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")}
Expand Down