Dashboard: Short url generation works for variables values with spaces (#39552)

public/app/features/dashboard/components/ShareModal/utils.test.ts

@@ -0,0 +1,45 @@
+import { buildParams } from './utils';
+import { TimeRange } from '@grafana/data';
+
+describe('buildParams', () => {
+  it.each`
+    search                                         | useCurrentTimeRange | selectedTheme | panel        | expected
+    ${''}                                          | ${true}             | ${'current'}  | ${undefined} | ${'from=1000&to=2000&orgId=2'}
+    ${''}                                          | ${true}             | ${'current'}  | ${{ id: 3 }} | ${'from=1000&to=2000&orgId=2&viewPanel=3'}
+    ${''}                                          | ${true}             | ${'light'}    | ${undefined} | ${'from=1000&to=2000&orgId=2&theme=light'}
+    ${''}                                          | ${true}             | ${'light'}    | ${{ id: 3 }} | ${'from=1000&to=2000&orgId=2&theme=light&viewPanel=3'}
+    ${''}                                          | ${false}            | ${'current'}  | ${undefined} | ${'orgId=2'}
+    ${''}                                          | ${false}            | ${'current'}  | ${{ id: 3 }} | ${'orgId=2&viewPanel=3'}
+    ${''}                                          | ${false}            | ${'light'}    | ${undefined} | ${'orgId=2&theme=light'}
+    ${''}                                          | ${false}            | ${'light'}    | ${{ id: 3 }} | ${'orgId=2&theme=light&viewPanel=3'}
+    ${'editPanel=4'}                               | ${true}             | ${'current'}  | ${undefined} | ${'editPanel=4&from=1000&to=2000&orgId=2'}
+    ${'editPanel=4'}                               | ${true}             | ${'current'}  | ${{ id: 3 }} | ${'editPanel=4&from=1000&to=2000&orgId=2'}
+    ${'editPanel=4'}                               | ${true}             | ${'light'}    | ${undefined} | ${'editPanel=4&from=1000&to=2000&orgId=2&theme=light'}
+    ${'editPanel=4'}                               | ${true}             | ${'light'}    | ${{ id: 3 }} | ${'editPanel=4&from=1000&to=2000&orgId=2&theme=light'}
+    ${'editPanel=4'}                               | ${false}            | ${'current'}  | ${undefined} | ${'editPanel=4&orgId=2'}
+    ${'editPanel=4'}                               | ${false}            | ${'current'}  | ${{ id: 3 }} | ${'editPanel=4&orgId=2'}
+    ${'editPanel=4'}                               | ${false}            | ${'light'}    | ${undefined} | ${'editPanel=4&orgId=2&theme=light'}
+    ${'editPanel=4'}                               | ${false}            | ${'light'}    | ${{ id: 3 }} | ${'editPanel=4&orgId=2&theme=light'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${true}             | ${'current'}  | ${undefined} | ${'var=%2B1&var=a+value+with+spaces&var=true&from=1000&to=2000&orgId=2'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${true}             | ${'current'}  | ${{ id: 3 }} | ${'var=%2B1&var=a+value+with+spaces&var=true&from=1000&to=2000&orgId=2&viewPanel=3'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${true}             | ${'light'}    | ${undefined} | ${'var=%2B1&var=a+value+with+spaces&var=true&from=1000&to=2000&orgId=2&theme=light'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${true}             | ${'light'}    | ${{ id: 3 }} | ${'var=%2B1&var=a+value+with+spaces&var=true&from=1000&to=2000&orgId=2&theme=light&viewPanel=3'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${false}            | ${'current'}  | ${undefined} | ${'var=%2B1&var=a+value+with+spaces&var=true&orgId=2'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${false}            | ${'current'}  | ${{ id: 3 }} | ${'var=%2B1&var=a+value+with+spaces&var=true&orgId=2&viewPanel=3'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${false}            | ${'light'}    | ${undefined} | ${'var=%2B1&var=a+value+with+spaces&var=true&orgId=2&theme=light'}
+    ${'var=%2B1&var=a+value+with+spaces&var=true'} | ${false}            | ${'light'}    | ${{ id: 3 }} | ${'var=%2B1&var=a+value+with+spaces&var=true&orgId=2&theme=light&viewPanel=3'}
+  `(
+    "when called with search: '$search' and useCurrentTimeRange: '$useCurrentTimeRange' and selectedTheme: '$selectedTheme' and panel: '$panel'then result should be '$expected'",
+    ({ search, useCurrentTimeRange, selectedTheme, panel, expected }) => {
+      const range: TimeRange = ({
+        from: 1000,
+        to: 2000,
+        raw: { from: 'now-6h', to: 'now' },
+      } as unknown) as TimeRange;
+      const orgId = '2';
+      const result = buildParams({ useCurrentTimeRange, selectedTheme, panel, search, range, orgId });
+
+      expect(result.toString()).toEqual(expected);
+    }
+  );
+});

public/app/features/dashboard/components/ShareModal/utils.ts

@@ -1,30 +1,45 @@
 import { config } from '@grafana/runtime';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { createShortLink } from 'app/core/utils/shortLinks';
-import { PanelModel, dateTime, urlUtil } from '@grafana/data';
+import { dateTime, PanelModel, TimeRange, urlUtil } from '@grafana/data';
 
-export function buildParams(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) {
+export interface BuildParamsArgs {
-  let params = urlUtil.getUrlSearchParams();
+  useCurrentTimeRange: boolean;
+  selectedTheme?: string;
+  panel?: PanelModel;
+  search?: string;
+  range?: TimeRange;
+  orgId?: string;
+}
 
-  const range = getTimeSrv().timeRange();
+export function buildParams({
-  params.from = range.from.valueOf();
+  useCurrentTimeRange,
-  params.to = range.to.valueOf();
+  selectedTheme,
-  params.orgId = config.bootData.user.orgId;
+  panel,
+  search = window.location.search,
+  range = getTimeSrv().timeRange(),
+  orgId = config.bootData.user.orgId,
+}: BuildParamsArgs): URLSearchParams {
+  const searchParams = new URLSearchParams(search);
+
+  searchParams.set('from', String(range.from.valueOf()));
+  searchParams.set('to', String(range.to.valueOf()));
+  searchParams.set('orgId', orgId);
 
   if (!useCurrentTimeRange) {
-    delete params.from;
+    searchParams.delete('from');
-    delete params.to;
+    searchParams.delete('to');
   }
 
   if (selectedTheme !== 'current') {
-    params.theme = selectedTheme;
+    searchParams.set('theme', selectedTheme!);
   }
 
-  if (panel && !params.editPanel) {
+  if (panel && !searchParams.has('editPanel')) {
-    params.viewPanel = panel.id;
+    searchParams.set('viewPanel', String(panel.id));
   }
 
-  return params;
+  return searchParams;
 }
 
 export function buildBaseUrl() {
@@ -45,8 +60,8 @@ export async function buildShareUrl(
   shortenUrl?: boolean
 ) {
   const baseUrl = buildBaseUrl();
-  const params = buildParams(useCurrentTimeRange, selectedTheme, panel);
+  const params = buildParams({ useCurrentTimeRange, selectedTheme, panel });
-  const shareUrl = urlUtil.appendQueryToUrl(baseUrl, urlUtil.toUrlParams(params));
+  const shareUrl = urlUtil.appendQueryToUrl(baseUrl, params.toString());
   if (shortenUrl) {
     return await createShortLink(shareUrl);
   }
@@ -55,16 +70,17 @@ export async function buildShareUrl(
 
 export function buildSoloUrl(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) {
   const baseUrl = buildBaseUrl();
-  const params = buildParams(useCurrentTimeRange, selectedTheme, panel);
+  const params = buildParams({ useCurrentTimeRange, selectedTheme, panel });
 
   let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/');
   soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/');
 
-  params.panelId = params.editPanel ?? params.viewPanel;
+  const panelId = params.get('editPanel') ?? params.get('viewPanel') ?? '';
-  delete params.editPanel;
+  params.set('panelId', panelId);
-  delete params.viewPanel;
+  params.delete('editPanel');
+  params.delete('viewPanel');
 
-  return urlUtil.appendQueryToUrl(soloUrl, urlUtil.toUrlParams(params));
+  return urlUtil.appendQueryToUrl(soloUrl, params.toString());
 }
 
 export function buildImageUrl(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) {