ref(aci): ref actionNodeContext to include action handler

static/app/components/workflowEngine/form/automationBuilderRowLine.tsx

@@ -7,6 +7,7 @@ export const RowLine = styled('div')`
   align-items: center;
   gap: ${space(1)};
   flex-wrap: wrap;
+  flex: 1;
 `;
 
 export const OptionalRowLine = styled(RowLine)`

static/app/types/workflowEngine/actions.tsx

@@ -15,13 +15,28 @@ export enum ActionType {
   GITHUB_ENTERPRISE = 'github_enterprise',
   JIRA = 'jira',
   JIRA_SERVER = 'jira_server',
-  AZURE_DEVOPS = 'azure_devops',
+  AZURE_DEVOPS = 'vsts',
   EMAIL = 'email',
   SENTRY_APP = 'sentry_app',
   PLUGIN = 'plugin',
   WEBHOOK = 'webhook',
 }
 
+export enum ActionGroup {
+  NOTIFICATION = 'notification',
+  TICKET_CREATION = 'ticket_creation',
+  OTHER = 'other',
+}
+
+export interface ActionHandler {
+  configSchema: Record<string, any>;
+  dataSchema: Record<string, any>;
+  handlerGroup: ActionGroup;
+  type: ActionType;
+  integrations?: Integration[];
+  sentryApp?: SentryAppContext;
+  services?: PluginService[];
+}
 export interface Integration {
   id: string;
   name: string;
@@ -30,3 +45,17 @@ export interface Integration {
     name: string;
   }>;
 }
+
+export interface SentryAppContext {
+  id: string;
+  installationId: string;
+  name: string;
+  status: number;
+  settings?: Record<string, any>;
+  title?: string;
+}
+
+export interface PluginService {
+  name: string;
+  slug: string;
+}

static/app/views/automations/components/actionNodeList.tsx

@@ -1,20 +1,26 @@
-import {Fragment} from 'react';
+import {Fragment, useMemo, useRef} from 'react';
 import styled from '@emotion/styled';
+import {uuid4} from '@sentry/core';
 
 import {Select} from 'sentry/components/core/select';
-import type {Action, ActionType, Integration} from 'sentry/types/workflowEngine/actions';
+import {t} from 'sentry/locale';
+import {
+  type Action,
+  ActionGroup,
+  type ActionHandler,
+} from 'sentry/types/workflowEngine/actions';
 import {
   ActionNodeContext,
   actionNodesMap,
   useActionNodeContext,
 } from 'sentry/views/automations/components/actionNodes';
 import AutomationBuilderRow from 'sentry/views/automations/components/automationBuilderRow';
+import {useAvailableActionsQuery} from 'sentry/views/automations/hooks';
 
 interface ActionNodeListProps {
   actions: Action[];
-  availableActions: Array<{type: ActionType; integrations?: Integration[]}>;
   group: string;
-  onAddRow: (type: ActionType) => void;
+  onAddRow: (actionId: string, actionHandler: ActionHandler) => void;
   onDeleteRow: (id: string) => void;
   placeholder: string;
   updateAction: (id: string, data: Record<string, any>) => void;
@@ -24,14 +30,51 @@ export default function ActionNodeList({
   group,
   placeholder,
   actions,
-  availableActions,
   onAddRow,
   onDeleteRow,
   updateAction,
 }: ActionNodeListProps) {
-  const options = Array.from(actionNodesMap)
-    .filter(([value]) => availableActions.some(action => action.type === value))
-    .map(([value, {label}]) => ({value, label}));
+  const {data: availableActions = []} = useAvailableActionsQuery();
+  const actionHandlerMapRef = useRef(new Map());
+
+  const options = useMemo(() => {
+    const typeOptionsMap = new Map<
+      ActionGroup,
+      Array<{label: string; value: ActionHandler}>
+    >();
+
+    availableActions.forEach(action => {
+      const existingOptions = typeOptionsMap.get(action.handlerGroup) || [];
+      const label =
+        actionNodesMap.get(action.type)?.label || action.sentryApp?.name || action.type;
+
+      typeOptionsMap.set(action.handlerGroup, [
+        ...existingOptions,
+        {
+          value: action,
+          label,
+        },
+      ]);
+    });
+
+    return [
+      {
+        key: ActionGroup.NOTIFICATION,
+        label: t('Notifications'),
+        options: typeOptionsMap.get(ActionGroup.NOTIFICATION) || [],
+      },
+      {
+        key: ActionGroup.TICKET_CREATION,
+        label: t('Ticket Creation'),
+        options: typeOptionsMap.get(ActionGroup.TICKET_CREATION) || [],
+      },
+      {
+        key: ActionGroup.OTHER,
+        label: t('Other Integrations'),
+        options: typeOptionsMap.get(ActionGroup.OTHER) || [],
+      },
+    ];
+  }, [availableActions]);
 
   return (
     <Fragment>
@@ -47,8 +90,7 @@ export default function ActionNodeList({
               action,
               actionId: `${group}.action.${action.id}`,
               onUpdate: newAction => updateAction(action.id, newAction),
-              integrations: availableActions.find(a => a.type === action.type)
-                ?.integrations,
+              handler: actionHandlerMapRef.current.get(action.id),
             }}
           >
             <Node />
@@ -58,7 +100,9 @@ export default function ActionNodeList({
       <StyledSelectControl
         options={options}
         onChange={(obj: any) => {
-          onAddRow(obj.value);
+          const actionId = uuid4();
+          onAddRow(actionId, obj.value);
+          actionHandlerMapRef.current.set(actionId, obj.value);
         }}
         placeholder={placeholder}
         value={null}
@@ -70,7 +114,9 @@ export default function ActionNodeList({
 function Node() {
   const {action} = useActionNodeContext();
   const node = actionNodesMap.get(action.type);
-  return node?.action;
+
+  const component = node?.action;
+  return component ? component : node?.label;
 }
 
 const StyledSelectControl = styled(Select)`

