May 18, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
          message:
            "You should use the Avatar component provided on
            components/Avatar/Avatar"
        - name: "@mui/material/Alert"
          message:
            "You should use the Alert component provided on
            components/Alert/Alert"
  no-unused-vars: "off"
  "object-curly-spacing": "off"
  react-hooks/exhaustive-deps: warn
diff --git a/site/src/components/Alert/Alert.stories.tsx b/site/src/components/Alert/Alert.stories.tsx
 import { Alert } from "./Alert"
 import Button from "@mui/material/Button"
 import { mockApiError } from "testHelpers/entities"
 import Link from "@mui/material/Link"
 import { getErrorMessage } from "api/errors"
 import type { Meta, StoryObj } from "@storybook/react"
 import { action } from "@storybook/addon-actions"

 const meta: Meta<typeof Alert> = {
  title: "components/Alert",
  component: Alert,
  args: {
    severity: "error",
  },
 }

 export default meta
 type Story = StoryObj<typeof Alert>

 const ExampleAction = (
  <Button onClick={() => null} size="small">
    Button
  </Button>
 )

 const mockError = mockApiError({
  message: "Email or password was invalid",
  detail: "Password is invalid",
 })

 export const Warning: Story = {
  args: {
    children: "This is a warning",
    severity: "warning",
  },
 }

 export const ErrorWithDefaultMessage: Story = {
  args: {
    children: "This is an error",
    severity: "error",
  },
 }

 export const ErrorWithErrorMessage: Story = {
  args: {
    children: getErrorMessage(mockError, "Error default message"),
    severity: "error",
  },
 }

 export const WarningWithDismiss: Story = {
  args: {
    children: "This is a warning",
    dismissible: true,
    severity: "warning",
  },
 }

 export const ErrorWithDismiss: Story = {
  args: {
    children: getErrorMessage(mockError, "Default error message"),
    dismissible: true,
    severity: "error",
  },
 }
 export const WarningWithAction: Story = {
  args: {
    children: "This is a warning",
    actions: [ExampleAction],
    severity: "warning",
  },
 }

 export const ErrorWithAction: Story = {
  args: {
    children: getErrorMessage(mockError, "Default error message"),
    actions: [ExampleAction],
    severity: "error",
  },
 }

 export const WarningWithActionAndDismiss: Story = {
  args: {
    children: "This is a warning",
    actions: [ExampleAction],
    dismissible: true,
    severity: "warning",
  },
 }

 export const ErrorWithActionAndDismiss: Story = {
  args: {
    children: getErrorMessage(mockError, "Default error message"),
    actions: [ExampleAction],
    dismissible: true,
    severity: "error",
  },
 }

 export const ErrorWithRetry: Story = {
  args: {
    children: getErrorMessage(mockError, "Default error message"),
    onRetry: action("retry"),
    dismissible: true,
    severity: "error",
  },
 }

 export const ErrorWithActionRetryAndDismiss: Story = {
  args: {
    children: getErrorMessage(mockError, "Default error message"),
    actions: [ExampleAction],
    onRetry: action("retry"),
    dismissible: true,
    severity: "error",
  },
 }

 export const ErrorAsWarning: Story = {
  args: {
    children: getErrorMessage(mockError, "Default error message"),
    severity: "warning",
  },
 }

 export const WithChildren: Story = {
  args: {
    children: (
      <div>
        This is a message with a <Link href="#">link</Link>
      </div>
    ),
  },
 }
