feat(aci): set up "Send Test Notification" button in automation builder (#95370)

connecting the "Send Test Notification" to the
OrganizationTestFireAction API

(tests for `AutomationBuilder` component coming soon 🙏🏼 )

Author: ameliahsu

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

@@ -1,4 +1,4 @@
-import {useEffect, useMemo} from 'react';
+import {useCallback, useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {fetchOrgMembers} from 'sentry/actionCreators/members';
@@ -22,8 +22,11 @@ import {FILTER_MATCH_OPTIONS} from 'sentry/views/automations/components/actionFi
 import ActionNodeList from 'sentry/views/automations/components/actionNodeList';
 import {AutomationBuilderConflictContext} from 'sentry/views/automations/components/automationBuilderConflictContext';
 import {useAutomationBuilderContext} from 'sentry/views/automations/components/automationBuilderContext';
+import {useAutomationBuilderErrorContext} from 'sentry/views/automations/components/automationBuilderErrorContext';
+import {validateActions} from 'sentry/views/automations/components/automationFormData';
 import DataConditionNodeList from 'sentry/views/automations/components/dataConditionNodeList';
 import {TRIGGER_MATCH_OPTIONS} from 'sentry/views/automations/components/triggers/constants';
+import {useSendTestNotification} from 'sentry/views/automations/hooks';
 import {findConflictingConditions} from 'sentry/views/automations/hooks/utils';
 
 export default function AutomationBuilder() {
@@ -114,6 +117,26 @@ interface ActionFilterBlockProps {
 
 function ActionFilterBlock({actionFilter}: ActionFilterBlockProps) {
   const {actions} = useAutomationBuilderContext();
+  const {mutateAsync: sendTestNotification} = useSendTestNotification();
+  const {errors, setErrors} = useAutomationBuilderErrorContext();
+
+  const handleSendTestNotification = useCallback(async () => {
+    const actionFilterActions = actionFilter.actions || [];
+
+    // Validate actions before sending test notification
+    const actionErrors = validateActions({actions: actionFilterActions});
+    setErrors({...errors, ...actionErrors});
+
+    // Only send test notification if there are no validation errors
+    if (Object.keys(actionErrors).length === 0) {
+      await sendTestNotification(
+        actionFilterActions.map(action => {
+          const {id: _id, ...actionWithoutId} = action;
+          return actionWithoutId;
+        })
+      );
+    }
+  }, [actionFilter.actions, sendTestNotification, errors, setErrors]);
 
   return (
     <IfThenWrapper>
@@ -188,7 +211,13 @@ function ActionFilterBlock({actionFilter}: ActionFilterBlockProps) {
         />
       </Step>
       <span>
-        <Button icon={<IconMail />}>{t('Send Test Notification')}</Button>
+        <Button
+          icon={<IconMail />}
+          onClick={handleSendTestNotification}
+          disabled={!actionFilter.actions?.length}
+        >
+          {t('Send Test Notification')}
+        </Button>
       </span>
     </IfThenWrapper>
   );

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

@@ -1,5 +1,6 @@
 import type {FieldValue} from 'sentry/components/forms/model';
 import {t} from 'sentry/locale';
+import type {Action} from 'sentry/types/workflowEngine/actions';
 import type {Automation, NewAutomation} from 'sentry/types/workflowEngine/automations';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
 import {actionNodesMap} from 'sentry/views/automations/components/actionNodes';
@@ -117,3 +118,15 @@ export function validateAutomationBuilderState(state: AutomationBuilderState) {
   }
   return errors;
 }
+
+export function validateActions({actions}: {actions: Action[]}): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  for (const action of actions) {
+    const validationResult = actionNodesMap.get(action.type)?.validate?.(action);
+    if (validationResult) {
+      errors[action.id] = validationResult;
+    }
+  }
+  return errors;
+}

static/app/views/automations/hooks/index.tsx

@@ -1,6 +1,7 @@
-import {t} from 'sentry/locale';
+import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
+import {t, tn} from 'sentry/locale';
 import AlertStore from 'sentry/stores/alertStore';
-import type {ActionHandler} from 'sentry/types/workflowEngine/actions';
+import type {Action, ActionHandler} from 'sentry/types/workflowEngine/actions';
 import type {Automation, NewAutomation} from 'sentry/types/workflowEngine/automations';
 import type {
   DataConditionHandler,
@@ -133,3 +134,30 @@ export function useUpdateAutomation() {
     },
   });
 }
+
+export function useSendTestNotification() {
+  const org = useOrganization();
+  const api = useApi({persistInFlight: true});
+  const queryClient = useQueryClient();
+
+  return useMutation<void, void, Array<Omit<Action, 'id'>>>({
+    mutationFn: data =>
+      api.requestPromise(`/organizations/${org.slug}/test-fire-actions/`, {
+        method: 'POST',
+        data: {actions: data},
+      }),
+    onSuccess: (_, variables, __) => {
+      queryClient.invalidateQueries({
+        queryKey: [`/organizations/${org.slug}/workflows/`],
+      });
+      addSuccessMessage(
+        tn('Notification fired!', 'Notifications sent!', variables.length)
+      );
+    },
+    onError: (_, variables, __) => {
+      addErrorMessage(
+        tn('Notification failed', 'Notifications failed', variables.length)
+      );
+    },
+  });
+}