[Alerting V2] [UI] Add activation configuration fields to alerting V2 rule form

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/flyout/rule_form_flyout.tsx

@@ -51,7 +51,7 @@ export const RuleFormFlyout: React.FC<RuleFormFlyoutProps> = ({
       type={push ? 'push' : 'overlay'}
       onClose={onClose || (() => {})}
       aria-labelledby={FLYOUT_TITLE_ID}
-      size="s"
+      size="560px"
     >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m" id={FLYOUT_TITLE_ID}>

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/field_groups/index.ts

@@ -7,3 +7,4 @@
 
 export { RuleDetailsFieldGroup } from './rule_details_field_group';
 export { RuleExecutionFieldGroup } from './rule_execution_field_group';
+export { StateTransitionFieldGroup } from './state_transition_field_group';

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/field_groups/state_transition_field_group.test.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { StateTransitionFieldGroup } from './state_transition_field_group';
+import { createFormWrapper } from '../../test_utils';
+
+describe('StateTransitionFieldGroup', () => {
+  it('renders immediate mode by default when kind is "alert"', () => {
+    render(<StateTransitionFieldGroup />, {
+      wrapper: createFormWrapper({ kind: 'alert' }),
+    });
+
+    expect(screen.getByText('Alert delay')).toBeInTheDocument();
+    expect(screen.getByText('Immediate')).toBeInTheDocument();
+    expect(screen.getByText('Breaches')).toBeInTheDocument();
+    expect(screen.getByText('Duration')).toBeInTheDocument();
+    expect(screen.getByTestId('stateTransitionImmediateDescription')).toBeInTheDocument();
+    expect(screen.queryByTestId('stateTransitionCountInput')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('stateTransitionTimeframeNumberInput')).not.toBeInTheDocument();
+  });
+
+  it('shows breaches input when breaches is selected', () => {
+    render(<StateTransitionFieldGroup />, {
+      wrapper: createFormWrapper({ kind: 'alert' }),
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Breaches' }));
+
+    expect(screen.getByTestId('stateTransitionCountInput')).toBeInTheDocument();
+    expect(screen.getByTestId('stateTransitionCountInput')).toHaveValue(2);
+    expect(screen.queryByTestId('stateTransitionImmediateDescription')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('stateTransitionTimeframeNumberInput')).not.toBeInTheDocument();
+  });
+
+  it('does not render when kind is "signal"', () => {
+    render(<StateTransitionFieldGroup />, {
+      wrapper: createFormWrapper({ kind: 'signal' }),
+    });
+
+    expect(screen.queryByText('Alert delay')).not.toBeInTheDocument();
+  });
+
+  it('shows immediate mode text when immediate is selected', () => {
+    render(<StateTransitionFieldGroup />, {
+      wrapper: createFormWrapper({ kind: 'alert' }),
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Immediate' }));
+
+    expect(screen.getByTestId('stateTransitionImmediateDescription')).toBeInTheDocument();
+    expect(screen.queryByTestId('stateTransitionCountInput')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('stateTransitionTimeframeNumberInput')).not.toBeInTheDocument();
+  });
+
+  it('shows duration inputs when duration is selected', () => {
+    render(<StateTransitionFieldGroup />, {
+      wrapper: createFormWrapper({ kind: 'alert' }),
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Duration' }));
+
+    expect(screen.getByTestId('stateTransitionTimeframeNumberInput')).toBeInTheDocument();
+    expect(screen.getByTestId('stateTransitionTimeframeUnitInput')).toBeInTheDocument();
+    expect(screen.getByTestId('stateTransitionTimeframeNumberInput')).toHaveValue(2);
+    expect(screen.getByTestId('stateTransitionTimeframeUnitInput')).toHaveValue('m');
+    expect(screen.queryByTestId('stateTransitionCountInput')).not.toBeInTheDocument();
+  });
+});

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/field_groups/state_transition_field_group.tsx

@@ -0,0 +1,133 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useState } from 'react';
+import { EuiButtonGroup, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useFormContext, useWatch } from 'react-hook-form';
+import type { FormValues } from '../types';
+import { FieldGroup } from './field_group';
+import { StateTransitionCountField } from '../fields/state_transition_count_field';
+import { StateTransitionTimeframeField } from '../fields/state_transition_timeframe_field';
+
+type DelayMode = 'immediate' | 'breaches' | 'duration';
+
+const MODE_OPTIONS = [
+  {
+    id: 'immediate' as const,
+    label: i18n.translate('xpack.alertingV2.ruleForm.stateTransition.delayModeImmediate', {
+      defaultMessage: 'Immediate',
+    }),
+  },
+  {
+    id: 'breaches' as const,
+    label: i18n.translate('xpack.alertingV2.ruleForm.stateTransition.delayModeBreaches', {
+      defaultMessage: 'Breaches',
+    }),
+  },
+  {
+    id: 'duration' as const,
+    label: i18n.translate('xpack.alertingV2.ruleForm.stateTransition.delayModeDuration', {
+      defaultMessage: 'Duration',
+    }),
+  },
+];
+
+const DEFAULT_PENDING_COUNT = 2;
+const DEFAULT_PENDING_TIMEFRAME = '2m';
+
+const deriveMode = (stateTransition?: {
+  pendingTimeframe?: string;
+  pendingCount?: number;
+}): DelayMode => {
+  if (stateTransition?.pendingTimeframe != null) return 'duration';
+  if (stateTransition?.pendingCount != null) return 'breaches';
+  return 'immediate';
+};
+
+export const StateTransitionFieldGroup: React.FC = () => {
+  const { control, setValue } = useFormContext<FormValues>();
+  const kind = useWatch({ control, name: 'kind' });
+  const stateTransition = useWatch({ control, name: 'stateTransition' });
+  const [selectedMode, setSelectedMode] = useState<DelayMode>(deriveMode(stateTransition));
+
+  const onModeChange = useCallback(
+    (mode: string) => {
+      switch (mode as DelayMode) {
+        case 'immediate':
+          setSelectedMode('immediate');
+          setValue('stateTransition', undefined);
+          break;
+        case 'breaches':
+          setSelectedMode('breaches');
+          setValue(
+            'stateTransition.pendingCount',
+            stateTransition?.pendingCount ?? DEFAULT_PENDING_COUNT
+          );
+          setValue('stateTransition.pendingTimeframe', undefined);
+          break;
+        case 'duration':
+          setSelectedMode('duration');
+          setValue('stateTransition.pendingCount', undefined);
+          setValue(
+            'stateTransition.pendingTimeframe',
+            stateTransition?.pendingTimeframe ?? DEFAULT_PENDING_TIMEFRAME
+          );
+          break;
+      }
+    },
+    [setValue, stateTransition?.pendingCount, stateTransition?.pendingTimeframe]
+  );
+
+  if (kind !== 'alert') {
+    return null;
+  }
+
+  return (
+    <FieldGroup
+      title={i18n.translate('xpack.alertingV2.ruleForm.stateTransition.title', {
+        defaultMessage: 'Alert delay',
+      })}
+    >
+      <EuiButtonGroup
+        buttonSize="s"
+        legend={i18n.translate('xpack.alertingV2.ruleForm.stateTransition.delayModeLegend', {
+          defaultMessage: 'Alert delay mode',
+        })}
+        options={MODE_OPTIONS}
+        idSelected={selectedMode}
+        onChange={onModeChange}
+        isFullWidth
+        data-test-subj="stateTransitionDelayMode"
+      />
+      <EuiSpacer size="s" />
+      {selectedMode === 'immediate' && (
+        <EuiText size="xs" color="subdued" data-test-subj="stateTransitionImmediateDescription">
+          {i18n.translate('xpack.alertingV2.ruleForm.stateTransition.immediateDescription', {
+            defaultMessage: 'No delay - Alerts on first breach',
+          })}
+        </EuiText>
+      )}
+      {selectedMode === 'breaches' && (
+        <StateTransitionCountField
+          prependLabel={i18n.translate(
+            'xpack.alertingV2.ruleForm.stateTransition.inlineBreachesPrepend',
+            { defaultMessage: 'Consecutive breaches' }
+          )}
+        />
+      )}
+      {selectedMode === 'duration' && (
+        <StateTransitionTimeframeField
+          numberPrependLabel={i18n.translate(
+            'xpack.alertingV2.ruleForm.stateTransition.inlineDurationPrepend',
+            { defaultMessage: 'Active for' }
+          )}
+        />
+      )}
+    </FieldGroup>
+  );
+};

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/description_field.tsx

@@ -61,13 +61,15 @@ export const DescriptionField: React.FC = () => {
           label={i18n.translate('xpack.alertingV2.ruleForm.descriptionLabel', {
             defaultMessage: 'Description',
           })}
+          fullWidth
           isInvalid={!!error}
           error={error?.message}
         >
           <EuiTextArea
             {...field}
             inputRef={ref}
             rows={2}
+            fullWidth
             isInvalid={!!error}
             placeholder={i18n.translate('xpack.alertingV2.ruleForm.descriptionPlaceholder', {
               defaultMessage: 'Add an optional description for this rule...',

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/group_field_select.tsx

@@ -58,11 +58,13 @@ export const GroupFieldSelect: React.FC = () => {
             label={i18n.translate('xpack.alertingV2.ruleForm.groupingKeyLabel', {
               defaultMessage: 'Group Fields',
             })}
+            fullWidth
             isInvalid={!!error}
             error={error?.message}
           >
             <EuiComboBox
               id={groupByRowId}
+              fullWidth
               options={options}
               selectedOptions={selectedOptions}
               onChange={(selected) => field.onChange(selected.map(({ label }) => label))}

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/kind_field.tsx

@@ -41,6 +41,7 @@ export const KindField: React.FC = () => {
           helpText={i18n.translate('xpack.alertingV2.ruleForm.kindHelpText', {
             defaultMessage: 'Choose whether this rule creates monitors or alerts.',
           })}
+          fullWidth
           isInvalid={!!error}
           error={error?.message}
         >

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/lookback_window.tsx

@@ -8,11 +8,13 @@
 import React, { useMemo, useCallback } from 'react';
 import { EuiFlexItem, EuiFormRow, EuiFlexGroup, EuiSelect, EuiFieldNumber } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { getDurationUnitValue, getDurationNumberInItsUnit } from '../../flyout/utils';
-import { getTimeOptions } from '../../flyout/utils';
-
-const INTEGER_REGEX = /^[1-9][0-9]*$/;
-const INVALID_KEYS = ['-', '+', '.', 'e', 'E'];
+import {
+  getDurationUnitValue,
+  getDurationNumberInItsUnit,
+  getTimeOptions,
+  INVALID_NUMBER_KEYS,
+  parsePositiveIntegerInput,
+} from '../utils';
 
 const LOOKBACK_WINDOW_TITLE_PREFIX = i18n.translate(
   'xpack.alertingV2.ruleForm.lookbackWindow.titlePrefix',
@@ -46,9 +48,8 @@ export const LookbackWindow: React.FC<Props> = React.forwardRef<HTMLInputElement
 
     const onIntervalNumberChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
-        const val = e.target.value.trim();
-        if (INTEGER_REGEX.test(val)) {
-          const parsedValue = parseInt(val, 10);
+        const parsedValue = parsePositiveIntegerInput(e.target.value);
+        if (parsedValue != null) {
           onChange(`${parsedValue}${intervalUnit}`);
         }
       },
@@ -63,7 +64,7 @@ export const LookbackWindow: React.FC<Props> = React.forwardRef<HTMLInputElement
     );
 
     const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (INVALID_KEYS.includes(e.key)) {
+      if (INVALID_NUMBER_KEYS.includes(e.key)) {
         e.preventDefault();
       }
     }, []);

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/lookback_window_field.tsx

@@ -27,6 +27,7 @@ export const LookbackWindowField: React.FC = () => {
           label={i18n.translate('xpack.alertingV2.ruleForm.lookbackWindowLabel', {
             defaultMessage: 'Lookback Window',
           })}
+          fullWidth
           isInvalid={!!error}
           error={error?.message}
         >

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/name_field.tsx

@@ -31,10 +31,11 @@ export const NameField: React.FC = () => {
           label={i18n.translate('xpack.alertingV2.ruleForm.nameLabel', {
             defaultMessage: 'Name',
           })}
+          fullWidth
           isInvalid={!!error}
           error={error?.message}
         >
-          <EuiFieldText {...field} inputRef={ref} isInvalid={!!error} />
+          <EuiFieldText {...field} inputRef={ref} isInvalid={!!error} fullWidth />
         </EuiFormRow>
       )}
     />

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/rule_schedule.tsx

@@ -8,11 +8,13 @@
 import React, { useMemo, useCallback } from 'react';
 import { EuiFlexItem, EuiFormRow, EuiFlexGroup, EuiSelect, EuiFieldNumber } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { getDurationUnitValue, getDurationNumberInItsUnit } from '../../flyout/utils';
-import { getTimeOptions } from '../../flyout/utils';
-
-const INTEGER_REGEX = /^[1-9][0-9]*$/;
-const INVALID_KEYS = ['-', '+', '.', 'e', 'E'];
+import {
+  getDurationUnitValue,
+  getDurationNumberInItsUnit,
+  getTimeOptions,
+  INVALID_NUMBER_KEYS,
+  parsePositiveIntegerInput,
+} from '../utils';
 
 const SCHEDULE_TITLE_PREFIX = i18n.translate('xpack.alertingV2.ruleForm.schedule.titlePrefix', {
   defaultMessage: 'Every',
@@ -40,9 +42,8 @@ export const RuleSchedule: React.FC<Props> = React.forwardRef<HTMLInputElement,
 
     const onIntervalNumberChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
-        const val = e.target.value.trim();
-        if (INTEGER_REGEX.test(val)) {
-          const parsedValue = parseInt(val, 10);
+        const parsedValue = parsePositiveIntegerInput(e.target.value);
+        if (parsedValue != null) {
           onChange(`${parsedValue}${intervalUnit}`);
         }
       },
@@ -57,7 +58,7 @@ export const RuleSchedule: React.FC<Props> = React.forwardRef<HTMLInputElement,
     );
 
     const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (INVALID_KEYS.includes(e.key)) {
+      if (INVALID_NUMBER_KEYS.includes(e.key)) {
         e.preventDefault();
       }
     }, []);

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/schedule_field.tsx

@@ -27,6 +27,7 @@ export const ScheduleField: React.FC = () => {
           label={i18n.translate('xpack.alertingV2.ruleForm.scheduleLabel', {
             defaultMessage: 'Schedule',
           })}
+          fullWidth
           helpText={
             <>
               {i18n.translate('xpack.alertingV2.ruleForm.scheduleHelpText', {