DataLinks: Default to percentEncoding (#64841)

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

@@ -2,6 +2,8 @@ import { isNumber, set, unset, get, cloneDeep } from 'lodash';
 import { useMemo, useRef } from 'react';
 import usePrevious from 'react-use/lib/usePrevious';
 
+import { VariableFormatID } from '@grafana/schema';
+
 import { compareArrayValues, compareDataFrameStructures, guessFieldTypeForField } from '../dataframe';
 import { getTimeField } from '../dataframe/processDataFrame';
 import { PanelPlugin } from '../panel/PanelPlugin';
@@ -455,7 +457,6 @@ export const getLinksSupplier =
           replaceVariables,
         });
       }
-
       let href = link.onBuildUrl
         ? link.onBuildUrl({
             origin: field,
@@ -464,8 +465,8 @@ export const getLinksSupplier =
         : link.url;
 
       if (href) {
-        locationUtil.assureBaseUrl(href.replace(/\n/g, ''));
-        href = replaceVariables(href, variables);
+        href = locationUtil.assureBaseUrl(href.replace(/\n/g, ''));
+        href = replaceVariables(href, variables, VariableFormatID.PercentEncode);
         href = locationUtil.processUrl(href);
       }
 

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

@@ -749,6 +749,29 @@ export type TimeZoneUtc = 'utc';
  */
 export type TimeZoneBrowser = 'browser';
 
+/**
+ * Optional formats for the template variable replace functions
+ * See also https://grafana.com/docs/grafana/latest/dashboards/variables/variable-syntax/#advanced-variable-format-options
+ */
+export enum VariableFormatID {
+  CSV = 'csv',
+  Date = 'date',
+  Distributed = 'distributed',
+  DoubleQuote = 'doublequote',
+  Glob = 'glob',
+  HTML = 'html',
+  JSON = 'json',
+  Lucene = 'lucene',
+  PercentEncode = 'percentencode',
+  Pipe = 'pipe',
+  QueryParam = 'queryparam',
+  Raw = 'raw',
+  Regex = 'regex',
+  SQLString = 'sqlstring',
+  SingleQuote = 'singlequote',
+  Text = 'text',
+}
+
 export interface DataSourceRef {
   /**
    * The plugin type-id

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

@@ -0,0 +1,37 @@
+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: 
+    // Values are lucene escaped and multi-valued variables generate an OR expression
+    "lucene" | 
+    // Raw values
+    "raw" | 
+    // Values are regex escaped and multi-valued variables generate a (<value>|<value>) expression
+    "regex" | 
+    // Values are separated by | character
+    "pipe" | 
+    // Multiple values are formatted like variable=value
+    "distributed" | 
+    // Comma seperated values
+    "csv" | 
+    // HTML escaped
+    "html" | 
+    // JSON values
+    "json" | 
+    // Percent encode
+    "percentencode" | 
+    // Single quote
+    "singlequote" | 
+    // Double quote
+    "doublequote" | 
+    // SQL string quoting and commas for use in IN statements and other scenarios
+    "sqlstring" | 
+    // Date
+    "date" | 
+    // Format multi-valued variables using glob syntax, example {value1,value2}
+    "glob" | 
+    // Format variables in their text representation. Example in multi-variable scenario A + B + C.
+    "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")