Aug 9, 2024 · Jul 29, 2024 · Jul 29, 2024 · Aug 2, 2024 · Aug 2, 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
 -- 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
 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 =
    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

    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
 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
  };
 }

 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
 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
  const context = useContext(DeploySettingsContext);
  if (!context) {
    throw new Error(
      "useDeploySettings should be used inside of DeploySettingsLayout",
      "useDeploySettings should be used inside ofDeploySettingsContext orDeploySettingsLayout",
    );
  }
  return context;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Original file line number	Diff line number	Diff line change
		@@ -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 =
Expand All		@@ -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[];
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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
		>;
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
		});
		};
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolved
		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(
		", ",
		)}`,
		);
		};
Comment on lines +19 to +29 Copy link Member ParkreinerAug 8, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Tagging this for now while I look through the other files. I don't fully understand the point of this function, and at the very least, I think that it should be redefined as a type predicate Copy link CollaboratorAuthor BrunoQuaresmaAug 8, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. This is just easier to use IMO. Type predicate: constisNotificationMethod=(v:string):v isNotificationMethod=>{}// Usagevalues.map(v=>{if(!isNotificationMethod(v)){thrownewError("v is not valid")}return<Componentmethod={method}/>}) Cast function constcastNotificationMethod=(v:string):NotificationMethod=>{}// Usagevalues.map(v=>{constmethod=castNotificationMethod(v)return<Componentmethod={method}/>})
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 ofDeploySettingsContext orDeploySettingsLayout",
		);
		}
		return context;
Expand Down