Extract notification events to its own component

coder · BrunoQuaresma · Sep 6, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
commit f58660ef0adc4749bf76278f2887d21311727276
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.stories.tsx b/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.stories.tsx
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { spyOn, userEvent, within } from "@storybook/test";
+import { API } from "api/api";
+import type { DeploymentValues } from "api/typesGenerated";
+import { baseMeta } from "./storybookUtils";
+import { NotificationEvents } from "./NotificationEvents";
+
+const meta: Meta<typeof NotificationEvents> = {
+	title: "pages/DeploymentSettings/NotificationsPage/NotificationEvents",
+	component: NotificationEvents,
+	...baseMeta,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationEvents>;
+
+export const NoEmailSmarthost: Story = {
+	parameters: {
+		deploymentValues: {
+			notifications: {
+				webhook: {
+					endpoint: "https://example.com",
+				},
+				email: {
+					smarthost: "",
+				},
+			},
+		} as DeploymentValues,
+	},
+};
+
+export const NoWebhookEndpoint: Story = {
+	parameters: {
+		deploymentValues: {
+			notifications: {
+				webhook: {
+					endpoint: "",
+				},
+				email: {
+					smarthost: "smtp.example.com",
+				},
+			},
+		} as DeploymentValues,
+	},
+};
+
+export const Toggle: Story = {
+	play: async ({ canvasElement }) => {
+		spyOn(API, "updateNotificationTemplateMethod").mockResolvedValue();
+		const user = userEvent.setup();
+		const canvas = within(canvasElement);
+		const option = await canvas.findByText("Workspace Marked as Dormant");
+		const li = option.closest("li");
+		if(!li) {
+			throw new Error("Could not find li");
+		}
+		const toggleButton = within(li).getByRole("button", {
+			name: "Webhook",
+		});
+		await user.click(toggleButton);
+	},
+};
+
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.tsx b/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.tsx
@@ -0,0 +1,217 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText, { listItemTextClasses } from "@mui/material/ListItemText";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import Tooltip from "@mui/material/Tooltip";
+import {
+	updateNotificationTemplateMethod,
+	type selectTemplatesByGroup,
+} from "api/queries/notifications";
+import type { DeploymentValues } from "api/typesGenerated";
+import { Alert } from "components/Alert/Alert";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { Stack } from "components/Stack/Stack";
+import {
+	type NotificationMethod,
+	castNotificationMethod,
+	methodIcons,
+	methodLabels,
+} from "modules/notifications/utils";
+import { type FC, Fragment } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { docs } from "utils/docs";
+
+type NotificationEventsProps = {
+	defaultMethod: NotificationMethod;
+	availableMethods: NotificationMethod[];
+	templatesByGroup: ReturnType<typeof selectTemplatesByGroup>;
+	deploymentValues: DeploymentValues;
+};
+
+export const NotificationEvents: FC<NotificationEventsProps> = ({
+	defaultMethod,
+	availableMethods,
+	templatesByGroup,
+	deploymentValues,
+}) => {
+	return (
+		<Stack spacing={4}>
+			{availableMethods.includes("smtp") &&
+				deploymentValues.notifications?.webhook.endpoint === "" && (
+					<Alert
+						severity="warning"
+						actions={
+							<Button
+								variant="text"
+								size="small"
+								component="a"
+								target="_blank"
+								rel="noreferrer"
+								href={docs("/cli/server#--notifications-webhook-endpoint")}
+							>
+								Read the docs
+							</Button>
+						}
+					>
+						Webhook notifications are enabled, but no endpoint has been
+						configured.
+					</Alert>
+				)}
+
+			{availableMethods.includes("smtp") &&
+				deploymentValues.notifications?.email.smarthost === "" && (
+					<Alert
+						severity="warning"
+						actions={
+							<Button
+								variant="text"
+								size="small"
+								component="a"
+								target="_blank"
+								rel="noreferrer"
+								href={docs("/cli/server#--notifications-email-smarthost")}
+							>
+								Read the docs
+							</Button>
+						}
+					>
+						SMTP notifications are enabled, but no smarthost has been
+						configured.
+					</Alert>
+				)}
+
+			{Object.entries(templatesByGroup).map(([group, templates]) => (
+				<Card
+					key={group}
+					variant="outlined"
+					css={{ background: "transparent", width: "100%" }}
+				>
+					<List>
+						<ListItem css={styles.listHeader}>
+							<ListItemText css={styles.listItemText} primary={group} />
+						</ListItem>
+
+						{templates.map((tpl, i) => {
+							const value = castNotificationMethod(tpl.method || defaultMethod);
+							const isLastItem = i === templates.length - 1;
+
+							return (
+								<Fragment key={tpl.id}>
+									<ListItem>
+										<ListItemText
+											css={styles.listItemText}
+											primary={tpl.name}
+										/>
+										<MethodToggleGroup
+											templateId={tpl.id}
+											options={availableMethods}
+											value={value}
+										/>
+									</ListItem>
+									{!isLastItem && <Divider />}
+								</Fragment>
+							);
+						})}
+					</List>
+				</Card>
+			))}
+		</Stack>
+	);
+};
+
+type MethodToggleGroupProps = {
+	templateId: string;
+	options: NotificationMethod[];
+	value: NotificationMethod;
+};
+
+const MethodToggleGroup: FC<MethodToggleGroupProps> = ({
+	value,
+	options,
+	templateId,
+}) => {
+	const queryClient = useQueryClient();
+	const updateMethodMutation = useMutation(
+		updateNotificationTemplateMethod(templateId, queryClient),
+	);
+
+	return (
+		<ToggleButtonGroup
+			exclusive
+			value={value}
+			size="small"
+			aria-label="Notification method"
+			css={styles.toggleGroup}
+			onChange={async (_, method) => {
+				await updateMethodMutation.mutateAsync({
+					method,
+				});
+				displaySuccess("Notification method updated");
+			}}
+		>
+			{options.map((method) => {
+				const Icon = methodIcons[method];
+				const label = methodLabels[method];
+				return (
+					<Tooltip key={method} title={label}>
+						<ToggleButton
+							value={method}
+							css={styles.toggleButton}
+							onClick={(e) => {
+								// Retain the value if the user clicks the same button, ensuring
+								// at least one value remains selected.
+								if (method === value) {
+									e.preventDefault();
+									e.stopPropagation();
+									return;
+								}
+							}}
+						>
+							<Icon aria-label={label} />
+						</ToggleButton>
+					</Tooltip>
+				);
+			})}
+		</ToggleButtonGroup>
+	);
+};
+
+const styles = {
+	listHeader: (theme) => ({
+		background: theme.palette.background.paper,
+		borderBottom: `1px solid ${theme.palette.divider}`,
+	}),
+	listItemText: {
+		[`& .${listItemTextClasses.primary}`]: {
+			fontSize: 14,
+			fontWeight: 500,
+		},
+		[`& .${listItemTextClasses.secondary}`]: {
+			fontSize: 14,
+		},
+	},
+	toggleGroup: (theme) => ({
+		border: `1px solid ${theme.palette.divider}`,
+		borderRadius: 4,
+	}),
+	toggleButton: (theme) => ({
+		border: 0,
+		borderRadius: 4,
+		fontSize: 16,
+		padding: "4px 8px",
+		color: theme.palette.text.disabled,
+
+		"&:hover": {
+			color: theme.palette.text.primary,
+		},
+
+		"& svg": {
+			fontSize: "inherit",
+		},
+	}),
+} as Record<string, Interpolation<Theme>>;