From 140f74542f12bb721e00da2a7ac51f1791f8951e Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 30 Nov 2023 08:32:08 +0200
Subject: [PATCH 01/18] Update RHF to latest

---
 package.json                     |  2 +-
 packages/grafana-ui/package.json |  2 +-
 yarn.lock                        | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index ad528dbd3c72..1d388f2c775f 100644
--- a/package.json
+++ b/package.json
@@ -374,7 +374,7 @@
     "react-dropzone": "^14.2.3",
     "react-grid-layout": "1.4.2",
     "react-highlight-words": "0.20.0",
-    "react-hook-form": "7.5.3",
+    "react-hook-form": "^7.48.2",
     "react-i18next": "^12.0.0",
     "react-inlinesvg": "3.0.2",
     "react-loading-skeleton": "3.3.1",
diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index acfb1f294e66..cd58d1c2e53b 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -91,7 +91,7 @@
     "react-custom-scrollbars-2": "4.5.0",
     "react-dropzone": "14.2.3",
     "react-highlight-words": "0.20.0",
-    "react-hook-form": "7.5.3",
+    "react-hook-form": "^7.48.2",
     "react-i18next": "^12.0.0",
     "react-inlinesvg": "3.0.2",
     "react-loading-skeleton": "3.3.1",
diff --git a/yarn.lock b/yarn.lock
index 59d7a6b1e1e2..bb7a8da32bdf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3461,7 +3461,7 @@ __metadata:
     react-dom: "npm:18.2.0"
     react-dropzone: "npm:14.2.3"
     react-highlight-words: "npm:0.20.0"
-    react-hook-form: "npm:7.5.3"
+    react-hook-form: "npm:^7.48.2"
     react-i18next: "npm:^12.0.0"
     react-inlinesvg: "npm:3.0.2"
     react-loading-skeleton: "npm:3.3.1"
@@ -17555,7 +17555,7 @@ __metadata:
     react-dropzone: "npm:^14.2.3"
     react-grid-layout: "npm:1.4.2"
     react-highlight-words: "npm:0.20.0"
-    react-hook-form: "npm:7.5.3"
+    react-hook-form: "npm:^7.48.2"
     react-i18next: "npm:^12.0.0"
     react-inlinesvg: "npm:3.0.2"
     react-loading-skeleton: "npm:3.3.1"
@@ -25543,12 +25543,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hook-form@npm:7.5.3":
-  version: 7.5.3
-  resolution: "react-hook-form@npm:7.5.3"
+"react-hook-form@npm:^7.48.2":
+  version: 7.48.2
+  resolution: "react-hook-form@npm:7.48.2"
   peerDependencies:
-    react: ^16.8.0 || ^17
-  checksum: ee359714c538ee8f328e147732aba629269849e159a88f96662c2e2d8ca175a6015e5364304bb8bada0249de0c335bafa64835abe09b5db895b702bce9159912
+    react: ^16.8.0 || ^17 || ^18
+  checksum: 6cb494f359675e78c14c49a33d1c568df1a03db4c750eab18d6554e622fd64e04195c57efa138db03f8988587d132c57d2a7f5f3dd9157be996cc9acd4362170
   languageName: node
   linkType: hard
 

From efe0276636e008475412ea50b1f7d495d4b060af Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 30 Nov 2023 08:39:02 +0200
Subject: [PATCH 02/18] Update Form types

---
 packages/grafana-ui/src/components/Forms/Form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx
index d0362bd0824a..468ad8266e85 100644
--- a/packages/grafana-ui/src/components/Forms/Form.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import React, { HTMLProps, useEffect } from 'react';
-import { useForm, Mode, DeepPartial, UnpackNestedValue, SubmitHandler, FieldValues } from 'react-hook-form';
+import { useForm, Mode, DefaultValues, SubmitHandler, FieldValues } from 'react-hook-form';
 
 import { FormAPI } from '../../types';
 
@@ -8,7 +8,7 @@ interface FormProps<T extends FieldValues> extends Omit<HTMLProps<HTMLFormElemen
   validateOn?: Mode;
   validateOnMount?: boolean;
   validateFieldsOnMount?: string | string[];
-  defaultValues?: UnpackNestedValue<DeepPartial<T>>;
+  defaultValues?: DefaultValues<T>;
   onSubmit: SubmitHandler<T>;
   children: (api: FormAPI<T>) => React.ReactNode;
   /** Sets max-width for container. Use it instead of setting individual widths on inputs.*/

From 6cf9191ba9c8d3e53963820c91c7f57a1c7d5e5e Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 30 Nov 2023 09:42:11 +0200
Subject: [PATCH 03/18] Fix alerting types

---
 .../alerting/components/NotificationChannelOptions.tsx |  2 +-
 .../components/mute-timings/MuteTimingTimeInterval.tsx | 10 +++++++---
 .../EditNotificationPolicyForm.tsx                     |  2 +-
 .../unified/components/receivers/TemplateForm.tsx      |  2 +-
 .../components/receivers/form/ChannelSubForm.tsx       |  3 ++-
 .../unified/components/receivers/form/ReceiverForm.tsx |  2 +-
 .../unified/components/rule-editor/LabelsField.tsx     |  9 +++------
 .../rule-editor/alert-rule-form/AlertRuleForm.tsx      |  4 ++--
 .../features/alerting/unified/types/receiver-form.ts   |  2 +-
 public/app/features/alerting/unified/utils/amroutes.ts |  8 ++++----
 10 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/public/app/features/alerting/components/NotificationChannelOptions.tsx b/public/app/features/alerting/components/NotificationChannelOptions.tsx
