fix(aci): add validation to automation edit view (#95091)

pulled the automation builder validation function out so that it can be
called by automation create + edit

also fixed a bug with the automation edit view where the form would be
blank when the page was refreshed by putting the form in a separate
component that is only rendered once the existing automation data has
finished fetching

Author: ameliahsu

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

@@ -1,5 +1,7 @@
 import type {FieldValue} from 'sentry/components/forms/model';
+import {t} from 'sentry/locale';
 import type {Automation, NewAutomation} from 'sentry/types/workflowEngine/automations';
+import {actionNodesMap} from 'sentry/views/automations/components/actionNodes';
 import type {AutomationBuilderState} from 'sentry/views/automations/components/automationBuilderContext';
 
 export interface AutomationFormData {
@@ -55,3 +57,21 @@ export function getAutomationFormData(
     name: automation.name,
   };
 }
+
+export function validateAutomationBuilderState(state: AutomationBuilderState) {
+  const errors: Record<string, string> = {};
+
+  for (const actionFilter of state.actionFilters) {
+    if (actionFilter.actions?.length === 0) {
+      errors[actionFilter.id] = t('You must add an action for this automation to run.');
+      continue;
+    }
+    for (const action of actionFilter.actions || []) {
+      const validationResult = actionNodesMap.get(action.type)?.validate?.(action);
+      if (validationResult) {
+        errors[action.id] = validationResult;
+      }
+    }
+  }
+  return errors;
+}

static/app/views/automations/edit.tsx

@@ -21,6 +21,7 @@ import {
 import {useWorkflowEngineFeatureGate} from 'sentry/components/workflowEngine/useWorkflowEngineFeatureGate';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Automation} from 'sentry/types/workflowEngine/automations';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
@@ -36,6 +37,7 @@ import type {AutomationFormData} from 'sentry/views/automations/components/autom
 import {
   getAutomationFormData,
   getNewAutomationData,
+  validateAutomationBuilderState,
 } from 'sentry/views/automations/components/automationFormData';
 import {EditableAutomationName} from 'sentry/views/automations/components/editableAutomationName';
 import {useAutomationQuery, useUpdateAutomation} from 'sentry/views/automations/hooks';
@@ -67,10 +69,7 @@ function AutomationBreadcrumbs({automationId}: {automationId: string}) {
 }
 
 export default function AutomationEdit() {
-  const navigate = useNavigate();
-  const organization = useOrganization();
   const params = useParams<{automationId: string}>();
-  const {mutateAsync: updateAutomation} = useUpdateAutomation();
 
   useWorkflowEngineFeatureGate({redirect: true});
 
@@ -81,6 +80,23 @@ export default function AutomationEdit() {
     refetch,
   } = useAutomationQuery(params.automationId);
 
+  if (isPending) {
+    return <LoadingIndicator />;
+  }
+
+  if (isError || !automation) {
+    return <LoadingError onRetry={refetch} />;
+  }
+
+  return <AutomationEditForm automation={automation} />;
+}
+
+function AutomationEditForm({automation}: {automation: Automation}) {
+  const navigate = useNavigate();
+  const organization = useOrganization();
+  const params = useParams<{automationId: string}>();
+  const {mutateAsync: updateAutomation} = useUpdateAutomation();
+
   const initialData = useMemo((): Record<string, FieldValue> | undefined => {
     if (!automation) {
       return undefined;
@@ -115,25 +131,22 @@ export default function AutomationEdit() {
 
   const handleFormSubmit = useCallback<OnSubmitCallback>(
     async (data, _, __, ___, ____) => {
-      const formData = getNewAutomationData(data as AutomationFormData, state);
-      const updatedData = {
-        automationId: params.automationId,
-        ...formData,
-      };
-      const updatedAutomation = await updateAutomation(updatedData);
-      navigate(makeAutomationDetailsPathname(organization.slug, updatedAutomation.id));
+      const errors = validateAutomationBuilderState(state);
+      setAutomationBuilderErrors(errors);
+
+      if (Object.keys(errors).length === 0) {
+        const formData = getNewAutomationData(data as AutomationFormData, state);
+        const updatedData = {
+          automationId: params.automationId,
+          ...formData,
+        };
+        const updatedAutomation = await updateAutomation(updatedData);
+        navigate(makeAutomationDetailsPathname(organization.slug, updatedAutomation.id));
+      }
     },
     [params.automationId, organization.slug, navigate, updateAutomation, state]
   );
 
-  if (isPending && !initialData) {
-    return <LoadingIndicator />;
-  }
-
-  if (isError || !automation || !initialData) {
-    return <LoadingError onRetry={refetch} />;
-  }
-
   return (
     <FullHeightForm
       hideFooter

static/app/views/automations/new-settings.tsx

@@ -21,16 +21,17 @@ import {space} from 'sentry/styles/space';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
-import {actionNodesMap} from 'sentry/views/automations/components/actionNodes';
-import type {AutomationBuilderState} from 'sentry/views/automations/components/automationBuilderContext';
 import {
   AutomationBuilderContext,
   useAutomationBuilderReducer,
 } from 'sentry/views/automations/components/automationBuilderContext';
 import {AutomationBuilderErrorContext} from 'sentry/views/automations/components/automationBuilderErrorContext';
 import AutomationForm from 'sentry/views/automations/components/automationForm';
 import type {AutomationFormData} from 'sentry/views/automations/components/automationFormData';
-import {getNewAutomationData} from 'sentry/views/automations/components/automationFormData';
+import {
+  getNewAutomationData,
+  validateAutomationBuilderState,
+} from 'sentry/views/automations/components/automationFormData';
 import {EditableAutomationName} from 'sentry/views/automations/components/editableAutomationName';
 import {useCreateAutomation} from 'sentry/views/automations/hooks';
 import {
@@ -65,23 +66,6 @@ const initialData = {
   frequency: 1440,
 };
 
-function validateAutomationBuilderState(state: AutomationBuilderState) {
-  const errors: Record<string, string> = {};
-  for (const actionFilter of state.actionFilters) {
-    if (actionFilter.actions?.length === 0) {
-      errors[actionFilter.id] = t('You must add an action for this automation to run.');
-      continue;
-    }
-    for (const action of actionFilter.actions || []) {
-      const validationResult = actionNodesMap.get(action.type)?.validate?.(action);
-      if (validationResult) {
-        errors[action.id] = validationResult;
-      }
-    }
-  }
-  return errors;
-}
-
 export default function AutomationNewSettings() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -118,7 +102,6 @@ export default function AutomationNewSettings() {
 
   const handleSubmit = useCallback<OnSubmitCallback>(
     async (data, _, __, ___, ____) => {
-      // TODO: add form validation
       const errors = validateAutomationBuilderState(state);
       setAutomationBuilderErrors(errors);