feat(crons): Disallow teams not part of project to be selected for alerts

commit-id:3863ee1e

Author: davidenwang

static/app/components/forms/fields/sentryMemberTeamSelectorField.tsx

@@ -1,7 +1,10 @@
 import {useContext, useEffect, useMemo} from 'react';
 
 import Avatar from 'sentry/components/avatar';
+import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
+import type {DetailedTeam} from 'sentry/types';
+import {defined} from 'sentry/utils';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useTeams} from 'sentry/utils/useTeams';
 import {useTeamsById} from 'sentry/utils/useTeamsById';
@@ -15,6 +18,10 @@ import SelectField from './selectField';
 // projects can be passed as a direct prop as well
 export interface RenderFieldProps extends SelectFieldProps<any> {
   avatarSize?: number;
+  /**
+   * Ensures the only selectable teams and members are members of the given project
+   */
+  memberOfProjectSlug?: string;
   /**
    * Use the slug as the select field value. Without setting this the numeric id
    * of the project will be used.
@@ -25,6 +32,7 @@ export interface RenderFieldProps extends SelectFieldProps<any> {
 function SentryMemberTeamSelectorField({
   avatarSize = 20,
   placeholder = t('Choose Teams and Members'),
+  memberOfProjectSlug,
   ...props
 }: RenderFieldProps) {
   const {form} = useContext(FormContext);
@@ -77,11 +85,36 @@ function SentryMemberTeamSelectorField({
     loadMore: loadMoreTeams,
   } = useTeams({provideUserTeams: true});
 
-  const teamOptions = teams?.map(team => ({
-    value: `team:${team.id}`,
-    label: `#${team.slug}`,
-    leadingItems: <Avatar team={team} size={avatarSize} />,
-  }));
+  // TODO(davidenwang): Fix the team type here to avoid this type cast
+  const teamOptions = (teams as DetailedTeam[])
+    .map(team => {
+      const isDisabledTeam =
+        memberOfProjectSlug &&
+        !defined(team.projects.find(({slug}) => memberOfProjectSlug === slug));
+      return {
+        value: `team:${team.id}`,
+        leadingItems: <Avatar team={team} size={avatarSize} />,
+        ...(isDisabledTeam
+          ? {
+              disabled: true,
+              label: (
+                <Tooltip
+                  position="left"
+                  title={t('%s is not a member of the selected project', `#${team.slug}`)}
+                >
+                  #{team.slug}
+                </Tooltip>
+              ),
+            }
+          : {
+              disabled: false,
+              label: `#${team.slug}`,
+            }),
+      };
+    })
+    .sort(({disabled: teamADisabled}, {disabled: teamBDisabled}) =>
+      teamADisabled === teamBDisabled ? 0 : teamADisabled ? 1 : -1
+    );
 
   // TODO(epurkhiser): This is an unfortunate hack right now since we don't
   // actually load members anywhere and the useMembers and useTeams hook don't

static/app/views/monitors/components/monitorForm.tsx

@@ -504,13 +504,22 @@ function MonitorForm({
                   {t('Customize this monitors notification configuration in Alerts')}
                 </AlertLink>
               )}
-              <SentryMemberTeamSelectorField
-                label={t('Notify')}
-                help={t('Send notifications to a member or team.')}
-                name="alertRule.targets"
-                multiple
-                menuPlacement="auto"
-              />
+              <Observer>
+                {() => {
+                  const projectSlug = form.current.getValue('project')?.toString();
+
+                  return (
+                    <SentryMemberTeamSelectorField
+                      label={t('Notify')}
+                      help={t('Send notifications to a member or team.')}
+                      name="alertRule.targets"
+                      memberOfProjectSlug={projectSlug}
+                      multiple
+                      menuPlacement="auto"
+                    />
+                  );
+                }}
+              </Observer>
               <Observer>
                 {() => {
                   const selectedAssignee = form.current.getValue('alertRule.targets');