coder · BrunoQuaresma · Aug 9, 2024 · Jul 29, 2024 · Jul 29, 2024 · Aug 2, 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
@@ -170,4 +170,5 @@ WHERE id = @id::uuid;
 -- name: GetNotificationTemplatesByKind :many
 SELECT *
 FROM notification_templates
-WHERE kind = @kind::notification_template_kind;
+WHERE kind = @kind::notification_template_kind
+ORDER BY name ASC;
diff --git a/site/src/@types/storybook.d.ts b/site/src/@types/storybook.d.ts
@@ -1,6 +1,13 @@
 import * as _storybook_types from "@storybook/react";
 import type { QueryKey } from "react-query";
-import type { Experiments, FeatureName } from "api/typesGenerated";
+import type {
+  Experiments,
+  FeatureName,
+  SerpentOption,
+  User,
+  DeploymentValues,
+} from "api/typesGenerated";
+import type { Permissions } from "contexts/auth/permissions";
 
 declare module "@storybook/react" {
   type WebSocketEvent =
@@ -11,5 +18,9 @@ declare module "@storybook/react" {
     experiments?: Experiments;
     queries?: { key: QueryKey; data: unknown }[];
     webSocket?: WebSocketEvent[];
+    user?: User;
+    permissions?: Partial<Permissions>;
+    deploymentValues?: DeploymentValues;
+    deploymentOptions?: SerpentOption[];
   }
 }
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2036,6 +2036,49 @@ class ApiMethods {
 
     return response.data;
   };
+
+  getUserNotificationPreferences = async (userId: string) => {
+    const res = await this.axios.get<TypesGen.NotificationPreference[] | null>(
+      `/api/v2/users/${userId}/notifications/preferences`,
+    );
+    return res.data ?? [];
+  };
+
+  putUserNotificationPreferences = async (
+    userId: string,
+    req: TypesGen.UpdateUserNotificationPreferences,
+  ) => {
+    const res = await this.axios.put<TypesGen.NotificationPreference[]>(
+      `/api/v2/users/${userId}/notifications/preferences`,
+      req,
+    );
+    return res.data;
+  };
+
+  getSystemNotificationTemplates = async () => {
+    const res = await this.axios.get<TypesGen.NotificationTemplate[]>(
+      `/api/v2/notifications/templates/system`,
+    );
+    return res.data;
+  };
+
+  getNotificationDispatchMethods = async () => {
+    const res = await this.axios.get<TypesGen.NotificationMethodsResponse>(
+      `/api/v2/notifications/dispatch-methods`,
+    );
+    return res.data;
+  };
+
+  updateNotificationTemplateMethod = async (
+    templateId: string,
+    req: TypesGen.UpdateNotificationTemplateMethod,
+  ) => {
+    const res = await this.axios.put<void>(
+      `/api/v2/notifications/templates/${templateId}/method`,
+      req,
+    );
+    return res.data;
+  };
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,

