AdHocVariables: Fixes crash when values are stored as numbers (#31382)

public/app/features/variables/adhoc/urlParser.test.ts

@@ -78,6 +78,42 @@ describe('urlParser', () => {
     });
   });
 
+  describe('parsing toUrl with filters with number values', () => {
+    it('then url params should be correct', () => {
+      const a = ({
+        value: 1974,
+        key: 'key',
+        operator: '=',
+        condition: '',
+      } as unknown) as AdHocVariableFilter;
+
+      const filters: AdHocVariableFilter[] = [a];
+
+      const expectedA = `key|=|1974`;
+      const expected: string[] = [expectedA];
+
+      expect(toUrl(filters)).toEqual(expected);
+    });
+  });
+
+  describe('parsing toUrl with filters with boolean values', () => {
+    it('then url params should be correct', () => {
+      const a = ({
+        value: false,
+        key: 'key',
+        operator: '=',
+        condition: '',
+      } as unknown) as AdHocVariableFilter;
+
+      const filters: AdHocVariableFilter[] = [a];
+
+      const expectedA = `key|=|false`;
+      const expected: string[] = [expectedA];
+
+      expect(toUrl(filters)).toEqual(expected);
+    });
+  });
+
   describe('parsing toFilters with url containing no filters as string', () => {
     it('then url params should be correct', () => {
       const url: UrlQueryValue = '';

public/app/features/variables/adhoc/urlParser.ts

@@ -17,11 +17,19 @@ export const toFilters = (value: UrlQueryValue): AdHocVariableFilter[] => {
 };
 
 function escapeDelimiter(value: string | undefined): string {
-  return value?.replace(/\|/g, '__gfp__') ?? '';
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  return /\|/g[Symbol.replace](value, '__gfp__');
 }
 
 function unescapeDelimiter(value: string | undefined): string {
-  return value?.replace(/__gfp__/g, '|') ?? '';
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  return /__gfp__/g[Symbol.replace](value, '|');
 }
 
 function toArray(filter: AdHocVariableFilter): string[] {