feat(workflow_engine): Add list of tags to help users define alerts (#103711)

# Description
Currently we use a free form text field for the `tagged event`
condition. We've had a few user issues that that the tagged event was
configured on an event that hasn't been seen.

This is only using the tags seen on error events; this is a bit closer
to the intent of the condition and hope this clarifies the condition for
the user.



https://github.com/user-attachments/assets/d9acdf19-7584-4f0f-93c2-db5a54339145

Author: saponifi3d

static/app/views/automations/components/actionFilters/taggedEvent.tsx

@@ -1,8 +1,14 @@
+import {useMemo} from 'react';
+
+import {useFetchOrganizationTags} from 'sentry/actionCreators/tags';
 import {AutomationBuilderInput} from 'sentry/components/workflowEngine/form/automationBuilderInput';
 import {AutomationBuilderSelect} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
 import {t, tct} from 'sentry/locale';
 import type {SelectValue} from 'sentry/types/core';
+import type {Tag} from 'sentry/types/group';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
+import useOrganization from 'sentry/utils/useOrganization';
+import {Dataset} from 'sentry/views/alerts/rules/metric/types';
 import {
   MATCH_CHOICES,
   type MatchType,
@@ -33,16 +39,54 @@ function KeyField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   const {removeError} = useAutomationBuilderErrorContext();
 
+  // TODO - get form context, get the detector ids from the context.
+  // if there are connected detectors / projects, then grab the project id list and use that. otherwise, -1.
+  const projectIds = ['-1'];
+
+  // Select all the tags for an organization to generate a list of the most likely tags
+  const organization = useOrganization();
+  const {data: tagOptions = [], isLoading} = useFetchOrganizationTags(
+    {
+      orgSlug: organization.slug,
+      projectIds,
+      dataset: Dataset.ISSUE_PLATFORM,
+      useCache: true,
+      keepPreviousData: true,
+    },
+    {}
+  );
+
+  const sortedOptions = useMemo(() => {
+    const sorted = tagOptions.toSorted((a, b) => {
+      return (a.totalValues || 0) > (b.totalValues || 0) ? -1 : 1;
+    });
+
+    if (
+      condition.comparison.key &&
+      !sorted.some(tag => tag.key === condition.comparison.key)
+    ) {
+      sorted.unshift(condition.comparison);
+    }
+
+    return Object.values(sorted).map((tag: Tag) => ({
+      value: tag.key,
+      label: tag.key,
+    }));
+  }, [tagOptions, condition.comparison]);
+
   return (
-    <AutomationBuilderInput
+    <AutomationBuilderSelect
+      disabled={isLoading}
+      creatable
       name={`${condition_id}.comparison.key`}
-      placeholder={t('tag')}
-      value={condition.comparison.key ?? ''}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        onUpdate({comparison: {...condition.comparison, key: e.target.value}});
+      aria-label={t('Tag')}
+      placeholder={isLoading ? t('Loading tags\u2026') : t('tag')}
+      value={condition.comparison.key}
+      options={sortedOptions}
+      onChange={(e: SelectValue<MatchType>) => {
+        onUpdate({comparison: {...condition.comparison, key: e.value}});
         removeError(condition.id);
       }}
-      aria-label={t('Tag')}
     />
   );
 }

static/app/views/automations/components/dataConditionNodeList.spec.tsx

@@ -90,6 +90,10 @@ describe('DataConditionNodeList', () => {
 
   beforeEach(() => {
     MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/tags/`,
+      body: [],
+    });
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/data-conditions/`,
       body: dataConditionHandlers,
@@ -156,7 +160,9 @@ describe('DataConditionNodeList', () => {
       {organization}
     );
 
-    await userEvent.type(screen.getByRole('textbox', {name: 'Tag'}), 's');
+    // Wait until the request for tags is completed
+    const tagInput = await screen.findByRole('textbox', {name: 'Tag'});
+    await userEvent.type(tagInput, 'names{enter}');
     expect(mockUpdateCondition).toHaveBeenCalledWith('1', {
       comparison: {key: 'names', match: MatchType.CONTAINS, value: 'moo deng'},
     });

static/app/views/automations/edit.spec.tsx

@@ -66,6 +66,13 @@ describe('EditAutomation', () => {
       body: {id: automation.createdBy, name: 'Test User'},
     });
 
+    // Mock the organization tags
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/tags/`,
+      method: 'GET',
+      body: [],
+    });
+
     jest.mocked(useParams).mockReturnValue({
       automationId: automation.id,
     });

static/app/views/automations/new.spec.tsx

@@ -49,6 +49,13 @@ describe('AutomationNewSettings', () => {
       ],
     });
 
+    // Mock the tags for an organization
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/tags/`,
+      method: 'GET',
+      body: [],
+    });
+
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/data-conditions/`,
       method: 'GET',
@@ -119,7 +126,8 @@ describe('AutomationNewSettings', () => {
       screen.getByRole('textbox', {name: 'Add filter'}),
       /tagged event/i
     );
-    await userEvent.type(screen.getByRole('textbox', {name: 'Tag'}), 'env');
+    const tagInput = await screen.findByRole('textbox', {name: 'Tag'});
+    await userEvent.type(tagInput, 'env{enter}');
     await userEvent.type(screen.getByRole('textbox', {name: 'Value'}), 'prod');
 
     // Add an action to the block (Slack), also updates the automatic naming