From 1f5adbee7f0329e68420714ac8d83c5ab5e6eedb 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] Fix changes to correlations

---
 .../correlations/CorrelationsPage.test.tsx    | 21 ++++++++-------
 .../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 +--
 9 files changed, 41 insertions(+), 39 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/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[] = [];