From 15f470e853b8987859d6be7c9a085656c919ba48 Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Fri, 21 Feb 2025 12:43:20 +0100
Subject: [PATCH 1/5] feat: troubleshoot notifications ui

---
 site/src/api/api.ts                           |  4 +
 .../NotificationsPage/NotificationsPage.tsx   | 96 +++++++++++--------
 .../Troubleshooting.stories.tsx               | 29 ++++++
 .../NotificationsPage/Troubleshooting.tsx     | 52 ++++++++++
 4 files changed, 142 insertions(+), 39 deletions(-)
 create mode 100644 site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx
 create mode 100644 site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 3da968bd8aa69..abce5b138c523 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2297,6 +2297,10 @@ class ApiMethods {
 		return res.data;
 	};
 
+	postTestNotification = async () => {
+		await this.axios.post<void>(`/api/v2/notifications/test`);
+	};
+
 	requestOneTimePassword = async (
 		req: TypesGen.RequestOneTimePasscodeRequest,
 	) => {
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx
index 23f8e6b42651e..159e557595aad 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -17,6 +17,10 @@ import { deploymentGroupHasParent } from "utils/deployOptions";
 import { pageTitle } from "utils/page";
 import OptionsTable from "../OptionsTable";
 import { NotificationEvents } from "./NotificationEvents";
+import { Troubleshooting } from "./Troubleshooting";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
+import { docs } from "utils/docs";
+import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 
 export const NotificationsPage: FC = () => {
 	const { deploymentConfig } = useDeploymentSettings();
@@ -40,48 +44,62 @@ export const NotificationsPage: FC = () => {
 			<Helmet>
 				<title>{pageTitle("Notifications Settings")}</title>
 			</Helmet>
-			<Section
-				title="Notifications"
+			<SettingsHeader
+				title={
+					<>
+						Notifications
+						<span css={{ position: "relative", top: "-6px" }}>
+							<FeatureStageBadge
+								contentType={"beta"}
+								size="lg"
+								css={{ marginBottom: "5px", fontSize: "0.75rem" }}
+							/>
+						</span>
+					</>
+				}
 				description="Control delivery methods for notifications on this deployment."
-				layout="fluid"
-				featureStage={"beta"}
-			>
-				<Tabs active={tabState.value}>
-					<TabsList>
-						<TabLink to="?tab=events" value="events">
-							Events
-						</TabLink>
-						<TabLink to="?tab=settings" value="settings">
-							Settings
-						</TabLink>
-					</TabsList>
-				</Tabs>
+				docsHref={docs("/admin/monitoring/notifications")}
+			/>
+			<Tabs active={tabState.value}>
+				<TabsList>
+					<TabLink to="?tab=events" value="events">
+						Events
+					</TabLink>
+					<TabLink to="?tab=settings" value="settings">
+						Settings
+					</TabLink>
+					<TabLink to="?tab=troubleshooting" value="troubleshooting">
+						Troubleshooting
+					</TabLink>
+				</TabsList>
+			</Tabs>
 
-				<div css={styles.content}>
-					{ready ? (
-						tabState.value === "events" ? (
-							<NotificationEvents
-								templatesByGroup={templatesByGroup.data}
-								deploymentConfig={deploymentConfig.config}
-								defaultMethod={castNotificationMethod(
-									dispatchMethods.data.default,
-								)}
-								availableMethods={dispatchMethods.data.available.map(
-									castNotificationMethod,
-								)}
-							/>
-						) : (
-							<OptionsTable
-								options={deploymentConfig.options.filter((o) =>
-									deploymentGroupHasParent(o.group, "Notifications"),
-								)}
-							/>
-						)
+			<div css={styles.content}>
+				{ready ? (
+					tabState.value === "events" ? (
+						<NotificationEvents
+							templatesByGroup={templatesByGroup.data}
+							deploymentConfig={deploymentConfig.config}
+							defaultMethod={castNotificationMethod(
+								dispatchMethods.data.default,
+							)}
+							availableMethods={dispatchMethods.data.available.map(
+								castNotificationMethod,
+							)}
+						/>
+					) : tabState.value === "troubleshooting" ? (
+						<Troubleshooting />
 					) : (
-						<Loader />
-					)}
-				</div>
-			</Section>
+						<OptionsTable
+							options={deploymentConfig.options.filter((o) =>
+								deploymentGroupHasParent(o.group, "Notifications"),
+							)}
+						/>
+					)
+				) : (
+					<Loader />
+				)}
+			</div>
 		</>
 	);
 };
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx
new file mode 100644
index 0000000000000..070c3234a1cc6
--- /dev/null
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Troubleshooting } from "./Troubleshooting";
+import { API } from "api/api";
+import { spyOn, userEvent, within } from "@storybook/test";
+import { baseMeta } from "./storybookUtils";
+
+const meta: Meta<typeof Troubleshooting> = {
+	title: "pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting",
+	component: Troubleshooting,
+	...baseMeta,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Troubleshooting>;
+
+export const TestNotification: Story = {
+	play: async ({ canvasElement }) => {
+		spyOn(API, "postTestNotification").mockResolvedValue();
+		const user = userEvent.setup();
+		const canvas = within(canvasElement);
+
+		const sendButton = canvas.getByRole("button", {
+			name: "Send notification",
+		});
+		await user.click(sendButton);
+		await within(document.body).findByText("Test notification sent");
+	},
+};
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
new file mode 100644
index 0000000000000..0921b4e9e30de
--- /dev/null
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
@@ -0,0 +1,52 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import { useTheme } from "@emotion/react";
+import { API } from "api/api";
+import { type FC } from "react";
+import { useMutation } from "react-query";
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import LoadingButton from "@mui/lab/LoadingButton";
+
+type TroubleshootingProps = {};
+
+export const Troubleshooting: FC<TroubleshootingProps> = ({}) => {
+	const { mutate: sendTestNotificationApi, isLoading: isLoading } = useMutation(
+		API.postTestNotification,
+		{
+			onSuccess: () => displaySuccess("Test notification sent"),
+			onError: () => displayError("Failed to send test notification"),
+		},
+	);
+
+	const theme = useTheme();
+	return (
+		<>
+			<div
+				css={{
+					fontSize: 14,
+					color: theme.palette.text.secondary,
+					lineHeight: "160%",
+					marginBottom: 16,
+				}}
+			>
+				Send a test notification to troubleshoot your notification settings.
+			</div>
+			<div>
+				<span>
+					<LoadingButton
+						variant="outlined"
+						loading={isLoading}
+						size="small"
+						css={{ minWidth: "auto", aspectRatio: "1" }}
+						onClick={() => {
+							sendTestNotificationApi();
+						}}
+					>
+						Send notification
+					</LoadingButton>
+				</span>
+			</div>
+		</>
+	);
+};
+
+const styles = {} as Record<string, Interpolation<Theme>>;

From f19e61fc9d31c85e709eca469899d75d742e6d49 Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Fri, 21 Feb 2025 12:47:59 +0100
Subject: [PATCH 2/5] fmt/ts

---
 .../NotificationsPage/NotificationsPage.tsx               | 6 +++---
 .../NotificationsPage/Troubleshooting.stories.tsx         | 4 ++--
 .../NotificationsPage/Troubleshooting.tsx                 | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx
index 159e557595aad..a68013b0bfef3 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -4,7 +4,9 @@ import {
 	selectTemplatesByGroup,
 	systemNotificationTemplates,
 } from "api/queries/notifications";
+import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { Loader } from "components/Loader/Loader";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import { useDeploymentSettings } from "modules/management/DeploymentSettingsProvider";
@@ -14,13 +16,11 @@ import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQueries } from "react-query";
 import { deploymentGroupHasParent } from "utils/deployOptions";
