[v10.4.x] Alerting: Fix broken panelId links (#94686)

* Alerting: Fix broken panelId links (#84839)

(cherry picked from commit 4c247f959b)

* Fix conflicts

---------

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
Co-authored-by: Konrad Lalik <konrad.lalik@grafana.com>

.betterer.results.json

@@ -1028,12 +1028,6 @@
         "count": 5
       }
     ],
-    "/packages/grafana-ui/src/components/Splitter/Splitter.tsx": [
-      {
-        "message": "Do not use any type assertions.",
-        "count": 1
-      }
-    ],
     "/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -1564,12 +1558,6 @@
         "count": 1
       }
     ],
-    "/public/app/core/specs/time_series.test.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/core/time_series2.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -1790,12 +1778,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/alerting/unified/AlertsFolderView.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/alerting/unified/AlertsFolderView.tsx": [
       {
         "message": "Styles should be written using objects.",
@@ -2930,12 +2912,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/dashboard-scene/panel-edit/VizPanelManager.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx": [
       {
         "message": "Use data-testid for E2E selectors instead of aria-label",
@@ -2954,12 +2930,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -2970,18 +2940,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/dashboard-scene/scene/setDashboardPanelContext.test.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
-    "/public/app/features/dashboard-scene/serialization/angularMigration.test.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 2
-      }
-    ],
     "/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -3055,7 +3013,7 @@
     "/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 21
+        "count": 6
       }
     ],
     "/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts": [
@@ -3441,7 +3399,7 @@
     "/public/app/features/dashboard/state/DashboardMigrator.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 19
+        "count": 12
       }
     ],
     "/public/app/features/dashboard/state/DashboardMigrator.ts": [
@@ -3457,7 +3415,7 @@
     "/public/app/features/dashboard/state/DashboardModel.repeat.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 7
+        "count": 4
       }
     ],
     "/public/app/features/dashboard/state/DashboardModel.test.ts": [
@@ -3507,7 +3465,7 @@
     "/public/app/features/dashboard/state/initDashboard.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 2
+        "count": 1
       }
     ],
     "/public/app/features/dashboard/utils/getPanelMenu.test.ts": [
@@ -4643,7 +4601,7 @@
     "/public/app/features/plugins/tests/datasource_srv.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 4
+        "count": 3
       }
     ],
     "/public/app/features/plugins/utils.ts": [
@@ -4743,7 +4701,7 @@
     "/public/app/features/query/state/updateQueries.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 12
+        "count": 11
       }
     ],
     "/public/app/features/search/page/components/ActionRow.tsx": [
@@ -5103,7 +5061,7 @@
     "/public/app/features/transformers/prepareTimeSeries/prepareTimeSeries.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 2
+        "count": 1
       }
     ],
     "/public/app/features/transformers/prepareTimeSeries/prepareTimeSeries.ts": [
@@ -5266,12 +5224,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/variables/query/QueryVariableEditor.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/variables/query/QueryVariableEditor.tsx": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -5309,7 +5261,7 @@
     "/public/app/features/variables/query/queryRunners.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 7
+        "count": 1
       }
     ],
     "/public/app/features/variables/query/queryRunners.ts": [
@@ -5405,7 +5357,7 @@
       },
       {
         "message": "Do not use any type assertions.",
-        "count": 2
+        "count": 1
       }
     ],
     "/public/app/features/visualization/data-hover/DataHoverRows.tsx": [
@@ -5590,6 +5542,12 @@
         "count": 1
       }
     ],
+    "/public/app/plugins/datasource/dashboard/datasource.ts": [
+      {
+        "message": "Do not use any type assertions.",
+        "count": 1
+      }
+    ],
     "/public/app/plugins/datasource/dashboard/runSharedRequest.ts": [
       {
         "message": "Do not use any type assertions.",
@@ -7104,46 +7062,6 @@
         "count": 2
       }
     ],
-    "/public/app/plugins/panel/table-old/column_options.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 22
-      }
-    ],
-    "/public/app/plugins/panel/table-old/editor.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 9
-      }
-    ],
-    "/public/app/plugins/panel/table-old/module.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 12
-      }
-    ],
-    "/public/app/plugins/panel/table-old/renderer.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 12
-      },
-      {
-        "message": "Do not use any type assertions.",
-        "count": 1
-      }
-    ],
-    "/public/app/plugins/panel/table-old/transformers.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 9
-      }
-    ],
-    "/public/app/plugins/panel/table-old/types.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 13
-      }
-    ],
     "/public/app/plugins/panel/table/TablePanel.tsx": [
       {
         "message": "Styles should be written using objects.",

public/app/features/alerting/unified/components/rules/RulesGroup.tsx

@@ -278,7 +278,7 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }:
           namespace={namespace}
           group={group}
           onClose={() => closeEditModal()}
-          folderUrl={folder?.canEdit ? makeFolderSettingsLink(folder) : undefined}
+          folderUrl={folder?.canEdit ? makeFolderSettingsLink(folder.uid) : undefined}
           folderUid={folderUID}
         />
       )}

public/app/features/alerting/unified/integration/LegacyAlertsDeprecationNotice.tsx

