DashList: Update variables in links when they change (#77787)

* user essentials mob! 🔱

lastFile:public/app/plugins/panel/dashlist/DashList.tsx

* DashList: Update variables in URL when they change

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

* add e2e test to check dashlist variables are always correctly passed

* add comment with link to issue

---------

Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: joshhunt <josh@trtr.co>

public/app/plugins/panel/dashlist/DashList.tsx

@@ -1,9 +1,18 @@
 import { take } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { DateTime, InterpolateFunction, PanelProps, textUtil, UrlQueryValue, urlUtil } from '@grafana/data';
+import {
+  DateTime,
+  InterpolateFunction,
+  PanelProps,
+  textUtil,
+  UrlQueryMap,
+  UrlQueryValue,
+  urlUtil,
+} from '@grafana/data';
 import { CustomScrollbar, useStyles2, IconButton } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
+import { appEvents } from 'app/core/core';
 import { setStarred } from 'app/core/reducers/navBarTree';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import impressionSrv from 'app/core/services/impression_srv';
@@ -11,6 +20,7 @@ import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { DashboardSearchItem } from 'app/features/search/types';
 import { getVariablesUrlParams } from 'app/features/variables/getAllVariableValuesForUrl';
+import { VariablesChanged } from 'app/features/variables/types';
 import { useDispatch } from 'app/types';
 
 import { Options } from './panelcfg.gen';
@@ -89,9 +99,29 @@ async function fetchDashboards(options: Options, replaceVars: InterpolateFunctio
   return dashMap;
 }
 
+function useVariablesForURL(subscribe: boolean) {
+  const [variables, setVariables] = useState<UrlQueryMap>(() => getVariablesUrlParams());
+
+  useEffect(() => {
+    if (!subscribe) {
+      return;
+    }
+
+    const sub = appEvents.subscribe(VariablesChanged, () => {
+      setVariables(getVariablesUrlParams());
+    });
+
+    return () => sub.unsubscribe();
+  }, [subscribe]);
+
+  return variables;
+}
+
 export function DashList(props: PanelProps<Options>) {
   const [dashboards, setDashboards] = useState(new Map<string, Dashboard>());
   const dispatch = useDispatch();
+  const urlVariables = useVariablesForURL(props.options.includeVars);
+
   useEffect(() => {
     fetchDashboards(props.options, props.replaceVariables).then((dashes) => {
       setDashboards(dashes);
@@ -156,7 +186,7 @@ export function DashList(props: PanelProps<Options>) {
         if (props.options.includeVars) {
           params = {
             ...params,
-            ...getVariablesUrlParams(),
+            ...urlVariables,
           };
         }