Loki: Refactor debug section to remove dependency on deprecated `getFieldLinksForExplore` (#80594)

* Refactor debug section

* Show href only if matched regex

.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"],

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();

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;
       }
     });
 }