Only show alert if templates has the method enabled

BrunoQuaresma · BrunoQuaresma · commit 20ccc3f1b13e · 2024-09-04T18:42:31.000Z
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.stories.tsx b/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.stories.tsx
@@ -4,10 +4,18 @@ import { API } from "api/api";
 import type { DeploymentValues } from "api/typesGenerated";
 import { baseMeta } from "./storybookUtils";
 import { NotificationEvents } from "./NotificationEvents";
+import { selectTemplatesByGroup } from "api/queries/notifications";
+import { MockNotificationTemplates } from "testHelpers/entities";
 
 const meta: Meta<typeof NotificationEvents> = {
 	title: "pages/DeploymentSettings/NotificationsPage/NotificationEvents",
 	component: NotificationEvents,
+	args: {
+		defaultMethod: "smtp",
+		availableMethods: ["smtp", "webhook"],
+		templatesByGroup: selectTemplatesByGroup(MockNotificationTemplates),
+		deploymentValues: baseMeta.parameters.deploymentValues
+	},
 	...baseMeta,
 };
 
@@ -16,7 +24,7 @@ export default meta;
 type Story = StoryObj<typeof NotificationEvents>;
 
 export const NoEmailSmarthost: Story = {
-	parameters: {
+	args: {
 		deploymentValues: {
 			notifications: {
 				webhook: {
@@ -31,7 +39,7 @@ export const NoEmailSmarthost: Story = {
 };
 
 export const NoWebhookEndpoint: Story = {
-	parameters: {
+	args: {
 		deploymentValues: {
 			notifications: {
 				webhook: {
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.tsx b/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.tsx
@@ -39,9 +39,12 @@ export const NotificationEvents: FC<NotificationEventsProps> = ({
 	templatesByGroup,
 	deploymentValues,
 }) => {
+	const hasWebhookNotifications = Object.values(templatesByGroup).flat().some(t => t.method === "webhook")
+	const hasEmailNotifications = Object.values(templatesByGroup).flat().some(t => t.method === "smtp")
+
 	return (
 		<Stack spacing={4}>
-			{availableMethods.includes("smtp") &&
+			{hasWebhookNotifications &&
 				deploymentValues.notifications?.webhook.endpoint === "" && (
 					<Alert
 						severity="warning"
@@ -63,7 +66,7 @@ export const NotificationEvents: FC<NotificationEventsProps> = ({
 					</Alert>
 				)}
 
-			{availableMethods.includes("smtp") &&
+			{hasEmailNotifications &&
 				deploymentValues.notifications?.email.smarthost === "" && (
 					<Alert
 						severity="warning"
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.stories.tsx b/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.stories.tsx
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 import { NotificationsPage } from "./NotificationsPage";
 import { baseMeta } from "./storybookUtils";
+import { notificationDispatchMethodsKey, systemNotificationTemplatesKey } from "api/queries/notifications";
+import { MockNotificationMethodsResponse, MockNotificationTemplates } from "testHelpers/entities";
 
 const meta: Meta<typeof NotificationsPage> = {
 	title: "pages/DeploymentSettings/NotificationsPage",
@@ -13,6 +15,33 @@ export default meta;
 
 type Story = StoryObj<typeof NotificationsPage>;
 
+export const LoadingTemplates: Story = {
+	parameters: {
+		queries: [
+			{
+				key: systemNotificationTemplatesKey,
+				data: undefined,
+			},
+			{
+				key: notificationDispatchMethodsKey,
+				data: MockNotificationMethodsResponse,
+			},
+		]
+	}
+};
+
+export const LoadingDispatchMethods: Story = {
+	parameters: {
+		queries: [
+			{ key: systemNotificationTemplatesKey, data: MockNotificationTemplates },
+			{
+				key: notificationDispatchMethodsKey,
+				data: undefined,
+			},
+		]
+	}
+};
+
 export const Events: Story = {};
 
 export const Settings: Story = {
diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/storybookUtils.ts b/site/src/pages/DeploySettingsPage/NotificationsPage/storybookUtils.ts
@@ -18,7 +18,7 @@ import {
 import type { NotificationsPage } from "./NotificationsPage";
 
 // Extracted from a real API response
-const mockedOptions: SerpentOption[]  = [
+export const mockNotificationsDeploymentOptions: SerpentOption[]  = [
 	{
 		name: "Notifications: Dispatch Timeout",
 		description:
@@ -195,7 +195,7 @@ export const baseMeta = {
 		],
 		user: MockUser,
 		permissions: { viewDeploymentValues: true },
-		deploymentOptions: mockedOptions,
+		deploymentOptions: mockNotificationsDeploymentOptions,
 		deploymentValues: {
 			notifications: {
 				webhook: {
