[Alerting v2] - rule form - remove all React.FC

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

@@ -34,12 +34,12 @@ export interface DynamicRuleFormFlyoutProps {
  * the loading state of its footer buttons. The time field is automatically
  * derived from the query's available date fields.
  */
-const DynamicRuleFormFlyoutInner: React.FC<DynamicRuleFormFlyoutProps> = ({
+const DynamicRuleFormFlyoutInner = ({
   push,
   onClose,
   query,
   services,
-}) => {
+}: DynamicRuleFormFlyoutProps) => {
   const { createRule, isLoading } = useCreateRule({
     http: services.http,
     notifications: services.notifications,
@@ -62,7 +62,7 @@ const DynamicRuleFormFlyoutInner: React.FC<DynamicRuleFormFlyoutProps> = ({
   );
 };
 
-export const DynamicRuleFormFlyout: React.FC<DynamicRuleFormFlyoutProps> = (props) => {
+export const DynamicRuleFormFlyout = (props: DynamicRuleFormFlyoutProps) => {
   const queryClient = useMemo(() => new QueryClient(), []);
   return (
     <QueryClientProvider client={queryClient}>

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

@@ -13,11 +13,15 @@ import type { FormValues } from '../form/types';
 import { ErrorCallOut } from './error_callout';
 
 // Wrapper component that provides form context with configurable state
-const TestWrapper: React.FC<{
+const TestWrapper = ({
+  errors = {},
+  isSubmitted = false,
+  children,
+}: {
   errors?: FieldErrors<FormValues>;
   isSubmitted?: boolean;
   children: React.ReactNode;
-}> = ({ errors = {}, isSubmitted = false, children }) => {
+}) => {
   const methods = useForm<FormValues>({
     defaultValues: {
       kind: 'alert',

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

@@ -34,7 +34,7 @@ const extractErrorMessages = (errors: FieldErrors): string[] => {
   return messages;
 };
 
-export const ErrorCallOut: React.FC = () => {
+export const ErrorCallOut = () => {
   const {
     formState: { errors, isSubmitted },
   } = useFormContext<FormValues>();

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

@@ -34,21 +34,21 @@ const LazyStandaloneRuleFormFlyout = React.lazy(() =>
 export { LazyDynamicRuleFormFlyout, LazyStandaloneRuleFormFlyout, LazyRuleFormFlyout };
 
 /** Base flyout wrapper - use with DynamicRuleForm or StandaloneRuleForm as children */
-export const RuleFormFlyout: React.FC<RuleFormFlyoutProps> = (props) => (
+export const RuleFormFlyout = (props: RuleFormFlyoutProps) => (
   <Suspense fallback={<EuiLoadingSpinner size="m" />}>
     <LazyRuleFormFlyout {...props} />
   </Suspense>
 );
 
 /** Pre-composed flyout for Discover integration - syncs with external query changes */
-export const DynamicRuleFormFlyout: React.FC<DynamicRuleFormFlyoutProps> = (props) => (
+export const DynamicRuleFormFlyout = (props: DynamicRuleFormFlyoutProps) => (
   <Suspense fallback={<EuiLoadingSpinner size="m" />}>
     <LazyDynamicRuleFormFlyout {...props} />
   </Suspense>
 );
 
 /** Pre-composed flyout for classic experience - static initialization */
-export const StandaloneRuleFormFlyout: React.FC<StandaloneRuleFormFlyoutProps> = (props) => (
+export const StandaloneRuleFormFlyout = (props: StandaloneRuleFormFlyoutProps) => (
   <Suspense fallback={<EuiLoadingSpinner size="m" />}>
     <LazyStandaloneRuleFormFlyout {...props} />
   </Suspense>

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

@@ -35,12 +35,12 @@ export interface RuleFormFlyoutProps {
  * Use DynamicRuleFormFlyout or StandaloneRuleFormFlyout for pre-composed
  * flyouts that handle form submission and state management.
  */
-export const RuleFormFlyout: React.FC<RuleFormFlyoutProps> = ({
+export const RuleFormFlyout = ({
   push = true,
   onClose,
   isLoading = false,
   children,
-}) => {
+}: RuleFormFlyoutProps) => {
   return (
     <EuiFlyout
       session="start"

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

@@ -34,12 +34,12 @@ export interface StandaloneRuleFormFlyoutProps {
  * the loading state of its footer buttons. Time field is auto-selected by
  * TimeFieldSelect based on available date fields.
  */
-const StandaloneRuleFormFlyoutInner: React.FC<StandaloneRuleFormFlyoutProps> = ({
+const StandaloneRuleFormFlyoutInner = ({
   push,
   onClose,
   query,
   services,
-}) => {
+}: StandaloneRuleFormFlyoutProps) => {
   const { createRule, isLoading } = useCreateRule({
     http: services.http,
     notifications: services.notifications,
@@ -62,7 +62,7 @@ const StandaloneRuleFormFlyoutInner: React.FC<StandaloneRuleFormFlyoutProps> = (
   );
 };
 
-export const StandaloneRuleFormFlyout: React.FC<StandaloneRuleFormFlyoutProps> = (props) => {
+export const StandaloneRuleFormFlyout = (props: StandaloneRuleFormFlyoutProps) => {
   const queryClient = useMemo(() => new QueryClient(), []);
   return (
     <QueryClientProvider client={queryClient}>

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/components/edit_mode_toggle.tsx

@@ -36,7 +36,7 @@ const toggleButtons = [
   },
 ];
 
-export const EditModeToggle: React.FC<EditModeToggleProps> = ({ editMode, onChange, disabled }) => {
+export const EditModeToggle = ({ editMode, onChange, disabled }: EditModeToggleProps) => {
   const handleChange = (optionId: string) => {
     onChange(optionId as EditMode);
   };

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/contexts/rule_form_context.tsx

@@ -40,9 +40,11 @@ const RuleFormContext = createContext<RuleFormContextValue | undefined>(undefine
  *
  * `meta` defaults to `{ layout: 'page' }` when omitted.
  */
-export const RuleFormProvider: React.FC<
-  PropsWithChildren<{ services: RuleFormServices; meta?: RuleFormMeta }>
-> = ({ children, services, meta = DEFAULT_META }) => {
+export const RuleFormProvider = ({
+  children,
+  services,
+  meta = DEFAULT_META,
+}: PropsWithChildren<{ services: RuleFormServices; meta?: RuleFormMeta }>) => {
   const value = useMemo(() => ({ services, meta }), [services, meta]);
   return <RuleFormContext.Provider value={value}>{children}</RuleFormContext.Provider>;
 };

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

@@ -52,7 +52,7 @@ export interface DynamicRuleFormProps {
  * Uses react-hook-form's `values` prop to sync form state on each prop change,
  * with `resetOptions: { keepDirtyValues: true }` to preserve user input.
  */
-export const DynamicRuleForm: React.FC<DynamicRuleFormProps> = ({
+export const DynamicRuleForm = ({
   query,
   services,
   layout,
@@ -65,7 +65,7 @@ export const DynamicRuleForm: React.FC<DynamicRuleFormProps> = ({
   onCancel,
   submitLabel,
   cancelLabel,
-}) => {
+}: DynamicRuleFormProps) => {
   // Get default form values derived from the query
   const formValues = useFormDefaults({ query });
 

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

@@ -32,7 +32,7 @@ import { RecoveryDelayField } from '../fields/recovery_delay_field';
  *     uses RecoveryBaseQueryOnlyField (full ES|QL editor with "not same as eval" validation)
  * - Recovery delay (recovering state transition: immediate / breaches / duration)
  */
-export const AlertConditionsFieldGroup: React.FC = () => {
+export const AlertConditionsFieldGroup = () => {
   const { control } = useFormContext<FormValues>();
   const { data } = useRuleFormServices();
   const kind = useWatch({ control, name: 'kind' });

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

@@ -35,9 +35,7 @@ interface ConditionFieldGroupProps {
  * The base query defines what data is being evaluated, while the
  * condition field defines the threshold or filter that triggers alerts.
  */
-export const ConditionFieldGroup: React.FC<ConditionFieldGroupProps> = ({
-  includeBase = false,
-}) => {
+export const ConditionFieldGroup = ({ includeBase = false }: ConditionFieldGroupProps) => {
   const { control } = useFormContext<FormValues>();
 
   // Read the base query from form state (initialized via useFormDefaults)

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

@@ -13,7 +13,7 @@ interface FieldGroupProps {
   children: React.ReactNode;
 }
 
-export const FieldGroup: React.FC<FieldGroupProps> = ({ title, children }) => {
+export const FieldGroup = ({ title, children }: FieldGroupProps) => {
   return (
     <EuiSplitPanel.Outer hasShadow={false} hasBorder={true}>
       <EuiSplitPanel.Inner color="subdued" paddingSize="s">

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

@@ -9,7 +9,7 @@ import React from 'react';
 import { TagsField } from '../fields/tags_field';
 import { DescriptionField } from '../fields/description_field';
 
-export const RuleDetailsFieldGroup: React.FC = () => {
+export const RuleDetailsFieldGroup = () => {
   return (
     <>
       <TagsField />

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

@@ -11,7 +11,7 @@ import { FieldGroup } from './field_group';
 import { ScheduleField } from '../fields/schedule_field';
 import { LookbackWindowField } from '../fields/lookback_window_field';
 
-export const RuleExecutionFieldGroup: React.FC = () => {
+export const RuleExecutionFieldGroup = () => {
   return (
     <FieldGroup
       title={i18n.translate('xpack.alertingV2.ruleForm.ruleExecution', {

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

@@ -48,7 +48,7 @@ const deriveMode = (stateTransition?: {
   return 'immediate';
 };
 
-export const AlertDelayField: React.FC = () => {
+export const AlertDelayField = () => {
   const { control, setValue } = useFormContext<FormValues>();
   const stateTransition = useWatch({ control, name: 'stateTransition' });
   const [selectedMode, setSelectedMode] = useState<DelayMode>(deriveMode(stateTransition));

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

@@ -13,7 +13,7 @@ import type { FormValues } from '../types';
 
 const DESCRIPTION_ROW_ID = 'ruleV2FormDescriptionField';
 
-export const DescriptionField: React.FC = () => {
+export const DescriptionField = () => {
   const { control, watch } = useFormContext<FormValues>();
   const descriptionValue = watch('metadata.description');
 

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

@@ -11,7 +11,7 @@ import { EuiFormRow, EuiSwitch } from '@elastic/eui';
 import { Controller, useFormContext } from 'react-hook-form';
 import type { FormValues } from '../types';
 
-export const EnabledField: React.FC = () => {
+export const EnabledField = () => {
   const { control } = useFormContext<FormValues>();
 
   return (

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

@@ -78,7 +78,7 @@ export interface EsqlEditorFieldProps {
  * />
  * ```
  */
-export const EsqlEditorField: React.FC<EsqlEditorFieldProps> = ({
+export const EsqlEditorField = ({
   name,
   label,
   labelTooltip,
@@ -91,7 +91,7 @@ export const EsqlEditorField: React.FC<EsqlEditorFieldProps> = ({
   rules,
   errors: serverErrors,
   warning: serverWarning,
-}) => {
+}: EsqlEditorFieldProps) => {
   const { control } = useFormContext<FormValues>();
 
   const labelElement = label ? (

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

@@ -94,7 +94,7 @@ describe('EvaluationQueryField', () => {
   it('shows required error when submitted with empty value', async () => {
     const queryClient = createTestQueryClient();
 
-    const WrapperWithSubmit: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const WrapperWithSubmit = ({ children }: { children: React.ReactNode }) => {
       const form = useForm<FormValues>({
         defaultValues: {
           ...defaultTestFormValues,
@@ -131,7 +131,7 @@ describe('EvaluationQueryField', () => {
   it('shows validation error for invalid ES|QL query syntax', async () => {
     const queryClient = createTestQueryClient();
 
-    const WrapperWithSubmit: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const WrapperWithSubmit = ({ children }: { children: React.ReactNode }) => {
       const form = useForm<FormValues>({
         defaultValues: {
           ...defaultTestFormValues,
@@ -168,7 +168,7 @@ describe('EvaluationQueryField', () => {
   it('shows validation error for incomplete query', async () => {
     const queryClient = createTestQueryClient();
 
-    const WrapperWithSubmit: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const WrapperWithSubmit = ({ children }: { children: React.ReactNode }) => {
       const form = useForm<FormValues>({
         defaultValues: {
           ...defaultTestFormValues,

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

@@ -17,9 +17,9 @@ interface EvaluationQueryFieldProps {
   height?: string | number;
 }
 
-export const EvaluationQueryField: React.FC<EvaluationQueryFieldProps> = ({
+export const EvaluationQueryField = ({
   height = EDITOR_HEIGHT_INLINE,
-}) => {
+}: EvaluationQueryFieldProps) => {
   return (
     <EsqlEditorField
       name="evaluation.query.base"

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

@@ -13,7 +13,7 @@ import type { FormValues } from '../types';
 import { useQueryColumns, type QueryColumn } from '../hooks/use_query_columns';
 import { useRuleFormServices } from '../contexts';
 
-export const GroupFieldSelect: React.FC = () => {
+export const GroupFieldSelect = () => {
   const { data } = useRuleFormServices();
   const { control, setValue, getValues } = useFormContext<FormValues>();
   const query = useWatch({ name: 'evaluation.query.base', control });

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

@@ -13,7 +13,7 @@ import type { FormValues } from '../types';
 
 const CARD_ID = 'ruleV2KindField';
 
-export const KindField: React.FC = () => {
+export const KindField = () => {
   const { control } = useFormContext<FormValues>();
 
   return (

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

@@ -14,7 +14,7 @@ import { LookbackWindow } from './lookback_window';
 
 const LOOKBACK_WINDOW_ROW_ID = 'ruleV2FormLookbackWindowField';
 
-export const LookbackWindowField: React.FC = () => {
+export const LookbackWindowField = () => {
   const { control } = useFormContext<FormValues>();
 
   return (

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

@@ -64,7 +64,7 @@ describe('NameField', () => {
   it('shows required error when submitted with empty value', async () => {
     const queryClient = createTestQueryClient();
 
-    const WrapperWithSubmit: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const WrapperWithSubmit = ({ children }: { children: React.ReactNode }) => {
       const form = useForm<FormValues>({
         defaultValues: defaultTestFormValues,
       });

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

@@ -16,7 +16,7 @@ const DEFAULT_NAME = i18n.translate('xpack.alertingV2.ruleForm.defaultRuleName',
   defaultMessage: 'Untitled rule',
 });
 
-export const NameField: React.FC = () => {
+export const NameField = () => {
   const { control } = useFormContext<FormValues>();
   const { euiTheme } = useEuiTheme();
   const editTitleId = useGeneratedHtmlId({ prefix: 'ruleNameInlineEdit' });

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

@@ -74,7 +74,7 @@ export interface QueryResultsGridProps {
  *
  * Used by both the rule preview and recovery preview components.
  */
-export const QueryResultsGrid: React.FC<QueryResultsGridProps> = ({
+export const QueryResultsGrid = ({
   title,
   dataTestSubj,
   emptyBody,
@@ -88,7 +88,7 @@ export const QueryResultsGrid: React.FC<QueryResultsGridProps> = ({
   groupingFields = [],
   uniqueGroupCount,
   hasValidQuery = false,
-}) => {
+}: QueryResultsGridProps) => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE });
 
   const onChangeItemsPerPage = useCallback(

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

@@ -46,7 +46,7 @@ jest.mock('./recovery_base_query_field', () => ({
  * Helper to capture the form instance so tests can call getValues() directly.
  */
 let formRef: UseFormReturn<FormValues> | undefined;
-const FormRefCapture: React.FC = () => {
+const FormRefCapture = () => {
   formRef = useFormContext<FormValues>();
   return null;
 };

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

@@ -37,9 +37,9 @@ interface RecoveryBaseAndConditionFieldProps {
  * Validation logic is provided by the `useRecoveryValidation` hook via the
  * `validation` prop. Seeding and field management are handled locally.
  */
-export const RecoveryBaseAndConditionField: React.FC<RecoveryBaseAndConditionFieldProps> = ({
+export const RecoveryBaseAndConditionField = ({
   validation,
-}) => {
+}: RecoveryBaseAndConditionFieldProps) => {
   const { getValues, setValue } = useFormContext<FormValues>();
   const {
     recoveryBaseQuery,

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

@@ -35,12 +35,12 @@ interface RecoveryBaseQueryFieldProps {
  * All validation logic (syntax, grouping, differs-from-evaluation) is provided
  * externally via the `rules` and `errors` props from the `useRecoveryValidation` hook.
  */
-export const RecoveryBaseQueryField: React.FC<RecoveryBaseQueryFieldProps> = ({
+export const RecoveryBaseQueryField = ({
   labelTooltip = DEFAULT_TOOLTIP,
   dataTestSubj = 'recoveryQueryField',
   rules,
   errors,
-}) => {
+}: RecoveryBaseQueryFieldProps) => {
   return (
     <EsqlEditorField
       name="recoveryPolicy.query.base"

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

@@ -35,7 +35,7 @@ jest.mock('./recovery_base_query_field', () => ({
  * Helper to capture the form instance so tests can call getValues() directly.
  */
 let formRef: UseFormReturn<FormValues> | undefined;
-const FormRefCapture: React.FC = () => {
+const FormRefCapture = () => {
   formRef = useFormContext<FormValues>();
   return null;
 };