index c94fd9948934..80bd740fdcf9 100644
--- a/public/app/features/alerting/components/NotificationChannelOptions.tsx
+++ b/public/app/features/alerting/components/NotificationChannelOptions.tsx
@@ -58,7 +58,7 @@ export const NotificationChannelOptions = ({
             label={option.label}
             description={option.description}
             invalid={errors.settings && !!errors.settings[option.propertyName]}
-            error={errors.settings && errors.settings[option.propertyName]?.message}
+            error={errors.settings && String(errors.settings[option.propertyName]?.message || '')}
           >
             {secureFields && secureFields[option.propertyName] ? (
               <Input
diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx
index 2c16184e6de5..831d7ebce7aa 100644
--- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx
+++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx
@@ -14,12 +14,12 @@ import { TimezoneSelect } from './timezones';
 
 export const MuteTimingTimeInterval = () => {
   const styles = useStyles2(getStyles);
-  const { formState, register, setValue } = useFormContext();
+  const { formState, register, setValue } = useFormContext<MuteTimingFields>();
   const {
     fields: timeIntervals,
     append: addTimeInterval,
     remove: removeTimeInterval,
-  } = useFieldArray<MuteTimingFields>({
+  } = useFieldArray({
     name: 'time_intervals',
   });
 
@@ -43,7 +43,11 @@ export const MuteTimingTimeInterval = () => {
             return (
               <div key={timeInterval.id} className={styles.timeIntervalSection}>
                 <MuteTimingTimeRange intervalIndex={timeIntervalIndex} />
-                <Field label="Location" invalid={Boolean(errors.location)} error={errors.location?.message}>
+                <Field
+                  label="Location"
+                  invalid={Boolean(errors.time_intervals?.[timeIntervalIndex]?.location)}
+                  error={errors.time_intervals?.[timeIntervalIndex]?.location?.message}
+                >
                   <TimezoneSelect
                     prefix={<Icon name="map-marker" />}
                     width={50}
diff --git a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
index a18c85dcd917..10754b55457d 100644
--- a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
@@ -257,7 +257,7 @@ export const AmRoutesExpandedForm = ({
               >
                 <PromDurationInput
                   {...register('repeatIntervalValue', {
-                    validate: (value: string) => {
+                    validate: (value = '') => {
                       const groupInterval = getValues('groupIntervalValue');
                       return repeatIntervalValidator(value, groupInterval);
                     },
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index c8001c7dae57..e5319d49b40b 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -147,7 +147,7 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
     watch,
   } = formApi;
 
-  const validateNameIsUnique: Validate<string> = (name: string) => {
+  const validateNameIsUnique: Validate<string, TemplateFormValues> = (name: string) => {
     return !config.template_files[name] || existing?.name === name
       ? true
       : 'Another template with this name already exists.';
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 8fd3f9056a16..995b81b3c253 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
@@ -69,7 +69,8 @@ export function ChannelSubForm<R extends ChannelValues>({
   // Prevent forgetting about initial values when switching the integration type and the oncall integration type
   useEffect(() => {
     // Restore values when switching back from a changed integration to the default one
-    const subscription = watch((_, { name, type, value }) => {
+    const subscription = watch((v, { name, type }) => {
+      const value = name ? v[name] : '';
       if (initialValues && name === fieldName('type') && value === initialValues.type && type === 'change') {
         setValue(fieldName('settings'), initialValues.settings);
       }
diff --git a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
index 48ccc6e5bc2d..50621e5c619b 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
@@ -83,7 +83,7 @@ export function ReceiverForm<R extends ChannelValues>({
 
   const { fields, append, remove } = useControlledFieldArray<R>({ name: 'items', formAPI, softDelete: true });
 
-  const validateNameIsAvailable: Validate<string> = useCallback(
+  const validateNameIsAvailable: Validate<string, ReceiverFormValues<R>> = useCallback(
     (name: string) =>
       takenReceiverNames.map((name) => name.trim().toLowerCase()).includes(name.trim().toLowerCase())
         ? 'Another receiver with this name already exists.'
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 49e01b94660a..a6c7c92f1f45 100644
--- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { FieldArrayMethodProps, useFieldArray, useFormContext } from 'react-hook-form';
+import { useFieldArray, UseFieldArrayAppend, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Button, Field, InlineLabel, Input, LoadingPlaceholder, Stack, Text, useStyles2 } from '@grafana/ui';
@@ -85,10 +85,7 @@ const RemoveButton: FC<{
 );
 
 const AddButton: FC<{
-  append: (
-    value: Partial<{ key: string; value: string }> | Array<Partial<{ key: string; value: string }>>,
-    options?: FieldArrayMethodProps | undefined
-  ) => void;
+  append: UseFieldArrayAppend<RuleFormValues, 'labels'>;
   className: string;
 }> = ({ append, className }) => (
   <Button
@@ -268,7 +265,7 @@ const LabelsField: FC<Props> = ({ dataSourceName }) => {
             Add labels to your rule to annotate your rules, ease searching, or route to a notification policy.
           </Text>
           <NeedHelpInfo
-            contentText="The dropdown only displays labels that you have previously used for alerts. 
+            contentText="The dropdown only displays labels that you have previously used for alerts.
             Select a label from the options below or type in a new one."
             title="Labels"
           />
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
index 628dac968074..47db55eda10f 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import React, { useEffect, useMemo, useState } from 'react';
-import { DeepMap, FieldError, FormProvider, useForm, UseFormWatch } from 'react-hook-form';
+import { FormProvider, SubmitErrorHandler, useForm, UseFormWatch } from 'react-hook-form';
 import { Link, useParams } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -144,7 +144,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
     }
   };
 
-  const onInvalid = (errors: DeepMap<RuleFormValues, FieldError>): void => {
+  const onInvalid: SubmitErrorHandler<RuleFormValues> = (errors): void => {
     if (!existing) {
       trackNewAlerRuleFormError({
         grafana_version: config.buildInfo.version,
diff --git a/public/app/features/alerting/unified/types/receiver-form.ts b/public/app/features/alerting/unified/types/receiver-form.ts
index f6c48ffae726..d896f03f3f35 100644
--- a/public/app/features/alerting/unified/types/receiver-form.ts
+++ b/public/app/features/alerting/unified/types/receiver-form.ts
@@ -6,7 +6,7 @@ import { CloudNotifierType, NotifierType } from 'app/types';
 import { ControlledField } from '../hooks/useControlledFieldArray';
 
 export interface ChannelValues {
-  __id: string; // used to correllate form values to original DTOs
+  __id: string; // used to correlate form values to original DTOs
   type: string;
   settings: Record<string, any>;
   secureSettings: Record<string, any>;
diff --git a/public/app/features/alerting/unified/utils/amroutes.ts b/public/app/features/alerting/unified/utils/amroutes.ts
index fdbb13b0c8e1..53b6ce968185 100644
--- a/public/app/features/alerting/unified/utils/amroutes.ts
+++ b/public/app/features/alerting/unified/utils/amroutes.ts
@@ -221,8 +221,8 @@ export const mapMultiSelectValueToStrings = (
   return selectableValuesToStrings(selectableValues);
 };
 
-export function promDurationValidator(duration: string) {
-  if (duration.length === 0) {
+export function promDurationValidator(duration?: string) {
+  if (!duration || duration.length === 0) {
     return true;
   }
 
@@ -237,8 +237,8 @@ export const objectMatchersToString = (matchers: ObjectMatcher[]): string[] => {
   });
 };
 
-export const repeatIntervalValidator = (repeatInterval: string, groupInterval: string) => {
-  if (repeatInterval.length === 0) {
+export const repeatIntervalValidator = (repeatInterval: string, groupInterval?: string) => {
+  if (!groupInterval || repeatInterval.length === 0) {
     return true;
   }
 

From 8f51232032dcdd1a543bab810e904e6eb6bcb5e6 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 30 Nov 2023 10:01:15 +0200
Subject: [PATCH 04/18] Fix correlations types

---
 .../Forms/ConfigureCorrelationSourceForm.tsx  |  5 ++-
 .../Forms/ConfigureCorrelationTargetForm.tsx  |  3 +-
 .../Forms/TransformationEditorRow.tsx         | 42 ++++++++++---------
 .../correlations/components/Wizard/types.ts   |  4 +-
 public/app/features/correlations/types.ts     |  4 +-
 .../CorrelationTransformationAddModal.tsx     |  4 +-
 6 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
index 4fad48a23108..ebadc6d38fd3 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
@@ -12,6 +12,7 @@ import { getVariableUsageInfo } from '../../explore/utils/links';
 
 import { TransformationsEditor } from './TransformationsEditor';
 import { useCorrelationsFormContext } from './correlationsFormContext';
+import { FormDTO } from './types';
 import { getInputId } from './utils';
 
 const getStyles = (theme: GrafanaTheme2) => ({
@@ -25,7 +26,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
 });
 
 export const ConfigureCorrelationSourceForm = () => {
-  const { control, formState, register, getValues } = useFormContext();
+  const { control, formState, register, getValues } = useFormContext<FormDTO>();
   const styles = useStyles2(getStyles);
   const withDsUID = (fn: Function) => (ds: DataSourceInstanceSettings) => fn(ds.uid);
 
@@ -83,7 +84,7 @@ export const ConfigureCorrelationSourceForm = () => {
               )}
               htmlFor="source"
               invalid={!!formState.errors.sourceUID}
-              error={formState.errors.sourceUID?.message}
+              error={String(formState.errors.sourceUID?.message || '')}
             >
               <DataSourcePicker
                 onChange={withDsUID(onChange)}
diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx
index 2b5651d1bc38..f8f4c59104f6 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx
@@ -8,9 +8,10 @@ import { DataSourcePicker } from 'app/features/datasources/components/picker/Dat
 
 import { QueryEditorField } from './QueryEditorField';
 import { useCorrelationsFormContext } from './correlationsFormContext';
+import { FormDTO } from './types';
 
 export const ConfigureCorrelationTargetForm = () => {
-  const { control, formState } = useFormContext();
+  const { control, formState } = useFormContext<FormDTO>();
   const withDsUID = (fn: Function) => (ds: DataSourceInstanceSettings) => fn(ds.uid);
   const { correlation } = useCorrelationsFormContext();
   const targetUID: string | undefined = useWatch({ name: 'targetUID' }) || correlation?.targetUID;
diff --git a/public/app/features/correlations/Forms/TransformationEditorRow.tsx b/public/app/features/correlations/Forms/TransformationEditorRow.tsx
index f4e467651d85..d3f82513c920 100644
--- a/public/app/features/correlations/Forms/TransformationEditorRow.tsx
+++ b/public/app/features/correlations/Forms/TransformationEditorRow.tsx
@@ -5,7 +5,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { Field, Icon, IconButton, Input, Label, Select, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
-import { getSupportedTransTypeDetails, getTransformOptions } from './types';
+import { FormDTO, getSupportedTransTypeDetails, getTransformOptions } from './types';
 type Props = {
   index: number;
   value: Record<string, string>;
@@ -23,7 +23,7 @@ const getStyles = () => ({
 
 const TransformationEditorRow = (props: Props) => {
   const { index, value: defaultValue, readOnly, remove } = props;
-  const { control, formState, register, setValue, watch, getValues } = useFormContext();
+  const { control, formState, register, setValue, watch, getValues } = useFormContext<FormDTO>();
 
   const [keptVals, setKeptVals] = useState<{ expression?: string; mapValue?: string }>({});
 
@@ -63,6 +63,7 @@ const TransformationEditorRow = (props: Props) => {
           </Stack>
         }
         invalid={!!formState.errors?.config?.transformations?.[index]?.type}
+        // @ts-expect-error TODO Figure out how to get proper types here
         error={formState.errors?.config?.transformations?.[index]?.type?.message}
         validationMessageHorizontalOverflow={true}
       >
@@ -70,27 +71,30 @@ const TransformationEditorRow = (props: Props) => {
           value={typeValue}
           onChange={(value) => {
             if (!readOnly) {
-              const currentValues = getValues().config.transformations[index];
-              setKeptVals({
-                expression: currentValues.expression,
-                mapValue: currentValues.mapValue,
-              });
+              const currentValues = getValues()?.config?.transformations?.[index];
+              if (currentValues) {
+                setKeptVals({
+                  expression: currentValues.expression,
+                  mapValue: currentValues.mapValue,
+                });
+              }
+              if (value.value) {
+                const newValueDetails = getSupportedTransTypeDetails(value.value);
 
-              const newValueDetails = getSupportedTransTypeDetails(value.value);
+                if (newValueDetails.expressionDetails.show) {
+                  setValue(`config.transformations.${index}.expression`, keptVals?.expression || '');
+                } else {
+                  setValue(`config.transformations.${index}.expression`, '');
+                }
 
-              if (newValueDetails.expressionDetails.show) {
-                setValue(`config.transformations.${index}.expression`, keptVals?.expression || '');
-              } else {
-                setValue(`config.transformations.${index}.expression`, '');
-              }
+                if (newValueDetails.mapValueDetails.show) {
+                  setValue(`config.transformations.${index}.mapValue`, keptVals?.mapValue || '');
+                } else {
+                  setValue(`config.transformations.${index}.mapValue`, '');
+                }
 
-              if (newValueDetails.mapValueDetails.show) {
-                setValue(`config.transformations.${index}.mapValue`, keptVals?.mapValue || '');
-              } else {
-                setValue(`config.transformations.${index}.mapValue`, '');
+                setValue(`config.transformations.${index}.type`, value.value);
               }
-
-              setValue(`config.transformations.${index}.type`, value.value);
             }
           }}
           options={transformOptions}
diff --git a/public/app/features/correlations/components/Wizard/types.ts b/public/app/features/correlations/components/Wizard/types.ts
index 11962faba9c9..eec5094fd2f2 100644
--- a/public/app/features/correlations/components/Wizard/types.ts
+++ b/public/app/features/correlations/components/Wizard/types.ts
@@ -1,11 +1,11 @@
 import { ComponentType } from 'react';
-import { DeepPartial, UnpackNestedValue } from 'react-hook-form';
+import { DefaultValues } from 'react-hook-form';
 
 export type WizardProps<T> = {
   /**
    * Initial values for the form
    */
-  defaultValues?: UnpackNestedValue<DeepPartial<T>>;
+  defaultValues?: DefaultValues<T>;
 
   /**
    * List of steps/pages in the wizard.
diff --git a/public/app/features/correlations/types.ts b/public/app/features/correlations/types.ts
index 1e6ca7f1f6c7..568c3fbb9ff8 100644
--- a/public/app/features/correlations/types.ts
+++ b/public/app/features/correlations/types.ts
@@ -1,4 +1,4 @@
-import { DataLinkTransformationConfig } from '@grafana/data';
+import { DataLink, DataLinkTransformationConfig } from '@grafana/data';
 
 export interface AddCorrelationResponse {
   correlation: Correlation;
@@ -30,7 +30,7 @@ type CorrelationConfigType = 'query';
 
 export interface CorrelationConfig {
   field: string;
-  target: object;
+  target: DataLink;
   type: CorrelationConfigType;
   transformations?: DataLinkTransformationConfig[];
 }
diff --git a/public/app/features/explore/CorrelationTransformationAddModal.tsx b/public/app/features/explore/CorrelationTransformationAddModal.tsx
index 63388852e3e7..4706e1b65fe2 100644
--- a/public/app/features/explore/CorrelationTransformationAddModal.tsx
+++ b/public/app/features/explore/CorrelationTransformationAddModal.tsx
@@ -3,7 +3,7 @@ import React, { useId, useState, useMemo, useEffect } from 'react';
 import Highlighter from 'react-highlight-words';
 import { useForm } from 'react-hook-form';
 
-import { DataLinkTransformationConfig, ScopedVars } from '@grafana/data';
+import { DataLinkTransformationConfig, ScopedVars, SupportedTransformationType } from '@grafana/data';
 import { Button, Field, Icon, Input, InputControl, Label, Modal, Select, Tooltip, Stack } from '@grafana/ui';
 
 import {
@@ -103,7 +103,7 @@ export const CorrelationTransformationAddModal = ({
       setIsExpValid(isExpressionValid);
       const transformationVars = getTransformationVars(
         {
-          type: formValues.type,
+          type: formValues.type || SupportedTransformationType.Regex, // TODO does this default value make sense?
           expression: isExpressionValid ? expression : '',
           mapValue: formValues.mapValue,
         },

From 355d02b0d309f1f8317e874b1ca4056a34d5cba9 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 30 Nov 2023 10:14:09 +0200
Subject: [PATCH 05/18] Update tests

---
 .../mute-timings/MuteTimingTimeRange.tsx           |  2 +-
 .../correlations/CorrelationsPage.test.tsx         | 14 +++++++-------
 .../correlations/Forms/AddCorrelationForm.tsx      |  2 +-
 public/app/features/correlations/utils.test.ts     |  6 +++---
 public/app/features/explore/CorrelationHelper.tsx  |  2 +-
 .../AddToDashboard/AddToDashboardForm.tsx          |  4 ++--
 public/app/features/explore/state/correlations.ts  |  1 +
 .../app/features/storage/CreateNewFolderModal.tsx  |  2 +-
 8 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
index 9ce8a96faaea..89e05f13b779 100644
--- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
+++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
@@ -28,7 +28,7 @@ export const MuteTimingTimeRange = ({ intervalIndex }: Props) => {
   });
 
   const formErrors = formState.errors.time_intervals?.[intervalIndex];
-  const timeRangeInvalid = formErrors?.times?.some((value) => value?.start_time || value?.end_time) ?? false;
+  const timeRangeInvalid = formErrors?.times?.some?.((value) => value?.start_time || value?.end_time) ?? false;
 
   return (
     <div>
diff --git a/public/app/features/correlations/CorrelationsPage.test.tsx b/public/app/features/correlations/CorrelationsPage.test.tsx
index 478b13ee1b77..a079df0252e1 100644
--- a/public/app/features/correlations/CorrelationsPage.test.tsx
+++ b/public/app/features/correlations/CorrelationsPage.test.tsx
@@ -363,7 +363,7 @@ describe('CorrelationsPage', () => {
             provisioned: false,
             config: {
               field: 'line',
-              target: {},
+              target: { title: '', url: '' },
               type: 'query',
               transformations: [
                 { type: SupportedTransformationType.Regex, expression: 'url=http[s]?://(S*)', mapValue: 'path' },
@@ -375,7 +375,7 @@ describe('CorrelationsPage', () => {
             targetUID: 'loki',
             uid: '2',
             label: 'Prometheus to Loki',
-            config: { field: 'label', target: {}, type: 'query' },
+            config: { field: 'label', target: { title: '', url: '' }, type: 'query' },
             provisioned: false,
           },
         ]
@@ -597,7 +597,7 @@ describe('CorrelationsPage', () => {
             provisioned: false,
             config: {
               field: 'line',
-              target: {},
+              target: { title: '', url: '' },
               type: 'query',
               transformations: [
                 { type: SupportedTransformationType.Regex, expression: 'url=http[s]?://(S*)', mapValue: 'path' },
@@ -612,7 +612,7 @@ describe('CorrelationsPage', () => {
             provisioned: false,
             config: {
               field: 'line',
-              target: {},
+              target: { title: '', url: '' },
               type: 'query',
               transformations: [
                 { type: SupportedTransformationType.Regex, expression: 'url=http[s]?://(S*)', mapValue: 'path' },
@@ -624,7 +624,7 @@ describe('CorrelationsPage', () => {
             targetUID: 'loki',
             uid: '3',
             label: 'Prometheus to Loki',
-            config: { field: 'label', target: {}, type: 'query' },
+            config: { field: 'label', target: { title: '', url: '' }, type: 'query' },
             provisioned: false,
           },
           {
@@ -632,7 +632,7 @@ describe('CorrelationsPage', () => {
             targetUID: 'prometheus',
             uid: '4',
             label: 'Prometheus to Prometheus',
-            config: { field: 'label', target: {}, type: 'query' },
+            config: { field: 'label', target: { title: '', url: '' }, type: 'query' },
             provisioned: false,
           },
         ]
@@ -659,7 +659,7 @@ describe('CorrelationsPage', () => {
         provisioned: true,
         config: {
           field: 'line',
-          target: {},
+          target: { title: '', url: '' },
           type: 'query',
           transformations: [{ type: SupportedTransformationType.Regex, expression: '(?:msg)=' }],
         },
diff --git a/public/app/features/correlations/Forms/AddCorrelationForm.tsx b/public/app/features/correlations/Forms/AddCorrelationForm.tsx
index 216647255304..d3ce397803ef 100644
--- a/public/app/features/correlations/Forms/AddCorrelationForm.tsx
+++ b/public/app/features/correlations/Forms/AddCorrelationForm.tsx
@@ -44,7 +44,7 @@ export const AddCorrelationForm = ({ onClose, onCreated }: Props) => {
     }
   }, [error, loading, value, onCreated]);
 
-  const defaultValues: Partial<FormDTO> = { config: { type: 'query', target: {}, field: '' } };
+  const defaultValues: Partial<FormDTO> = { config: { type: 'query', target: { title: '', url: '' }, field: '' } };
 
   return (
     <PanelContainer className={styles.panelContainer}>
diff --git a/public/app/features/correlations/utils.test.ts b/public/app/features/correlations/utils.test.ts
index 8b19bf021642..1cb53e4d0d4c 100644
--- a/public/app/features/correlations/utils.test.ts
+++ b/public/app/features/correlations/utils.test.ts
@@ -111,7 +111,7 @@ function setup() {
       label: 'logs to metrics',
       source: loki,
       target: prometheus,
-      config: { type: 'query', field: 'traceId', target: { expr: 'target Prometheus query' } },
+      config: { type: 'query', field: 'traceId', target: { title: 'target Prometheus query', url: '' } },
       provisioned: false,
     },
     // Test multiple correlations attached to the same field
@@ -120,7 +120,7 @@ function setup() {
       label: 'logs to logs',
       source: loki,
       target: elastic,
-      config: { type: 'query', field: 'traceId', target: { expr: 'target Elastic query' } },
+      config: { type: 'query', field: 'traceId', target: { title: 'target Elastic query', url: '' } },
       provisioned: false,
     },
     {
@@ -128,7 +128,7 @@ function setup() {
       label: 'metrics to logs',
       source: prometheus,
       target: elastic,
-      config: { type: 'query', field: 'value', target: { expr: 'target Elastic query' } },
+      config: { type: 'query', field: 'value', target: { title: 'target Elastic query', url: '' } },
       provisioned: false,
     },
   ];
diff --git a/public/app/features/explore/CorrelationHelper.tsx b/public/app/features/explore/CorrelationHelper.tsx
index 0df3d3d17d7e..95e395306ae4 100644
--- a/public/app/features/explore/CorrelationHelper.tsx
+++ b/public/app/features/explore/CorrelationHelper.tsx
@@ -87,7 +87,7 @@ export const CorrelationHelper = ({ exploreId, correlations }: Props) => {
 
       if (!dirty && (value.label !== defaultLabel || value.description !== '')) {
         dirty = true;
-      } else if (dirty && value.label === defaultLabel && value.description.trim() === '') {
+      } else if (dirty && value.label === defaultLabel && (value.description || '').trim() === '') {
         dirty = false;
       }
       dispatch(
diff --git a/public/app/features/explore/extensions/AddToDashboard/AddToDashboardForm.tsx b/public/app/features/explore/extensions/AddToDashboard/AddToDashboardForm.tsx
index 9ac895b189f7..80f563f12ff9 100644
--- a/public/app/features/explore/extensions/AddToDashboard/AddToDashboardForm.tsx
+++ b/public/app/features/explore/extensions/AddToDashboard/AddToDashboardForm.tsx
@@ -1,6 +1,6 @@
 import { partial } from 'lodash';
 import React, { type ReactElement, useEffect, useState } from 'react';
-import { DeepMap, FieldError, useForm } from 'react-hook-form';
+import { DeepMap, FieldError, FieldErrors, useForm } from 'react-hook-form';
 
 import { locationUtil, SelectableValue } from '@grafana/data';
 import { config, locationService, reportInteraction } from '@grafana/runtime';
@@ -34,7 +34,7 @@ interface SaveToExistingDashboard extends SaveTargetDTO {
 type FormDTO = SaveToNewDashboardDTO | SaveToExistingDashboard;
 
 function assertIsSaveToExistingDashboardError(
-  errors: DeepMap<FormDTO, FieldError>
+  errors: FieldErrors<FormDTO>
 ): asserts errors is DeepMap<SaveToExistingDashboard, FieldError> {
   // the shape of the errors object is always compatible with the type above, but we need to
   // explicitly assert its type so that TS can narrow down FormDTO to SaveToExistingDashboard
diff --git a/public/app/features/explore/state/correlations.ts b/public/app/features/explore/state/correlations.ts
index 3d8de1466fcc..12c26cc687a5 100644
--- a/public/app/features/explore/state/correlations.ts
+++ b/public/app/features/explore/state/correlations.ts
@@ -83,6 +83,7 @@ export function saveCurrentCorrelation(
         description,
         config: {
           field: targetPane.correlationEditorHelperData.resultField,
+          // @ts-expect-error TODO check the type
           target: targetPane.queries[0],
           type: 'query',
           transformations: transformations,
diff --git a/public/app/features/storage/CreateNewFolderModal.tsx b/public/app/features/storage/CreateNewFolderModal.tsx
index 152e7cf55ca5..a4ee74c080a5 100644
--- a/public/app/features/storage/CreateNewFolderModal.tsx
+++ b/public/app/features/storage/CreateNewFolderModal.tsx
@@ -8,7 +8,7 @@ type FormModel = { folderName: string };
 interface Props {
   onSubmit: SubmitHandler<FormModel>;
   onDismiss: () => void;
-  validate: Validate<string>;
+  validate: Validate<string, FormModel>;
 }
 
 const initialFormModel = { folderName: '' };

From 31c3d991639e8b8844b538648ab06fd2a04fa9a5 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 30 Nov 2023 12:39:24 +0200
Subject: [PATCH 06/18] Fix tests

---
 public/app/features/correlations/CorrelationsPage.test.tsx | 4 ++--
 public/app/features/correlations/utils.test.ts             | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/app/features/correlations/CorrelationsPage.test.tsx b/public/app/features/correlations/CorrelationsPage.test.tsx
index a079df0252e1..0c72265d451a 100644
--- a/public/app/features/correlations/CorrelationsPage.test.tsx
+++ b/public/app/features/correlations/CorrelationsPage.test.tsx
@@ -287,7 +287,7 @@ describe('CorrelationsPage', () => {
       await userEvent.click(screen.getByRole('button', { name: /add transformation/i }));
       const typeFilterSelect = screen.getAllByLabelText('Type');
       openMenu(typeFilterSelect[0]);
-      await userEvent.click(screen.getByText('Regular expression'));
+      await userEvent.click(screen.getAllByText('Regular expression')[0]);
       await userEvent.type(screen.getByLabelText(/expression/i), 'test expression');
 
       await userEvent.click(await screen.findByRole('button', { name: /add$/i }));
@@ -554,7 +554,7 @@ describe('CorrelationsPage', () => {
       await userEvent.click(screen.getByRole('button', { name: /add transformation/i }));
       typeFilterSelect = screen.getAllByLabelText('Type');
       openMenu(typeFilterSelect[0]);
-      await userEvent.click(screen.getByText('Regular expression'));
+      await userEvent.click(screen.getAllByText('Regular expression')[1]);
       expressionInput = screen.queryByLabelText(/expression/i);
       expect(expressionInput).toBeInTheDocument();
       expect(expressionInput).toBeEnabled();
diff --git a/public/app/features/correlations/utils.test.ts b/public/app/features/correlations/utils.test.ts
index 1cb53e4d0d4c..50d9966e95ac 100644
--- a/public/app/features/correlations/utils.test.ts
+++ b/public/app/features/correlations/utils.test.ts
@@ -20,7 +20,7 @@ describe('correlations utils', () => {
           datasourceName: prometheus.name,
           query: {
             datasource: { uid: prometheus.uid },
-            expr: 'target Prometheus query',
+            title: 'target Prometheus query',
           },
         },
       },
@@ -31,7 +31,7 @@ describe('correlations utils', () => {
           datasourceName: elastic.name,
           query: {
             datasource: { uid: elastic.uid },
-            expr: 'target Elastic query',
+            title: 'target Elastic query',
           },
         },
       },
@@ -50,7 +50,7 @@ describe('correlations utils', () => {
         datasourceUid: elastic.uid,
         datasourceName: elastic.name,
         query: {
-          expr: 'target Elastic query',
+          title: 'target Elastic query',
         },
       },
     });

From 661178efca0ab10aa62d88d332b382caa6b8db33 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Wed, 13 Dec 2023 14:18:20 +0200
Subject: [PATCH 07/18] Update LabelsField.tsx to use InputControl

---
 package.json                                  |  2 +-
 packages/grafana-ui/package.json              |  2 +-
 .../components/rule-editor/LabelsField.tsx    | 72 ++++++++++++-------
 yarn.lock                                     | 12 ++--
 4 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index bc1d1ba6638b..60ac00c40a0b 100644
--- a/package.json
+++ b/package.json
@@ -375,7 +375,7 @@
     "react-dropzone": "^14.2.3",
     "react-grid-layout": "1.4.2",
     "react-highlight-words": "0.20.0",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.49.2",
     "react-i18next": "^12.0.0",
     "react-inlinesvg": "3.0.2",
     "react-loading-skeleton": "3.3.1",
diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 3992ef348127..efa2a0d328b6 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -91,7 +91,7 @@
     "react-custom-scrollbars-2": "4.5.0",
     "react-dropzone": "14.2.3",
     "react-highlight-words": "0.20.0",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.49.2",
     "react-i18next": "^12.0.0",
     "react-inlinesvg": "3.0.2",
     "react-loading-skeleton": "3.3.1",
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 a6c7c92f1f45..9d52e59597c6 100644
--- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
@@ -3,7 +3,17 @@ import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { useFieldArray, UseFieldArrayAppend, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Button, Field, InlineLabel, Input, LoadingPlaceholder, Stack, Text, useStyles2 } from '@grafana/ui';
+import {
+  Button,
+  Field,
+  InlineLabel,
+  Input,
+  InputControl,
+  LoadingPlaceholder,
+  Stack,
+  Text,
+  useStyles2,
+} from '@grafana/ui';
 import { useDispatch } from 'app/types';
 
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
@@ -104,11 +114,9 @@ const AddButton: FC<{
 const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName }) => {
   const styles = useStyles2(getStyles);
   const {
-    register,
     control,
     watch,
     formState: { errors },
-    setValue,
   } = useFormContext<RuleFormValues>();
 
   const labels = watch('labels');
@@ -148,17 +156,24 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     error={errors.labels?.[index]?.key?.message}
                     data-testid={`label-key-${index}`}
                   >
-                    <AlertLabelDropdown
-                      {...register(`labels.${index}.key`, {
-                        required: { value: Boolean(labels[index]?.value), message: 'Required.' },
-                      })}
-                      defaultValue={field.key ? { label: field.key, value: field.key } : undefined}
-                      options={keys}
-                      onChange={(newValue: SelectableValue) => {
-                        setValue(`labels.${index}.key`, newValue.value);
-                        setSelectedKey(newValue.value);
+                    <InputControl
+                      name={`labels.${index}.key`}
+                      control={control}
+                      rules={{ required: 'Required.' }}
+                      render={({ field: { onChange, ref, ...rest } }) => {
+                        return (
+                          <AlertLabelDropdown
+                            {...rest}
+                            defaultValue={field.key ? { label: field.key, value: field.key } : undefined}
+                            options={keys}
+                            onChange={(newValue: SelectableValue) => {
+                              onChange(newValue.value);
+                              setSelectedKey(newValue.value);
+                            }}
+                            type="key"
+                          />
+                        );
                       }}
-                      type="key"
                     />
                   </Field>
                   <InlineLabel className={styles.equalSign}>=</InlineLabel>
@@ -168,19 +183,26 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     error={errors.labels?.[index]?.value?.message}
                     data-testid={`label-value-${index}`}
                   >
-                    <AlertLabelDropdown
-                      {...register(`labels.${index}.value`, {
-                        required: { value: Boolean(labels[index]?.key), message: 'Required.' },
-                      })}
-                      defaultValue={field.value ? { label: field.value, value: field.value } : undefined}
-                      options={values}
-                      onChange={(newValue: SelectableValue) => {
-                        setValue(`labels.${index}.value`, newValue.value);
-                      }}
-                      onOpenMenu={() => {
-                        setSelectedKey(labels[index].key);
+                    <InputControl
+                      control={control}
+                      name={`labels.${index}.value`}
+                      rules={{ required: 'Required.' }}
+                      render={({ field: { onChange, ref, ...rest } }) => {
+                        return (
+                          <AlertLabelDropdown
+                            {...rest}
+                            defaultValue={field.value ? { label: field.value, value: field.value } : undefined}
+                            options={values}
+                            onChange={(newValue: SelectableValue) => {
+                              onChange(newValue.value);
+                            }}
+                            onOpenMenu={() => {
+                              setSelectedKey(labels[index].key);
+                            }}
+                            type="value"
+                          />
+                        );
                       }}
-                      type="value"
                     />
                   </Field>
 
diff --git a/yarn.lock b/yarn.lock
index e667c22f2f6b..15210d8fc033 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3461,7 +3461,7 @@ __metadata:
     react-dom: "npm:18.2.0"
     react-dropzone: "npm:14.2.3"
     react-highlight-words: "npm:0.20.0"
-    react-hook-form: "npm:^7.48.2"
+    react-hook-form: "npm:^7.49.2"
     react-i18next: "npm:^12.0.0"
     react-inlinesvg: "npm:3.0.2"
     react-loading-skeleton: "npm:3.3.1"
@@ -17574,7 +17574,7 @@ __metadata:
     react-dropzone: "npm:^14.2.3"
     react-grid-layout: "npm:1.4.2"
     react-highlight-words: "npm:0.20.0"
-    react-hook-form: "npm:^7.48.2"
+    react-hook-form: "npm:^7.49.2"
     react-i18next: "npm:^12.0.0"
     react-inlinesvg: "npm:3.0.2"
     react-loading-skeleton: "npm:3.3.1"
@@ -25586,12 +25586,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hook-form@npm:^7.48.2":
-  version: 7.48.2
-  resolution: "react-hook-form@npm:7.48.2"
+"react-hook-form@npm:^7.49.2":
+  version: 7.49.2
+  resolution: "react-hook-form@npm:7.49.2"
   peerDependencies:
     react: ^16.8.0 || ^17 || ^18
-  checksum: 6cb494f359675e78c14c49a33d1c568df1a03db4c750eab18d6554e622fd64e04195c57efa138db03f8988587d132c57d2a7f5f3dd9157be996cc9acd4362170
+  checksum: 7895d65b8458c42d46eb338803bb0fd1aab42fc69ecf80b47846eace9493a10cac5b05c9b744a5f9f1f7969a3e2703fc2118cdab97e49a7798a72d09f106383f
   languageName: node
   linkType: hard
 

From 6c999348fd6fbce5718cf2359ef99e9e380cb52f Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Wed, 13 Dec 2023 15:53:09 +0200
Subject: [PATCH 08/18] Update RuleEditorGrafanaRules.test.tsx

---
 .../alerting/unified/RuleEditorGrafanaRules.test.tsx         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx b/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx
index cc15a0c61d1d..8641995582bf 100644
--- a/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx
@@ -1,5 +1,5 @@
 import { screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
-import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { renderRuleEditor, ui } from 'test/helpers/alertingRuleEditor';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
@@ -149,9 +149,6 @@ describe('RuleEditor grafana managed rules', () => {
     await clickSelectOption(groupInput, 'group1');
     await userEvent.type(ui.inputs.annotationValue(1).get(), 'some description');
 
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
-    await userEvent.click(ui.buttons.addLabel.get(), { pointerEventsCheck: PointerEventsCheckLevel.Never });
-
     await userEvent.type(getLabelInput(ui.inputs.labelKey(0).get()), 'severity{enter}');
     await userEvent.type(getLabelInput(ui.inputs.labelValue(0).get()), 'warn{enter}');
     //8 segons

From c02e314d4a7f0c3bb04f643a2a5d7fdf3f93c733 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Wed, 13 Dec 2023 15:55:05 +0200
Subject: [PATCH 09/18] Update RuleEditorCloudRules.test.tsx

---
 .../features/alerting/unified/RuleEditorCloudRules.test.tsx    | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx b/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx
index 4117406c67db..38259925cb37 100644
--- a/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx
@@ -154,9 +154,6 @@ describe('RuleEditor cloud', () => {
     await user.type(ui.inputs.annotationValue(0).get(), 'some summary');
     await user.type(ui.inputs.annotationValue(1).get(), 'some description');
 
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
-    await user.click(ui.buttons.addLabel.get());
-
     await user.type(getLabelInput(ui.inputs.labelKey(0).get()), 'severity{enter}');
     await user.type(getLabelInput(ui.inputs.labelValue(0).get()), 'warn{enter}');
 

From 7bfd6372f837e1bad50111cc601141104bb7cc97 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Wed, 13 Dec 2023 15:59:59 +0200
Subject: [PATCH 10/18] Only require one label

---
 .../features/alerting/unified/RuleEditorCloudRules.test.tsx  | 3 +++
 .../alerting/unified/RuleEditorGrafanaRules.test.tsx         | 5 ++++-
 .../alerting/unified/components/rule-editor/LabelsField.tsx  | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx b/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx
index 38259925cb37..4117406c67db 100644
--- a/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx
@@ -154,6 +154,9 @@ describe('RuleEditor cloud', () => {
     await user.type(ui.inputs.annotationValue(0).get(), 'some summary');
     await user.type(ui.inputs.annotationValue(1).get(), 'some description');
 
+    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
+    await user.click(ui.buttons.addLabel.get());
+
     await user.type(getLabelInput(ui.inputs.labelKey(0).get()), 'severity{enter}');
     await user.type(getLabelInput(ui.inputs.labelValue(0).get()), 'warn{enter}');
 
diff --git a/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx b/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx
index 8641995582bf..cc15a0c61d1d 100644
--- a/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx
@@ -1,5 +1,5 @@
 import { screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
 import React from 'react';
 import { renderRuleEditor, ui } from 'test/helpers/alertingRuleEditor';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
@@ -149,6 +149,9 @@ describe('RuleEditor grafana managed rules', () => {
     await clickSelectOption(groupInput, 'group1');
     await userEvent.type(ui.inputs.annotationValue(1).get(), 'some description');
 
+    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
+    await userEvent.click(ui.buttons.addLabel.get(), { pointerEventsCheck: PointerEventsCheckLevel.Never });
+
     await userEvent.type(getLabelInput(ui.inputs.labelKey(0).get()), 'severity{enter}');
     await userEvent.type(getLabelInput(ui.inputs.labelValue(0).get()), 'warn{enter}');
     //8 segons
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 9d52e59597c6..1fd3fdf8bdec 100644
--- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
@@ -159,7 +159,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     <InputControl
                       name={`labels.${index}.key`}
                       control={control}
-                      rules={{ required: 'Required.' }}
+                      rules={{ required: index > 0 ? false : 'Required.' }}
                       render={({ field: { onChange, ref, ...rest } }) => {
                         return (
                           <AlertLabelDropdown
@@ -186,7 +186,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     <InputControl
                       control={control}
                       name={`labels.${index}.value`}
-                      rules={{ required: 'Required.' }}
+                      rules={{ required: index > 0 ? false : 'Required.' }}
                       render={({ field: { onChange, ref, ...rest } }) => {
                         return (
                           <AlertLabelDropdown

From 0275fa98c0e3a65339538a93779d6980978321a6 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Wed, 13 Dec 2023 16:04:05 +0200
Subject: [PATCH 11/18] Update RuleEditorRecordingRule.test.tsx

---
 .../alerting/unified/RuleEditorRecordingRule.test.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx b/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx
index 681a84611b1e..aad34d575e4c 100644
--- a/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx
@@ -160,8 +160,8 @@ describe('RuleEditor recording rules', () => {
     // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
     await userEvent.click(ui.buttons.addLabel.get(), { pointerEventsCheck: PointerEventsCheckLevel.Never });
 
-    await userEvent.type(getLabelInput(ui.inputs.labelKey(1).get()), 'team{enter}');
-    await userEvent.type(getLabelInput(ui.inputs.labelValue(1).get()), 'the a-team{enter}');
+    await userEvent.type(getLabelInput(ui.inputs.labelKey(0).get()), 'team{enter}');
+    await userEvent.type(getLabelInput(ui.inputs.labelValue(0).get()), 'the a-team{enter}');
 
     // try to save, find out that recording rule name is invalid
     await userEvent.click(ui.buttons.saveAndExit.get());

From 150f8b2fc610387bcb4b3ab3f97f355c3169a3f1 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Wed, 13 Dec 2023 16:28:50 +0200
Subject: [PATCH 12/18] Fix labels rules

---
 .../alerting/unified/components/rule-editor/LabelsField.tsx   | 4 ++--
 .../serviceaccounts/ServiceAccountCreatePage.test.tsx         | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

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 1fd3fdf8bdec..907e3c4b53e3 100644
--- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
@@ -159,7 +159,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     <InputControl
                       name={`labels.${index}.key`}
                       control={control}
-                      rules={{ required: index > 0 ? false : 'Required.' }}
+                      rules={{ required: Boolean(labels[index]?.value) ? 'Required.' : false }}
                       render={({ field: { onChange, ref, ...rest } }) => {
                         return (
                           <AlertLabelDropdown
@@ -186,7 +186,7 @@ const LabelsWithSuggestions: FC<{ dataSourceName: string }> = ({ dataSourceName
                     <InputControl
                       control={control}
                       name={`labels.${index}.value`}
-                      rules={{ required: index > 0 ? false : 'Required.' }}
+                      rules={{ required: Boolean(labels[index]?.value) ? 'Required.' : false }}
                       render={({ field: { onChange, ref, ...rest } }) => {
                         return (
                           <AlertLabelDropdown
diff --git a/public/app/features/serviceaccounts/ServiceAccountCreatePage.test.tsx b/public/app/features/serviceaccounts/ServiceAccountCreatePage.test.tsx
index 7d53a87ffa2d..11d06b4e2300 100644
--- a/public/app/features/serviceaccounts/ServiceAccountCreatePage.test.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountCreatePage.test.tsx
@@ -39,6 +39,7 @@ jest.mock('app/core/core', () => ({
     hasPermission: () => true,
     hasPermissionInMetadata: () => true,
     user: { orgId: 1 },
+    fetchUserPermissions: () => Promise.resolve(),
   },
 }));
 

From 12b16b464cd0fac7920ffa182b02a8b82a6ba792 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Wed, 13 Dec 2023 17:11:27 +0200
Subject: [PATCH 13/18] Revert

---
 .../alerting/unified/RuleEditorRecordingRule.test.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx b/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx
index aad34d575e4c..681a84611b1e 100644
--- a/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx
@@ -160,8 +160,8 @@ describe('RuleEditor recording rules', () => {
     // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
     await userEvent.click(ui.buttons.addLabel.get(), { pointerEventsCheck: PointerEventsCheckLevel.Never });
 
-    await userEvent.type(getLabelInput(ui.inputs.labelKey(0).get()), 'team{enter}');
-    await userEvent.type(getLabelInput(ui.inputs.labelValue(0).get()), 'the a-team{enter}');
+    await userEvent.type(getLabelInput(ui.inputs.labelKey(1).get()), 'team{enter}');
+    await userEvent.type(getLabelInput(ui.inputs.labelValue(1).get()), 'the a-team{enter}');
 
     // try to save, find out that recording rule name is invalid
     await userEvent.click(ui.buttons.saveAndExit.get());

From 0a535302b9d64c35e9cdec1a60ed8d12bb674fe0 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 14 Dec 2023 08:06:40 +0200
Subject: [PATCH 14/18] Remove RHF from ignore rules

---
 .github/renovate.json5 | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 331453813b3c..d591f2a357b2 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -7,7 +7,6 @@
     "history", // we should bump this together with react-router-dom (see https://github.com/grafana/grafana/issues/76744)
     "react-router-dom", // we should bump this together with history (see https://github.com/grafana/grafana/issues/76744)
     "monaco-editor", // due to us exposing this via @grafana/ui/CodeEditor's props bumping can break plugins
-    "react-hook-form", // due to us exposing these hooks via @grafana/ui form components bumping can break plugins
   ],
   "includePaths": ["package.json", "packages/**", "public/app/plugins/**"],
   "ignorePaths": ["emails/**", "plugins-bundled/**", "**/mocks/**", "packages/grafana-e2e/**"],

From f04a2563bc02050ce2a9a1c88ca42737a21500f9 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Thu, 14 Dec 2023 08:52:35 +0200
Subject: [PATCH 15/18] Revert

---
 .github/renovate.json5 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/renovate.json5 b/.github/renovate.json5
index d591f2a357b2..331453813b3c 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -7,6 +7,7 @@
     "history", // we should bump this together with react-router-dom (see https://github.com/grafana/grafana/issues/76744)
     "react-router-dom", // we should bump this together with history (see https://github.com/grafana/grafana/issues/76744)
     "monaco-editor", // due to us exposing this via @grafana/ui/CodeEditor's props bumping can break plugins
+    "react-hook-form", // due to us exposing these hooks via @grafana/ui form components bumping can break plugins
   ],
   "includePaths": ["package.json", "packages/**", "public/app/plugins/**"],
   "ignorePaths": ["emails/**", "plugins-bundled/**", "**/mocks/**", "packages/grafana-e2e/**"],

From f24bf2fd4ffb221ae1c46c1c3d604c153cebe86b Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Wed, 20 Dec 2023 17:59:47 +0100
Subject: [PATCH 16/18] update form validation for overriding group timings

---
 public/app/features/alerting/unified/utils/amroutes.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/utils/amroutes.ts b/public/app/features/alerting/unified/utils/amroutes.ts
index 53b6ce968185..8c29cceafeac 100644
--- a/public/app/features/alerting/unified/utils/amroutes.ts
+++ b/public/app/features/alerting/unified/utils/amroutes.ts
@@ -237,8 +237,8 @@ export const objectMatchersToString = (matchers: ObjectMatcher[]): string[] => {
   });
 };
 
-export const repeatIntervalValidator = (repeatInterval: string, groupInterval?: string) => {
-  if (!groupInterval || repeatInterval.length === 0) {
+export const repeatIntervalValidator = (repeatInterval: string, groupInterval = '') => {
+  if (repeatInterval.length === 0) {
     return true;
   }
 

From 56f7433395d9eb714c91d80ca26de11600283642 Mon Sep 17 00:00:00 2001
From: Kristina Durivage <kristina.durivage@grafana.com>
Date: Wed, 20 Dec 2023 13:37:40 -0600
Subject: [PATCH 17/18] Fix changes to correlations

---
 .../correlations/CorrelationsPage.test.tsx    | 21 ++++++++-------
 .../correlations/Forms/AddCorrelationForm.tsx |  2 +-
 .../Forms/ConfigureCorrelationSourceForm.tsx  |  2 +-
 .../Forms/TransformationEditorRow.tsx         |  3 +--
 public/app/features/correlations/types.ts     |  4 +--
 .../app/features/correlations/utils.test.ts   | 12 ++++-----
 .../features/explore/CorrelationHelper.tsx    |  6 ++---
 .../CorrelationTransformationAddModal.tsx     | 27 ++++++++++---------
 .../features/explore/state/correlations.ts    |  1 -
 public/app/features/explore/utils/links.ts    |  4 +--
 10 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/public/app/features/correlations/CorrelationsPage.test.tsx b/public/app/features/correlations/CorrelationsPage.test.tsx
index 0c72265d451a..108d6502849b 100644
--- a/public/app/features/correlations/CorrelationsPage.test.tsx
+++ b/public/app/features/correlations/CorrelationsPage.test.tsx
@@ -287,7 +287,7 @@ describe('CorrelationsPage', () => {
       await userEvent.click(screen.getByRole('button', { name: /add transformation/i }));
       const typeFilterSelect = screen.getAllByLabelText('Type');
       openMenu(typeFilterSelect[0]);
-      await userEvent.click(screen.getAllByText('Regular expression')[0]);
+      await userEvent.click(screen.getByText('Regular expression'));
       await userEvent.type(screen.getByLabelText(/expression/i), 'test expression');
 
       await userEvent.click(await screen.findByRole('button', { name: /add$/i }));
@@ -363,7 +363,7 @@ describe('CorrelationsPage', () => {
             provisioned: false,
             config: {
               field: 'line',
-              target: { title: '', url: '' },
+              target: {},
               type: 'query',
               transformations: [
                 { type: SupportedTransformationType.Regex, expression: 'url=http[s]?://(S*)', mapValue: 'path' },
@@ -375,7 +375,7 @@ describe('CorrelationsPage', () => {
             targetUID: 'loki',
             uid: '2',
             label: 'Prometheus to Loki',
-            config: { field: 'label', target: { title: '', url: '' }, type: 'query' },
+            config: { field: 'label', target: {}, type: 'query' },
             provisioned: false,
           },
         ]
@@ -538,7 +538,7 @@ describe('CorrelationsPage', () => {
 
       // select Regex, be sure expression field is not disabled and contains the former expression
       openMenu(typeFilterSelect[0]);
-      await userEvent.click(screen.getByText('Regular expression', { selector: 'span' }));
+      await userEvent.click(screen.getByText('Regular expression'));
       expressionInput = screen.queryByLabelText(/expression/i);
       expect(expressionInput).toBeInTheDocument();
       expect(expressionInput).toBeEnabled();
@@ -554,7 +554,8 @@ describe('CorrelationsPage', () => {
       await userEvent.click(screen.getByRole('button', { name: /add transformation/i }));
       typeFilterSelect = screen.getAllByLabelText('Type');
       openMenu(typeFilterSelect[0]);
-      await userEvent.click(screen.getAllByText('Regular expression')[1]);
+      const menu = await screen.findByLabelText('Select options menu');
+      await userEvent.click(within(menu).getByText('Regular expression'));
       expressionInput = screen.queryByLabelText(/expression/i);
       expect(expressionInput).toBeInTheDocument();
       expect(expressionInput).toBeEnabled();
@@ -597,7 +598,7 @@ describe('CorrelationsPage', () => {
             provisioned: false,
             config: {
               field: 'line',
-              target: { title: '', url: '' },
+              target: {},
               type: 'query',
               transformations: [
                 { type: SupportedTransformationType.Regex, expression: 'url=http[s]?://(S*)', mapValue: 'path' },
@@ -612,7 +613,7 @@ describe('CorrelationsPage', () => {
             provisioned: false,
             config: {
               field: 'line',
-              target: { title: '', url: '' },
+              target: {},
               type: 'query',
               transformations: [
                 { type: SupportedTransformationType.Regex, expression: 'url=http[s]?://(S*)', mapValue: 'path' },
@@ -624,7 +625,7 @@ describe('CorrelationsPage', () => {
             targetUID: 'loki',
             uid: '3',
             label: 'Prometheus to Loki',
-            config: { field: 'label', target: { title: '', url: '' }, type: 'query' },
+            config: { field: 'label', target: {}, type: 'query' },
             provisioned: false,
           },
           {
@@ -632,7 +633,7 @@ describe('CorrelationsPage', () => {
             targetUID: 'prometheus',
             uid: '4',
             label: 'Prometheus to Prometheus',
-            config: { field: 'label', target: { title: '', url: '' }, type: 'query' },
+            config: { field: 'label', target: {}, type: 'query' },
             provisioned: false,
           },
         ]
@@ -659,7 +660,7 @@ describe('CorrelationsPage', () => {
         provisioned: true,
         config: {
           field: 'line',
-          target: { title: '', url: '' },
+          target: {},
           type: 'query',
           transformations: [{ type: SupportedTransformationType.Regex, expression: '(?:msg)=' }],
         },
diff --git a/public/app/features/correlations/Forms/AddCorrelationForm.tsx b/public/app/features/correlations/Forms/AddCorrelationForm.tsx
index d3ce397803ef..216647255304 100644
--- a/public/app/features/correlations/Forms/AddCorrelationForm.tsx
+++ b/public/app/features/correlations/Forms/AddCorrelationForm.tsx
@@ -44,7 +44,7 @@ export const AddCorrelationForm = ({ onClose, onCreated }: Props) => {
     }
   }, [error, loading, value, onCreated]);
 
-  const defaultValues: Partial<FormDTO> = { config: { type: 'query', target: { title: '', url: '' }, field: '' } };
+  const defaultValues: Partial<FormDTO> = { config: { type: 'query', target: {}, field: '' } };
 
   return (
     <PanelContainer className={styles.panelContainer}>
diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
index ebadc6d38fd3..f62050a18743 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
@@ -84,7 +84,7 @@ export const ConfigureCorrelationSourceForm = () => {
               )}
               htmlFor="source"
               invalid={!!formState.errors.sourceUID}
-              error={String(formState.errors.sourceUID?.message || '')}
+              error={formState.errors.sourceUID?.message}
             >
               <DataSourcePicker
                 onChange={withDsUID(onChange)}
diff --git a/public/app/features/correlations/Forms/TransformationEditorRow.tsx b/public/app/features/correlations/Forms/TransformationEditorRow.tsx
index d3f82513c920..8c549c8709f7 100644
--- a/public/app/features/correlations/Forms/TransformationEditorRow.tsx
+++ b/public/app/features/correlations/Forms/TransformationEditorRow.tsx
@@ -63,8 +63,7 @@ const TransformationEditorRow = (props: Props) => {
           </Stack>
         }
         invalid={!!formState.errors?.config?.transformations?.[index]?.type}
-        // @ts-expect-error TODO Figure out how to get proper types here
-        error={formState.errors?.config?.transformations?.[index]?.type?.message}
+        error={formState.errors?.config?.transformations?.[index]?.message}
         validationMessageHorizontalOverflow={true}
       >
         <Select
diff --git a/public/app/features/correlations/types.ts b/public/app/features/correlations/types.ts
index 126fda01d281..061f94204496 100644
--- a/public/app/features/correlations/types.ts
+++ b/public/app/features/correlations/types.ts
@@ -1,4 +1,4 @@
-import { DataLink, DataLinkTransformationConfig } from '@grafana/data';
+import { DataLinkTransformationConfig } from '@grafana/data';
 
 export interface AddCorrelationResponse {
   correlation: Correlation;
@@ -30,7 +30,7 @@ type CorrelationConfigType = 'query';
 
 export interface CorrelationConfig {
   field: string;
-  target: DataLink;
+  target: object; // this contains anything that would go in the query editor, so any extension off DataQuery a datasource would have, and needs to be generic
   type: CorrelationConfigType;
   transformations?: DataLinkTransformationConfig[];
 }
diff --git a/public/app/features/correlations/utils.test.ts b/public/app/features/correlations/utils.test.ts
index 50d9966e95ac..8b19bf021642 100644
--- a/public/app/features/correlations/utils.test.ts
+++ b/public/app/features/correlations/utils.test.ts
@@ -20,7 +20,7 @@ describe('correlations utils', () => {
           datasourceName: prometheus.name,
           query: {
             datasource: { uid: prometheus.uid },
-            title: 'target Prometheus query',
+            expr: 'target Prometheus query',
           },
         },
       },
@@ -31,7 +31,7 @@ describe('correlations utils', () => {
           datasourceName: elastic.name,
           query: {
             datasource: { uid: elastic.uid },
-            title: 'target Elastic query',
+            expr: 'target Elastic query',
           },
         },
       },
@@ -50,7 +50,7 @@ describe('correlations utils', () => {
         datasourceUid: elastic.uid,
         datasourceName: elastic.name,
         query: {
-          title: 'target Elastic query',
+          expr: 'target Elastic query',
         },
       },
     });
@@ -111,7 +111,7 @@ function setup() {
       label: 'logs to metrics',
       source: loki,
       target: prometheus,
-      config: { type: 'query', field: 'traceId', target: { title: 'target Prometheus query', url: '' } },
+      config: { type: 'query', field: 'traceId', target: { expr: 'target Prometheus query' } },
       provisioned: false,
     },
     // Test multiple correlations attached to the same field
@@ -120,7 +120,7 @@ function setup() {
       label: 'logs to logs',
       source: loki,
       target: elastic,
-      config: { type: 'query', field: 'traceId', target: { title: 'target Elastic query', url: '' } },
+      config: { type: 'query', field: 'traceId', target: { expr: 'target Elastic query' } },
       provisioned: false,
     },
     {
@@ -128,7 +128,7 @@ function setup() {
       label: 'metrics to logs',
       source: prometheus,
       target: elastic,
-      config: { type: 'query', field: 'value', target: { title: 'target Elastic query', url: '' } },
+      config: { type: 'query', field: 'value', target: { expr: 'target Elastic query' } },
       provisioned: false,
     },
   ];
diff --git a/public/app/features/explore/CorrelationHelper.tsx b/public/app/features/explore/CorrelationHelper.tsx
index 95e395306ae4..c352410ddb59 100644
--- a/public/app/features/explore/CorrelationHelper.tsx
+++ b/public/app/features/explore/CorrelationHelper.tsx
@@ -84,10 +84,10 @@ export const CorrelationHelper = ({ exploreId, correlations }: Props) => {
   useEffect(() => {
     const subscription = watch((value) => {
       let dirty = correlationDetails?.correlationDirty || false;
-
-      if (!dirty && (value.label !== defaultLabel || value.description !== '')) {
+      let description = value.description || '';
+      if (!dirty && (value.label !== defaultLabel || description !== '')) {
         dirty = true;
-      } else if (dirty && value.label === defaultLabel && (value.description || '').trim() === '') {
+      } else if (dirty && value.label === defaultLabel && description.trim() === '') {
         dirty = false;
       }
       dispatch(
diff --git a/public/app/features/explore/CorrelationTransformationAddModal.tsx b/public/app/features/explore/CorrelationTransformationAddModal.tsx
index 4706e1b65fe2..94159958d2b7 100644
--- a/public/app/features/explore/CorrelationTransformationAddModal.tsx
+++ b/public/app/features/explore/CorrelationTransformationAddModal.tsx
@@ -3,7 +3,7 @@ import React, { useId, useState, useMemo, useEffect } from 'react';
 import Highlighter from 'react-highlight-words';
 import { useForm } from 'react-hook-form';
 
-import { DataLinkTransformationConfig, ScopedVars, SupportedTransformationType } from '@grafana/data';
+import { DataLinkTransformationConfig, ScopedVars } from '@grafana/data';
 import { Button, Field, Icon, Input, InputControl, Label, Modal, Select, Tooltip, Stack } from '@grafana/ui';
 
 import {
@@ -101,18 +101,21 @@ export const CorrelationTransformationAddModal = ({
         isExpressionValid = !formFieldsVis.expressionDetails.show;
       }
       setIsExpValid(isExpressionValid);
-      const transformationVars = getTransformationVars(
-        {
-          type: formValues.type || SupportedTransformationType.Regex, // TODO does this default value make sense?
-          expression: isExpressionValid ? expression : '',
-          mapValue: formValues.mapValue,
-        },
-        fieldList[formValues.field!] || '',
-        formValues.field!
-      );
+      let transKeys = [];
+      if (formValues.type) {
+        const transformationVars = getTransformationVars(
+          {
+            type: formValues.type,
+            expression: isExpressionValid ? expression : '',
+            mapValue: formValues.mapValue,
+          },
+          fieldList[formValues.field!] || '',
+          formValues.field!
+        );
 
-      const transKeys = Object.keys(transformationVars);
-      setTransformationVars(transKeys.length > 0 ? { ...transformationVars } : {});
+        transKeys = Object.keys(transformationVars);
+        setTransformationVars(transKeys.length > 0 ? { ...transformationVars } : {});
+      }
 
       if (transKeys.length === 0 || !isExpressionValid) {
         setValidToSave(false);
diff --git a/public/app/features/explore/state/correlations.ts b/public/app/features/explore/state/correlations.ts
index 12c26cc687a5..3d8de1466fcc 100644
--- a/public/app/features/explore/state/correlations.ts
+++ b/public/app/features/explore/state/correlations.ts
@@ -83,7 +83,6 @@ export function saveCurrentCorrelation(
         description,
         config: {
           field: targetPane.correlationEditorHelperData.resultField,
-          // @ts-expect-error TODO check the type
           target: targetPane.queries[0],
           type: 'query',
           transformations: transformations,
diff --git a/public/app/features/explore/utils/links.ts b/public/app/features/explore/utils/links.ts
index 0c95005ca91e..bc530234b244 100644
--- a/public/app/features/explore/utils/links.ts
+++ b/public/app/features/explore/utils/links.ts
@@ -299,8 +299,8 @@ const builtInVariables = [
  * @param query
  * @param scopedVars
  */
-export function getVariableUsageInfo<T extends DataLink>(
-  query: T,
+export function getVariableUsageInfo(
+  query: object,
   scopedVars: ScopedVars
 ): { variables: VariableInterpolation[]; allVariablesDefined: boolean } {
   let variables: VariableInterpolation[] = [];

From a6af8469a84850dcc6257852405f570fdd7ec658 Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Fri, 5 Jan 2024 08:16:17 +0200
Subject: [PATCH 18/18] Fix auth type errors

---
 public/app/features/auth-config/fields.ts | 6 +++++-
 public/app/features/auth-config/types.ts  | 6 ++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/features/auth-config/fields.ts b/public/app/features/auth-config/fields.ts
index 22b7d0b48237..35c4a3e18976 100644
--- a/public/app/features/auth-config/fields.ts
+++ b/public/app/features/auth-config/fields.ts
@@ -1,4 +1,5 @@
 import { FieldData, SSOProvider } from './types';
+import { isSelectableValue } from './utils/guards';
 
 /** Map providers to their settings */
 export const fields: Record<SSOProvider['provider'], Array<keyof SSOProvider['settings']>> = {
@@ -46,7 +47,10 @@ export const fieldMap: Record<string, FieldData> = {
         if (typeof value === 'string') {
           return isNumeric(value);
         }
-        return value.every((v) => v?.value && isNumeric(v.value));
+        if (isSelectableValue(value)) {
+          return value.every((v) => v?.value && isNumeric(v.value));
+        }
+        return true;
       },
       message: 'Team ID must be a number.',
     },
diff --git a/public/app/features/auth-config/types.ts b/public/app/features/auth-config/types.ts
index c4b5e3dbc19d..4315d0c0fdf7 100644
--- a/public/app/features/auth-config/types.ts
+++ b/public/app/features/auth-config/types.ts
@@ -1,3 +1,5 @@
+import { Validate } from 'react-hook-form';
+
 import { IconName, SelectableValue } from '@grafana/data';
 import { Settings } from 'app/types';
 
@@ -26,7 +28,7 @@ export type SSOProviderSettingsBase = {
   emailAttributePath?: string;
   emptyScopes?: boolean;
   enabled: boolean;
-  extra?: Record<string, unknown>;
+  extra?: Record<string, string>;
   groupsAttributePath?: string;
   hostedDomain?: string;
   icon?: IconName;
@@ -97,7 +99,7 @@ export type FieldData = {
   validation?: {
     required?: boolean;
     message?: string;
-    validate?: (value: string | Array<SelectableValue<string>>) => boolean | string | Promise<boolean | string>;
+    validate?: Validate<SSOProviderDTO[keyof SSOProviderDTO], SSOProviderDTO>;
   };
   multi?: boolean;
   allowCustomValue?: boolean;