Dashboard: Template variables are now correctly persisted when clicking breadcrumb links (#46790)

* Add history listener to update titleHref/parentHref when location changes

* Convert to functional component and use useLocation

* Wrap component in React.memo

* Add new `getUrlForPartial` method, deprecate `updateSearchParams`

packages/grafana-data/package.json

@@ -53,6 +53,7 @@
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
     "@types/braintree__sanitize-url": "4.1.0",
+    "@types/history": "4.7.11",
     "@types/jest": "27.4.1",
     "@types/jquery": "3.5.14",
     "@types/lodash": "4.14.149",
@@ -65,6 +66,7 @@
     "@types/testing-library__jest-dom": "5.14.3",
     "@types/testing-library__react-hooks": "^3.2.0",
     "@types/tinycolor2": "1.4.3",
+    "history": "4.10.1",
     "react-test-renderer": "17.0.2",
     "rimraf": "3.0.2",
     "rollup": "2.70.1",

packages/grafana-data/src/utils/location.ts

@@ -1,3 +1,4 @@
+import { Location } from 'history';
 import { GrafanaConfig, RawTimeRange, ScopedVars } from '../types';
 import { UrlQueryMap, urlUtil } from './url';
 import { textUtil } from '../text';
@@ -37,6 +38,28 @@ const assureBaseUrl = (url: string): string => {
 };
 
 /**
+ *
+ * @param location
+ * @param searchParamsToUpdate
+ * @returns
+ */
+const getUrlForPartial = (location: Location<any>, searchParamsToUpdate: Record<string, any>) => {
+  const searchParams = urlUtil.parseKeyValue(
+    location.search.startsWith('?') ? location.search.substring(1) : location.search
+  );
+  for (const key of Object.keys(searchParamsToUpdate)) {
+    // removing params with null | undefined
+    if (searchParamsToUpdate[key] === null || searchParamsToUpdate[key] === undefined) {
+      delete searchParams[key];
+    } else {
+      searchParams[key] = searchParamsToUpdate[key];
+    }
+  }
+  return urlUtil.renderUrl(location.pathname, searchParams);
+};
+
+/**
+ * @deprecated use `getUrlForPartial` instead
  * Update URL or search param string `init` with new params `partial`.
  */
 const updateSearchParams = (init: string, partial: string) => {
@@ -92,6 +115,7 @@ export const locationUtil = {
     const params = getVariablesUrlParams(scopedVars);
     return urlUtil.toUrlParams(params);
   },
+  getUrlForPartial,
   processUrl: (url: string) => {
     return grafanaConfig.disableSanitizeHtml ? url : textUtil.sanitizeUrl(url);
   },