diff --git a/...rc/components/AlertBanner/AlertBanner.tsx → site/src/components/Alert/Alert.tsx b/...rc/components/AlertBanner/AlertBanner.tsx → site/src/components/Alert/Alert.tsx
 import { useState, FC, ReactNode, PropsWithChildren } from "react"
 import Collapse from "@mui/material/Collapse"
 import { Stack } from "components/Stack/Stack"
 import Alert, { AlertProps } from "@mui/material/Alert"
 // eslint-disable-next-line no-restricted-imports -- It is the base component
 import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert"
 import Button from "@mui/material/Button"

 export interfaceAlertBannerProps {
  severity:AlertProps["severity"]
 export interfaceAlertProps {
  severity:MuiAlertProps["severity"]
  actions?: ReactNode[]
  dismissible?: boolean
  onRetry?: () => void
  onDismiss?: () => void
 }

 export constAlertBanner: FC<PropsWithChildren<AlertBannerProps>> = ({
 export constAlert: FC<PropsWithChildren<AlertProps>> = ({
  children,
  actions = [],
  onRetry,

  return (
    <Collapse in={open}>
      <Alert
      <MuiAlert
        severity={severity}
        action={
          <Stack direction="row">
        }
      >
        {children}
      </Alert>
      </MuiAlert>
    </Collapse>
  )
 }
diff --git a/site/src/components/AlertBanner/AlertBanner.stories.tsx b/site/src/components/AlertBanner/AlertBanner.stories.tsx
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
 } from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 import {AlertBanner } from "components/AlertBanner/AlertBanner"
 import {Alert } from "components/Alert/Alert"
 import { getErrorMessage } from "api/errors"

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

 interface SecurityFormValues {
      <form onSubmit={form.handleSubmit}>
        <Stack>
          {Boolean(updateSecurityError) && (
            <AlertBanner severity="error">
            <Alert severity="error">
              {getErrorMessage(updateSecurityError, "Error updating password")}
            </AlertBanner>
            </Alert>
          )}
          <TextField
            {...getFieldHelpers("old_password")}
diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
 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 {Alert } from "components/Alert/Alert"
 import { getErrorMessage } from "api/errors"

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

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

      <Maybe condition={passwordEnabled && !showPasswordAuth}>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -128,6 +128,10 @@ rules:
		message:
		"You should use the Avatar component provided on
		components/Avatar/Avatar"
		- name: "@mui/material/Alert"
		message:
		"You should use the Alert component provided on
		components/Alert/Alert"
Copy link Member Kira-PilotMay 17, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Nice! rodrimaia reacted with heart emoji
		no-unused-vars: "off"
		"object-curly-spacing": "off"
		react-hooks/exhaustive-deps: warn
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,135 @@
		import { Alert } from "./Alert"
		import Button from "@mui/material/Button"
		import { mockApiError } from "testHelpers/entities"
		import Link from "@mui/material/Link"
		import { getErrorMessage } from "api/errors"
		import type { Meta, StoryObj } from "@storybook/react"
		import { action } from "@storybook/addon-actions"

		const meta: Meta<typeof Alert> = {
		title: "components/Alert",
		component: Alert,
		args: {
		severity: "error",
		},
		}

		export default meta
		type Story = StoryObj<typeof Alert>

		const ExampleAction = (
		<Button onClick={() => null} size="small">
		Button
		</Button>
		)

		const mockError = mockApiError({
		message: "Email or password was invalid",
		detail: "Password is invalid",
		})

		export const Warning: Story = {
		args: {
		children: "This is a warning",
		severity: "warning",
		},
		}

		export const ErrorWithDefaultMessage: Story = {
		args: {
		children: "This is an error",
		severity: "error",
		},
		}

		export const ErrorWithErrorMessage: Story = {
		args: {
		children: getErrorMessage(mockError, "Error default message"),
		severity: "error",
		},
		}

		export const WarningWithDismiss: Story = {
		args: {
		children: "This is a warning",
		dismissible: true,
		severity: "warning",
		},
		}

		export const ErrorWithDismiss: Story = {
		args: {
		children: getErrorMessage(mockError, "Default error message"),
		dismissible: true,
		severity: "error",
		},
		}
		export const WarningWithAction: Story = {
		args: {
		children: "This is a warning",
		actions: [ExampleAction],
		severity: "warning",
		},
		}

		export const ErrorWithAction: Story = {
		args: {
		children: getErrorMessage(mockError, "Default error message"),
		actions: [ExampleAction],
		severity: "error",
		},
		}

		export const WarningWithActionAndDismiss: Story = {
		args: {
		children: "This is a warning",
		actions: [ExampleAction],
		dismissible: true,
		severity: "warning",
		},
		}

		export const ErrorWithActionAndDismiss: Story = {
		args: {
		children: getErrorMessage(mockError, "Default error message"),
		actions: [ExampleAction],
		dismissible: true,
		severity: "error",
		},
		}

		export const ErrorWithRetry: Story = {
		args: {
		children: getErrorMessage(mockError, "Default error message"),
		onRetry: action("retry"),
		dismissible: true,
		severity: "error",
		},
		}

		export const ErrorWithActionRetryAndDismiss: Story = {
		args: {
		children: getErrorMessage(mockError, "Default error message"),
		actions: [ExampleAction],
		onRetry: action("retry"),
		dismissible: true,
		severity: "error",
		},
		}

		export const ErrorAsWarning: Story = {
		args: {
		children: getErrorMessage(mockError, "Default error message"),
		severity: "warning",
		},
		}

		export const WithChildren: Story = {
		args: {
		children: (
		<div>
		This is a message with a <Link href="#">link</Link>
		</div>
		),
		},
		}
Original file line number	Diff line number	Diff line change
		@@ -1,18 +1,19 @@
		import { useState, FC, ReactNode, PropsWithChildren } from "react"
		import Collapse from "@mui/material/Collapse"
		import { Stack } from "components/Stack/Stack"
		import Alert, { AlertProps } from "@mui/material/Alert"
		// eslint-disable-next-line no-restricted-imports -- It is the base component
		import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert"
		import Button from "@mui/material/Button"

		export interfaceAlertBannerProps {
		severity:AlertProps["severity"]
		export interfaceAlertProps {
		severity:MuiAlertProps["severity"]
Copy link Member Kira-PilotMay 17, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. If`ErrorAlert` is going to be a separate component, should we omit the severity`error` from this prop type? At first glance, it's hard to tell if I should be using`ErrorAlert` for errors, or`Alert` with`severity="error"` or both in different ways. Copy link ContributorAuthor BrunoQuaresmaMay 17, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. `Alert` is the generic one with extra things and it should still be usable for errors if you need some customization. The advantage of using the`ErrorAlert` component is, you can pass the error and get the message and detail displayed without having to do it yourself. Kira-Pilot reacted with thumbs up emoji
		actions?: ReactNode[]
		dismissible?: boolean
		onRetry?: () => void
		onDismiss?: () => void
		}

		export constAlertBanner: FC<PropsWithChildren<AlertBannerProps>> = ({
		export constAlert: FC<PropsWithChildren<AlertProps>> = ({
		children,
		actions = [],
		onRetry,
Expand All		@@ -24,7 +25,7 @@ export const AlertBanner: FC<PropsWithChildren<AlertBannerProps>> = ({

		return (
		<Collapse in={open}>
		<Alert
		<MuiAlert
		severity={severity}
		action={
		<Stack direction="row">
Expand DownExpand Up		@@ -58,7 +59,7 @@ export const AlertBanner: FC<PropsWithChildren<AlertBannerProps>> = ({
		}
		>
		{children}
		</Alert>
		</MuiAlert>
		</Collapse>
		)
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,7 @@ import {
		} from "../../utils/formUtils"
		import { LoadingButton } from "../LoadingButton/LoadingButton"
		import { Stack } from "../Stack/Stack"
		import {AlertBanner } from "components/AlertBanner/AlertBanner"
		import {Alert } from "components/Alert/Alert"
		import { getErrorMessage } from "api/errors"

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

		interface SecurityFormValues {
Expand DownExpand Up		@@ -74,9 +74,9 @@ export const SecurityForm: FC<SecurityFormProps> = ({
		<form onSubmit={form.handleSubmit}>
		<Stack>
		{Boolean(updateSecurityError) && (
		<AlertBanner severity="error">
		<Alert severity="error">
		{getErrorMessage(updateSecurityError, "Error updating password")}
		</AlertBanner>
		</Alert>
		)}
		<TextField
		{...getFieldHelpers("old_password")}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,7 @@ import { OAuthSignInForm } from "./OAuthSignInForm"
		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 {Alert } from "components/Alert/Alert"
		import { getErrorMessage } from "api/errors"

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

		<Maybe condition={!passwordEnabled && !oAuthEnabled}>
		<AlertBanner severity="error">
		No authentication methods configured!
		</AlertBanner>
		<Alert severity="error">No authentication methods configured!</Alert>
Copy link Member Kira-PilotMay 17, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Related to my comment above, what is the difference between these two ways of displaying errors? Copy link ContributorAuthor BrunoQuaresmaMay 17, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I answered in the previous comment.
		</Maybe>

		<Maybe condition={passwordEnabled && !showPasswordAuth}>
Expand Down