feat(ui): Categorize issue alert conditions (#30908)

* feat(ui): Categorize issue alert conditions

Categorize the issue alert condition on the create issue alert page ('state change alerts' and 'frequency based alerts').

FIXES WOR-1494

* update type

* switch positions of state change/frequency groups

* refactor to object

static/app/views/alerts/issueRuleEditor/index.tsx

@@ -727,6 +727,7 @@ class IssueRuleEditor extends AsyncView<Props, State> {
                             <RuleNodeList
                               nodes={this.getConditions()}
                               items={conditions ?? []}
+                              selectType="grouped"
                               placeholder={
                                 hasFeature
                                   ? t('Add optional trigger...')

static/app/views/alerts/issueRuleEditor/ruleNodeList.tsx

@@ -165,6 +165,13 @@ class RuleNodeList extends React.Component<Props> {
         (acc, curr) => {
           if (curr.actionType === 'ticket') {
             acc.ticket.push(curr);
+          } else if (curr.id.includes('event_frequency')) {
+            acc.frequency.push(curr);
+          } else if (
+            curr.id.includes('sentry.rules.conditions') &&
+            !curr.id.includes('event_frequency')
+          ) {
+            acc.change.push(curr);
           } else {
             acc.notify.push(curr);
           }
@@ -173,18 +180,22 @@ class RuleNodeList extends React.Component<Props> {
         {
           notify: [] as IssueAlertRuleActionTemplate[],
           ticket: [] as IssueAlertRuleActionTemplate[],
+          change: [] as IssueAlertRuleConditionTemplate[],
+          frequency: [] as IssueAlertRuleConditionTemplate[],
         }
       );
 
       options = Object.entries(grouped)
         .filter(([_, values]) => values.length)
         .map(([key, values]) => {
-          const label =
-            key === 'ticket'
-              ? t('Create new\u{2026}')
-              : t('Send notification to\u{2026}');
-
-          return {label, options: createSelectOptions(values)};
+          const label = {
+            notify: t('Send notification to\u{2026}'),
+            ticket: t('Create new\u{2026}'),
+            change: t('Issue state change'),
+            frequency: t('Issue frequency'),
+          };
+
+          return {label: label[key], options: createSelectOptions(values)};
         });
     }