May 18, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023
diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx
 import { useState, FC,Children } from "react"
 import { useState, FC,ReactNode, PropsWithChildren } from "react"
 import Collapse from "@mui/material/Collapse"
 import { Stack } from "components/Stack/Stack"
 import { makeStyles } from "@mui/styles"
 import { colors } from "theme/colors"
 import { useTranslation } from "react-i18next"
 import { getErrorDetail, getErrorMessage } from "api/errors"
 import { Expander } from "components/Expander/Expander"
 import { Severity, AlertBannerProps } from "./alertTypes"
 import { severityConstants } from "./severityConstants"
 import { AlertBannerCtas } from "./AlertBannerCtas"
 import { Theme } from "@mui/material/styles"
 import Alert, { AlertProps } from "@mui/material/Alert"
 import Button from "@mui/material/Button"

 /**
 * @param children: the children to be displayed in the alert
 * @param severity: the level of alert severity (see ./severityTypes.ts)
 * @param text: default text to be displayed to the user; useful for warnings or as a fallback error message
 * @param error: should be passed in if the severity is 'Error'; warnings can use 'text' instead
 * @param actions: an array of CTAs passed in by the consumer
 * @param retry: a handler to retry the action that spawned the error
 * @param dismissible: determines whether or not the banner should have a `Dismiss` CTA
 * @param onDismiss: a handler that is called when the `Dismiss` CTA is clicked, after the animation has finished
 */
 export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
 export interface AlertBannerProps {
  severity: AlertProps["severity"]
  actions?: ReactNode[]
  dismissible?: boolean
  onRetry?: () => void
  onDismiss?: () => void
 }

 export const AlertBanner: FC<PropsWithChildren<AlertBannerProps>> = ({
  children,
  severity,
  text,
  error,
  actions = [],
  retry,
  dismissible = false,
  onRetry,
  dismissible,
  severity,
  onDismiss,
 }) => {
  const { t } = useTranslation("common")

  const [open, setOpen] = useState(true)

  // Set a fallback message if no text or children are provided.
  const defaultMessage =
    text ??
    (Children.count(children) === 0
      ? t("warningsAndErrors.somethingWentWrong")
      : "")

  // if an error is passed in, display that error, otherwise
  // display the text passed in, e.g. warning text
  const alertMessage = getErrorMessage(error, defaultMessage)

  // if we have an error, check if there's detail to display
  const detail = error ? getErrorDetail(error) : undefined
  const classes = useStyles({ severity, hasDetail: Boolean(detail) })
  return (
    <Collapse in={open}>
      <Alert
        severity={severity}
        action={
          <Stack direction="row">
            {/* CTAs passed in by the consumer */}
            {actions.length > 0 &&
              actions.map((action) => <div key={String(action)}>{action}</div>)}

  const [showDetails, setShowDetails] = useState(false)
            {/* retry CTA */}
            {onRetry && (
              <div>
                <Button size="small" onClick={onRetry}>
                  Retry
                </Button>
              </div>
            )}

  return (
    <Collapse in={open} onExited={() => onDismiss && onDismiss()}>
      <Stack
        className={classes.alertContainer}
        direction="row"
        alignItems="center"
        spacing={0}
        justifyContent="space-between"
      >
        <Stack
          direction="row"
          alignItems="center"
          spacing={2}
          className={classes.fullWidth}
        >
          {severityConstants[severity].icon}
          <Stack spacing={0} className={classes.fullWidth}>
            {children}
            {alertMessage}
            {detail && (
              <Expander expanded={showDetails} setExpanded={setShowDetails}>
                <div>{detail}</div>
              </Expander>
            {/* close CTA */}
            {dismissible && (
              <Button
                size="small"
                onClick={() => {
                  setOpen(false)
                  onDismiss && onDismiss()
                }}
                data-testid="dismiss-banner-btn"
              >
                Dismiss
              </Button>
            )}
          </Stack>
        </Stack>

        <AlertBannerCtas
          actions={actions}
          dismissible={dismissible}
          retry={retry}
          setOpen={setOpen}
        />
      </Stack>
        }
      >
        {children}
      </Alert>
    </Collapse>
  )
 }

 interface StyleProps {
  severity: Severity
  hasDetail: boolean
 }

 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
  alertContainer: (props) => ({
    ...theme.typography.body2,
    borderColor: severityConstants[props.severity].color,
    border: `1px solid ${colors.orange[7]}`,
    borderRadius: theme.shape.borderRadius,
    padding: theme.spacing(2),
    backgroundColor: `${colors.gray[16]}`,
    textAlign: "left",

    "& > span": {
      paddingTop: theme.spacing(0.25),
    },

    // targeting the alert icon rather than the expander icon
    "& svg:nth-child(2)": {
      marginTop: props.hasDetail ? theme.spacing(1) : "inherit",
      marginRight: theme.spacing(1),
    },
  }),

  fullWidth: {
    width: "100%",
  },
 }))
