Sep 11, 2024 · Sep 1, 2024 · Sep 1, 2024 · Sep 3, 2024 · Sep 4, 2024 · Sep 5, 2024
diff --git a/coderd/database/queries.sql.go b/coderd/database/queries.sql.go
diff --git a/coderd/database/queries/notifications.sql b/coderd/database/queries/notifications.sql
 -- name: FetchNewMessageMetadata :one
 -- This is used to build up the notification_message's JSON payload.
 SELECT nt.name                                                    AS notification_name,
       nt.id                                                      AS notification_template_id,
       nt.actions                                                 AS actions,
       nt.method                                                  AS custom_method,
       u.id                                                       AS user_id,
diff --git a/coderd/notifications/dispatch/smtp/html.gotmpl b/coderd/notifications/dispatch/smtp/html.gotmpl
      <div style="border-top: 1px solid #e2e8f0; color: #475569; font-size: 12px; margin-top: 64px; padding-top: 24px; line-height: 1.6;">
        <p>&copy;&nbsp;{{ current_year }}&nbsp;Coder. All rights reserved&nbsp;-&nbsp;<a href="{{ base_url }}" style="color: #2563eb; text-decoration: none;">{{ base_url }}</a></p>
        <p><a href="{{ base_url }}/settings/notifications" style="color: #2563eb; text-decoration: none;">Click here to manage your notification settings</a></p>
        <p><a href="{{ base_url }}/settings/notifications?disabled={{ .NotificationTemplateID }}" style="color: #2563eb; text-decoration: none;">Stop receiving emails like this</a></p>
      </div>
    </div>
  </body>
