From b41ad688f27048f1aef255269ce5a85f0421446b Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 21 Mar 2024 11:59:41 +0100
Subject: [PATCH] Alerting: Remove deprecated InputControl (#84793)

---
 .../receivers/form/ChannelSubForm.tsx         |  6 ++---
 .../receivers/form/fields/OptionField.tsx     | 12 +++++-----
 .../rule-editor/AnnotationHeaderField.tsx     |  6 ++---
 .../rule-editor/CloudEvaluationBehavior.tsx   |  6 ++---
 .../components/rule-editor/FolderAndGroup.tsx | 20 ++++-------------
 .../rule-editor/GrafanaEvaluationBehavior.tsx | 22 +++++--------------
 .../rule-editor/GroupAndNamespaceFields.tsx   |  8 +++----
 .../components/rule-editor/LabelsField.tsx    | 18 ++++-----------
 .../contactPoint/ContactPointSelector.tsx     |  5 ++---
 .../route-settings/MuteTimingFields.tsx       |  6 ++---
 .../route-settings/RouteSettings.tsx          | 16 +++-----------
 .../CloudDataSourceSelector.tsx               |  6 ++---
 .../QueryAndExpressionsStep.tsx               | 18 +++------------
 .../components/silences/MatchersField.tsx     |  6 ++---
 14 files changed, 49 insertions(+), 106 deletions(-)

diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
index 995b81b3c25..9ea1c7a05de 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
 import { sortBy } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useFormContext, FieldErrors, FieldValues } from 'react-hook-form';
+import { useFormContext, FieldErrors, FieldValues, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Alert, Button, Field, InputControl, Select, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Field, Select, useStyles2 } from '@grafana/ui';
 
 import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
 import { ChannelValues, CommonSettingsComponentType } from '../../../types/receiver-form';
