feat(aci): Add above/below controls to monitor builder

static/app/components/workflowEngine/form/control/index.stories.tsx

@@ -16,7 +16,7 @@ export default Storybook.story('Form Controls', story => {
 
       <Form hideFooter>
         <Flex column gap={space(2)}>
-          <PriorityControl name="priority" />
+          <PriorityControl />
         </Flex>
       </Form>
     </Fragment>

static/app/components/workflowEngine/form/control/priorityControl.spec.tsx

@@ -1,36 +1,89 @@
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
+import Form from 'sentry/components/forms/form';
+import FormModel from 'sentry/components/forms/model';
 import PriorityControl from 'sentry/components/workflowEngine/form/control/priorityControl';
 import {PriorityLevel} from 'sentry/types/group';
 
 describe('PriorityControl', function () {
   it('renders children', async function () {
-    render(<PriorityControl name="priority" />);
+    const formModel = new FormModel({
+      initialData: {
+        'conditionGroup.conditions.0.type': 'above',
+        'conditionGroup.conditions.0.comparison': '0',
+        'conditionGroup.conditions.0.conditionResult': PriorityLevel.LOW,
+      },
+    });
+    render(
+      <Form model={formModel} hideFooter>
+        <PriorityControl />
+      </Form>
+    );
 
-    expect(await screen.findByText('Issue created')).toBeInTheDocument();
+    expect(await screen.findByText('Above 0s')).toBeInTheDocument();
     expect(await screen.findByTestId('priority-control-medium')).toBeInTheDocument();
     expect(await screen.findByTestId('priority-control-high')).toBeInTheDocument();
   });
+
   it('allows configuring priority', async function () {
-    const mock = jest.fn();
-    render(<PriorityControl onPriorityChange={mock} name="priority" />);
-    await userEvent.click(await screen.findByRole('button'));
+    const formModel = new FormModel({
+      initialData: {
+        'conditionGroup.conditions.0.type': 'above',
+        'conditionGroup.conditions.0.comparison': '0',
+        'conditionGroup.conditions.0.conditionResult': PriorityLevel.LOW,
+      },
+    });
+    render(
+      <Form model={formModel} hideFooter>
+        <PriorityControl />
+      </Form>
+    );
+    expect(await screen.findByRole('button', {name: 'Low'})).toBeInTheDocument();
+    expect(screen.getByText('Med')).toBeInTheDocument();
+    expect(screen.getByText('High')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', {name: 'Low'}));
     await userEvent.click(await screen.findByRole('option', {name: 'High'}));
-    expect(mock).toHaveBeenCalledWith(PriorityLevel.HIGH);
+    expect(formModel.getValue('conditionGroup.conditions.0.conditionResult')).toBe(
+      PriorityLevel.HIGH
+    );
+    // Check that the medium threshold is not visible
+    expect(screen.getAllByRole('button')).toHaveLength(1);
   });
+
   it('allows configuring medium threshold', async function () {
-    const mock = jest.fn();
-    render(<PriorityControl onThresholdChange={mock} name="priority" />);
+    const formModel = new FormModel({
+      initialData: {
+        'conditionGroup.conditions.0.type': 'above',
+        'conditionGroup.conditions.0.comparison': '0',
+        'conditionGroup.conditions.0.conditionResult': PriorityLevel.LOW,
+      },
+    });
+    render(
+      <Form model={formModel} hideFooter>
+        <PriorityControl />
+      </Form>
+    );
     const medium = await screen.findByTestId('priority-control-medium');
     await userEvent.type(medium, '12');
-    expect(mock).toHaveBeenCalledWith(PriorityLevel.MEDIUM, 12);
+    expect(formModel.getValue('conditionGroup.conditions.1.comparison')).toBe('12');
   });
 
   it('allows configuring high value', async function () {
-    const mock = jest.fn();
-    render(<PriorityControl onThresholdChange={mock} name="priority" />);
+    const formModel = new FormModel({
+      initialData: {
+        'conditionGroup.conditions.0.type': 'above',
+        'conditionGroup.conditions.0.comparison': '0',
+        'conditionGroup.conditions.0.conditionResult': PriorityLevel.LOW,
+      },
+    });
+    render(
+      <Form model={formModel} hideFooter>
+        <PriorityControl />
+      </Form>
+    );
     const high = await screen.findByTestId('priority-control-high');
     await userEvent.type(high, '12');
-    expect(mock).toHaveBeenCalledWith(PriorityLevel.HIGH, 12);
+    expect(formModel.getValue('conditionGroup.conditions.2.comparison')).toBe('12');
   });
 });

static/app/components/workflowEngine/form/control/priorityControl.tsx

@@ -1,72 +1,72 @@
-import {useCallback, useState} from 'react';
+import {useContext} from 'react';
 import styled from '@emotion/styled';
 
 import {GroupPriorityBadge} from 'sentry/components/badge/groupPriority';
 import {Flex} from 'sentry/components/container/flex';
-import {CompactSelect, type SelectOption} from 'sentry/components/core/compactSelect';
+import {CompactSelect} from 'sentry/components/core/compactSelect';
 import {FieldWrapper} from 'sentry/components/forms/fieldGroup/fieldWrapper';
 import NumberField from 'sentry/components/forms/fields/numberField';
+import FormContext from 'sentry/components/forms/formContext';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import {useFormField} from 'sentry/components/workflowEngine/form/hooks';
 import {IconArrow, IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {PriorityLevel} from 'sentry/types/group';
 
-interface PriorityControlGridProps {
-  name: string;
-  onPriorityChange?: (value: PriorityLevel) => void;
-  onThresholdChange?: (level: PriorityLevel, threshold: number) => void;
-  priority?: PriorityLevel;
-  thresholds?: PriorityThresholds;
+function ThresholdPriority() {
+  const lowThresholdDirection = useFormField<string>('conditionGroup.conditions.0.type')!;
+  const lowThreshold = useFormField<string>('conditionGroup.conditions.0.comparison')!;
+  return (
+    <div>
+      {lowThresholdDirection === ''
+        ? t('Above')
+        : lowThresholdDirection === 'above'
+          ? t('Above')
+          : t('Below')}{' '}
+      {lowThreshold === '' ? '0s' : lowThreshold + 's'}
+    </div>
+  );
 }
 
-interface PriorityThresholds {
-  high?: number;
-  medium?: number;
+function ChangePriority() {
+  const lowThresholdDirection = useFormField<string>('conditionGroup.conditions.0.type')!;
+  const lowThreshold = useFormField<string>('conditionGroup.conditions.0.comparison')!;
+  return (
+    <div>
+      {lowThreshold === '' ? '0' : lowThreshold}%{' '}
+      {lowThresholdDirection === ''
+        ? t('higher')
+        : lowThresholdDirection === 'higher'
+          ? t('higher')
+          : t('lower')}
+    </div>
+  );
 }
 
-export default function PriorityControl({
-  name,
-  priority: initialPriority,
-  onPriorityChange,
-  thresholds: initialThresholds,
-  onThresholdChange,
-}: PriorityControlGridProps) {
-  const [priority, setPriority] = useState<PriorityLevel>(
-    initialPriority ?? PriorityLevel.LOW
-  );
-  const [thresholds, setThresholds] = useState<PriorityThresholds>(
-    initialThresholds ?? {}
-  );
-  const setCreatedPriority = useCallback(
-    (level: PriorityLevel) => {
-      setPriority(level);
-      onPriorityChange?.(level);
-    },
-    [setPriority, onPriorityChange]
-  );
-  const setMediumThreshold = useCallback(
-    (threshold: number) => {
-      setThresholds(v => ({...v, [PriorityLevel.MEDIUM]: threshold}));
-      onThresholdChange?.(PriorityLevel.MEDIUM, threshold);
-    },
-    [setThresholds, onThresholdChange]
-  );
-  const setHighThreshold = useCallback(
-    (threshold: number) => {
-      setThresholds(v => ({...v, [PriorityLevel.HIGH]: threshold}));
-      onThresholdChange?.(PriorityLevel.HIGH, threshold);
-    },
-    [setThresholds, onThresholdChange]
-  );
+export default function PriorityControl() {
+  // TODO: kind type not yet available from detector types
+  const detectorKind = useFormField<string>('kind')!;
+  const conditionResult =
+    useFormField<PriorityLevel>('conditionGroup.conditions.0.conditionResult') ||
+    PriorityLevel.LOW;
 
   return (
     <Grid>
       <PrioritizeRow
-        left={<span style={{textAlign: 'right'}}>{t('Issue created')}</span>}
-        right={<PrioritySelect value={priority} onChange={setCreatedPriority} />}
+        left={
+          <Flex align="center" column>
+            {!detectorKind || detectorKind === 'threshold' ? (
+              <ThresholdPriority />
+            ) : (
+              <ChangePriority />
+            )}
+            <SecondaryLabel>({t('issue created')})</SecondaryLabel>
+          </Flex>
+        }
+        right={<PrioritySelect />}
       />
-      {priorityIsConfigurable(priority, PriorityLevel.MEDIUM) && (
+      {priorityIsConfigurable(conditionResult, PriorityLevel.MEDIUM) && (
         <PrioritizeRow
           left={
             <NumberField
@@ -77,17 +77,14 @@ export default function PriorityControl({
               size="sm"
               suffix="s"
               placeholder="0"
-              // empty string required to keep this as a controlled input
-              value={thresholds[PriorityLevel.MEDIUM] ?? ''}
-              onChange={threshold => setMediumThreshold(Number(threshold))}
-              name={`${name}-medium`}
+              name={`conditionGroup.conditions.1.comparison`}
               data-test-id="priority-control-medium"
             />
           }
           right={<GroupPriorityBadge showLabel priority={PriorityLevel.MEDIUM} />}
         />
       )}
-      {priorityIsConfigurable(priority, PriorityLevel.HIGH) && (
+      {priorityIsConfigurable(conditionResult, PriorityLevel.HIGH) && (
         <PrioritizeRow
           left={
             <NumberField
@@ -98,10 +95,7 @@ export default function PriorityControl({
               size="sm"
               suffix="s"
               placeholder="0"
-              // empty string required to keep this as a controlled input
-              value={thresholds[PriorityLevel.HIGH] ?? ''}
-              onChange={threshold => setHighThreshold(Number(threshold))}
-              name={`${name}-high`}
+              name={`conditionGroup.conditions.2.comparison`}
               data-test-id="priority-control-high"
             />
           }
@@ -143,29 +137,19 @@ function PrioritizeRow({left, right}: {left: React.ReactNode; right: React.React
 
 const priorities = [PriorityLevel.LOW, PriorityLevel.MEDIUM, PriorityLevel.HIGH];
 
-function PrioritySelect({
-  value: initialValue,
-  onChange = () => {},
-}: {
-  onChange?: (value: PriorityLevel) => void;
-  value?: PriorityLevel;
-}) {
-  const [value, setValue] = useState<PriorityLevel>(initialValue ?? PriorityLevel.HIGH);
-  const handleChange = useCallback(
-    (select: SelectOption<PriorityLevel>) => {
-      onChange(select.value);
-      setValue(select.value);
-    },
-    [onChange, setValue]
-  );
+function PrioritySelect() {
+  const formContext = useContext(FormContext);
+  const conditionResult =
+    useFormField<PriorityLevel>('conditionGroup.conditions.0.conditionResult') ||
+    PriorityLevel.LOW;
 
   return (
     <CompactSelect
       size="xs"
       trigger={(props, isOpen) => {
         return (
           <EmptyButton {...props}>
-            <GroupPriorityBadge showLabel priority={value}>
+            <GroupPriorityBadge showLabel priority={conditionResult}>
               <InteractionStateLayer isPressed={isOpen} />
               <IconChevron direction={isOpen ? 'up' : 'down'} size="xs" />
             </GroupPriorityBadge>
@@ -177,8 +161,10 @@ function PrioritySelect({
         value: priority,
         textValue: priority,
       }))}
-      value={value}
-      onChange={handleChange}
+      value={conditionResult}
+      onChange={({value}) => {
+        formContext.form?.setValue('conditionGroup.conditions.0.conditionResult', value);
+      }}
     />
   );
 }
@@ -212,3 +198,8 @@ const Cell = styled(Flex)`
     width: 5rem;
   }
 `;
+
+const SecondaryLabel = styled('div')`
+  font-size: ${p => p.theme.fontSizeSmall};
+  color: ${p => p.theme.subText};
+`;