ref(aci): highlight conflicting conditions in migrated automations (#95190)

- instead of having a `findConflictingActionFilterConditions` helper to
find conflicts in action filters specifically, i made this function more
generic so that it can also be used by triggers.
- this properly accounts for migrated automations since event frequency
conditions used to be in the WHEN (triggers) but have been moved to the
IF (action filters)
- added a `AutomationBuilderConflictContext`
- updated conflicting condition arrays to be sets, since we're only
using them for lookups
- added a `conflictReason` prop so that we can add more specific
reasons, such as duplicate triggers
<img width="1158" alt="Screenshot 2025-07-09 at 4 56 47 PM"
src="https://github.com/user-attachments/assets/46ac2b6d-41ee-472c-94cb-3cab007353c9"
/>

Author: ameliahsu

static/app/types/workflowEngine/dataConditions.tsx

@@ -106,9 +106,3 @@ export interface DataConditionHandler {
   type: DataConditionType;
   handlerSubgroup?: DataConditionHandlerSubgroupType;
 }
-
-// for keeping track of conflicting condition ids in the UI
-export interface ConflictingConditions {
-  conflictingActionFilters: Record<string, string[]>;
-  conflictingTriggers: string[];
-}

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

@@ -12,7 +12,6 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {SelectValue} from 'sentry/types/core';
 import type {
-  ConflictingConditions,
   DataConditionGroup,
   DataConditionGroupLogicType,
 } from 'sentry/types/workflowEngine/dataConditions';
@@ -21,6 +20,7 @@ import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import {FILTER_MATCH_OPTIONS} from 'sentry/views/automations/components/actionFilters/constants';
 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 DataConditionNodeList from 'sentry/views/automations/components/dataConditionNodeList';
 import {TRIGGER_MATCH_OPTIONS} from 'sentry/views/automations/components/triggers/constants';
@@ -36,86 +36,83 @@ export default function AutomationBuilder() {
     fetchOrgMembers(api, organization.slug);
   }, [api, organization]);
 