static/app/views/automations/components/actionNodes.tsx

@@ -1,7 +1,7 @@
 import {createContext, useContext} from 'react';
 
 import {t} from 'sentry/locale';
-import type {Action, Integration} from 'sentry/types/workflowEngine/actions';
+import type {Action, ActionHandler} from 'sentry/types/workflowEngine/actions';
 import {ActionType} from 'sentry/types/workflowEngine/actions';
 import {AzureDevOpsNode} from 'sentry/views/automations/components/actions/azureDevOps';
 import {DiscordNode} from 'sentry/views/automations/components/actions/discord';
@@ -13,13 +13,15 @@ import {JiraServerNode} from 'sentry/views/automations/components/actions/jiraSe
 import {MSTeamsNode} from 'sentry/views/automations/components/actions/msTeams';
 import {OpsgenieNode} from 'sentry/views/automations/components/actions/opsgenie';
 import {PagerdutyNode} from 'sentry/views/automations/components/actions/pagerduty';
+import {SentryAppNode} from 'sentry/views/automations/components/actions/sentryApp';
 import {SlackNode} from 'sentry/views/automations/components/actions/slack';
+import {WebhookNode} from 'sentry/views/automations/components/actions/webhook';
 
 interface ActionNodeProps {
   action: Action;
   actionId: string;
+  handler: ActionHandler;
   onUpdate: (condition: Record<string, any>) => void;
-  integrations?: Integration[];
 }
 
 export const ActionNodeContext = createContext<ActionNodeProps | null>(null);
