Templating: Fixed recursive url update issue for textbox variable (#26981)

* Templating: Fixed recursive url update issue for textbox variable

* Updated link

* updated e2e

devenv/dev-dashboards/feature-templating/global-variables-and-interpolation.json

@@ -104,7 +104,7 @@
     "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
     "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
   },
   },
   "timezone": "",
   "timezone": "",
-  "title": "Global variables and interpolation",
+  "title": "Templating - Global variables and interpolation",
   "uid": "HYaGDGIMk",
   "uid": "HYaGDGIMk",
   "version": 5
   "version": 5
 }
 }

devenv/dev-dashboards/feature-templating/testdata-variables-textbox.json

+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "iteration": 1597300832273,
+  "links": [],
+  "panels": [
+    {
+      "datasource": "CsvData",
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "align": null
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Query"
+            },
+            "properties": [
+              {
+                "id": "links",
+                "value": [
+                  {
+                    "title": "Search",
+                    "url": "/d/spVR9LSMk/templating-textbox-and-data-links?var-query=${__value.raw:percentencode}"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 2,
+      "options": {
+        "showHeader": true
+      },
+      "pluginVersion": "7.2.0-pre",
+      "targets": [
+        {
+          "data": [
+            {
+              "fields": [
+                {
+                  "config": {},
+                  "name": "Query",
+                  "type": "string",
+                  "values": ["Contains+Plus", "Contains&Ampersand", "Contains white space"]
+                },
+                {
+                  "config": {},
+                  "name": " Test",
+                  "type": "string",
+                  "values": ["asd", "asd", "asd"]
+                }
+              ]
+            }
+          ],
+          "refId": "A"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Data",
+      "type": "table"
+    },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "custom": {}
+        },
+        "overrides": []
+      },
+      "fill": 1,
+      "fillGradient": 0,
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 0
+      },
+      "hiddenSeries": false,
+      "id": 4,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 1,
+      "nullPointMode": "null",
+      "options": {
+        "alertThreshold": true
+      },
+      "percentage": false,
+      "pluginVersion": "7.2.0-pre",
+      "pointradius": 2,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "alias": "${query}",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeRegions": [],
+      "timeShift": null,
+      "title": "Query: ${query}",
+      "tooltip": {
+        "shared": true,
+        "sort": 0,
+        "value_type": "individual"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    }
+  ],
+  "schemaVersion": 26,
+  "style": "dark",
+  "tags": ["gdev", "templating"],
+  "templating": {
+    "list": [
+      {
+        "current": {
+          "selected": false,
+          "text": "asdasda+",
+          "value": "asdasda+"
+        },
+        "hide": 0,
+        "label": null,
+        "name": "query",
+        "options": [
+          {
+            "selected": true,
+            "text": "asdasda+",
+            "value": "asdasda+"
+          }
+        ],
+        "query": "asdasda+",
+        "skipUrlSync": false,
+        "type": "textbox"
+      }
+    ]
+  },
+  "time": {
+    "from": "now-6h",
+    "to": "now"
+  },
+  "timepicker": {
+    "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
+  },
+  "timezone": "",
+  "title": "Templating - Textbox & data links",
+  "uid": "spVR9LSMk",
+  "version": 9
+}

e2e/suite1/specs/dashboard-templating.spec.ts

@@ -12,8 +12,8 @@ e2e.scenario({
 
 
     const items: any = [];
     const items: any = [];
     const expectedItems: string[] = [
     const expectedItems: string[] = [
-      '__dashboard = Global variables and interpolation',
-      '__dashboard.name = Global variables and interpolation',
+      '__dashboard = Templating - Global variables and interpolation',
+      '__dashboard.name = Templating - Global variables and interpolation',
       '__dashboard.uid = HYaGDGIMk',
       '__dashboard.uid = HYaGDGIMk',
       '__org.name = Main Org.',
       '__org.name = Main Org.',
       '__org.id = 1',
       '__org.id = 1',

packages/grafana-ui/src/components/Table/DefaultCell.tsx

 import React, { FC } from 'react';
 import React, { FC } from 'react';
 import { TableCellProps } from './types';
 import { TableCellProps } from './types';
 import { formattedValueToString, LinkModel } from '@grafana/data';
 import { formattedValueToString, LinkModel } from '@grafana/data';
-import { Tooltip } from '../Tooltip/Tooltip';
 
 
 export const DefaultCell: FC<TableCellProps> = props => {
 export const DefaultCell: FC<TableCellProps> = props => {
   const { field, cell, tableStyles, row } = props;
   const { field, cell, tableStyles, row } = props;
@@ -19,27 +18,25 @@ export const DefaultCell: FC<TableCellProps> = props => {
   return (
   return (
     <div className={tableStyles.tableCell}>
     <div className={tableStyles.tableCell}>
       {link ? (
       {link ? (
-        <Tooltip content={link.title}>
-          <a
-            href={link.href}
-            onClick={
-              link.onClick
-                ? event => {
-                    // Allow opening in new tab
-                    if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link!.onClick) {
-                      event.preventDefault();
-                      link!.onClick(event);
-                    }
+        <a
+          href={link.href}
+          onClick={
+            link.onClick
+              ? event => {
+                  // Allow opening in new tab
+                  if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link!.onClick) {
+                    event.preventDefault();
+                    link!.onClick(event);
                   }
                   }
-                : undefined
-            }
-            target={link.target}
-            title={link.title}
-            className={tableStyles.tableCellLink}
-          >
-            {value}
-          </a>
-        </Tooltip>
+                }
+              : undefined
+          }
+          target={link.target}
+          title={link.title}
+          className={tableStyles.tableCellLink}
+        >
+          {value}
+        </a>
       ) : (
       ) : (
         value
         value
       )}
       )}

public/app/core/services/bridge_srv.ts

@@ -82,9 +82,13 @@ export class BridgeSrv {
         });
         });
       }
       }
 
 
-      // Check for template variable changes on a dashboard
-      if (state.location.path === this.lastPath) {
+      // if only query params changed, check if variables changed
+      if (state.location.path === this.lastPath && state.location.query !== this.lastQuery) {
+        // Find template variable changes
         const changes = findTemplateVarChanges(state.location.query, this.lastQuery);
         const changes = findTemplateVarChanges(state.location.query, this.lastQuery);
+        // Store current query params to avoid recursion
+        this.lastQuery = state.location.query;
+
         if (changes) {
         if (changes) {
           const dash = getDashboardSrv().getCurrent();
           const dash = getDashboardSrv().getCurrent();
           if (dash) {
           if (dash) {
@@ -93,8 +97,8 @@ export class BridgeSrv {
         }
         }
       }
       }
 
 
-      this.lastQuery = state.location.query;
       this.lastPath = state.location.path;
       this.lastPath = state.location.path;
+      this.lastQuery = state.location.query;
       this.lastUrl = state.location.url;
       this.lastUrl = state.location.url;
     });
     });