feat(workflow): Add name of team and member to notifications sent to in Alert Details (#34987)

* feat(workflow): Add name of team and member to notifications sent to in Alert Details

Add the name of the team and member email to the Alert Details page under 'perform these actions' conditions. Previously, this only displayed 'Team' or 'Member'.

FIXES WOR-1872

* fix for translation

* update test

static/app/views/alerts/rules/issue/details/ruleDetails.tsx

@@ -21,7 +21,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconEdit} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
-import {DateString, Organization, Project} from 'sentry/types';
+import {DateString, Member, Organization, Project} from 'sentry/types';
 import {IssueAlertRule} from 'sentry/types/alerts';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {ALERT_DEFAULT_CHART_PERIOD} from 'sentry/views/alerts/rules/metric/details/constants';
@@ -36,6 +36,7 @@ type Props = AsyncComponent['props'] & {
 } & RouteComponentProps<{orgId: string; projectId: string; ruleId: string}, {}>;
 
 type State = AsyncComponent['state'] & {
+  memberList: Member[];
   rule: IssueAlertRule | null;
 };
 
@@ -75,6 +76,7 @@ class AlertRuleDetails extends AsyncComponent<Props, State> {
     return {
       ...super.getDefaultState(),
       rule: null,
+      memberList: [],
     };
   }
 
@@ -86,6 +88,11 @@ class AlertRuleDetails extends AsyncComponent<Props, State> {
         `/projects/${orgId}/${projectId}/rules/${ruleId}/`,
         {query: {expand: 'lastTriggered'}},
       ],
+      [
+        'memberList',
+        `/organizations/${orgId}/users/`,
+        {query: {project: this.props.project.id}},
+      ],
     ];
   }
 
@@ -186,7 +193,7 @@ class AlertRuleDetails extends AsyncComponent<Props, State> {
     const {orgId, ruleId, projectId} = params;
     const {cursor} = location.query;
     const {period, start, end, utc} = this.getDataDatetime();
-    const {rule} = this.state;
+    const {rule, memberList} = this.state;
 
     if (!rule) {
       return <LoadingError message={t('There was an error loading the alert rule.')} />;
@@ -291,7 +298,7 @@ class AlertRuleDetails extends AsyncComponent<Props, State> {
             />
           </Layout.Main>
           <Layout.Side>
-            <Sidebar rule={rule} />
+            <Sidebar rule={rule} memberList={memberList} teams={project.teams} />
           </Layout.Side>
         </Layout.Body>
       </PageFiltersContainer>

static/app/views/alerts/rules/issue/details/sidebar.tsx

@@ -10,16 +10,19 @@ import {IconChevron} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
-import {Actor} from 'sentry/types';
+import {Actor, Member, Team} from 'sentry/types';
 import {IssueAlertRule} from 'sentry/types/alerts';
 
 type Props = {
+  memberList: Member[];
   rule: IssueAlertRule;
+  teams: Team[];
 };
 
 class Sidebar extends PureComponent<Props> {
   renderConditions() {
-    const {rule} = this.props;
+    const {rule, memberList, teams} = this.props;
+
     const conditions = rule.conditions.length
       ? rule.conditions.map(condition => (
           <ConditionsBadge key={condition.id}>{condition.name}</ConditionsBadge>
@@ -35,6 +38,16 @@ class Sidebar extends PureComponent<Props> {
     const actions = rule.actions.length ? (
       rule.actions.map(action => {
         let name = action.name;
+        if (action.targetType === 'Member') {
+          const user = memberList.find(
+            member => member.user.id === `${action.targetIdentifier}`
+          );
+          name = t('Send a notification to %s', user?.email);
+        }
+        if (action.targetType === 'Team') {
+          const team = teams.find(tm => tm.id === `${action.targetIdentifier}`);
+          name = t('Send a notification to #%s', team?.name);
+        }
         if (
           action.id === 'sentry.integrations.slack.notify_action.SlackNotifyServiceAction'
         ) {

tests/js/spec/views/alerts/details/ruleDetails.spec.jsx

@@ -66,11 +66,17 @@ describe('AlertRuleDetails', () => {
           '<https://sentry.io/api/0/projects/org-slug/project-slug/rules/1/group-history/?cursor=0:100:0>; rel="next"; results="true"; cursor="0:100:0"',
       },
     });
+
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/projects/`,
       body: [project],
     });
 
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/users/`,
+      body: [],
+    });
+
     ProjectsStore.init();
     ProjectsStore.loadInitialData([project]);
   });