feat(aci): automation edit scaffolding (#94595)

- added automation form to the automation edit view
- the form + AutomationBuilderReducer are now able to use an existing
automation to populate the form fields
- setting up the edit actions (save + delete) will come in the next PR

we can also remove `flattie` now since we're maintaining automation
builder state outside of the form

Author: ameliahsu

package.json

@@ -119,7 +119,6 @@
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "esbuild": "0.25.3",
-    "flattie": "^1.1.1",
     "focus-trap": "^7.3.1",
     "framer-motion": "12.7.3",
     "fuse.js": "^6.6.2",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import {Fragment, useMemo, useState} from 'react';
+import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 import {uuid4} from '@sentry/core';
 
@@ -8,6 +8,8 @@ import {
   type Action,
   ActionGroup,
   type ActionHandler,
+  ActionType,
+  SentryAppIdentifier,
 } from 'sentry/types/workflowEngine/actions';
 import {
   ActionNodeContext,
@@ -31,6 +33,30 @@ interface Option {
   value: ActionHandler;
 }
 
+function getActionHandler(
+  action: Action,
+  availableActions: ActionHandler[]
+): ActionHandler | undefined {
+  if (action.type === ActionType.SENTRY_APP) {
+    return availableActions.find(handler => {
+      if (handler.type !== ActionType.SENTRY_APP) {
+        return false;
+      }
+      const {sentry_app_identifier, target_identifier} = action.config;
+      const sentryApp = handler.sentryApp;
+
+      const isMatchingAppId =
+        sentry_app_identifier === SentryAppIdentifier.SENTRY_APP_ID &&
+        target_identifier === sentryApp?.id;
+      const isMatchingInstallationUuid =
+        sentry_app_identifier === SentryAppIdentifier.SENTRY_APP_INSTALLATION_UUID &&
+        target_identifier === sentryApp?.installationUuid;
+      return isMatchingAppId || isMatchingInstallationUuid;
+    });
+  }
+  return availableActions.find(handler => handler.type === action.type);
+}
+
 export default function ActionNodeList({
   group,
   placeholder,
@@ -40,9 +66,6 @@ export default function ActionNodeList({
   updateAction,
 }: ActionNodeListProps) {
   const {data: availableActions = []} = useAvailableActionsQuery();
-  const [actionHandlerMap, setActionHandlerMap] = useState<Record<string, ActionHandler>>(
-    {}
-  );
 
   const options = useMemo(() => {
     const notificationActions: Option[] = [];
@@ -88,7 +111,7 @@ export default function ActionNodeList({
   return (
     <Fragment>
       {actions.map(action => {
-        const handler = actionHandlerMap[action.id];
+        const handler = getActionHandler(action, availableActions);
         if (!handler) {
           return null;
         }
@@ -97,7 +120,6 @@ export default function ActionNodeList({
             key={`${group}.action.${action.id}`}
             onDelete={() => {
               onDeleteRow(action.id);
-              setActionHandlerMap(({[action.id]: _, ...rest}) => rest);
             }}
           >
             <ActionNodeContext.Provider
@@ -118,10 +140,6 @@ export default function ActionNodeList({
         onChange={(obj: any) => {
           const actionId = uuid4();
           onAddRow(actionId, obj.value);
-          setActionHandlerMap(currActionHandlerMap => ({
-            ...currActionHandlerMap,
-            [actionId]: obj.value,
-          }));
         }}
         placeholder={placeholder}
         value={null}

static/app/components/workflowEngine/layout/edit.tsx

@@ -92,7 +92,7 @@ export const actionNodesMap = new Map<ActionType, ActionNode>([
       label: t('Notify on preferred channel'),
       action: EmailNode,
       details: EmailDetails,
-      defaultData: {fallthrough_type: 'ActiveMembers'},
+      defaultData: {fallthroughType: 'ActiveMembers'},
     },
   ],
   [

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

@@ -39,8 +39,8 @@ export function EmailDetails({action}: {action: Action}) {
   if (target_type === ActionTarget.ISSUE_OWNERS) {
     return tct('Notify Suggested Assignees and, if none found, notify [fallthrough]', {
       fallthrough:
-        FALLTHROUGH_CHOICES.find(choice => choice.value === action.data.fallthrough_type)
-          ?.label || String(action.data.fallthrough_type),
+        FALLTHROUGH_CHOICES.find(choice => choice.value === action.data.fallthroughType)
+          ?.label || String(action.data.fallthroughType),
     });
   }
 
@@ -129,11 +129,11 @@ function FallthroughField() {
   const {action, actionId, onUpdate} = useActionNodeContext();
   return (
     <AutomationBuilderSelect
-      name={`${actionId}.data.fallthrough_type`}
-      value={action.data.fallthrough_type}
+      name={`${actionId}.data.fallthroughType`}
+      value={action.data.fallthroughType}
       options={FALLTHROUGH_CHOICES}
       onChange={(option: SelectValue<string>) =>
-        onUpdate({data: {fallthrough_type: option.value}})
+        onUpdate({data: {fallthroughType: option.value}})
       }
     />
   );

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

@@ -103,9 +103,6 @@ export default function AutomationBuilder() {
           {t('If/Then Block')}
         </PurpleTextButton>
       </span>
-      <span>
-        <Button icon={<IconMail />}>{t('Send Test Notification')}</Button>
-      </span>
     </Flex>
   );
 }
@@ -198,6 +195,9 @@ function ActionFilterBlock({
           updateAction={(id, data) => actions.updateIfAction(actionFilter.id, id, data)}
         />
       </Step>
+      <span>
+        <Button icon={<IconMail />}>{t('Send Test Notification')}</Button>
+      </span>
     </IfThenWrapper>
   );
 }

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

@@ -6,6 +6,7 @@ import {
   type ActionHandler,
   ActionTarget,
   ActionType,
+  SentryAppIdentifier,
 } from 'sentry/types/workflowEngine/actions';
 import {
   type DataConditionGroup,
@@ -15,7 +16,7 @@ import {
 import {actionNodesMap} from 'sentry/views/automations/components/actionNodes';
 import {dataConditionNodesMap} from 'sentry/views/automations/components/dataConditionNodes';
 
-export function useAutomationBuilderReducer() {
+export function useAutomationBuilderReducer(initialState?: AutomationBuilderState) {
   const reducer: Reducer<AutomationBuilderState, AutomationBuilderAction> = useCallback(
     (state, action): AutomationBuilderState => {
       switch (action.type) {
@@ -54,7 +55,10 @@ export function useAutomationBuilderReducer() {
     []
   );
 
-  const [state, dispatch] = useReducer(reducer, initialAutomationBuilderState);
+  const [state, dispatch] = useReducer(
+    reducer,
+    initialState ?? initialAutomationBuilderState
+  );
 
   const actions: AutomationActions = {
     addWhenCondition: useCallback(
@@ -519,6 +523,9 @@ function getDefaultConfig(actionHandler: ActionHandler): ActionConfig {
   return {
     target_type: targetType,
     ...(targetIdentifier && {target_identifier: targetIdentifier}),
+    ...(actionHandler.sentryApp?.id && {
+      sentry_app_identifier: SentryAppIdentifier.SENTRY_APP_ID,
+    }),
   };
 }
 

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

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
@@ -7,7 +7,6 @@ import {Flex} from 'sentry/components/core/layout';
 import SelectField from 'sentry/components/forms/fields/selectField';
 import type FormModel from 'sentry/components/forms/model';
 import useDrawer from 'sentry/components/globalDrawer';
-import {useDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {DebugForm} from 'sentry/components/workflowEngine/form/debug';
 import {EnvironmentSelector} from 'sentry/components/workflowEngine/form/environmentSelector';
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
@@ -23,24 +22,19 @@ import {useDetectorsQuery} from 'sentry/views/detectors/hooks';
 import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
 
 const FREQUENCY_OPTIONS = [
-  {value: '5', label: t('5 minutes')},
-  {value: '10', label: t('10 minutes')},
-  {value: '30', label: t('30 minutes')},
-  {value: '60', label: t('60 minutes')},
-  {value: '180', label: t('3 hours')},
-  {value: '720', label: t('12 hours')},
-  {value: '1440', label: t('24 hours')},
-  {value: '10080', label: t('1 week')},
-  {value: '43200', label: t('30 days')},
+  {value: 5, label: t('5 minutes')},
+  {value: 10, label: t('10 minutes')},
+  {value: 30, label: t('30 minutes')},
+  {value: 60, label: t('60 minutes')},
+  {value: 180, label: t('3 hours')},
+  {value: 720, label: t('12 hours')},
+  {value: 1440, label: t('24 hours')},
+  {value: 10080, label: t('1 week')},
+  {value: 43200, label: t('30 days')},
 ];
 
 export default function AutomationForm({model}: {model: FormModel}) {
   const organization = useOrganization();
-  const title = useDocumentTitle();
-
-  useEffect(() => {
-    model.setValue('name', title);
-  }, [title, model]);
 
   const {data: monitors = []} = useDetectorsQuery();
   const initialConnectedIds = useFormField('detectorIds');
@@ -116,6 +110,7 @@ export default function AutomationForm({model}: {model: FormModel}) {
       <Card>
         <Heading>{t('Action Interval')}</Heading>
         <EmbeddedSelectField
+          required
           name="frequency"
           inline={false}
           clearable={false}