diff --git a/coderd/notifications/enqueuer.go b/coderd/notifications/enqueuer.go
 // actions which can be taken by the recipient.
 func (s *StoreEnqueuer) buildPayload(metadata database.FetchNewMessageMetadataRow, labels map[string]string) (*types.MessagePayload, error) {
 payload := types.MessagePayload{
 Version: "1.0",
 Version: "1.1",

 NotificationName: metadata.NotificationName,
 NotificationName:       metadata.NotificationName,
 NotificationTemplateID: metadata.NotificationTemplateID.String(),

 UserID:       metadata.UserID.String(),
 UserEmail:    metadata.UserEmail,
diff --git a/coderd/notifications/render/gotmpl_test.go b/coderd/notifications/render/gotmpl_test.go
 "url": "https://mocked-server-address/@johndoe/my-workspace"
 }]`,
 },
 {
 name: "render notification template ID",
 in:   `{{ .NotificationTemplateID }}`,
 payload: types.MessagePayload{
 NotificationTemplateID: "4e19c0ac-94e1-4532-9515-d1801aa283b2",
 },
 expectedOutput: "4e19c0ac-94e1-4532-9515-d1801aa283b2",
 expectedErr:    nil,
 },
 }

 for _, tc := range tests {
diff --git a/coderd/notifications/types/payload.go b/coderd/notifications/types/payload.go
 type MessagePayload struct {
 Version string `json:"_version"`

 NotificationName string `json:"notification_name"`
 NotificationName       string `json:"notification_name"`
 NotificationTemplateID string `json:"notification_template_id"`

 UserID       string `json:"user_id"`
 UserEmail    string `json:"user_email"`
diff --git a/site/src/api/queries/notifications.ts b/site/src/api/queries/notifications.ts
 UpdateNotificationTemplateMethod
 >;
 };

 export const disableNotification = (
 userId: string,
 queryClient: QueryClient,
 ) => {
 return {
 mutationFn: async (templateId: string) => {
 const result = await API.putUserNotificationPreferences(userId, {
 template_disabled_map: {
 [templateId]: true,
 },
 });
 return result;
 },
 onSuccess: (data) => {
 queryClient.setQueryData(userNotificationPreferencesKey(userId), data);
 },
 } satisfies UseMutationOptions<NotificationPreference[], unknown, string>;
 };
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import { spyOn, userEvent, within } from "@storybook/test";
 import {expect,spyOn, userEvent, waitFor, within } from "@storybook/test";
 import { API } from "api/api";
 import {
 notificationDispatchMethodsKey,
 systemNotificationTemplatesKey,
 userNotificationPreferencesKey,
 } from "api/queries/notifications";
 import { http, HttpResponse } from "msw";
 import { reactRouterParameters } from "storybook-addon-remix-react-router";
 import {
 MockNotificationMethodsResponse,
 MockNotificationPreferences,
 } from "testHelpers/storybook";
 import { NotificationsPage } from "./NotificationsPage";

 const meta: Meta<typeof NotificationsPage> = {
 const meta = {
 title: "pages/UserSettingsPage/NotificationsPage",
 component: NotificationsPage,
 parameters: {
 permissions: { viewDeploymentValues: true },
 },
 decorators: [withGlobalSnackbar, withAuthProvider, withDashboardProvider],
 };
 } satisfies Meta<typeof NotificationsPage>;

 export default meta;
 type Story = StoryObj<typeof NotificationsPage>;
 permissions: { viewDeploymentValues: false },
 },
 };

 // Ensure the selected notification template is enabled before attempting to
 // disable it.
 const enabledPreference = MockNotificationPreferences.find(
 (pref) => pref.disabled === false,
 );
 if (!enabledPreference) {
 throw new Error(
 "No enabled notification preference available to test the disabling action.",
 );
 }
 const templateToDisable = MockNotificationTemplates.find(
 (tpl) => tpl.id === enabledPreference.id,
 );
 if (!templateToDisable) {
 throw new Error("No notification template matches the enabled preference.");
 }

 export const DisableValidTemplate: Story = {
 parameters: {
 reactRouter: reactRouterParameters({
 location: {
 searchParams: { disabled: templateToDisable.id },
 },
 }),
 },
 decorators: [
 (Story) => {
 // Since the action occurs during the initial render, we need to spy on
 // the API call before the story is rendered. This is done using a
 // decorator to ensure the spy is set up in time.
 spyOn(API, "putUserNotificationPreferences").mockResolvedValue(
 MockNotificationPreferences.map((pref) => {
 if (pref.id === templateToDisable.id) {
 return {
 ...pref,
 disabled: true,
 };
 }
 return pref;
 }),
 );
 return <Story />;
 },
 ],
 play: async ({ canvasElement }) => {
 await within(document.body).findByText("Notification has been disabled");
 const switchEl = await within(canvasElement).findByLabelText(
 templateToDisable.name,
 );
 expect(switchEl).not.toBeChecked();
 },
 };

 export const DisableInvalidTemplate: Story = {
 parameters: {
 reactRouter: reactRouterParameters({
 location: {
 searchParams: { disabled: "invalid-template-id" },
 },
 }),
 },
 decorators: [
 (Story) => {
 // Since the action occurs during the initial render, we need to spy on
 // the API call before the story is rendered. This is done using a
 // decorator to ensure the spy is set up in time.
 spyOn(API, "putUserNotificationPreferences").mockRejectedValue({});
 return <Story />;
 },
 ],
 play: async () => {
 await within(document.body).findByText("Error disabling notification");
 },
 };
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
 import Switch from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip";
 import {
 disableNotification,
 notificationDispatchMethods,
 selectTemplatesByGroup,
 systemNotificationTemplates,
 NotificationPreference,
 NotificationTemplate,
 } from "api/typesGenerated";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import {displayError,displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 methodLabels,
 } from "modules/notifications/utils";
 import { type FC, Fragment } from "react";
 import { useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQueries, useQueryClient } from "react-query";
 import { useSearchParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import { Section } from "../Section";

 const updatePreferences = useMutation(
 updateUserNotificationPreferences(user.id, queryClient),
 );

 // Notification emails contain a link to disable a specific notification
 // template. This functionality is achieved using the query string parameter
 // "disabled".
 const disableMutation = useMutation(
 disableNotification(user.id, queryClient),
 );
 const [searchParams] = useSearchParams();
 const disabledId = searchParams.get("disabled");
 useEffect(() => {
 if (!disabledId) {
 return;
 }
 searchParams.delete("disabled");
 disableMutation
 .mutateAsync(disabledId)
 .then(() => {
 displaySuccess("Notification has been disabled");
 })
 .catch(() => {
 displayError("Error disabling notification");
 });
 }, [searchParams.delete, disabledId, disableMutation]);

 const ready =
 disabledPreferences.data && templatesByGroup.data && dispatchMethods.data;
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,7 @@
		-- name: FetchNewMessageMetadata :one
		-- This is used to build up the notification_message's JSON payload.
		SELECT nt.name AS notification_name,
		nt.id AS notification_template_id,
		nt.actions AS actions,
		nt.method AS custom_method,
		u.id AS user_id,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,6 +26,7 @@
		<div style="border-top: 1px solid #e2e8f0; color: #475569; font-size: 12px; margin-top: 64px; padding-top: 24px; line-height: 1.6;">
		<p>© {{ current_year }} Coder. All rights reserved - <a href="{{ base_url }}" style="color: #2563eb; text-decoration: none;">{{ base_url }}</a></p>
		<p><a href="{{ base_url }}/settings/notifications" style="color: #2563eb; text-decoration: none;">Click here to manage your notification settings</a></p>
		<p><a href="{{ base_url }}/settings/notifications?disabled={{ .NotificationTemplateID }}" style="color: #2563eb; text-decoration: none;">Stop receiving emails like this</a></p>
		</div>
		</div>
		</body>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -121,9 +121,10 @@ func (s *StoreEnqueuer) Enqueue(ctx context.Context, userID, templateID uuid.UUI
		// actions which can be taken by the recipient.
		func (s StoreEnqueuer) buildPayload(metadata database.FetchNewMessageMetadataRow, labels map[string]string) (types.MessagePayload, error) {
		payload := types.MessagePayload{
		Version: "1.0",
		Version: "1.1",

		NotificationName: metadata.NotificationName,
		NotificationName: metadata.NotificationName,
		NotificationTemplateID: metadata.NotificationTemplateID.String(),
dannykopping marked this conversation as resolved. Show resolvedHide resolved

		UserID: metadata.UserID.String(),
		UserEmail: metadata.UserEmail,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -56,6 +56,15 @@ func TestGoTemplate(t *testing.T) {
		"url": "https://mocked-server-address/@johndoe/my-workspace"
		}]`,
		},
		{
		name: "render notification template ID",
		in: `{{ .NotificationTemplateID }}`,
		payload: types.MessagePayload{
		NotificationTemplateID: "4e19c0ac-94e1-4532-9515-d1801aa283b2",
		},
		expectedOutput: "4e19c0ac-94e1-4532-9515-d1801aa283b2",
		expectedErr: nil,
		},
		}

		for _, tc := range tests {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,7 +7,8 @@ package types
		type MessagePayload struct {
		Version string `json:"_version"`

		NotificationName string `json:"notification_name"`
		NotificationName string `json:"notification_name"`
		NotificationTemplateID string `json:"notification_template_id"`

		UserID string `json:"user_id"`
		UserEmail string `json:"user_email"`
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -136,3 +136,22 @@ export const updateNotificationTemplateMethod = (
		UpdateNotificationTemplateMethod
		>;
		};

		export const disableNotification = (
		userId: string,
		queryClient: QueryClient,
		) => {
		return {
		mutationFn: async (templateId: string) => {
		const result = await API.putUserNotificationPreferences(userId, {
		template_disabled_map: {
		[templateId]: true,
		},
		});
		return result;
		},
		onSuccess: (data) => {
		queryClient.setQueryData(userNotificationPreferencesKey(userId), data);
		},
		} satisfies UseMutationOptions<NotificationPreference[], unknown, string>;
		};
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,13 @@
		import type { Meta, StoryObj } from "@storybook/react";
		import { spyOn, userEvent, within } from "@storybook/test";
		import {expect,spyOn, userEvent, waitFor, within } from "@storybook/test";
		import { API } from "api/api";
		import {
		notificationDispatchMethodsKey,
		systemNotificationTemplatesKey,
		userNotificationPreferencesKey,
		} from "api/queries/notifications";
		import { http, HttpResponse } from "msw";
		import { reactRouterParameters } from "storybook-addon-remix-react-router";
		import {
		MockNotificationMethodsResponse,
		MockNotificationPreferences,
Expand All		@@ -19,7 +21,7 @@ import {
		} from "testHelpers/storybook";
		import { NotificationsPage } from "./NotificationsPage";

		const meta: Meta<typeof NotificationsPage> = {
		const meta = {
		title: "pages/UserSettingsPage/NotificationsPage",
		component: NotificationsPage,
		parameters: {
Expand All		@@ -42,7 +44,7 @@ const meta: Meta<typeof NotificationsPage> = {
		permissions: { viewDeploymentValues: true },
		},
		decorators: [withGlobalSnackbar, withAuthProvider, withDashboardProvider],
		};
		} satisfies Meta<typeof NotificationsPage>;

		export default meta;
		type Story = StoryObj<typeof NotificationsPage>;
Expand DownExpand Up		@@ -76,3 +78,78 @@ export const NonAdmin: Story = {
		permissions: { viewDeploymentValues: false },
		},
		};

		// Ensure the selected notification template is enabled before attempting to
		// disable it.
		const enabledPreference = MockNotificationPreferences.find(
		(pref) => pref.disabled === false,
		);
		if (!enabledPreference) {
		throw new Error(
		"No enabled notification preference available to test the disabling action.",
		);
		}
		const templateToDisable = MockNotificationTemplates.find(
		(tpl) => tpl.id === enabledPreference.id,
		);
		if (!templateToDisable) {
		throw new Error("No notification template matches the enabled preference.");
		}

		export const DisableValidTemplate: Story = {
		parameters: {
		reactRouter: reactRouterParameters({
		location: {
		searchParams: { disabled: templateToDisable.id },
		},
		}),
		},
		decorators: [
		(Story) => {
		// Since the action occurs during the initial render, we need to spy on
		// the API call before the story is rendered. This is done using a
		// decorator to ensure the spy is set up in time.
		spyOn(API, "putUserNotificationPreferences").mockResolvedValue(
		MockNotificationPreferences.map((pref) => {
		if (pref.id === templateToDisable.id) {
		return {
		...pref,
		disabled: true,
		};
		}
		return pref;
		}),
		);
		return <Story />;
		},
		],
		play: async ({ canvasElement }) => {
		await within(document.body).findByText("Notification has been disabled");
		const switchEl = await within(canvasElement).findByLabelText(
		templateToDisable.name,
		);
		expect(switchEl).not.toBeChecked();
		},
		};

		export const DisableInvalidTemplate: Story = {
		parameters: {
		reactRouter: reactRouterParameters({
		location: {
		searchParams: { disabled: "invalid-template-id" },
		},
		}),
		},
		decorators: [
		(Story) => {
		// Since the action occurs during the initial render, we need to spy on
		// the API call before the story is rendered. This is done using a
		// decorator to ensure the spy is set up in time.
		spyOn(API, "putUserNotificationPreferences").mockRejectedValue({});
		return <Story />;
		},
		],
		play: async () => {
		await within(document.body).findByText("Error disabling notification");
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,6 +8,7 @@ import ListItemText, { listItemTextClasses } from "@mui/material/ListItemText";
		import Switch from "@mui/material/Switch";
		import Tooltip from "@mui/material/Tooltip";
		import {
		disableNotification,
		notificationDispatchMethods,
		selectTemplatesByGroup,
		systemNotificationTemplates,
Expand All		@@ -18,7 +19,7 @@ import type {
		NotificationPreference,
		NotificationTemplate,
		} from "api/typesGenerated";
		import { displaySuccess } from "components/GlobalSnackbar/utils";
		import {displayError,displaySuccess } from "components/GlobalSnackbar/utils";
		import { Loader } from "components/Loader/Loader";
		import { Stack } from "components/Stack/Stack";
		import { useAuthenticated } from "contexts/auth/RequireAuth";
Expand All		@@ -28,8 +29,10 @@ import {
		methodLabels,
		} from "modules/notifications/utils";
		import { type FC, Fragment } from "react";
		import { useEffect } from "react";
		import { Helmet } from "react-helmet-async";
		import { useMutation, useQueries, useQueryClient } from "react-query";
		import { useSearchParams } from "react-router-dom";
		import { pageTitle } from "utils/page";
		import { Section } from "../Section";

Expand DownExpand Up		@@ -60,6 +63,30 @@ export const NotificationsPage: FC = () => {
		const updatePreferences = useMutation(
		updateUserNotificationPreferences(user.id, queryClient),
		);

		// Notification emails contain a link to disable a specific notification
		// template. This functionality is achieved using the query string parameter
		// "disabled".
		const disableMutation = useMutation(
		disableNotification(user.id, queryClient),
		);
		const [searchParams] = useSearchParams();
		const disabledId = searchParams.get("disabled");
		useEffect(() => {
		if (!disabledId) {
		return;
		}
		searchParams.delete("disabled");
		disableMutation
		.mutateAsync(disabledId)
		.then(() => {
		displaySuccess("Notification has been disabled");
		})
		.catch(() => {
		displayError("Error disabling notification");
		});
		}, [searchParams.delete, disabledId, disableMutation]);

		const ready =
		disabledPreferences.data && templatesByGroup.data && dispatchMethods.data;

Expand Down