feat(site): add tooltip showing the error in the failure badge (#9029)

BrunoQuaresma · web-flow · commit 175aed168585 · 2023-08-10T15:23:31.000-03:00
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -9,6 +9,10 @@ import {
   ImpendingDeletionText,
 } from "components/WorkspaceDeletion"
 import { getDisplayWorkspaceStatus } from "utils/workspace"
+import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"
+import { styled } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import ErrorOutline from "@mui/icons-material/ErrorOutline"
 
 export type WorkspaceStatusBadgeProps = {
   workspace: Workspace
@@ -28,6 +32,27 @@ export const WorkspaceStatusBadge: FC<
       <Cond condition={Boolean(LockedBadge({ workspace }))}>
         <LockedBadge workspace={workspace} />
       </Cond>
+      <Cond condition={workspace.latest_build.status === "failed"}>
+        <FailureTooltip
+          title={
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
+              <ErrorOutline
+                sx={{
+                  width: 14,
+                  height: 14,
+                  color: (theme) => theme.palette.error.light,
+                }}
+              />
+              <Box>{workspace.latest_build.job.error}</Box>
+            </Box>
+          }
+          placement="top"
+        >
+          <div>
+            <Pill className={className} icon={icon} text={text} type={type} />
+          </div>
+        </FailureTooltip>
+      </Cond>
       <Cond>
         <Pill className={className} icon={icon} text={text} type={type} />
       </Cond>
@@ -66,6 +91,17 @@ export const WorkspaceStatusText: FC<
   )
 }
 
+const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paperLight,
+    border: `1px solid ${theme.palette.divider}`,
+    fontSize: 12,
+    padding: theme.spacing(1, 1.25),
+  },
+}))
+
 const useStyles = makeStyles((theme) => ({
   root: { fontWeight: 600 },
   "type-error": {