@@ -134,7 +134,7 @@ export function ChannelSubForm<R extends ChannelValues>({
       <div className={styles.topRow}>
         <div>
           <Field label="Integration" htmlFor={contactPointTypeInputId} data-testid={`${pathPrefix}type`}>
-            <InputControl
+            <Controller
               name={fieldName('type')}
               defaultValue={defaultValues.type}
               render={({ field: { ref, onChange, ...field } }) => (
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
index e5058dca9b9..fe7c202cea7 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
 import { isEmpty } from 'lodash';
 import React, { FC, useEffect } from 'react';
-import { useFormContext, FieldError, DeepMap } from 'react-hook-form';
+import { useFormContext, FieldError, DeepMap, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Checkbox, Field, Input, InputControl, RadioButtonList, Select, TextArea, useStyles2 } from '@grafana/ui';
+import { Checkbox, Field, Input, RadioButtonList, Select, TextArea, useStyles2 } from '@grafana/ui';
 import { NotificationChannelOption } from 'app/types';
 
 import { KeyValueMapInput } from './KeyValueMapInput';
@@ -134,7 +134,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
 
     case 'select':
       return (
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <Select
               disabled={readOnly}
@@ -158,7 +158,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
       return (
         <>
           <legend className={styles.legend}>{option.label}</legend>
-          <InputControl
+          <Controller
             render={({ field: { ref, ...field } }) => (
               <RadioButtonList disabled={readOnly} options={option.selectOptions ?? []} {...field} />
             )}
@@ -192,7 +192,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
       );
     case 'string_array':
       return (
-        <InputControl
+        <Controller
           render={({ field: { value, onChange } }) => (
             <StringArrayInput readOnly={readOnly} value={value} onChange={onChange} />
           )}
@@ -202,7 +202,7 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
       );
     case 'key_value_map':
       return (
-        <InputControl
+        <Controller
           render={({ field: { value, onChange } }) => (
             <KeyValueMapInput readOnly={readOnly} value={value} onChange={onChange} />
           )}
diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
index b92f2568f04..a939d86c984 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { FieldArrayWithId, useFormContext } from 'react-hook-form';
+import { FieldArrayWithId, useFormContext, Controller } from 'react-hook-form';
 
-import { InputControl, Text, Stack } from '@grafana/ui';
+import { Text, Stack } from '@grafana/ui';
 
 import { RuleFormValues } from '../../types/rule-form';
 import { Annotation, annotationDescriptions, annotationLabels } from '../../utils/constants';
@@ -25,7 +25,7 @@ const AnnotationHeaderField = ({
     <Stack direction="column" gap={0}>
       <label>
         {
-          <InputControl
+          <Controller
             name={`annotations.${index}.key`}
             defaultValue={annotationField.key}
             render={({ field: { ref, ...field } }) => {
diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
index 467150f24ff..3796b5266d2 100644
--- a/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Field, Input, InputControl, Select, useStyles2 } from '@grafana/ui';
+import { Field, Input, Select, useStyles2 } from '@grafana/ui';
 
 import { RuleFormType, RuleFormValues } from '../../types/rule-form';
 import { timeOptions } from '../../utils/time';
@@ -37,7 +37,7 @@ export const CloudEvaluationBehavior = () => {
               width={8}
             />
           </Field>
-          <InputControl
+          <Controller
             name="forTimeUnit"
             render={({ field: { onChange, ref, ...field } }) => (
               <Select
diff --git a/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx b/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx
index 45771bcbd82..f36ed62992a 100644
--- a/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/FolderAndGroup.tsx
@@ -1,22 +1,10 @@
 import { css } from '@emotion/css';
 import { debounce, take, uniqueId } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+import { FormProvider, useForm, useFormContext, Controller } from 'react-hook-form';
 
 import { AppEvents, GrafanaTheme2, SelectableValue } from '@grafana/data';
-import {
-  AsyncSelect,
-  Box,
-  Button,
-  Field,
-  Input,
-  InputControl,
-  Label,
-  Modal,
-  Stack,
-  Text,
-  useStyles2,
-} from '@grafana/ui';
+import { AsyncSelect, Box, Button, Field, Input, Label, Modal, Stack, Text, useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { contextSrv } from 'app/core/services/context_srv';
 import { createFolder } from 'app/features/manage-dashboards/state/actions';
@@ -160,7 +148,7 @@ export function FolderAndGroup({
             <Stack direction="row" alignItems="center">
               {(!isCreatingFolder && (
                 <>
-                  <InputControl
+                  <Controller
                     render={({ field: { ref, ...field } }) => (
                       <div style={{ width: 420 }}>
                         <RuleFolderPicker
@@ -218,7 +206,7 @@ export function FolderAndGroup({
             error={errors.group?.message}
             invalid={!!errors.group?.message}
           >
-            <InputControl
+            <Controller
               render={({ field: { ref, ...field }, fieldState }) => (
                 <AsyncSelect
                   disabled={!folder || loading}
diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
index 2dfca5f49c6..054bdc8d6a8 100644
--- a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
@@ -1,21 +1,9 @@
 import { css } from '@emotion/css';
 import React, { useCallback, useEffect, useState } from 'react';
-import { RegisterOptions, useFormContext } from 'react-hook-form';
+import { RegisterOptions, useFormContext, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import {
-  Field,
-  Icon,
-  IconButton,
-  Input,
-  InputControl,
-  Label,
-  Stack,
-  Switch,
-  Text,
-  Tooltip,
-  useStyles2,
-} from '@grafana/ui';
+import { Field, Icon, IconButton, Input, Label, Stack, Switch, Text, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { CombinedRuleGroup, CombinedRuleNamespace } from '../../../../../types/unified-alerting';
 import { LogMessages, logInfo } from '../../Analytics';
@@ -250,7 +238,7 @@ export function GrafanaEvaluationBehavior({
 
         {existing && (
           <Field htmlFor="pause-alert-switch">
-            <InputControl
+            <Controller
               render={() => (
                 <Stack gap={1} direction="row" alignItems="center">
                   <Switch
@@ -281,7 +269,7 @@ export function GrafanaEvaluationBehavior({
       {showErrorHandling && (
         <>
           <Field htmlFor="no-data-state-input" label="Alert state if no data or all values are null">
-            <InputControl
+            <Controller
               render={({ field: { onChange, ref, ...field } }) => (
                 <GrafanaAlertStatePicker
                   {...field}
@@ -296,7 +284,7 @@ export function GrafanaEvaluationBehavior({
             />
           </Field>
           <Field htmlFor="exec-err-state-input" label="Alert state if execution error or timeout">
-            <InputControl
+            <Controller
               render={({ field: { onChange, ref, ...field } }) => (
                 <GrafanaAlertStatePicker
                   {...field}
diff --git a/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
index 6c4497b9119..9b4ee949709 100644
--- a/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { useEffect, useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Field, InputControl, useStyles2, VirtualizedSelect } from '@grafana/ui';
+import { Field, useStyles2, VirtualizedSelect } from '@grafana/ui';
 import { useDispatch } from 'app/types';
 
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
@@ -56,7 +56,7 @@ export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
         error={errors.namespace?.message}
         invalid={!!errors.namespace?.message}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <VirtualizedSelect
               {...field}
@@ -81,7 +81,7 @@ export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
         />
       </Field>
       <Field data-testid="group-picker" label="Group" error={errors.group?.message} invalid={!!errors.group?.message}>
-        <InputControl
+        <Controller
           render={({ field: { ref, ...field } }) => (
             <VirtualizedSelect
               {...field}
diff --git a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
index 4f510ed3070..69f14d36315 100644
--- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
@@ -1,19 +1,9 @@
 import { css, cx } from '@emotion/css';
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { useFieldArray, UseFieldArrayAppend, useFormContext } from 'react-hook-form';
+import { useFieldArray, UseFieldArrayAppend, useFormContext, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import {
-  Button,
-  Field,
-  InlineLabel,
-  Input,
-  InputControl,
-  LoadingPlaceholder,
-  Stack,
-  Text,
-  useStyles2,
-} from '@grafana/ui';
+import { Button, Field, InlineLabel, Input, LoadingPlaceholder, Stack, Text, useStyles2 } from '@grafana/ui';
 import { useDispatch } from 'app/types';
 
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
@@ -156,7 +146,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     error={errors.labels?.[index]?.key?.message}
                     data-testid={`label-key-${index}`}
                   >
-                    <InputControl
+                    <Controller
                       name={`labels.${index}.key`}
                       control={control}
                       rules={{ required: Boolean(labels[index]?.value) ? 'Required.' : false }}
@@ -183,7 +173,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     error={errors.labels?.[index]?.value?.message}
                     data-testid={`label-value-${index}`}
                   >
-                    <InputControl
+                    <Controller
                       control={control}
                       name={`labels.${index}.value`}
                       rules={{ required: Boolean(labels[index]?.value) ? 'Required.' : false }}
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
index aeee48bcac5..7914bd495b0 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import React, { useCallback, useEffect, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import {
@@ -8,7 +8,6 @@ import {
   Field,
   FieldValidationMessage,
   IconButton,
-  InputControl,
   Select,
   Stack,
   TextLink,
@@ -79,7 +78,7 @@ export function ContactPointSelector({
     <Stack direction="column">
       <Stack direction="row" alignItems="center">
         <Field label="Contact point" data-testid="contact-point-picker">
-          <InputControl
+          <Controller
             render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
               <>
                 <div className={styles.contactPointsSelector}>
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx
index ddb93051902..d52230f4e94 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 
 import { SelectableValue } from '@grafana/data';
-import { Field, InputControl, MultiSelect, useStyles2 } from '@grafana/ui';
+import { Field, MultiSelect, useStyles2 } from '@grafana/ui';
 import { alertmanagerApi } from 'app/features/alerting/unified/api/alertmanagerApi';
 import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
 import { timeIntervalToString } from 'app/features/alerting/unified/utils/alertmanager';
@@ -29,7 +29,7 @@ export function MuteTimingFields({ alertManager }: MuteTimingFieldsProps) {
       description="Select a mute timing to define when not to send notifications for this alert rule"
       invalid={!!errors.contactPoints?.[alertManager]?.muteTimeIntervals}
     >
-      <InputControl
+      <Controller
         render={({ field: { onChange, ref, ...field } }) => (
           <MultiSelect
             aria-label="Mute timings"
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx
index 900ca46a35c..82861c08d0e 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx
@@ -1,19 +1,9 @@
 import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import {
-  Field,
-  FieldValidationMessage,
-  InlineField,
-  InputControl,
-  MultiSelect,
-  Stack,
-  Switch,
-  Text,
-  useStyles2,
-} from '@grafana/ui';
+import { Field, FieldValidationMessage, InlineField, MultiSelect, Stack, Switch, Text, useStyles2 } from '@grafana/ui';
 import { MultiValueRemove, MultiValueRemoveProps } from '@grafana/ui/src/components/Select/MultiValue';
 import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
 import {
@@ -82,7 +72,7 @@ export const RoutingSettings = ({ alertManager }: RoutingSettingsProps) => {
           invalid={!!errors.contactPoints?.[alertManager]?.groupBy}
           className={styles.optionalContent}
         >
-          <InputControl
+          <Controller
             rules={{
               validate: (value: string[]) => {
                 if (!value || value.length === 0) {
diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx
index 88e4ee494ce..447be8edd9d 100644
--- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/CloudDataSourceSelector.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
-import { Field, InputControl, useStyles2 } from '@grafana/ui';
+import { Field, useStyles2 } from '@grafana/ui';
 
 import { RuleFormType, RuleFormValues } from '../../../types/rule-form';
 import { CloudRulesSourcePicker } from '../CloudRulesSourcePicker';
@@ -33,7 +33,7 @@ export const CloudDataSourceSelector = ({ disabled, onChangeCloudDatasource }: C
             error={errors.dataSourceName?.message}
             invalid={!!errors.dataSourceName?.message}
           >
-            <InputControl
+            <Controller
               render={({ field: { onChange, ref, ...field } }) => (
                 <CloudRulesSourcePicker
                   {...field}
diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
index eebc027a1b0..9a40a1a3d55 100644
--- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
@@ -1,24 +1,12 @@
 import { css } from '@emotion/css';
 import { cloneDeep } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 
 import { getDefaultRelativeTimeRange, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config, getDataSourceSrv } from '@grafana/runtime';
-import {
-  Alert,
-  Button,
-  Dropdown,
-  Field,
-  Icon,
-  InputControl,
-  Menu,
-  MenuItem,
-  Stack,
-  Tooltip,
-  useStyles2,
-} from '@grafana/ui';
+import { Alert, Button, Dropdown, Field, Icon, Menu, MenuItem, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 import { Text } from '@grafana/ui/src/components/Text/Text';
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import { ExpressionDatasourceUID, ExpressionQueryType, expressionTypes } from 'app/features/expressions/types';
@@ -414,7 +402,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
       {isCloudAlertRuleType && dataSourceName && (
         <Stack direction="column">
           <Field error={errors.expression?.message} invalid={!!errors.expression?.message}>
-            <InputControl
+            <Controller
               name="expression"
               render={({ field: { ref, ...field } }) => {
                 return (
diff --git a/public/app/features/alerting/unified/components/silences/MatchersField.tsx b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
index 2400274d5c8..fa2b82a5b94 100644
--- a/public/app/features/alerting/unified/components/silences/MatchersField.tsx
+++ b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
@@ -1,9 +1,9 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
-import { useFormContext, useFieldArray } from 'react-hook-form';
+import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, Field, Input, IconButton, InputControl, useStyles2, Select } from '@grafana/ui';
+import { Button, Field, Input, IconButton, useStyles2, Select } from '@grafana/ui';
 import { MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
 
 import { SilenceFormFields } from '../../types/silence-form';
@@ -46,7 +46,7 @@ const MatchersField = ({ className }: Props) => {
                     />
                   </Field>
                   <Field label={'Operator'}>
-                    <InputControl
+                    <Controller
                       control={control}
                       render={({ field: { onChange, ref, ...field } }) => (
                         <Select