feat(alerts): spike protection notification setting frontend (#40793)

static/app/views/settings/account/accountNotificationFineTuning.tsx

@@ -19,6 +19,7 @@ import {
 } from 'sentry/views/settings/account/notifications/fields';
 import NotificationSettingsByType from 'sentry/views/settings/account/notifications/notificationSettingsByType';
 import {
+  getNotificationTypeFromPathname,
   groupByOrganization,
   isGroupedByProject,
 } from 'sentry/views/settings/account/notifications/utils';
@@ -32,6 +33,16 @@ const PanelBodyLineItem = styled(PanelBody)`
   }
 `;
 
+const accountNotifications = [
+  'alerts',
+  'deploy',
+  'workflow',
+  'activeRelease',
+  'approval',
+  'quota',
+  'spikeProtection',
+];
+
 type ANBPProps = {
   field: FineTuneField;
   projects: Project[];
@@ -128,7 +139,8 @@ type State = AsyncView['state'] & {
 
 class AccountNotificationFineTuning extends AsyncView<Props, State> {
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
-    const {fineTuneType} = this.props.params;
+    const {fineTuneType: pathnameType} = this.props.params;
+    const fineTuneType = getNotificationTypeFromPathname(pathnameType);
     const endpoints = [
       ['notifications', '/users/me/notifications/'],
       ['fineTuneData', `/users/me/notifications/${fineTuneType}/`],
@@ -167,13 +179,10 @@ class AccountNotificationFineTuning extends AsyncView<Props, State> {
 
   renderBody() {
     const {params} = this.props;
-    const {fineTuneType} = params;
+    const {fineTuneType: pathnameType} = params;
+    const fineTuneType = getNotificationTypeFromPathname(pathnameType);
 
-    if (
-      ['alerts', 'deploy', 'workflow', 'activeRelease', 'approval', 'quota'].includes(
-        fineTuneType
-      )
-    ) {
+    if (accountNotifications.includes(fineTuneType)) {
       return <NotificationSettingsByType notificationType={fineTuneType} />;
     }
 

static/app/views/settings/account/notifications/constants.tsx

@@ -36,13 +36,29 @@ export const NOTIFICATION_SETTINGS_TYPES = [
   'quota',
   'reports',
   'email',
-];
+  'spikeProtection',
+] as const;
 
 export const SELF_NOTIFICATION_SETTINGS_TYPES = [
   'personalActivityNotifications',
   'selfAssignOnResolve',
 ];
 
+// 'alerts' | 'activeRelease' | 'workflow' ...
+export type NotificationSettingsType = typeof NOTIFICATION_SETTINGS_TYPES[number];
+
+export const NOTIFICATION_SETTINGS_PATHNAMES: Record<NotificationSettingsType, string> = {
+  alerts: 'alerts',
+  activeRelease: 'activeRelease',
+  workflow: 'workflow',
+  deploy: 'deploy',
+  approval: 'approval',
+  quota: 'quota',
+  reports: 'reports',
+  email: 'email',
+  spikeProtection: 'spike-protection',
+};
+
 export const CONFIRMATION_MESSAGE = (
   <div>
     <p style={{marginBottom: '20px'}}>

static/app/views/settings/account/notifications/fields.tsx

@@ -97,6 +97,19 @@ export const ACCOUNT_NOTIFICATION_FIELDS: Record<string, FineTuneField> = {
     // No choices here because it's going to have dynamic content
     // Component will create choices,
   },
+  spikeProtection: {
+    title: t('Spike Protection Notifications'),
+    description: t(
+      'Notifications about spikes on projects that you have enabled spike protection for.'
+    ),
+    type: 'select',
+    defaultValue: '1',
+    options: [
+      {value: '1', label: t('On')},
+      {value: '0', label: t('Off')},
+    ],
+    defaultFieldName: 'spikeProtection',
+  },
   email: {
     title: t('Email Routing'),
     description: t(

static/app/views/settings/account/notifications/fields2.tsx

@@ -104,6 +104,16 @@ export const NOTIFICATION_SETTING_FIELDS: Record<string, Field> = {
     label: t('Email Routing'),
     help: t('Change the email address that receives notifications.'),
   },
+  spikeProtection: {
+    name: 'spikeProtection',
+    type: 'select',
+    label: t('Spike Protection'),
+    choices: [
+      ['always', t('On')],
+      ['never', t('Off')],
+    ],
+    help: t('Notifications about spikes on a per project basis.'),
+  },
   personalActivityNotifications: {
     name: 'personalActivityNotifications',
     type: 'select',

static/app/views/settings/account/notifications/notificationSettings.tsx

@@ -14,6 +14,7 @@ import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAna
 import withOrganizations from 'sentry/utils/withOrganizations';
 import {
   CONFIRMATION_MESSAGE,
+  NOTIFICATION_SETTINGS_PATHNAMES,
   NOTIFICATION_SETTINGS_TYPES,
   NotificationSettingsObject,
   SELF_NOTIFICATION_SETTINGS_TYPES,
@@ -147,7 +148,7 @@ class NotificationSettings extends AsyncComponent<Props, State> {
               &nbsp;
               <Link
                 data-test-id="fine-tuning"
-                to={`/settings/account/notifications/${notificationType}`}
+                to={`/settings/account/notifications/${NOTIFICATION_SETTINGS_PATHNAMES[notificationType]}`}
               >
                 Fine tune
               </Link>

static/app/views/settings/account/notifications/utils.tsx

@@ -6,6 +6,7 @@ import {OrganizationSummary, Project} from 'sentry/types';
 import {
   ALL_PROVIDERS,
   MIN_PROJECTS_FOR_CONFIRMATION,
+  NOTIFICATION_SETTINGS_PATHNAMES,
   NotificationSettingsByProviderObject,
   NotificationSettingsObject,
   VALUE_MAPPING,
@@ -16,8 +17,16 @@ import ParentLabel from 'sentry/views/settings/account/notifications/parentLabel
 /**
  * Which fine-tuning parts are grouped by project
  */
+const notificationsByProject = [
+  'alerts',
+  'email',
+  'workflow',
+  'activeRelease',
+  'spikeProtection',
+];
+
 export const isGroupedByProject = (notificationType: string): boolean =>
-  ['alerts', 'email', 'workflow', 'activeRelease'].includes(notificationType);
+  notificationsByProject.includes(notificationType);
 
 export const getParentKey = (notificationType: string): string => {
   return isGroupedByProject(notificationType) ? 'project' : 'organization';
@@ -436,3 +445,13 @@ export function getDocsLinkForEventType(event: 'error' | 'transaction' | 'attach
       return 'https://docs.sentry.io/product/accounts/quotas/manage-event-stream-guide/#common-workflows-for-managing-your-event-stream';
   }
 }
+
+/**
+ * Returns the corresponding notification type name from the router path name
+ */
+export function getNotificationTypeFromPathname(routerPathname: string) {
+  const result = Object.entries(NOTIFICATION_SETTINGS_PATHNAMES).find(
+    ([_, pathname]) => pathname === routerPathname
+  ) ?? [routerPathname];
+  return result[0];
+}