coder · BrunoQuaresma · May 18, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -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"
   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
@@ -0,0 +1,61 @@
+import { Alert } from "./Alert"
+import Button from "@mui/material/Button"
+import Link from "@mui/material/Link"
+import type { Meta, StoryObj } from "@storybook/react"
+
+const meta: Meta<typeof Alert> = {
+  title: "components/Alert",
+  component: Alert,
+}
+
+export default meta
+type Story = StoryObj<typeof Alert>
+
+const ExampleAction = (
+  <Button onClick={() => null} size="small" variant="text">
+    Button
+  </Button>
+)
+
+export const Warning: Story = {
+  args: {
+    children: "This is a warning",
+    severity: "warning",
+  },
+}
+
+export const WarningWithDismiss: Story = {
+  args: {
+    children: "This is a warning",
+    dismissible: true,
+    severity: "warning",
+  },
+}
+
+export const WarningWithAction: Story = {
+  args: {
+    children: "This is a warning",
+    actions: [ExampleAction],
+    severity: "warning",
+  },
+}
+
+export const WarningWithActionAndDismiss: Story = {
+  args: {
+    children: "This is a warning",
+    actions: [ExampleAction],
+    dismissible: true,
+    severity: "warning",
+  },
+}
+
+export const WithChildren: Story = {
+  args: {
+    severity: "warning",
+    children: (
+      <div>
+        This is a message with a <Link href="#">link</Link>
+      </div>
+    ),
+  },
+}
diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
@@ -0,0 +1,63 @@
+import { useState, FC, ReactNode, PropsWithChildren } from "react"
+import Collapse from "@mui/material/Collapse"
+// 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 interface AlertProps extends PropsWithChildren {
+  severity: MuiAlertProps["severity"]
+  actions?: ReactNode[]
+  dismissible?: boolean
+  onRetry?: () => void
+  onDismiss?: () => void
+}
+
+export const Alert: FC<AlertProps> = ({
+  children,
+  actions = [],
+  onRetry,
+  dismissible,
+  severity,
+  onDismiss,
+}) => {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Collapse in={open}>
+      <MuiAlert
+        severity={severity}
+        action={
+          <>
+            {/* CTAs passed in by the consumer */}
+            {actions.length > 0 &&
+              actions.map((action) => <div key={String(action)}>{action}</div>)}
+
+            {/* retry CTA */}
+            {onRetry && (
+              <Button variant="text" size="small" onClick={onRetry}>
+                Retry
+              </Button>
+            )}
+
+            {/* close CTA */}
+            {dismissible && (
+              <Button
+                variant="text"
+                size="small"
+                onClick={() => {
+                  setOpen(false)
+                  onDismiss && onDismiss()
+                }}
+                data-testid="dismiss-banner-btn"
+              >
+                Dismiss
+              </Button>
+            )}
+          </>
+        }
+      >
+        {children}
+      </MuiAlert>
+    </Collapse>
+  )
+}
diff --git a/site/src/components/Alert/ErrorAlert.stories.tsx b/site/src/components/Alert/ErrorAlert.stories.tsx
@@ -0,0 +1,77 @@
+import Button from "@mui/material/Button"
+import { mockApiError } from "testHelpers/entities"
+import type { Meta, StoryObj } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+import { ErrorAlert } from "./ErrorAlert"
+
+const mockError = mockApiError({
+  message: "Email or password was invalid",
+  detail: "Password is invalid",
+})
+
+const meta: Meta<typeof ErrorAlert> = {
+  title: "components/ErrorAlert",
+  component: ErrorAlert,
+  args: {
+    error: mockError,
+    dismissible: false,
+    onRetry: undefined,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorAlert>
+
+const ExampleAction = (
+  <Button onClick={() => null} size="small" variant="text">
+    Button
+  </Button>
+)
+
+export const WithOnlyMessage: Story = {
+  args: {
+    error: mockApiError({
+      message: "Email or password was invalid",
+    }),
+  },
+}
+
+export const WithDismiss: Story = {
+  args: {
+    dismissible: true,
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    actions: [ExampleAction],
+  },
+}
+
+export const WithActionAndDismiss: Story = {
+  args: {
+    actions: [ExampleAction],
+    dismissible: true,
+  },
+}
+
+export const WithRetry: Story = {
+  args: {
+    onRetry: action("retry"),
+    dismissible: true,
+  },
+}
+
+export const WithActionRetryAndDismiss: Story = {
+  args: {
+    actions: [ExampleAction],
+    onRetry: action("retry"),
+    dismissible: true,
+  },
+}
+
+export const WithNonApiError: Story = {
+  args: {
+    error: new Error("Non API error here"),
+  },
+}
diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
@@ -0,0 +1,32 @@
+import { AlertProps, Alert } from "./Alert"
+import AlertTitle from "@mui/material/AlertTitle"
+import Box from "@mui/material/Box"
+import { getErrorMessage, getErrorDetail } from "api/errors"
+import { FC } from "react"
+
+export const ErrorAlert: FC<
+  Omit<AlertProps, "severity" | "children"> & { error: unknown }
+> = ({ error, ...alertProps }) => {
+  const message = getErrorMessage(error, "Something went wrong.")
+  const detail = getErrorDetail(error)
+
+  return (
+    <Alert severity="error" {...alertProps}>
+      {detail ? (
+        <>
+          <AlertTitle>{message}</AlertTitle>
+          <Box
+            component="span"
+            color={(theme) => theme.palette.text.secondary}
+            fontSize={13}
+            data-chromatic="ignore"
+          >
+            {detail}
+          </Box>
+        </>
+      ) : (
+        message
+      )}
+    </Alert>
+  )
+}
diff --git a/site/src/components/AlertBanner/AlertBanner.stories.tsx b/site/src/components/AlertBanner/AlertBanner.stories.tsx