@@ -33,13 +35,13 @@ export function useActionNodeContext(): ActionNodeProps {
 }
 
 type ActionNode = {
-  action: React.ReactNode;
-  label: string;
+  action?: React.ReactNode;
+  label?: string;
 };
 
 export const actionNodesMap = new Map<ActionType, ActionNode>([
   [ActionType.AZURE_DEVOPS, {label: t('Azure DevOps'), action: <AzureDevOpsNode />}],
-  [ActionType.EMAIL, {label: t('Email'), action: <EmailNode />}],
+  [ActionType.EMAIL, {label: t('Notify on preferred channel'), action: <EmailNode />}],
   [
     ActionType.DISCORD,
     {
@@ -69,11 +71,28 @@ export const actionNodesMap = new Map<ActionType, ActionNode>([
       action: <PagerdutyNode />,
     },
   ],
+  [
+    ActionType.PLUGIN,
+    {
+      label: t('Legacy integrations'),
+      action: t('Send a notification (for all legacy integrations)'),
+    },
+  ],
+  [
+    ActionType.SENTRY_APP,
+    {
+      action: <SentryAppNode />,
+    },
+  ],
   [
     ActionType.SLACK,
     {
       label: t('Slack'),
       action: <SlackNode />,
     },
   ],
+  [
+    ActionType.WEBHOOK,
+    {label: t('Send a notification via an integration'), action: <WebhookNode />},
+  ],
 ]);

static/app/views/automations/components/actions/integrationField.tsx

@@ -2,7 +2,9 @@ import AutomationBuilderSelectField from 'sentry/components/workflowEngine/form/
 import {useActionNodeContext} from 'sentry/views/automations/components/actionNodes';
 
 export function IntegrationField() {
-  const {action, actionId, onUpdate, integrations} = useActionNodeContext();
+  const {action, actionId, onUpdate, handler} = useActionNodeContext();
+  const integrations = handler?.integrations;
+
   return (
     <AutomationBuilderSelectField
       name={`${actionId}.integrationId`}

static/app/views/automations/components/actions/sentryApp.tsx

@@ -0,0 +1,13 @@
+import {tct} from 'sentry/locale';
+import {useActionNodeContext} from 'sentry/views/automations/components/actionNodes';
+import {SentryAppActionSettingsButton} from 'sentry/views/automations/components/actions/sentryAppSettingsButton';
+
+export function SentryAppNode() {
+  const {handler} = useActionNodeContext();
+  const name = handler?.sentryApp?.name;
+  const title = handler?.sentryApp?.title;
+  return tct('[label] with these [settings]', {
+    label: title || name,
+    settings: <SentryAppActionSettingsButton />,
+  });
+}

static/app/views/automations/components/actions/sentryAppSettingsButton.tsx

@@ -0,0 +1,12 @@
+import {Button} from 'sentry/components/core/button';
+import {IconSettings} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+// TODO(miahsu): Implement the action settings button/modal
+export function SentryAppActionSettingsButton() {
+  return (
+    <Button size="sm" icon={<IconSettings />}>
+      {t('Action Settings')}
+    </Button>
+  );
+}

static/app/views/automations/components/actions/serviceField.tsx

@@ -2,9 +2,9 @@ import AutomationBuilderSelectField from 'sentry/components/workflowEngine/form/
 import {useActionNodeContext} from 'sentry/views/automations/components/actionNodes';
 
 export function ServiceField() {
-  const {action, actionId, onUpdate, integrations} = useActionNodeContext();
+  const {action, actionId, onUpdate, handler} = useActionNodeContext();
   const integrationId = action.integrationId;
-  const integration = integrations?.find(i => i.id === integrationId);
+  const integration = handler.integrations?.find(i => i.id === integrationId);
 
   if (!integration || !integrationId) {
     return null;

static/app/views/automations/components/actions/webhook.tsx

@@ -0,0 +1,30 @@
+import AutomationBuilderSelectField from 'sentry/components/workflowEngine/form/automationBuilderSelectField';
+import {tct} from 'sentry/locale';
+import {useActionNodeContext} from 'sentry/views/automations/components/actionNodes';
+
+export function WebhookNode() {
+  return tct('Send a notification via [services]', {
+    services: <ServicesField />,
+  });
+}
+
+export function ServicesField() {
+  const {action, actionId, onUpdate, handler} = useActionNodeContext();
+  const services = handler?.services;
+
+  return (
+    <AutomationBuilderSelectField
+      name={`${actionId}.data.targetIdentifier`}
+      value={action.data.targetIdentifier}
+      options={services?.map(service => ({
+        label: service.name,
+        value: service.slug,
+      }))}
+      onChange={(value: string) => {
+        onUpdate({
+          targetIdentifier: value,
+        });
+      }}
+    />
+  );
+}

static/app/views/automations/components/automationBuilder.tsx

@@ -178,12 +178,10 @@ function ActionFilterBlock({actionFilter}: ActionFilterBlockProps) {
         </StepLead>
         {/* TODO: add actions dropdown here */}
         <ActionNodeList
-          // TODO: replace constant availableActions with API response
-          availableActions={[]}
           placeholder={t('Select an action')}
           group={`actionFilters.${actionFilter.id}`}
           actions={actionFilter?.actions || []}
-          onAddRow={type => actions.addIfAction(actionFilter.id, type)}
+          onAddRow={(id, type) => actions.addIfAction(actionFilter.id, id, type)}
           onDeleteRow={id => actions.removeIfAction(actionFilter.id, id)}
           updateAction={(id, data) => actions.updateIfAction(actionFilter.id, id, data)}
         />