feat(issue-alerts): better preview/notification tests messages (#41974)

Adds more specific messages:

preview:
1. Empty rule -> "Select a condition to generate a preview"
2. Non-empty unsupported rule -> "Preview is not supported for these
conditions"

notification tests:
- adds plural form of messages

Co-authored-by: Evan Purkhiser <evanpurkhiser@gmail.com>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

static/app/views/alerts/create.spec.jsx

@@ -523,7 +523,16 @@ describe('ProjectAlertsCreate', function () {
       await waitFor(() => {
         expect(mock).toHaveBeenCalled();
       });
-      expect(screen.getByText('No preview available')).toBeInTheDocument();
+      expect(
+        screen.getByText('Select a condition to generate a preview')
+      ).toBeInTheDocument();
+
+      await selectEvent.select(screen.getByText('Add optional trigger...'), [
+        'A new issue is created',
+      ]);
+      expect(
+        screen.getByText('Preview is not supported for these conditions')
+      ).toBeInTheDocument();
     });
 
     it('empty preview table', async () => {

static/app/views/alerts/rules/issue/index.tsx

@@ -37,7 +37,7 @@ import {Panel, PanelBody} from 'sentry/components/panels';
 import TeamSelector from 'sentry/components/teamSelector';
 import {ALL_ENVIRONMENTS_KEY} from 'sentry/constants';
 import {IconChevron} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
+import {t, tct, tn} from 'sentry/locale';
 import GroupStore from 'sentry/stores/groupStore';
 import space from 'sentry/styles/space';
 import {
@@ -155,7 +155,7 @@ type State = AsyncView['state'] & {
   loadingPreview: boolean;
   previewCursor: string | null | undefined;
   previewEndpoint: null | string;
-  previewError: boolean;
+  previewError: null | string;
   previewGroups: string[] | null;
   previewPage: number;
   project: Project;
@@ -245,7 +245,7 @@ class IssueRuleEditor extends AsyncView<Props, State> {
       project,
       previewGroups: null,
       previewCursor: null,
-      previewError: false,
+      previewError: null,
       issueCount: 0,
       previewPage: 0,
       loadingPreview: false,
@@ -405,7 +405,7 @@ class IssueRuleEditor extends AsyncView<Props, State> {
           typeof hits !== 'undefined' && hits ? parseInt(hits, 10) || 0 : 0;
         this.setState({
           previewGroups: data.map(g => g.id),
-          previewError: false,
+          previewError: null,
           pageLinks: pageLinks ?? '',
           issueCount,
           loadingPreview: false,
@@ -413,8 +413,12 @@ class IssueRuleEditor extends AsyncView<Props, State> {
         });
       })
       .catch(_ => {
+        const errorMessage =
+          rule?.conditions.length || rule?.filters.length
+            ? t('Preview is not supported for these conditions')
+            : t('Select a condition to generate a preview');
         this.setState({
-          previewError: true,
+          previewError: errorMessage,
           loadingPreview: false,
         });
       });
@@ -474,7 +478,10 @@ class IssueRuleEditor extends AsyncView<Props, State> {
     const {organization} = this.props;
     const {project, rule} = this.state;
     this.setState({sendingNotification: true});
-    addLoadingMessage(t('Sending a test notification...'));
+    const actions = rule?.actions ? rule?.actions.length : 0;
+    addLoadingMessage(
+      tn('Sending a test notification...', 'Sending test notifications...', actions)
+    );
     this.api
       .requestPromise(`/projects/${organization.slug}/${project.slug}/rule-actions/`, {
         method: 'POST',
@@ -483,10 +490,10 @@ class IssueRuleEditor extends AsyncView<Props, State> {
         },
       })
       .then(() => {
-        addSuccessMessage(t('Notification sent!'));
+        addSuccessMessage(tn('Notification sent!', 'Notifications sent!', actions));
       })
       .catch(() => {
-        addErrorMessage(t('Notification failed'));
+        addErrorMessage(tn('Notification failed', 'Notifications failed', actions));
       })
       .finally(() => {
         this.setState({sendingNotification: false});

static/app/views/alerts/rules/issue/previewTable.tsx

@@ -13,7 +13,7 @@ import GroupStore from 'sentry/stores/groupStore';
 import {Group, Member} from 'sentry/types';
 
 type Props = {
-  error: boolean;
+  error: string | null;
   issueCount: number;
   loading: boolean;
   members: Member[] | undefined;
@@ -41,7 +41,7 @@ const PreviewTable = ({
     if (error || !members) {
       return (
         <EmptyStateWarning>
-          <p>{t('No preview available')}</p>
+          <p>{error ? error : t('No preview available')}</p>
         </EmptyStateWarning>
       );
     }