Better workspace build state error

BrunoQuaresma · BrunoQuaresma · commit 114572597096 · 2023-05-09T21:42:15.000Z
diff --git a/site/src/components/AlertBanner/alertTypes.ts b/site/src/components/AlertBanner/alertTypes.ts
@@ -5,7 +5,7 @@ export type Severity = "warning" | "error" | "info"
 
 export interface AlertBannerProps {
   severity: Severity
-  text?: string
+  text?: JSX.Element
   error?: ApiError | Error | unknown
   actions?: ReactElement[]
   dismissible?: boolean
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx
@@ -1,7 +1,6 @@
-import { makeStyles } from "@mui/styles"
+import Box from "@mui/material/Box"
 import { WorkspaceBuild } from "api/typesGenerated"
-import { CodeExample } from "components/CodeExample/CodeExample"
-import { Stack } from "components/Stack/Stack"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
 
 const Language = {
   stateMessage:
@@ -15,43 +14,26 @@ export interface WorkspaceBuildStateErrorProps {
 export const WorkspaceBuildStateError: React.FC<
   WorkspaceBuildStateErrorProps
 > = ({ build }) => {
-  const styles = useStyles()
-
   const orphanCommand = `coder rm ${
     build.workspace_owner_name + "/" + build.workspace_name
   } --orphan`
   return (
-    <Stack className={styles.root}>
-      <Stack direction="row" alignItems="center" className={styles.messageBox}>
-        <Stack direction="row" spacing={0}>
-          <span className={styles.errorMessage}>
-            {Language.stateMessage} A template admin may run{" "}
-            <CodeExample inline code={orphanCommand} /> to delete the workspace
-            skipping resource destruction.
-          </span>
-        </Stack>
-      </Stack>
-    </Stack>
+    <AlertBanner
+      severity="error"
+      text={
+        <Box>
+          {Language.stateMessage} A template admin may run{" "}
+          <Box
+            component="code"
+            display="inline-block"
+            width="fit-content"
+            fontWeight={600}
+          >
+            `{orphanCommand}`
+          </Box>{" "}
+          to delete the workspace skipping resource destruction.
+        </Box>
+      }
+    ></AlertBanner>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    background: theme.palette.warning.main,
-    padding: theme.spacing(2),
-    borderRadius: theme.shape.borderRadius,
-    gap: 0,
-  },
-  flex: {
-    display: "flex",
-  },
-  messageBox: {
-    justifyContent: "space-between",
-  },
-  errorMessage: {
-    marginRight: theme.spacing(1),
-  },
-  iconButton: {
-    padding: 0,
-  },
-}))
