fix(aci): replace form input fields with regular inputs (#94483)

since the automation builder has it's own state being managed outside of
the form model, there is no need for the inputs to be form fields. this
also allows the inputs to be properly filled with an initial value
(since it's no longer getting the value from the form model)

also added default `comparison` values to the data conditions in the
[dataConditionNodesMap](https://github.com/getsentry/sentry/blob/6c2ed68e9657a52dffc06d10bb33eb8bdde1533c/static/app/views/automations/components/dataConditionNodes.tsx#L97)

Author: ameliahsu

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

@@ -0,0 +1,14 @@
+import type {ComponentProps} from 'react';
+import styled from '@emotion/styled';
+
+import {Input} from 'sentry/components/core/input';
+
+export function AutomationBuilderInput(props: ComponentProps<typeof Input>) {
+  return <InlineInput type="text" {...props} />;
+}
+
+const InlineInput = styled(Input)`
+  width: auto;
+  height: 28px;
+  min-height: 28px;
+`;

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

@@ -0,0 +1,14 @@
+import type {ComponentProps} from 'react';
+import styled from '@emotion/styled';
+
+import {NumberInput} from 'sentry/components/core/input/numberInput';
+
+export function AutomationBuilderNumberInput(props: ComponentProps<typeof NumberInput>) {
+  return <InlineNumberInput min={0} {...props} />;
+}
+
+const InlineNumberInput = styled(NumberInput)`
+  width: 90px;
+  height: 28px;
+  min-height: 28px;
+`;

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

@@ -1,13 +1,11 @@
 import type {ComponentProps} from 'react';
 import styled from '@emotion/styled';
 
-import SelectField from 'sentry/components/forms/fields/selectField';
+import {Select} from 'sentry/components/core/select';
 
-type SelectFieldProps = ComponentProps<typeof SelectField>;
-
-export default function AutomationBuilderSelectField(props: SelectFieldProps) {
+export function AutomationBuilderSelect(props: ComponentProps<typeof Select>) {
   return (
-    <StyledSelectField
+    <StyledSelect
       flexibleControlStateSize
       hideLabel
       inline
@@ -17,7 +15,7 @@ export default function AutomationBuilderSelectField(props: SelectFieldProps) {
   );
 }
 
-const StyledSelectField = styled(SelectField)`
+const StyledSelect = styled(Select)`
   width: 180px;
   padding: 0;
   > div {

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

@@ -7,7 +7,7 @@ export interface Action {
     target_display?: string;
     target_identifier?: string;
   };
-  data: Record<string, unknown>;
+  data: Record<string, any>;
   id: string;
   type: ActionType;
   integrationId?: string;
@@ -16,7 +16,7 @@ export interface Action {
 export interface TicketCreationAction extends Action {
   [key: string]: any;
   data: {
-    additional_fields?: Record<string, unknown>;
+    additional_fields?: Record<string, any>;
     dynamic_form_fields?: IssueConfigField[];
   };
   integrationId: string;

static/app/components/workflowEngine/form/automationBuilderSelectField.tsx renamed to static/app/components/workflowEngine/form/automationBuilderSelect.tsx

@@ -1,20 +1,15 @@
-import AutomationBuilderNumberField from 'sentry/components/workflowEngine/form/automationBuilderNumberField';
-import AutomationBuilderSelectField from 'sentry/components/workflowEngine/form/automationBuilderSelectField';
+import {AutomationBuilderNumberInput} from 'sentry/components/workflowEngine/form/automationBuilderNumberInput';
+import {AutomationBuilderSelect} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
 import {tct} from 'sentry/locale';
+import type {SelectValue} from 'sentry/types/core';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
+import type {AgeComparison} from 'sentry/views/automations/components/actionFilters/constants';
 import {
   AGE_COMPARISON_CHOICES,
-  type AgeComparison,
+  TimeUnit,
 } from 'sentry/views/automations/components/actionFilters/constants';
 import {useDataConditionNodeContext} from 'sentry/views/automations/components/dataConditionNodes';
 
-enum TimeUnit {
-  MINUTES = 'minute',
-  HOURS = 'hour',
-  DAYS = 'day',
-  WEEKS = 'week',
-}
-
 const TIME_CHOICES = [
   {value: TimeUnit.MINUTES, label: 'minute(s)'},
   {value: TimeUnit.HOURS, label: 'hour(s)'},
@@ -50,13 +45,13 @@ export function AgeComparisonNode() {
 function ComparisonField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   return (
-    <AutomationBuilderSelectField
+    <AutomationBuilderSelect
       name={`${condition_id}.comparison.comparison_type`}
       value={condition.comparison.comparison_type}
       options={AGE_COMPARISON_CHOICES}
-      onChange={(value: AgeComparison) => {
+      onChange={(option: SelectValue<AgeComparison>) => {
         onUpdate({
-          comparison_type: value,
+          comparison_type: option.value,
         });
       }}
     />
@@ -66,30 +61,31 @@ function ComparisonField() {
 function ValueField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   return (
-    <AutomationBuilderNumberField
+    <AutomationBuilderNumberInput
       name={`${condition_id}.comparison.value`}
       value={condition.comparison.value}
       min={0}
       step={1}
-      onChange={(value: string) => {
+      onChange={(value: number) => {
         onUpdate({
-          value: parseInt(value, 10),
+          value,
         });
       }}
+      placeholder={'10'}
     />
   );
 }
 
 function TimeField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   return (
-    <AutomationBuilderSelectField
+    <AutomationBuilderSelect
       name={`${condition_id}.comparison.time`}
       value={condition.comparison.time}
       options={TIME_CHOICES}
-      onChange={(value: string) => {
+      onChange={(option: SelectValue<TimeUnit>) => {
         onUpdate({
-          time: value,
+          time: option.value,
         });
       }}
     />

static/app/types/workflowEngine/actions.tsx

@@ -2,22 +2,19 @@ import styled from '@emotion/styled';
 
 import SelectMembers from 'sentry/components/selectMembers';
 import TeamSelector from 'sentry/components/teamSelector';
-import AutomationBuilderSelectField, {
+import {
+  AutomationBuilderSelect,
   selectControlStyles,
-} from 'sentry/components/workflowEngine/form/automationBuilderSelectField';
+} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
 import {t, tct} from 'sentry/locale';
+import type {SelectValue} from 'sentry/types/core';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useTeamsById} from 'sentry/utils/useTeamsById';
 import useUserFromId from 'sentry/utils/useUserFromId';
+import {TargetType} from 'sentry/views/automations/components/actionFilters/constants';
 import {useDataConditionNodeContext} from 'sentry/views/automations/components/dataConditionNodes';
 
-enum TargetType {
-  UNASSIGNED = 'Unassigned',
-  TEAM = 'Team',
-  MEMBER = 'Member',
-}
-
 const TARGET_TYPE_CHOICES = [
   {value: TargetType.UNASSIGNED, label: 'No One'},
   {value: TargetType.TEAM, label: 'Team'},
@@ -57,11 +54,13 @@ export function AssignedToNode() {
 function TargetTypeField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   return (
-    <AutomationBuilderSelectField
+    <AutomationBuilderSelect
       name={`${condition_id}.comparison.targetType`}
       value={condition.comparison.targetType}
       options={TARGET_TYPE_CHOICES}
-      onChange={(value: string) => onUpdate({targetType: value, targetIdentifier: ''})}
+      onChange={(option: SelectValue<string>) =>
+        onUpdate({targetType: option.value, targetIdentifier: ''})
+      }
     />
   );
 }
@@ -76,7 +75,7 @@ function IdentifierField() {
         <TeamSelector
           name={`${condition_id}.data.targetIdentifier`}
           value={condition.comparison.targetIdentifier}
-          onChange={(value: any) => onUpdate({targetIdentifier: value})}
+          onChange={(value: SelectValue<string>) => onUpdate({targetIdentifier: value})}
           useId
           styles={selectControlStyles}
         />

static/app/views/automations/components/actionFilters/ageComparison.tsx

@@ -1,6 +1,7 @@
-import AutomationBuilderNumberField from 'sentry/components/workflowEngine/form/automationBuilderNumberField';
-import AutomationBuilderSelectField from 'sentry/components/workflowEngine/form/automationBuilderSelectField';
+import {AutomationBuilderNumberInput} from 'sentry/components/workflowEngine/form/automationBuilderNumberInput';
+import {AutomationBuilderSelect} from 'sentry/components/workflowEngine/form/automationBuilderSelect';
 import {tct} from 'sentry/locale';
+import type {SelectValue} from 'sentry/types/core';
 import {
   COMPARISON_INTERVAL_CHOICES,
   INTERVAL_CHOICES,
@@ -25,30 +26,31 @@ export function PercentBranch() {
 function ValueField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   return (
-    <AutomationBuilderNumberField
+    <AutomationBuilderNumberInput
       name={`${condition_id}.comparison.value`}
       value={condition.comparison.value}
       min={1}
       step={1}
-      onChange={(value: string) => {
+      onChange={(value: number) => {
         onUpdate({
           value,
         });
       }}
+      placeholder="100"
     />
   );
 }
 
 function IntervalField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   return (
-    <AutomationBuilderSelectField
+    <AutomationBuilderSelect
       name={`${condition_id}.comparison.interval`}
       value={condition.comparison.interval}
       options={INTERVAL_CHOICES}
-      onChange={(value: string) => {
+      onChange={(option: SelectValue<string>) => {
         onUpdate({
-          interval: value,
+          interval: option.value,
         });
       }}
     />
@@ -58,13 +60,13 @@ function IntervalField() {
 function ComparisonIntervalField() {
   const {condition, condition_id, onUpdate} = useDataConditionNodeContext();
   return (
-    <AutomationBuilderSelectField
+    <AutomationBuilderSelect
       name={`${condition_id}.comparison.comparison_interval`}
       value={condition.comparison.comparison_interval}
       options={COMPARISON_INTERVAL_CHOICES}
-      onChange={(value: string) => {
+      onChange={(option: SelectValue<string>) => {
         onUpdate({
-          comparison_interval: value,
+          comparison_interval: option.value,
         });
       }}
     />

static/app/views/automations/components/actionFilters/assignedTo.tsx

@@ -37,6 +37,19 @@ export enum AgeComparison {
   NEWER = 'newer',
 }
 
+export enum TimeUnit {
+  MINUTES = 'minute',
+  HOURS = 'hour',
+  DAYS = 'day',
+  WEEKS = 'week',
+}
+
+export enum TargetType {
+  UNASSIGNED = 'Unassigned',
+  TEAM = 'Team',
+  MEMBER = 'Member',
+}
+
 export enum ModelAge {
   OLDEST = 'oldest',
   NEWEST = 'newest',
@@ -80,7 +93,7 @@ export enum Level {
   SAMPLING = 0,
 }
 
-enum Interval {
+export enum Interval {
   ONE_MINUTE = '1m',
   FIVE_MINUTES = '5m',
   FIFTEEN_MINUTES = '15m',