+import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import OptionsTable from "../OptionsTable";
 import { NotificationEvents } from "./NotificationEvents";
 import { Troubleshooting } from "./Troubleshooting";
-import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
-import { docs } from "utils/docs";
-import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 
 export const NotificationsPage: FC = () => {
 	const { deploymentConfig } = useDeploymentSettings();
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx
index 070c3234a1cc6..052e855b284a9 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Troubleshooting } from "./Troubleshooting";
-import { API } from "api/api";
 import { spyOn, userEvent, within } from "@storybook/test";
+import { API } from "api/api";
+import { Troubleshooting } from "./Troubleshooting";
 import { baseMeta } from "./storybookUtils";
 
 const meta: Meta<typeof Troubleshooting> = {
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
index 0921b4e9e30de..3ee10a4853c31 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
@@ -1,15 +1,15 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import { useTheme } from "@emotion/react";
+import LoadingButton from "@mui/lab/LoadingButton";
 import { API } from "api/api";
-import { type FC } from "react";
-import { useMutation } from "react-query";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
-import LoadingButton from "@mui/lab/LoadingButton";
+import type { FC } from "react";
+import { useMutation } from "react-query";
 
 type TroubleshootingProps = {};
 
 export const Troubleshooting: FC<TroubleshootingProps> = ({}) => {
-	const { mutate: sendTestNotificationApi, isLoading: isLoading } = useMutation(
+	const { mutate: sendTestNotificationApi, isLoading } = useMutation(
 		API.postTestNotification,
 		{
 			onSuccess: () => displaySuccess("Test notification sent"),

From daebd0e8e0de3b61a67310160e562b3cc9b5cd14 Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Fri, 21 Feb 2025 12:55:16 +0100
Subject: [PATCH 3/5] lint

---
 .../NotificationsPage/Troubleshooting.tsx                     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
index 3ee10a4853c31..99fb00e127d5c 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
@@ -6,9 +6,7 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import type { FC } from "react";
 import { useMutation } from "react-query";
 
-type TroubleshootingProps = {};
-
-export const Troubleshooting: FC<TroubleshootingProps> = ({}) => {
+export const Troubleshooting: FC = () => {
 	const { mutate: sendTestNotificationApi, isLoading } = useMutation(
 		API.postTestNotification,
 		{

From 037522cacd8f86d7cafe614d45ea6d5c8d5fb33e Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Fri, 21 Feb 2025 13:00:23 +0100
Subject: [PATCH 4/5] fix lint

---
 site/src/api/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index abce5b138c523..0bdd0cfac892f 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2298,7 +2298,7 @@ class ApiMethods {
 	};
 
 	postTestNotification = async () => {
-		await this.axios.post<void>(`/api/v2/notifications/test`);
+		await this.axios.post<void>("/api/v2/notifications/test");
 	};
 
 	requestOneTimePassword = async (

From 9a451193ae215db3c330126d416d96ad7a450c9a Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Fri, 21 Feb 2025 13:04:44 +0100
Subject: [PATCH 5/5] cleanup

---
 .../NotificationsPage/Troubleshooting.tsx                      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
index 99fb00e127d5c..c9a4362427cf7 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { useTheme } from "@emotion/react";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { API } from "api/api";
@@ -46,5 +45,3 @@ export const Troubleshooting: FC = () => {
 		</>
 	);
 };
-
-const styles = {} as Record<string, Interpolation<Theme>>;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16650.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16650.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16650.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16650.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>