Templating: Fix recursive loop of template variable queries when changing ad-hoc-variable (#26191)

* Templating: Fix url sync issue with adhoc variables

* Update packages/grafana-ui/src/components/Segment/SegmentAsync.tsx

* Update packages/grafana-ui/src/components/Segment/SegmentAsync.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/core/services/bridge_srv.test.ts

@@ -50,4 +50,27 @@ describe('when checking template variables', () => {
     expect(findTemplateVarChanges(b, a)).toBeUndefined();
     expect(findTemplateVarChanges(a, b)).toBeUndefined();
   });
+
+  it('Should handle array values with one value same as just value', () => {
+    const a: UrlQueryMap = {
+      'var-test': ['test'],
+    };
+    const b: UrlQueryMap = {
+      'var-test': 'test',
+    };
+
+    expect(findTemplateVarChanges(b, a)).toBeUndefined();
+    expect(findTemplateVarChanges(a, b)).toBeUndefined();
+  });
+
+  it('Should detect change in array value and return array with single value', () => {
+    const a: UrlQueryMap = {
+      'var-test': ['test'],
+    };
+    const b: UrlQueryMap = {
+      'var-test': 'asd',
+    };
+
+    expect(findTemplateVarChanges(a, b)['var-test']).toEqual(['test']);
+  });
 });

public/app/core/services/bridge_srv.ts

@@ -93,11 +93,9 @@ export class BridgeSrv {
             dispatch(templateVarsChangedInUrl(changes));
           }
         }
-        this.lastQuery = state.location.query;
-      } else {
-        this.lastQuery = {};
       }
 
+      this.lastQuery = state.location.query;
       this.lastPath = state.location.path;
       this.lastUrl = state.location.url;
     });
@@ -117,6 +115,18 @@ export class BridgeSrv {
   }
 }
 
+function getUrlValueForComparison(value: any): any {
+  if (isArray(value)) {
+    if (value.length === 0) {
+      value = undefined;
+    } else if (value.length === 1) {
+      value = value[0];
+    }
+  }
+
+  return value;
+}
+
 export function findTemplateVarChanges(query: UrlQueryMap, old: UrlQueryMap): UrlQueryMap | undefined {
   let count = 0;
   const changes: UrlQueryMap = {};
@@ -130,23 +140,11 @@ export function findTemplateVarChanges(query: UrlQueryMap, old: UrlQueryMap): Ur
     let newValue = getUrlValueForComparison(query[key]);
 
     if (!isEqual(newValue, oldValue)) {
-      changes[key] = newValue;
+      changes[key] = query[key];
       count++;
     }
   }
 
-  function getUrlValueForComparison(value: any): any {
-    if (isArray(value)) {
-      if (value.length === 0) {
-        value = undefined;
-      } else if (value.length === 1) {
-        value = value[0];
-      }
-    }
-
-    return value;
-  }
-
   for (const key in old) {
     if (!key.startsWith('var-')) {
       continue;