-  const {conflictingTriggers, conflictingActionFilters} =
-    useMemo((): ConflictingConditions => {
-      return findConflictingConditions(state.triggers, state.actionFilters);
-    }, [state]);
+  const conflictData = useMemo(() => {
+    return findConflictingConditions(state.triggers, state.actionFilters);
+  }, [state]);
 
   return (
-    <Flex direction="column" gap={space(1)}>
-      <Step>
-        <StepLead>
-          {/* TODO: Only make this a selector of "all" is originally selected */}
-          {tct('[when:When] [selector] of the following occur', {
-            when: <ConditionBadge />,
-            selector: (
-              <EmbeddedWrapper>
-                <EmbeddedSelectField
-                  styles={{
-                    control: (provided: any) => ({
-                      ...provided,
-                      minHeight: '21px',
-                      height: '21px',
-                    }),
-                  }}
-                  inline={false}
-                  isSearchable={false}
-                  isClearable={false}
-                  name="triggers.logicType"
-                  value={state.triggers.logicType}
-                  onChange={(option: SelectValue<DataConditionGroupLogicType>) =>
-                    actions.updateWhenLogicType(option.value)
-                  }
-                  required
-                  flexibleControlStateSize
-                  options={TRIGGER_MATCH_OPTIONS}
-                  size="xs"
-                />
-              </EmbeddedWrapper>
-            ),
-          })}
-        </StepLead>
-      </Step>
-      <DataConditionNodeList
-        handlerGroup={DataConditionHandlerGroupType.WORKFLOW_TRIGGER}
-        placeholder={t('Select a trigger...')}
-        conditions={state.triggers.conditions}
-        group="triggers"
-        onAddRow={type => actions.addWhenCondition(type)}
-        onDeleteRow={index => actions.removeWhenCondition(index)}
-        updateCondition={(id, comparison) => actions.updateWhenCondition(id, comparison)}
-        conflictingConditionIds={conflictingTriggers}
-      />
-      {state.actionFilters.map(actionFilter => (
-        <ActionFilterBlock
-          key={`actionFilters.${actionFilter.id}`}
-          actionFilter={actionFilter}
-          conflictingConditions={conflictingActionFilters[actionFilter.id] || []}
+    <AutomationBuilderConflictContext.Provider value={conflictData}>
+      <Flex direction="column" gap={space(1)}>
+        <Step>
+          <StepLead>
+            {/* TODO: Only make this a selector of "all" is originally selected */}
+            {tct('[when:When] [selector] of the following occur', {
+              when: <ConditionBadge />,
+              selector: (
+                <EmbeddedWrapper>
+                  <EmbeddedSelectField
+                    styles={{
+                      control: (provided: any) => ({
+                        ...provided,
+                        minHeight: '21px',
+                        height: '21px',
+                      }),
+                    }}
+                    inline={false}
+                    isSearchable={false}
+                    isClearable={false}
+                    name={`${state.triggers.id}.logicType`}
+                    value={state.triggers.logicType}
+                    onChange={(option: SelectValue<DataConditionGroupLogicType>) =>
+                      actions.updateWhenLogicType(option.value)
+                    }
+                    required
+                    flexibleControlStateSize
+                    options={TRIGGER_MATCH_OPTIONS}
+                    size="xs"
+                  />
+                </EmbeddedWrapper>
+              ),
+            })}
+          </StepLead>
+        </Step>
+        <DataConditionNodeList
+          handlerGroup={DataConditionHandlerGroupType.WORKFLOW_TRIGGER}
+          placeholder={t('Select a trigger...')}
+          conditions={state.triggers.conditions}
+          groupId={state.triggers.id}
+          onAddRow={type => actions.addWhenCondition(type)}
+          onDeleteRow={index => actions.removeWhenCondition(index)}
+          updateCondition={(id, comparison) =>
+            actions.updateWhenCondition(id, comparison)
+          }
         />
-      ))}
-      <span>
-        <PurpleTextButton
-          borderless
-          icon={<IconAdd />}
-          size="xs"
-          onClick={() => actions.addIf()}
-        >
-          {t('If/Then Block')}
-        </PurpleTextButton>
-      </span>
-    </Flex>
+        {state.actionFilters.map(actionFilter => (
+          <ActionFilterBlock
+            key={`actionFilters.${actionFilter.id}`}
+            actionFilter={actionFilter}
+          />
+        ))}
+        <span>
+          <PurpleTextButton
+            borderless
+            icon={<IconAdd />}
+            size="xs"
+            onClick={() => actions.addIf()}
+          >
+            {t('If/Then Block')}
+          </PurpleTextButton>
+        </span>
+      </Flex>
+    </AutomationBuilderConflictContext.Provider>
   );
 }
 
 interface ActionFilterBlockProps {
   actionFilter: DataConditionGroup;
-  conflictingConditions: string[];
 }
 
-function ActionFilterBlock({
-  actionFilter,
-  conflictingConditions = [],
-}: ActionFilterBlockProps) {
+function ActionFilterBlock({actionFilter}: ActionFilterBlockProps) {
   const {actions} = useAutomationBuilderContext();
 
   return (
@@ -164,15 +161,14 @@ function ActionFilterBlock({
           </Flex>
           <DataConditionNodeList
             handlerGroup={DataConditionHandlerGroupType.ACTION_FILTER}
-            placeholder={t('Filter by...')}
-            group={`actionFilters.${actionFilter.id}`}
+            placeholder={t('Any event')}
+            groupId={actionFilter.id}
             conditions={actionFilter?.conditions || []}
             onAddRow={type => actions.addIfCondition(actionFilter.id, type)}
             onDeleteRow={id => actions.removeIfCondition(actionFilter.id, id)}
             updateCondition={(id, params) =>
               actions.updateIfCondition(actionFilter.id, id, params)
             }
-            conflictingConditionIds={conflictingConditions}
           />
         </Flex>
       </Step>

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

@@ -0,0 +1,19 @@
+import {createContext, useContext} from 'react';
+
+export interface ConflictingConditions {
+  conflictReason: string | null;
+  conflictingConditionGroups: Record<string, Set<string>>;
+}
+
+export const AutomationBuilderConflictContext =
+  createContext<ConflictingConditions | null>(null);
+
+export const useAutomationBuilderConflictContext = () => {
+  const context = useContext(AutomationBuilderConflictContext);
+  if (!context) {
+    throw new Error(
+      'useAutomationBuilderConflictContext was called outside of AutomationBuilder'
+    );
+  }
+  return context;
+};