@@ -61,10 +61,7 @@ function LegacyAlertsWarning({ dashboardUid, panels }: Props) {
       id: 'title',
       header: 'Title',
       cell: (cell) => (
-        <TextLink
-          external
-          href={makePanelLink(dashboardUid, String(cell.row.id), { editPanel: cell.row.id, tab: 'alert' })}
-        >
+        <TextLink external href={makePanelLink(dashboardUid, String(cell.row.id), 'edit', 'alert')}>
           {cell.value}
         </TextLink>
       ),

public/app/features/alerting/unified/utils/misc.test.ts

@@ -1,4 +1,16 @@
-import { sortAlerts, wrapWithQuotes, escapeQuotes, createExploreLink } from 'app/features/alerting/unified/utils/misc';
+import {
+  sortAlerts,
+  wrapWithQuotes,
+  escapeQuotes,
+  createExploreLink,
+  makeLabelBasedSilenceLink,
+  makeDataSourceLink,
+  makeFolderLink,
+  makeFolderAlertsLink,
+  makeFolderSettingsLink,
+  makeDashboardLink,
+  makePanelLink,
+} from 'app/features/alerting/unified/utils/misc';
 import { SortOrder } from 'app/plugins/panel/alertlist/types';
 import { Alert } from 'app/types/unified-alerting';
 import { GrafanaAlertState } from 'app/types/unified-alerting-dto';
@@ -95,3 +107,40 @@ describe('createExploreLink', () => {
     );
   });
 });
+
+describe('create links', () => {
+  it('should create silence link', () => {
+    expect(makeLabelBasedSilenceLink('grafana', { foo: 'bar', bar: 'baz' })).toBe(
+      '/alerting/silence/new?alertmanager=grafana&matcher=foo%3Dbar&matcher=bar%3Dbaz'
+    );
+  });
+
+  it('should create data source link', () => {
+    expect(makeDataSourceLink('my-data-source')).toBe('/datasources/edit/my-data-source');
+  });
+
+  it('should make folder link', () => {
+    expect(makeFolderLink('abc123')).toBe('/dashboards/f/abc123');
+  });
+
+  it('should make folder alerts link', () => {
+    expect(makeFolderAlertsLink('abc123', 'my-title')).toBe('/dashboards/f/abc123/my-title/alerting');
+  });
+
+  it('should make folder settings link', () => {
+    expect(makeFolderSettingsLink('abc123')).toBe('/dashboards/f/abc123/settings');
+  });
+
+  it('should make dashboard link', () => {
+    expect(makeDashboardLink('abc123 def456')).toBe('/d/abc123%20def456');
+  });
+  it('should make panel view link', () => {
+    expect(makePanelLink('dashboard uid', '1')).toBe('/d/dashboard%20uid?viewPanel=1');
+  });
+  it('should make panel edit link', () => {
+    expect(makePanelLink('dashboard uid', '1', 'edit')).toBe('/d/dashboard%20uid?editPanel=1');
+  });
+  it('should make panel edit link with tab', () => {
+    expect(makePanelLink('dashboard uid', '1', 'edit', 'alert')).toBe('/d/dashboard%20uid?editPanel=1&tab=alert');
+  });
+});

public/app/features/alerting/unified/utils/misc.ts

@@ -14,8 +14,6 @@ import {
   mapStateWithReasonToBaseState,
 } from 'app/types/unified-alerting-dto';
 
-import { FolderDTO } from '../../../../types';
-
 import { ALERTMANAGER_NAME_QUERY_KEY } from './constants';
 import { getRulesSourceName, isCloudRulesSource } from './datasource';
 import { getMatcherQueryParams } from './matchers';
@@ -149,22 +147,27 @@ export function makeFolderAlertsLink(folderUID: string, title: string): string {
   return createUrl(`/dashboards/f/${folderUID}/${title}/alerting`);
 }
 
-export function makeFolderSettingsLink(folder: FolderDTO): string {
-  return createUrl(`/dashboards/f/${folder.uid}/settings`);
+export function makeFolderSettingsLink(uid: string): string {
+  return createUrl(`/dashboards/f/${uid}/settings`);
 }
 
 export function makeDashboardLink(dashboardUID: string): string {
   return createUrl(`/d/${encodeURIComponent(dashboardUID)}`);
 }
 
-type PanelLinkParams = {
-  viewPanel?: string;
-  editPanel?: string;
-  tab?: 'alert' | 'transform' | 'query';
-};
+export function makePanelLink(
+  dashboardUID: string,
+  panelId: string,
+  mode: 'view' | 'edit' = 'view',
+  tab?: 'alert' | 'transform' | 'query'
+): string {
+  const panelIdParam = mode === 'edit' ? 'editPanel' : 'viewPanel';
+  const panelParams = new URLSearchParams({ [panelIdParam]: panelId });
+
+  if (tab) {
+    panelParams.set('tab', tab);
+  }
 
-export function makePanelLink(dashboardUID: string, panelId: string, queryParams: PanelLinkParams = {}): string {
-  const panelParams = new URLSearchParams(queryParams);
   return createUrl(`/d/${encodeURIComponent(dashboardUID)}`, panelParams);
 }