diff --git a/site/src/components/AlertBanner/AlertBannerCtas.tsx b/site/src/components/AlertBanner/AlertBannerCtas.tsx
diff --git a/site/src/components/AlertBanner/alertTypes.ts b/site/src/components/AlertBanner/alertTypes.ts
diff --git a/site/src/components/AlertBanner/severityConstants.tsx b/site/src/components/AlertBanner/severityConstants.tsx
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { getErrorMessage } from "api/errors"

 export interface AccountFormValues {
  username: string
      <form onSubmit={form.handleSubmit}>
        <Stack>
          {Boolean(updateProfileError) && (
            <AlertBanner severity="error" error={updateProfileError} />
            <AlertBanner severity="error">
              {getErrorMessage(updateProfileError, "Error updating profile")}
            </AlertBanner>
          )}
          <TextField
            disabled
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { getErrorMessage } from "api/errors"

 interface SecurityFormValues {
  old_password: string
      <form onSubmit={form.handleSubmit}>
        <Stack>
          {Boolean(updateSecurityError) && (
            <AlertBanner severity="error" error={updateSecurityError} />
            <AlertBanner severity="error">
              {getErrorMessage(updateSecurityError, "Error updating password")}
            </AlertBanner>
          )}
          <TextField
            {...getFieldHelpers("old_password")}
diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
 import Button from "@mui/material/Button"
 import EmailIcon from "@mui/icons-material/EmailOutlined"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { getErrorMessage } from "api/errors"

 export const Language = {
  emailLabel: "Email",
      </h1>
      <Maybe condition={error !== undefined}>
        <div className={styles.error}>
          <AlertBanner severity="error" error={error} />
          <AlertBanner severity="error">
            {getErrorMessage(error, "Error on sign in")}
          </AlertBanner>
        </div>
      </Maybe>
      <Maybe condition={passwordEnabled && showPasswordAuth}>
      </Maybe>

      <Maybe condition={!passwordEnabled && !oAuthEnabled}>
        <AlertBanner
          severity="error"
          text="No authentication methods configured!"
        />
        <AlertBanner severity="error">
          No authentication methods configured!
        </AlertBanner>
      </Maybe>

      <Maybe condition={passwordEnabled && !showPasswordAuth}>
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
 } from "api/api"
 import { useQuery } from "@tanstack/react-query"
 import { AuthorizationRequest } from "api/typesGenerated"
 import { getErrorMessage } from "api/errors"

 const templatePermissions = (
  templateId: string,
  if (error) {
    return (
      <div className={styles.error}>
        <AlertBanner severity="error" error={error} />
        <AlertBanner severity="error">
          {getErrorMessage(error, "Error on get template")}
        </AlertBanner>
      </div>
    )
  }
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
                }`}
              >
                {templateVersion.job.error && (
                  <AlertBanner
                    severity="error"
                    text={templateVersion.job.error}
                  />
                  <AlertBanner severity="error">
                    {templateVersion.job.error}
                  </AlertBanner>
                )}

                {buildLogs && buildLogs.length > 0 && (
Original file line number	Diff line number	Diff line change
		@@ -1,122 +1,64 @@
		import { useState, FC,Children } from "react"
		import { useState, FC,ReactNode, PropsWithChildren } from "react"
		import Collapse from "@mui/material/Collapse"
		import { Stack } from "components/Stack/Stack"
		import { makeStyles } from "@mui/styles"
		import { colors } from "theme/colors"
		import { useTranslation } from "react-i18next"
		import { getErrorDetail, getErrorMessage } from "api/errors"
		import { Expander } from "components/Expander/Expander"
		import { Severity, AlertBannerProps } from "./alertTypes"
		import { severityConstants } from "./severityConstants"
		import { AlertBannerCtas } from "./AlertBannerCtas"
		import { Theme } from "@mui/material/styles"
		import Alert, { AlertProps } from "@mui/material/Alert"
		import Button from "@mui/material/Button"

		/**
		* @param children: the children to be displayed in the alert
		* @param severity: the level of alert severity (see ./severityTypes.ts)
		* @param text: default text to be displayed to the user; useful for warnings or as a fallback error message
		* @param error: should be passed in if the severity is 'Error'; warnings can use 'text' instead
		* @param actions: an array of CTAs passed in by the consumer
		* @param retry: a handler to retry the action that spawned the error
		* @param dismissible: determines whether or not the banner should have a `Dismiss` CTA
		* @param onDismiss: a handler that is called when the `Dismiss` CTA is clicked, after the animation has finished
		*/
		export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
		export interface AlertBannerProps {
		severity: AlertProps["severity"]
		actions?: ReactNode[]
		dismissible?: boolean
		onRetry?: () => void
		onDismiss?: () => void
		}

		export const AlertBanner: FC<PropsWithChildren<AlertBannerProps>> = ({
		children,
		severity,
		text,
		error,
		actions = [],
		retry,
		dismissible = false,
		onRetry,
		dismissible,
		severity,
		onDismiss,
		}) => {
		const { t } = useTranslation("common")

		const [open, setOpen] = useState(true)

		// Set a fallback message if no text or children are provided.
		const defaultMessage =
		text ??
		(Children.count(children) === 0
		? t("warningsAndErrors.somethingWentWrong")
		: "")

		// if an error is passed in, display that error, otherwise
		// display the text passed in, e.g. warning text
		const alertMessage = getErrorMessage(error, defaultMessage)

		// if we have an error, check if there's detail to display
		const detail = error ? getErrorDetail(error) : undefined
		const classes = useStyles({ severity, hasDetail: Boolean(detail) })
		return (
		<Collapse in={open}>
		<Alert
		severity={severity}
		action={
		<Stack direction="row">
		{/* CTAs passed in by the consumer */}
		{actions.length > 0 &&
		actions.map((action) => <div key={String(action)}>{action}</div>)}

		const [showDetails, setShowDetails] = useState(false)
		{/* retry CTA */}
		{onRetry && (
		<div>
		<Button size="small" onClick={onRetry}>
		Retry
		</Button>
		</div>
		)}

		return (
		<Collapse in={open} onExited={() => onDismiss && onDismiss()}>
		<Stack
		className={classes.alertContainer}
		direction="row"
		alignItems="center"
		spacing={0}
		justifyContent="space-between"
		>
		<Stack
		direction="row"
		alignItems="center"
		spacing={2}
		className={classes.fullWidth}
		>
		{severityConstants[severity].icon}
		<Stack spacing={0} className={classes.fullWidth}>
		{children}
		{alertMessage}
		{detail && (
		<Expander expanded={showDetails} setExpanded={setShowDetails}>
		<div>{detail}</div>
		</Expander>
		{/* close CTA */}
		{dismissible && (
		<Button
		size="small"
		onClick={() => {
		setOpen(false)
		onDismiss && onDismiss()
		}}
		data-testid="dismiss-banner-btn"
		>
		Dismiss
		</Button>
		)}
		</Stack>
		</Stack>

		<AlertBannerCtas
		actions={actions}
		dismissible={dismissible}
		retry={retry}
		setOpen={setOpen}
		/>
		</Stack>
		}
		>
		{children}
		</Alert>
		</Collapse>
		)
		}

		interface StyleProps {
		severity: Severity
		hasDetail: boolean
		}

		const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
		alertContainer: (props) => ({
		...theme.typography.body2,
		borderColor: severityConstants[props.severity].color,
		border: `1px solid ${colors.orange[7]}`,
		borderRadius: theme.shape.borderRadius,
		padding: theme.spacing(2),
		backgroundColor: `${colors.gray[16]}`,
		textAlign: "left",

		"& > span": {
		paddingTop: theme.spacing(0.25),
		},

		// targeting the alert icon rather than the expander icon
		"& svg:nth-child(2)": {
		marginTop: props.hasDetail ? theme.spacing(1) : "inherit",
		marginRight: theme.spacing(1),
		},
		}),

		fullWidth: {
		width: "100%",
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,6 +10,7 @@ import {
		import { LoadingButton } from "../LoadingButton/LoadingButton"
		import { Stack } from "../Stack/Stack"
		import { AlertBanner } from "components/AlertBanner/AlertBanner"
		import { getErrorMessage } from "api/errors"

		export interface AccountFormValues {
		username: string
Expand DownExpand Up		@@ -62,7 +63,9 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
		<form onSubmit={form.handleSubmit}>
		<Stack>
		{Boolean(updateProfileError) && (
		<AlertBanner severity="error" error={updateProfileError} />
		<AlertBanner severity="error">
		{getErrorMessage(updateProfileError, "Error updating profile")}
		</AlertBanner>
		)}
		<TextField
		disabled
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,6 +6,7 @@ import { getFormHelpers } from "../../utils/formUtils"
		import { LoadingButton } from "../LoadingButton/LoadingButton"
		import { Stack } from "../Stack/Stack"
		import { AlertBanner } from "components/AlertBanner/AlertBanner"
		import { getErrorMessage } from "api/errors"

		interface SecurityFormValues {
		old_password: string
Expand DownExpand Up		@@ -73,7 +74,9 @@ export const SecurityForm: FC<SecurityFormProps> = ({
		<form onSubmit={form.handleSubmit}>
		<Stack>
		{Boolean(updateSecurityError) && (
		<AlertBanner severity="error" error={updateSecurityError} />
		<AlertBanner severity="error">
		{getErrorMessage(updateSecurityError, "Error updating password")}
		</AlertBanner>
		)}
		<TextField
		{...getFieldHelpers("old_password")}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,6 +10,7 @@ import { BuiltInAuthFormValues } from "./SignInForm.types"
		import Button from "@mui/material/Button"
		import EmailIcon from "@mui/icons-material/EmailOutlined"
		import { AlertBanner } from "components/AlertBanner/AlertBanner"
		import { getErrorMessage } from "api/errors"

		export const Language = {
		emailLabel: "Email",
Expand DownExpand Up		@@ -100,7 +101,9 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
		</h1>
		<Maybe condition={error !== undefined}>
		<div className={styles.error}>
		<AlertBanner severity="error" error={error} />
		<AlertBanner severity="error">
		{getErrorMessage(error, "Error on sign in")}
		</AlertBanner>
		</div>
		</Maybe>
		<Maybe condition={passwordEnabled && showPasswordAuth}>
Expand All		@@ -126,10 +129,9 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
		</Maybe>

		<Maybe condition={!passwordEnabled && !oAuthEnabled}>
		<AlertBanner
		severity="error"
		text="No authentication methods configured!"
		/>
		<AlertBanner severity="error">
		No authentication methods configured!
		</AlertBanner>
		</Maybe>

		<Maybe condition={passwordEnabled && !showPasswordAuth}>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,6 +15,7 @@ import {
		} from "api/api"
		import { useQuery } from "@tanstack/react-query"
		import { AuthorizationRequest } from "api/typesGenerated"
		import { getErrorMessage } from "api/errors"

		const templatePermissions = (
		templateId: string,
Expand DownExpand Up		@@ -75,7 +76,9 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
		if (error) {
		return (
		<div className={styles.error}>
		<AlertBanner severity="error" error={error} />
		<AlertBanner severity="error">
		{getErrorMessage(error, "Error on get template")}
		</AlertBanner>
		</div>
		)
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -377,10 +377,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
		}`}
		>
		{templateVersion.job.error && (
		<AlertBanner
		severity="error"
		text={templateVersion.job.error}
		/>
		<AlertBanner severity="error">
		{templateVersion.job.error}
		</AlertBanner>
		)}

		{buildLogs && buildLogs.length > 0 && (
Expand Down