From 67d77e76beafa47943d701245aec370a3943ce41 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Tue, 16 Jan 2024 12:00:31 +0100
Subject: [PATCH] Loki: Refactor debug section to remove dependency on
 deprecated `getFieldLinksForExplore` (#80594)

* Refactor debug section

* Show href only if matched regex
---
 .betterer.results                             |  6 +--
 .../loki/configuration/DebugSection.test.tsx  | 45 +++----------------
 .../loki/configuration/DebugSection.tsx       | 35 ++++++---------
 3 files changed, 20 insertions(+), 66 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index ddb62047eff..b2144b44893 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1,5 +1,5 @@
 // BETTERER RESULTS V2.
-//
+// 
 // If this file contains merge conflicts, use `betterer merge` to automatically resolve them:
 // https://phenomnomnominal.github.io/betterer/docs/results-file/#merge
 //
@@ -5388,10 +5388,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/datasource/loki/configuration/DebugSection.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
     "public/app/plugins/datasource/loki/configuration/DerivedField.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
diff --git a/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx b/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx
index 6eb14771d10..8600c84362c 100644
--- a/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx
@@ -2,53 +2,18 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { dateTime, TimeRange } from '@grafana/data';
-import { setTemplateSrv } from '@grafana/runtime';
-
-import { getLinkSrv, LinkService, LinkSrv, setLinkSrv } from '../../../../features/panel/panellinks/link_srv';
-
 import { DebugSection } from './DebugSection';
 
-// We do not need more here and TimeSrv is hard to setup fully.
-jest.mock('app/features/dashboard/services/TimeSrv', () => ({
-  getTimeSrv: () => ({
-    timeRangeForUrl() {
-      const from = dateTime().subtract(1, 'h');
-      const to = dateTime();
-      return { from, to, raw: { from, to } };
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getTemplateSrv: () => ({
+    replace: (val: string) => {
+      return val;
     },
   }),
 }));
 
 describe('DebugSection', () => {
-  let originalLinkSrv: LinkService;
-
-  // This needs to be setup so we can test interpolation in the debugger
-  beforeAll(() => {
-    const linkService = new LinkSrv();
-    originalLinkSrv = getLinkSrv();
-    setLinkSrv(linkService);
-  });
-
-  beforeEach(() => {
-    setTemplateSrv({
-      replace(target, scopedVars, format) {
-        return target ?? '';
-      },
-      getVariables() {
-        return [];
-      },
-      containsTemplate() {
-        return false;
-      },
-      updateTimeRange(timeRange: TimeRange) {},
-    });
-  });
-
-  afterAll(() => {
-    setLinkSrv(originalLinkSrv);
-  });
-
   it('does not render any table rows if no debug text', () => {
     render(<DebugSection derivedFields={[]} />);
     expect(screen.queryByRole('row')).not.toBeInTheDocument();
diff --git a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
index c4a63a2ef2f..15bb53aa3cb 100644
--- a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
@@ -1,9 +1,8 @@
 import React, { ReactNode, useState } from 'react';
 
-import { Field, FieldType, LinkModel } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
 import { InlineField, TextArea } from '@grafana/ui';
 
-import { getFieldLinksForExplore } from '../../../../features/explore/utils/links';
 import { DerivedFieldConfig } from '../types';
 
 type Props = {
@@ -24,7 +23,7 @@ export const DebugSection = (props: Props) => {
       <InlineField label="Debug log message" labelWidth={24} grow>
         <TextArea
           type="text"
-          aria-label="Prometheus Query"
+          aria-label="Loki query"
           placeholder="Paste an example log line here to test the regular expressions of your derived fields"
           value={debugText}
           onChange={(event) => setDebugText(event.currentTarget.value)}
@@ -82,36 +81,30 @@ function makeDebugFields(derivedFields: DerivedFieldConfig[], debugText: string)
     .map((field) => {
       try {
         const testMatch = debugText.match(field.matcherRegex);
+        let href;
         const value = testMatch && testMatch[1];
-        let link: LinkModel<Field> | null = null;
 
-        if (field.url && value) {
-          link = getFieldLinksForExplore({
-            field: {
-              name: '',
-              type: FieldType.string,
-              values: [value],
-              config: {
-                links: [{ title: '', url: field.url }],
+        if (value) {
+          href = getTemplateSrv().replace(field.url, {
+            __value: {
+              value: {
+                raw: value,
               },
+              text: 'Raw value',
             },
-            rowIndex: 0,
-            range: {} as any,
-          })[0];
+          });
         }
-
-        const result: DebugField = {
+        const debugFiled: DebugField = {
           name: field.name,
           value: value || '<no match>',
-          href: link ? link.href : undefined,
+          href,
         };
-        return result;
+        return debugFiled;
       } catch (error) {
-        const result: DebugField = {
+        return {
           name: field.name,
           error,
         };
-        return result;
       }
     });
 }