diff --git a/site/src/api/queries/notifications.ts b/site/src/api/queries/notifications.ts
@@ -0,0 +1,138 @@
+import type { QueryClient, UseMutationOptions } from "react-query";
+import { API } from "api/api";
+import type {
+  NotificationPreference,
+  NotificationTemplate,
+  UpdateNotificationTemplateMethod,
+  UpdateUserNotificationPreferences,
+} from "api/typesGenerated";
+
+export const userNotificationPreferencesKey = (userId: string) => [
+  "users",
+  userId,
+  "notifications",
+  "preferences",
+];
+
+export const userNotificationPreferences = (userId: string) => {
+  return {
+    queryKey: userNotificationPreferencesKey(userId),
+    queryFn: () => API.getUserNotificationPreferences(userId),
+  };
+};
+
+export const updateUserNotificationPreferences = (
+  userId: string,
+  queryClient: QueryClient,
+) => {
+  return {
+    mutationFn: (req) => {
+      return API.putUserNotificationPreferences(userId, req);
+    },
+    onMutate: (data) => {
+      queryClient.setQueryData(
+        userNotificationPreferencesKey(userId),
+        Object.entries(data.template_disabled_map).map(
+          ([id, disabled]) =>
+            ({
+              id,
+              disabled,
+              updated_at: new Date().toISOString(),
+            }) satisfies NotificationPreference,
+        ),
+      );
+    },
+  } satisfies UseMutationOptions<
+    NotificationPreference[],
+    unknown,
+    UpdateUserNotificationPreferences
+  >;
+};
+
+export const systemNotificationTemplatesKey = [
+  "notifications",
+  "templates",
+  "system",
+];
+
+export const systemNotificationTemplates = () => {
+  return {
+    queryKey: systemNotificationTemplatesKey,
+    queryFn: () => API.getSystemNotificationTemplates(),
+  };
+};
+
+export function selectTemplatesByGroup(
+  data: NotificationTemplate[],
+): Record<string, NotificationTemplate[]> {
+  const grouped = data.reduce(
+    (acc, tpl) => {
+      if (!acc[tpl.group]) {
+        acc[tpl.group] = [];
+      }
+      acc[tpl.group].push(tpl);
+      return acc;
+    },
+    {} as Record<string, NotificationTemplate[]>,
+  );
+
+  // Sort templates within each group
+  for (const group in grouped) {
+    grouped[group].sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  // Sort groups by name
+  const sortedGroups = Object.keys(grouped).sort((a, b) => a.localeCompare(b));
+  const sortedGrouped: Record<string, NotificationTemplate[]> = {};
+  for (const group of sortedGroups) {
+    sortedGrouped[group] = grouped[group];
+  }
+
+  return sortedGrouped;
+}
+
+export const notificationDispatchMethodsKey = [
+  "notifications",
+  "dispatchMethods",
+];
+
+export const notificationDispatchMethods = () => {
+  return {
+    staleTime: Infinity,
+    queryKey: notificationDispatchMethodsKey,
+    queryFn: () => API.getNotificationDispatchMethods(),
+  };
+};
+
+export const updateNotificationTemplateMethod = (
+  templateId: string,
+  queryClient: QueryClient,
+) => {
+  return {
+    mutationFn: (req: UpdateNotificationTemplateMethod) =>
+      API.updateNotificationTemplateMethod(templateId, req),
+    onMutate: (data) => {
+      const prevData = queryClient.getQueryData<NotificationTemplate[]>(
+        systemNotificationTemplatesKey,
+      );
+      if (!prevData) {
+        return;
+      }
+      queryClient.setQueryData(
+        systemNotificationTemplatesKey,
+        prevData.map((tpl) =>
+          tpl.id === templateId
+            ? {
+                ...tpl,
+                method: data.method,
+              }
+            : tpl,
+        ),
+      );
+    },
+  } satisfies UseMutationOptions<
+    void,
+    unknown,
+    UpdateNotificationTemplateMethod
+  >;
+};
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -141,10 +141,12 @@ export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
   };
 }
 
+export const hasFirstUserKey = ["hasFirstUser"];
+
 export const hasFirstUser = (userMetadata: MetadataState<User>) => {
   return cachedQuery({
     metadata: userMetadata,
-    queryKey: ["hasFirstUser"],
+    queryKey: hasFirstUserKey,
     queryFn: API.hasFirstUser,
   });
 };

diff --git a/site/src/modules/notifications/utils.tsx b/site/src/modules/notifications/utils.tsx
@@ -0,0 +1,29 @@
+import EmailIcon from "@mui/icons-material/EmailOutlined";
+import WebhookIcon from "@mui/icons-material/WebhookOutlined";
+
+// TODO: This should be provided by the auto generated types from codersdk
+const notificationMethods = ["smtp", "webhook"] as const;
+
+export type NotificationMethod = (typeof notificationMethods)[number];
+
+export const methodIcons: Record<NotificationMethod, typeof EmailIcon> = {
+  smtp: EmailIcon,
+  webhook: WebhookIcon,
+};
+
+export const methodLabels: Record<NotificationMethod, string> = {
+  smtp: "SMTP",
+  webhook: "Webhook",
+};
+
+export const castNotificationMethod = (value: string) => {
+  if (notificationMethods.includes(value as NotificationMethod)) {
+    return value as NotificationMethod;
+  }
+
+  throw new Error(
+    `Invalid notification method: ${value}. Accepted values: ${notificationMethods.join(
+      ", ",
+    )}`,
+  );
+};
diff --git a/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx b/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx
@@ -24,7 +24,7 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
   const context = useContext(DeploySettingsContext);
   if (!context) {
     throw new Error(
-      "useDeploySettings should be used inside of DeploySettingsLayout",
+      "useDeploySettings should be used inside of DeploySettingsContext or DeploySettingsLayout",
     );
   }
   return context;