DataLinks: Encoded URL fixed (#67291)

It fixes data link issue, where using ${__data.fields.FIELD_NAME} doesn't work.

packages/grafana-data/src/field/fieldOverrides.ts

@@ -445,7 +445,7 @@ export const getLinksSupplier =
 
       if (href) {
         href = locationUtil.assureBaseUrl(href.replace(/\n/g, ''));
-        href = replaceVariables(href, variables, VariableFormatID.PercentEncode);
+        href = replaceVariables(href, variables, VariableFormatID.UriEncode);
         href = locationUtil.processUrl(href);
       }
 

packages/grafana-schema/src/common/common.gen.ts

@@ -771,6 +771,7 @@ export enum VariableFormatID {
   SQLString = 'sqlstring',
   SingleQuote = 'singlequote',
   Text = 'text',
+  UriEncode = 'uriencode',
 }
 
 export interface DataSourceRef {

packages/grafana-schema/src/common/variables.cue

@@ -2,36 +2,38 @@ package common
 
 // Optional formats for the template variable replace functions
 // See also https://grafana.com/docs/grafana/latest/dashboards/variables/variable-syntax/#advanced-variable-format-options
-VariableFormatID: 
+VariableFormatID:
     // Values are lucene escaped and multi-valued variables generate an OR expression
-    "lucene" | 
+    "lucene" |
     // Raw values
-    "raw" | 
+    "raw" |
     // Values are regex escaped and multi-valued variables generate a (<value>|<value>) expression
-    "regex" | 
+    "regex" |
     // Values are separated by | character
-    "pipe" | 
+    "pipe" |
     // Multiple values are formatted like variable=value
-    "distributed" | 
+    "distributed" |
     // Comma seperated values
-    "csv" | 
+    "csv" |
     // HTML escaped
-    "html" | 
+    "html" |
     // JSON values
-    "json" | 
+    "json" |
     // Percent encode
-    "percentencode" | 
+    "percentencode" |
+    // Uri encode
+    "uriencode" |
     // Single quote
-    "singlequote" | 
+    "singlequote" |
     // Double quote
-    "doublequote" | 
+    "doublequote" |
     // SQL string quoting and commas for use in IN statements and other scenarios
-    "sqlstring" | 
+    "sqlstring" |
     // Date
-    "date" | 
+    "date" |
     // Format multi-valued variables using glob syntax, example {value1,value2}
-    "glob" | 
+    "glob" |
     // Format variables in their text representation. Example in multi-variable scenario A + B + C.
-    "text" | 
+    "text" |
     // Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.
-    "queryparam"  @cuetsy(kind="enum",memberNames="Lucene|Raw|Regex|Pipe|Distributed|CSV|HTML|JSON|PercentEncode|SingleQuote|DoubleQuote|SQLString|Date|Glob|Text|QueryParam")
+    "queryparam"  @cuetsy(kind="enum",memberNames="Lucene|Raw|Regex|Pipe|Distributed|CSV|HTML|JSON|PercentEncode|UriEncode|SingleQuote|DoubleQuote|SQLString|Date|Glob|Text|QueryParam")

public/app/features/panel/panellinks/link_srv.ts

@@ -305,7 +305,7 @@ export class LinkSrv implements LinkService {
     };
 
     if (replaceVariables) {
-      info.href = replaceVariables(info.href, undefined, VariableFormatID.PercentEncode);
+      info.href = replaceVariables(info.href, undefined, VariableFormatID.UriEncode);
       info.title = replaceVariables(link.title);
     }