Dashboards: Add join and customqueryparam template variable formatters (#107904)

* Update scenes lib

* update schema for customqueryparam formatter

* add docs for new formatters

* fix docs example

* sort alpha

docs/sources/dashboards/variables/variable-syntax/index.md

@@ -94,6 +94,16 @@ String to interpolate: '${servers:glob}'
 Interpolation result: '{test1,test2}'
 ```
 
+### Join
+
+Formats multi-valued variables with a custom delimiter. If no delimiter argument is supplied, they will be combined with `,`.
+
+```bash
+servers = ["test1", "test2"]
+String to interpolate: '${servers:join:&}'
+Interpolation result: "test1&test2"
+```
+
 ### JSON
 
 Formats variables with multiple values as a comma-separated string.
@@ -134,6 +144,24 @@ String to interpolate: '${servers:pipe}'
 Interpolation result: 'test1.|test2'
 ```
 
+### Query parameters
+
+Formats single- and multi-valued variables into their query parameter representation. Example: `var-foo=value1&var-foo=value2`
+
+```bash
+servers = ["test1", "test2"]
+String to interpolate: '${servers:queryparam}'
+Interpolation result: "var-servers=test1&var-servers=test2"
+```
+
+Use the `customqueryparam` formatter to customize how the query parameters are formatted. It accepts two optional arguments to specify the parameter name, and a value prefix.
+
+```bash
+servers = ["test1", "test2"]
+String to interpolate: '${servers:customqueryparam:v-servers:x-}'
+Interpolation result: "v-servers=x-test1&v-servers=x-test2"
+```
+
 ### Raw
 
 Doesn't apply any data source-specific formatting to the variable.
@@ -194,13 +222,3 @@ servers = ["test1", "test2"]
 String to interpolate: '${servers:text}'
 Interpolation result: "test1 + test2"
 ```
-
-### Query parameters
-
-Formats single- and multi-valued variables into their query parameter representation. Example: `var-foo=value1&var-foo=value2`
-
-```bash
-servers = ["test1", "test2"]
-String to interpolate: '${servers:queryparam}'
-Interpolation result: "var-servers=test1&var-servers=test2"
-```

package.json

@@ -289,8 +289,8 @@
     "@grafana/plugin-ui": "0.10.7",
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "^6.27.1",
-    "@grafana/scenes-react": "^6.27.1",
+    "@grafana/scenes": "^6.27.2",
+    "@grafana/scenes-react": "^6.27.2",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",

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

@@ -888,6 +888,7 @@ export type TimeZoneBrowser = 'browser';
  */
 export enum VariableFormatID {
   CSV = 'csv',
+  CustomQueryParam = 'customqueryparam',
   Date = 'date',
   Distributed = 'distributed',
   DoubleQuote = 'doublequote',

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

@@ -38,4 +38,6 @@ VariableFormatID:
     // 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="Join|Lucene|Raw|Regex|Pipe|Distributed|CSV|HTML|JSON|PercentEncode|UriEncode|SingleQuote|DoubleQuote|SQLString|Date|Glob|Text|QueryParam")
+    "queryparam" |
+    // Format variables as URL parameters with custom parameter name and value prefix.
+    "customqueryparam" @cuetsy(kind="enum",memberNames="Join|Lucene|Raw|Regex|Pipe|Distributed|CSV|HTML|JSON|PercentEncode|UriEncode|SingleQuote|DoubleQuote|SQLString|Date|Glob|Text|QueryParam|CustomQueryParam")

yarn.lock

@@ -3549,7 +3549,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes-react@npm:^6.27.1":
+"@grafana/scenes-react@npm:^6.27.2":
   version: 6.27.2
   resolution: "@grafana/scenes-react@npm:6.27.2"
   dependencies:
@@ -3569,7 +3569,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/scenes@npm:6.27.2, @grafana/scenes@npm:^6.27.1":
+"@grafana/scenes@npm:6.27.2, @grafana/scenes@npm:^6.27.2":
   version: 6.27.2
   resolution: "@grafana/scenes@npm:6.27.2"
   dependencies:
@@ -18159,8 +18159,8 @@ __metadata:
     "@grafana/plugin-ui": "npm:0.10.7"
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
-    "@grafana/scenes": "npm:^6.27.1"
-    "@grafana/scenes-react": "npm:^6.27.1"
+    "@grafana/scenes": "npm:^6.27.2"
+    "@grafana/scenes-react": "npm:^6.27.2"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/test-utils": "workspace:*"
@@ -27341,7 +27341,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-virtualized-auto-sizer@npm:*, react-virtualized-auto-sizer@npm:1.0.26, react-virtualized-auto-sizer@npm:^1.0.6":
+"react-virtualized-auto-sizer@npm:*, react-virtualized-auto-sizer@npm:1.0.26":
   version: 1.0.26
   resolution: "react-virtualized-auto-sizer@npm:1.0.26"
   peerDependencies:
@@ -27361,6 +27361,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-virtualized-auto-sizer@npm:^1.0.6":
+  version: 1.0.25
+  resolution: "react-virtualized-auto-sizer@npm:1.0.25"
+  peerDependencies:
+    react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/43678a904019f0413a3c649b5b64ea51263283120c991b285077b5075cf2ea564571f6d48b3a396b588d500d45820d1c98989cb7091e2a009e73e4faa7da9d20
+  languageName: node
+  linkType: hard
+
 "react-window-infinite-loader@npm:1.0.10":
   version: 1.0.10
   resolution: "react-window-infinite-loader@npm:1.0.10"