[v10.4.x] InfluxDB: Fix interpolation of multi value template variables by adding parenthesis around them (#84590)

InfluxDB: Fix interpolation of multi value template variables by adding parenthesis around them (#83577)

Put parenthesis around multi value template variable

(cherry picked from commit 757fa06b85)

public/app/plugins/datasource/influxdb/datasource.test.ts

@@ -452,7 +452,7 @@ describe('InfluxDataSource Frontend Mode', () => {
           .withIncludeAll(true)
           .build();
         const result = ds.interpolateQueryExpr(value, variableMock, 'select from /^($tempVar)$/');
-        const expectation = `env|env2|env3`;
+        const expectation = `(env|env2|env3)`;
         expect(result).toBe(expectation);
       });
 
@@ -476,7 +476,7 @@ describe('InfluxDataSource Frontend Mode', () => {
         const value = [`/special/path`, `/some/other/path`];
         const variableMock = queryBuilder().withId('tempVar').withName('tempVar').withMulti().build();
         const result = ds.interpolateQueryExpr(value, variableMock, `select that where path = '$tempVar'`);
-        const expectation = `\\/special\\/path|\\/some\\/other\\/path`;
+        const expectation = `(\\/special\\/path|\\/some\\/other\\/path)`;
         expect(result).toBe(expectation);
       });
 
@@ -505,7 +505,7 @@ describe('InfluxDataSource Frontend Mode', () => {
           .build();
         const value = [`/special/path`, `/some/other/path`];
         const result = ds.interpolateQueryExpr(value, variableMock, `select that where path = /$tempVar/`);
-        const expectation = `\\/special\\/path|\\/some\\/other\\/path`;
+        const expectation = `(\\/special\\/path|\\/some\\/other\\/path)`;
         expect(result).toBe(expectation);
       });
     });

public/app/plugins/datasource/influxdb/datasource.ts

@@ -309,7 +309,8 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
       }
 
       // If the value is a string array first escape them then join them with pipe
-      return value.map((v) => escapeRegex(v)).join('|');
+      // then put inside parenthesis.
+      return `(${value.map((v) => escapeRegex(v)).join('|')})`;
     }
 
     // If the variable is not a multi-value variable
@@ -324,7 +325,8 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
       }
 
       // If the value is a string array first escape them then join them with pipe
-      return value.map((v) => escapeRegex(v)).join('|');
+      // then put inside parenthesis.
+      return `(${value.map((v) => escapeRegex(v)).join('|')})`;
     }
 
     return value;