From 38938214f1c006c5d4f32feef6cc135a9a956041 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 10 Oct 2023 20:30:31 +0000
Subject: [PATCH 1/7] fix: display health alert in `DeploymentBannerView`

---
 site/src/api/api.ts                           | 23 +++---
 site/src/api/queries/deployment.ts            |  9 ++-
 .../components/Dashboard/DashboardLayout.tsx  |  2 -
 .../DeploymentBanner/DeploymentBanner.tsx     | 14 +++-
 .../DeploymentBannerView.stories.tsx          | 16 +++-
 .../DeploymentBanner/DeploymentBannerView.tsx | 79 +++++++++++--------
 .../src/components/Dashboard/HealthBanner.tsx | 45 -----------
 .../GeneralSettingsPage.tsx                   |  8 +-
 site/src/pages/HealthPage/HealthPage.tsx      |  4 +-
 9 files changed, 101 insertions(+), 99 deletions(-)
 delete mode 100644 site/src/components/Dashboard/HealthBanner.tsx

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 8ff9169c162b0..bcba07cb9f674 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -1512,14 +1512,17 @@ export const getInsightsTemplate = async (
   return response.data;
 };
 
-export const getHealth = () => {
-  return axios.get<{
-    healthy: boolean;
-    time: string;
-    coder_version: string;
-    derp: { healthy: boolean };
-    access_url: { healthy: boolean };
-    websocket: { healthy: boolean };
-    database: { healthy: boolean };
-  }>("/api/v2/debug/health");
+export interface Health {
+  healthy: boolean;
+  time: string;
+  coder_version: string;
+  derp: { healthy: boolean };
+  access_url: { healthy: boolean };
+  websocket: { healthy: boolean };
+  database: { healthy: boolean };
+}
+
+export const getHealth = async () => {
+  const response = await axios.get<Health>("/api/v2/debug/health");
+  return response.data;
 };
diff --git a/site/src/api/queries/deployment.ts b/site/src/api/queries/deployment.ts
index 0d095258c50e2..2ad91c7724ed6 100644
--- a/site/src/api/queries/deployment.ts
+++ b/site/src/api/queries/deployment.ts
@@ -17,6 +17,13 @@ export const deploymentDAUs = () => {
 export const deploymentStats = () => {
   return {
     queryKey: ["deployment", "stats"],
-    queryFn: () => API.getDeploymentStats(),
+    queryFn: API.getDeploymentStats,
+  };
+};
+
+export const health = () => {
+  return {
+    queryKey: ["deployment", "health"],
+    queryFn: API.getHealth,
   };
 };
diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
index 4b5fe52d619c0..8aa96360d2cdc 100644
--- a/site/src/components/Dashboard/DashboardLayout.tsx
+++ b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -15,7 +15,6 @@ import Box, { BoxProps } from "@mui/material/Box";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import Button from "@mui/material/Button";
 import { docs } from "utils/docs";
-import { HealthBanner } from "./HealthBanner";
 
 export const DashboardLayout: FC = () => {
   const permissions = usePermissions();
@@ -29,7 +28,6 @@ export const DashboardLayout: FC = () => {
 
   return (
     <>
-      <HealthBanner />
       <ServiceBanner />
       {canViewDeployment && <LicenseBanner />}
 
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
index 6fc3acea0d9ef..5ebeff79b48c9 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
@@ -1,11 +1,18 @@
+import { type FC } from "react";
+import { useQuery } from "react-query";
+import { deploymentStats, health } from "api/queries/deployment";
 import { usePermissions } from "hooks/usePermissions";
 import { DeploymentBannerView } from "./DeploymentBannerView";
-import { useQuery } from "react-query";
-import { deploymentStats } from "api/queries/deployment";
+import { useDashboard } from "../DashboardProvider";
 
-export const DeploymentBanner: React.FC = () => {
+export const DeploymentBanner: FC = () => {
+  const dashboard = useDashboard();
   const permissions = usePermissions();
   const deploymentStatsQuery = useQuery(deploymentStats());
+  const healthQuery = useQuery({
+    ...health(),
+    enabled: dashboard.experiments.includes("deployment_health_page"),
+  });
 
   if (!permissions.viewDeploymentValues || !deploymentStatsQuery.data) {
     return null;
@@ -13,6 +20,7 @@ export const DeploymentBanner: React.FC = () => {
 
   return (
     <DeploymentBannerView
+      health={healthQuery.data}
       stats={deploymentStatsQuery.data}
       fetchStats={() => deploymentStatsQuery.refetch()}
     />
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
index 38a21c2598f5e..1e21d7563e6b0 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
@@ -13,4 +13,18 @@ const meta: Meta<typeof DeploymentBannerView> = {
 export default meta;
 type Story = StoryObj<typeof DeploymentBannerView>;
 
-export const Preview: Story = {};
+export const Example: Story = {};
+
+export const WithHealthIssues: Story = {
+  args: {
+    health: {
+      healthy: false,
+      time: "no <3",
+      coder_version: "no <3",
+      derp: { healthy: false },
+      access_url: { healthy: false },
+      websocket: { healthy: false },
+      database: { healthy: false },
+    },
+  },
+};
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index dda933715594c..5a91834605f4c 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -1,9 +1,8 @@
-import { DeploymentStats, WorkspaceStatus } from "api/typesGenerated";
-import { FC, useMemo, useEffect, useState } from "react";
+import type { Health } from "api/api";
+import type { DeploymentStats, WorkspaceStatus } from "api/typesGenerated";
+import { type FC, useMemo, useEffect, useState } from "react";
 import prettyBytes from "pretty-bytes";
 import BuildingIcon from "@mui/icons-material/Build";
-import { RocketIcon } from "components/Icons/RocketIcon";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import Tooltip from "@mui/material/Tooltip";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@mui/material/Link";
@@ -12,13 +11,16 @@ import DownloadIcon from "@mui/icons-material/CloudDownload";
 import UploadIcon from "@mui/icons-material/CloudUpload";
 import LatencyIcon from "@mui/icons-material/SettingsEthernet";
 import WebTerminalIcon from "@mui/icons-material/WebAsset";
-import { TerminalIcon } from "components/Icons/TerminalIcon";
-import dayjs from "dayjs";
 import CollectedIcon from "@mui/icons-material/Compare";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import Button from "@mui/material/Button";
-import { getDisplayWorkspaceStatus } from "utils/workspace";
 import { css, type Theme, type Interpolation, useTheme } from "@emotion/react";
+import dayjs from "dayjs";
+import { TerminalIcon } from "components/Icons/TerminalIcon";
+import { RocketIcon } from "components/Icons/RocketIcon";
+import ErrorIcon from "@mui/icons-material/ErrorOutline";
+import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { getDisplayWorkspaceStatus } from "utils/workspace";
 
 export const bannerHeight = 36;
 
@@ -49,14 +51,13 @@ const styles = {
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface DeploymentBannerViewProps {
-  fetchStats?: () => void;
+  health?: Health;
   stats?: DeploymentStats;
+  fetchStats?: () => void;
 }
 
-export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
-  stats,
-  fetchStats,
-}) => {
+export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
+  const { health, stats, fetchStats } = props;
   const theme = useTheme();
   const aggregatedMinutes = useMemo(() => {
     if (!stats) {
@@ -105,6 +106,23 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We want this to periodically update!
   }, [timeUntilRefresh, stats]);
 
+  const unhealthy = health && !health.healthy;
+
+  const statusBadgeStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${unhealthy ? "red" : undefined};
+    padding: ${theme.spacing(0, 1.5)};
+    height: ${bannerHeight}px;
+    color: #fff;
+
+    & svg {
+      width: 16px;
+      height: 16px;
+    }
+  `;
+
   return (
     <div
       css={{
@@ -112,7 +130,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
         height: bannerHeight,
         bottom: 0,
         zIndex: 1,
-        padding: theme.spacing(0, 2),
+        paddingRight: theme.spacing(2),
         backgroundColor: theme.palette.background.paper,
         display: "flex",
         alignItems: "center",
@@ -124,24 +142,23 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
         whiteSpace: "nowrap",
       }}
     >
-      <Tooltip title="Status of your Coder deployment. Only visible for admins!">
-        <div
-          css={css`
-            display: flex;
-            align-items: center;
-
-            & svg {
-              width: 16px;
-              height: 16px;
-            }
-
-            ${theme.breakpoints.down("lg")} {
-              display: none;
-            }
-          `}
-        >
-          <RocketIcon />
-        </div>
+      <Tooltip
+        title={
+          unhealthy
+            ? "We have detected problems with your Coder deployment."
+            : "Status of your Coder deployment. Only visible for admins!"
+        }
+        css={{ marginRight: theme.spacing(-2) }}
+      >
+        {unhealthy ? (
+          <Link component={RouterLink} to="/health" css={statusBadgeStyle}>
+            <ErrorIcon />
+          </Link>
+        ) : (
+          <div css={statusBadgeStyle}>
+            <RocketIcon />
+          </div>
+        )}
       </Tooltip>
       <div css={styles.group}>
         <div css={styles.category}>Workspaces</div>
diff --git a/site/src/components/Dashboard/HealthBanner.tsx b/site/src/components/Dashboard/HealthBanner.tsx
deleted file mode 100644
index a1bec582fdf9c..0000000000000
--- a/site/src/components/Dashboard/HealthBanner.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Alert } from "components/Alert/Alert";
-import { Link as RouterLink } from "react-router-dom";
-import Link from "@mui/material/Link";
-import { colors } from "theme/colors";
-import { useQuery } from "react-query";
-import { getHealth } from "api/api";
-import { useDashboard } from "./DashboardProvider";
-
-export const HealthBanner = () => {
-  const { data: healthStatus } = useQuery({
-    queryKey: ["health"],
-    queryFn: () => getHealth(),
-  });
-  const dashboard = useDashboard();
-  const hasHealthIssues = healthStatus && !healthStatus.data.healthy;
-
-  if (
-    dashboard.experiments.includes("deployment_health_page") &&
-    hasHealthIssues
-  ) {
-    return (
-      <Alert
-        severity="error"
-        variant="filled"
-        sx={{
-          border: 0,
-          borderRadius: 0,
-          backgroundColor: colors.red[10],
-        }}
-      >
-        We have detected problems with your Coder deployment. Please{" "}
-        <Link
-          component={RouterLink}
-          to="/health"
-          sx={{ fontWeight: 600, color: "inherit" }}
-        >
-          inspect the health status
-        </Link>
-        .
-      </Alert>
-    );
-  }
-
-  return null;
-};
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
index a36e7c4415e4a..42cfcc1e639bf 100644
--- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -1,11 +1,11 @@
-import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
-import { FC } from "react";
+import { type FC } from "react";
 import { Helmet } from "react-helmet-async";
-import { pageTitle } from "utils/page";
-import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
 import { useQuery } from "react-query";
+import { pageTitle } from "utils/page";
 import { deploymentDAUs } from "api/queries/deployment";
 import { entitlements } from "api/queries/entitlements";
+import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
+import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
 
 const GeneralSettingsPage: FC = () => {
   const { deploymentValues } = useDeploySettings();
diff --git a/site/src/pages/HealthPage/HealthPage.tsx b/site/src/pages/HealthPage/HealthPage.tsx
index 8ab285148ab9c..bba2c2634ddae 100644
--- a/site/src/pages/HealthPage/HealthPage.tsx
+++ b/site/src/pages/HealthPage/HealthPage.tsx
@@ -42,7 +42,7 @@ export default function HealthPage() {
       </Helmet>
 
       {healthStatus ? (
-        <HealthPageView healthStatus={healthStatus.data} tab={tab} />
+        <HealthPageView healthStatus={healthStatus} tab={tab} />
       ) : (
         <Loader />
       )}
@@ -54,7 +54,7 @@ export function HealthPageView({
   healthStatus,
   tab,
 }: {
-  healthStatus: Awaited<ReturnType<typeof getHealth>>["data"];
+  healthStatus: Awaited<ReturnType<typeof getHealth>>;
   tab: ReturnType<typeof useTab>;
 }) {
   const styles = useStyles();

From 5682238787976d4d3ab86e803e65e9f0ec7dc259 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 11 Oct 2023 23:06:37 +0000
Subject: [PATCH 2/7] oh no!

---
 site/src/api/api.ts                           |  4 +-
 .../DeploymentBanner/DeploymentBanner.tsx     | 20 ++++++++--
 .../DeploymentBannerView.stories.tsx          |  4 +-
 .../DeploymentBanner/DeploymentBannerView.tsx | 39 ++++++++++++++++---
 4 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index bcba07cb9f674..c86a2c123e200 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -1516,10 +1516,10 @@ export interface Health {
   healthy: boolean;
   time: string;
   coder_version: string;
-  derp: { healthy: boolean };
   access_url: { healthy: boolean };
-  websocket: { healthy: boolean };
   database: { healthy: boolean };
+  derp: { healthy: boolean };
+  websocket: { healthy: boolean };
 }
 
 export const getHealth = async () => {
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
index 5ebeff79b48c9..60f17b594b199 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
@@ -9,15 +9,27 @@ export const DeploymentBanner: FC = () => {
   const dashboard = useDashboard();
   const permissions = usePermissions();
   const deploymentStatsQuery = useQuery(deploymentStats());
-  const healthQuery = useQuery({
-    ...health(),
-    enabled: dashboard.experiments.includes("deployment_health_page"),
-  });
+  // const healthQuery = useQuery({
+  //   ...health(),
+  //   enabled: dashboard.experiments.includes("deployment_health_page"),
+  // });
 
   if (!permissions.viewDeploymentValues || !deploymentStatsQuery.data) {
     return null;
   }
 
+  const healthQuery = {
+    data: {
+      healthy: false,
+      time: "no <3",
+      coder_version: "no <3",
+      access_url: { healthy: false },
+      database: { healthy: false },
+      derp: { healthy: false },
+      websocket: { healthy: false },
+    },
+  };
+
   return (
     <DeploymentBannerView
       health={healthQuery.data}
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
index 1e21d7563e6b0..7228aadc1a4ce 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
@@ -21,10 +21,10 @@ export const WithHealthIssues: Story = {
       healthy: false,
       time: "no <3",
       coder_version: "no <3",
-      derp: { healthy: false },
       access_url: { healthy: false },
-      websocket: { healthy: false },
       database: { healthy: false },
+      derp: { healthy: false },
+      websocket: { healthy: false },
     },
   },
 };
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index 5a91834605f4c..d836a6249bb20 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -14,13 +14,22 @@ import WebTerminalIcon from "@mui/icons-material/WebAsset";
 import CollectedIcon from "@mui/icons-material/Compare";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import Button from "@mui/material/Button";
-import { css, type Theme, type Interpolation, useTheme } from "@emotion/react";
+import Box from "@mui/material/Box";
+import Popover from "@mui/material/Popover";
+import {
+  css,
+  type CSSObject,
+  type Theme,
+  type Interpolation,
+  useTheme,
+} from "@emotion/react";
 import dayjs from "dayjs";
 import { TerminalIcon } from "components/Icons/TerminalIcon";
 import { RocketIcon } from "components/Icons/RocketIcon";
 import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
+import { colors } from "theme/colors";
 
 export const bannerHeight = 36;
 
@@ -112,7 +121,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${unhealthy ? "red" : undefined};
+    background-color: ${unhealthy ? colors.red[10] : undefined};
     padding: ${theme.spacing(0, 1.5)};
     height: ${bannerHeight}px;
     color: #fff;
@@ -123,6 +132,18 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
     }
   `;
 
+  const statusSummaryStyle = css`
+    ${theme.typography.body2 as CSSObject}
+
+    margin-top: ${theme.spacing(0.5)};
+    width: ${theme.spacing(38)};
+    padding: ${theme.spacing(1)};
+    color: ${theme.palette.text.primary};
+    background-color: ${colors.gray[10]};
+    border: ${theme.palette.background.default};
+    pointer-events: none;
+  `;
+
   return (
     <div
       css={{
@@ -144,9 +165,17 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
     >
       <Tooltip
         title={
-          unhealthy
-            ? "We have detected problems with your Coder deployment."
-            : "Status of your Coder deployment. Only visible for admins!"
+          unhealthy ? (
+            <>
+              We have detected problems with your Coder deployment.
+              {health.access_url && <>Your access_url is broken.</>}
+              {health.database && <>Your database is broken.</>}
+              {health.derp && <>Your derp is broken.</>}
+              {health.websocket && <>Your websocket is broken.</>}
+            </>
+          ) : (
+            <>Status of your Coder deployment. Only visible for admins!</>
+          )
         }
         css={{ marginRight: theme.spacing(-2) }}
       >

From bee5ecbdd916cdee5662ade0640b6eb29ff440ff Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 12 Oct 2023 23:13:51 +0000
Subject: [PATCH 3/7] :)

---
 .../DeploymentBanner/DeploymentBanner.tsx     | 20 ++----
 .../DeploymentBanner/DeploymentBannerView.tsx | 62 ++++++++++++++-----
 .../components/HelpTooltip/HelpTooltip.tsx    |  6 +-
 .../PopoverContainer.stories.tsx              |  5 --
 4 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
index 60f17b594b199..5ebeff79b48c9 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
@@ -9,27 +9,15 @@ export const DeploymentBanner: FC = () => {
   const dashboard = useDashboard();
   const permissions = usePermissions();
   const deploymentStatsQuery = useQuery(deploymentStats());
-  // const healthQuery = useQuery({
-  //   ...health(),
-  //   enabled: dashboard.experiments.includes("deployment_health_page"),
-  // });
+  const healthQuery = useQuery({
+    ...health(),
+    enabled: dashboard.experiments.includes("deployment_health_page"),
+  });
 
   if (!permissions.viewDeploymentValues || !deploymentStatsQuery.data) {
     return null;
   }
 
-  const healthQuery = {
-    data: {
-      healthy: false,
-      time: "no <3",
-      coder_version: "no <3",
-      access_url: { healthy: false },
-      database: { healthy: false },
-      derp: { healthy: false },
-      websocket: { healthy: false },
-    },
-  };
-
   return (
     <DeploymentBannerView
       health={healthQuery.data}
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index d836a6249bb20..08311b3bae73d 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -1,6 +1,12 @@
 import type { Health } from "api/api";
 import type { DeploymentStats, WorkspaceStatus } from "api/typesGenerated";
-import { type FC, useMemo, useEffect, useState } from "react";
+import {
+  type FC,
+  useMemo,
+  useEffect,
+  useState,
+  PropsWithChildren,
+} from "react";
 import prettyBytes from "pretty-bytes";
 import BuildingIcon from "@mui/icons-material/Build";
 import Tooltip from "@mui/material/Tooltip";
@@ -14,8 +20,7 @@ import WebTerminalIcon from "@mui/icons-material/WebAsset";
 import CollectedIcon from "@mui/icons-material/Compare";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
-import Popover from "@mui/material/Popover";
+import { css as className } from "@emotion/css";
 import {
   css,
   type CSSObject,
@@ -30,6 +35,8 @@ import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 import { colors } from "theme/colors";
+import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
+import { Stack } from "components/Stack/Stack";
 
 export const bannerHeight = 36;
 
@@ -132,15 +139,15 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
     }
   `;
 
-  const statusSummaryStyle = css`
+  const statusSummaryStyle = className`
     ${theme.typography.body2 as CSSObject}
 
-    margin-top: ${theme.spacing(0.5)};
-    width: ${theme.spacing(38)};
-    padding: ${theme.spacing(1)};
+    margin: ${theme.spacing(0, 0, 0.5, 1.5)};
+    width: ${theme.spacing(50)};
+    padding: ${theme.spacing(2)};
     color: ${theme.palette.text.primary};
-    background-color: ${colors.gray[10]};
-    border: ${theme.palette.background.default};
+    background-color: ${theme.palette.background.paper};
+    border: 1px solid ${theme.palette.divider};
     pointer-events: none;
   `;
 
@@ -164,19 +171,37 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
       }}
     >
       <Tooltip
+        classes={{ tooltip: statusSummaryStyle }}
         title={
           unhealthy ? (
             <>
-              We have detected problems with your Coder deployment.
-              {health.access_url && <>Your access_url is broken.</>}
-              {health.database && <>Your database is broken.</>}
-              {health.derp && <>Your derp is broken.</>}
-              {health.websocket && <>Your websocket is broken.</>}
+              <HelpTooltipTitle>
+                We have detected problems with your Coder deployment.
+              </HelpTooltipTitle>
+              <Stack spacing={1}>
+                {health.access_url && (
+                  <HealthIssue>
+                    Your access URL may be configured incorrectly.
+                  </HealthIssue>
+                )}
+                {health.database && (
+                  <HealthIssue>Your database is unhealthy.</HealthIssue>
+                )}
+                {health.derp && (
+                  <HealthIssue>
+                    Your DERP is like, gonked up or something.
+                  </HealthIssue>
+                )}
+                {health.websocket && (
+                  <HealthIssue>We're noticing websocket issues.</HealthIssue>
+                )}
+              </Stack>
             </>
           ) : (
             <>Status of your Coder deployment. Only visible for admins!</>
           )
         }
+        open={process.env.STORYBOOK === "true" ? true : undefined}
         css={{ marginRight: theme.spacing(-2) }}
       >
         {unhealthy ? (
@@ -376,3 +401,12 @@ const WorkspaceBuildValue: FC<{
     </Tooltip>
   );
 };
+
+const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Stack direction="row" spacing={1}>
+      <ErrorIcon fontSize="small" htmlColor={colors.red[10]} />
+      {children}
+    </Stack>
+  );
+};
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 8050c433798e4..92990c318f9b9 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -159,9 +159,7 @@ export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
   );
 };
 
-export const HelpTooltipTitle: FC<PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const HelpTooltipTitle: FC<PropsWithChildren> = ({ children }) => {
   return <h4 css={styles.title}>{children}</h4>;
 };
 
@@ -242,7 +240,7 @@ const styles = {
     marginBottom: theme.spacing(1),
     color: theme.palette.text.primary,
     fontSize: 14,
-    lineHeight: "120%",
+    lineHeight: "150%",
     fontWeight: 600,
   }),
 
diff --git a/site/src/components/PopoverContainer/PopoverContainer.stories.tsx b/site/src/components/PopoverContainer/PopoverContainer.stories.tsx
index f8a848388a06a..879faf7d389c9 100644
--- a/site/src/components/PopoverContainer/PopoverContainer.stories.tsx
+++ b/site/src/components/PopoverContainer/PopoverContainer.stories.tsx
@@ -2,11 +2,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { PopoverContainer } from "./PopoverContainer";
 import Button from "@mui/material/Button";
 
-const numbers: number[] = [];
-for (let i = 0; i < 20; i++) {
-  numbers.push(i + 1);
-}
-
 const meta: Meta<typeof PopoverContainer> = {
   title: "components/PopoverContainer",
   component: PopoverContainer,

From 9600c4991c1a2a38cb14210fca06d8339b26e13a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 12 Oct 2023 23:18:14 +0000
Subject: [PATCH 4/7] fill in story with real-er stuff

---
 .../DeploymentBanner/DeploymentBannerView.stories.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
index 7228aadc1a4ce..246db0aad8fbc 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
@@ -19,8 +19,8 @@ export const WithHealthIssues: Story = {
   args: {
     health: {
       healthy: false,
-      time: "no <3",
-      coder_version: "no <3",
+      time: "2023-10-12T23:15:00.000000000Z",
+      coder_version: "v2.3.0-devel+8cca4915a",
       access_url: { healthy: false },
       database: { healthy: false },
       derp: { healthy: false },

From 78f701cda485d0eb77e3c97bacca194b05009a48 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 12 Oct 2023 23:23:53 +0000
Subject: [PATCH 5/7] move to testHelpers/entities

---
 .../DeploymentBannerView.stories.tsx              | 15 +++++----------
 site/src/testHelpers/entities.ts                  | 10 ++++++++++
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
index 246db0aad8fbc..2afecffd5335e 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.stories.tsx
@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { MockDeploymentStats } from "testHelpers/entities";
+import {
+  DeploymentHealthUnhealthy,
+  MockDeploymentStats,
+} from "testHelpers/entities";
 import { DeploymentBannerView } from "./DeploymentBannerView";
 
 const meta: Meta<typeof DeploymentBannerView> = {
@@ -17,14 +20,6 @@ export const Example: Story = {};
 
 export const WithHealthIssues: Story = {
   args: {
-    health: {
-      healthy: false,
-      time: "2023-10-12T23:15:00.000000000Z",
-      coder_version: "v2.3.0-devel+8cca4915a",
-      access_url: { healthy: false },
-      database: { healthy: false },
-      derp: { healthy: false },
-      websocket: { healthy: false },
-    },
+    health: DeploymentHealthUnhealthy,
   },
 };
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index dd91f44f2408b..c5075a12905b2 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -2752,3 +2752,13 @@ export const MockListeningPortsResponse: TypesGen.WorkspaceAgentListeningPortsRe
       { process_name: "", network: "", port: 8081 },
     ],
   };
+
+export const DeploymentHealthUnhealthy = {
+  healthy: false,
+  time: "2023-10-12T23:15:00.000000000Z",
+  coder_version: "v2.3.0-devel+8cca4915a",
+  access_url: { healthy: false },
+  database: { healthy: false },
+  derp: { healthy: false },
+  websocket: { healthy: false },
+};

From 626f4f637870b970f54bf5bdd6b143f8f5721edc Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 12 Oct 2023 23:36:35 +0000
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/DeploymentBanner/DeploymentBannerView.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index 08311b3bae73d..f8d8c660ef02c 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -193,7 +193,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
                   </HealthIssue>
                 )}
                 {health.websocket && (
-                  <HealthIssue>We're noticing websocket issues.</HealthIssue>
+                  <HealthIssue>
+                    We&apos;re noticing websocket issues.
+                  </HealthIssue>
                 )}
               </Stack>
             </>

From 5785c4db9e9defda4b2a86c214feadea27d137cf Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Fri, 13 Oct 2023 16:27:47 +0000
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/DeploymentBanner/DeploymentBannerView.tsx    | 2 +-
 site/src/testHelpers/entities.ts                           | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index f8d8c660ef02c..27b391d717360 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -189,7 +189,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
                 )}
                 {health.derp && (
                   <HealthIssue>
-                    Your DERP is like, gonked up or something.
+                    We&apos;re noticing DERP proxy issues.
                   </HealthIssue>
                 )}
                 {health.websocket && (
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index c5075a12905b2..e819fee968ef5 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -1,7 +1,8 @@
 import {
   withDefaultFeatures,
-  GetLicensesResponse,
-  DeploymentConfig,
+  type GetLicensesResponse,
+  type DeploymentConfig,
+  type Health,
 } from "api/api";
 import { FieldError } from "api/errors";
 import { everyOneGroup } from "utils/groups";
@@ -2753,7 +2754,7 @@ export const MockListeningPortsResponse: TypesGen.WorkspaceAgentListeningPortsRe
     ],
   };
 
-export const DeploymentHealthUnhealthy = {
+export const DeploymentHealthUnhealthy: Health = {
   healthy: false,
   time: "2023-10-12T23:15:00.000000000Z",
   coder_version: "v2.3.0-devel+8cca4915a",