Variables: Ensure variables in query params are correctly recognised (#47049)

* user essentials mob! 🔱

* user essentials mob! 🔱

* update comment

Co-authored-by: kay delaney <kay@grafana.com>
Co-authored-by: Alexandra Vargas <alexa1866@gmail.com>

Co-authored-by: joshhunt <josh@trtr.co>
Co-authored-by: kay delaney <kay@grafana.com>
Co-authored-by: Alexandra Vargas <alexa1866@gmail.com>

public/app/features/variables/utils.test.ts

@@ -184,12 +184,17 @@ describe('ensureStringValues', () => {
 
 describe('containsVariable', () => {
   it.each`
-    value                               | expected
-    ${''}                               | ${false}
-    ${'$var'}                           | ${true}
-    ${{ thing1: '${var}' }}             | ${true}
-    ${{ thing1: ['1', '${var}'] }}      | ${true}
-    ${{ thing1: { thing2: '${var}' } }} | ${true}
+    value                                | expected
+    ${''}                                | ${false}
+    ${'$var'}                            | ${true}
+    ${{ thing1: '${var}' }}              | ${true}
+    ${{ thing1: '${var:fmt}' }}          | ${true}
+    ${{ thing1: ['1', '${var}'] }}       | ${true}
+    ${{ thing1: ['1', '[[var]]'] }}      | ${true}
+    ${{ thing1: ['1', '[[var:fmt]]'] }}  | ${true}
+    ${{ thing1: { thing2: '${var}' } }}  | ${true}
+    ${{ params: [['param', '$var']] }}   | ${true}
+    ${{ params: [['param', '${var}']] }} | ${true}
   `('when called with value:$value then result should be:$expected', ({ value, expected }) => {
     expect(containsVariable(value, 'var')).toEqual(expected);
   });

public/app/features/variables/utils.ts

@@ -15,10 +15,10 @@ import { KeyedVariableIdentifier, VariableIdentifier, VariablePayload } from './
 /*
  * This regex matches 3 types of variable reference with an optional format specifier
  * \$(\w+)                          $var1
- * \[\[([\s\S]+?)(?::(\w+))?\]\]    [[var2]] or [[var2:fmt2]]
+ * \[\[(\w+?)(?::(\w+))?\]\]        [[var2]] or [[var2:fmt2]]
  * \${(\w+)(?::(\w+))?}             ${var3} or ${var3:fmt3}
  */
-export const variableRegex = /\$(\w+)|\[\[([\s\S]+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/g;
+export const variableRegex = /\$(\w+)|\[\[(\w+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/g;
 
 // Helper function since lastIndex is not reset
 export const variableRegexExec = (variableString: string) => {