From 324f7d7534e32c97032e7878095e9adbc3ae119a Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Tue, 19 Dec 2023 17:41:49 +0100
Subject: [PATCH] Alerting: Allow linking to library panels (#79693)

---
 .../rule-editor/DashboardPicker.test.tsx      | 47 ++++++++++++-------
 .../rule-editor/DashboardPicker.tsx           | 14 ++++--
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx
index 4257ac8c82d..e7da3147ca0 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.test.tsx
@@ -1,4 +1,4 @@
-import { act, render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { noop } from 'lodash';
 import React from 'react';
 import { AutoSizerProps } from 'react-virtualized-auto-sizer';
@@ -29,7 +29,22 @@ mockDashboardApi(server).dashboard(
   mockDashboardDto({
     uid: 'dash-2',
     title: 'Dashboard 2',
-    panels: [{ type: 'graph' }, { type: 'timeseries' }],
+    panels: [
+      {
+        type: 'graph',
+      },
+      {
+        type: 'timeseries',
+      },
+      // this one is a library panel
+      {
+        type: undefined,
+        libraryPanel: {
+          name: 'my library panel',
+          uid: 'abc123',
+        },
+      },
+    ],
   })
 );
 
@@ -38,26 +53,22 @@ const ui = {
 };
 
 describe('DashboardPicker', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
   it('Renders panels without ids', async () => {
     render(<DashboardPicker isOpen={true} onChange={noop} onDismiss={noop} dashboardUid="dash-2" panelId={2} />, {
       wrapper: TestProvider,
     });
-    act(() => {
-      jest.advanceTimersByTime(500);
+
+    await waitFor(() => {
+      expect(ui.dashboardButton(/Dashboard 1/).get()).toBeInTheDocument();
+      expect(ui.dashboardButton(/Dashboard 2/).get()).toBeInTheDocument();
+      expect(ui.dashboardButton(/Dashboard 3/).get()).toBeInTheDocument();
+
+      const panels = ui.dashboardButton(/<No title>/).getAll();
+      expect(panels).toHaveLength(3);
+
+      panels.forEach((panel) => {
+        expect(panel).not.toBeDisabled();
+      });
     });
-
-    expect(await ui.dashboardButton(/Dashboard 1/).find()).toBeInTheDocument();
-    expect(await ui.dashboardButton(/Dashboard 2/).find()).toBeInTheDocument();
-    expect(await ui.dashboardButton(/Dashboard 3/).find()).toBeInTheDocument();
-
-    expect(await ui.dashboardButton(/<No title>/).findAll()).toHaveLength(2);
   });
 });
diff --git a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
index ccf98cca736..cea1fa52127 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
@@ -81,7 +81,7 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
       .sort(panelSort) ?? [];
 
   const currentPanel: PanelDTO | undefined = allDashboardPanels.find(
-    (panel: PanelDTO) => isValidPanelIdentifier(panel) && panel.id?.toString() === selectedPanelId
+    (panel: PanelDTO) => isValidPanel(panel) && panel.id?.toString() === selectedPanelId
   );
 
   const selectedDashboardIndex = useMemo(() => {
@@ -135,7 +135,7 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
     const panelTitle = panel.title || '<No title>';
     const isSelected = Boolean(panel.id) && selectedPanelId === panel.id;
     const isAlertingCompatible = panel.type === 'graph' || panel.type === 'timeseries';
-    const disabled = !isValidPanelIdentifier(panel);
+    const disabled = !isValidPanel(panel);
 
     return (
       <button
@@ -152,7 +152,7 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
           {panelTitle}
         </div>
         {!isAlertingCompatible && !disabled && (
-          <Tooltip content="Alert tab will be disabled for this panel. It is only supported on graph and timeseries panels">
+          <Tooltip content="The alert tab and alert annotations are only supported on graph and timeseries panels.">
             <Icon name="exclamation-triangle" className={styles.warnIcon} data-testid="warning-icon" />
           </Tooltip>
         )}
@@ -276,8 +276,12 @@ export function getVisualPanels(dashboardModel: DashboardModel | undefined) {
   return allDashboardPanels;
 }
 
-const isValidPanelIdentifier = (panel: PanelDTO): boolean => {
-  return typeof panel.id === 'number' && typeof panel.type === 'string';
+const isValidPanel = (panel: PanelDTO): boolean => {
+  const hasValidID = typeof panel.id === 'number';
+  const isValidPanelType = typeof panel.type === 'string';
+  const isLibraryPanel = 'libraryPanel' in panel;
+
+  return hasValidID && (isValidPanelType || isLibraryPanel);
 };
 
 const getPickerStyles = (theme: GrafanaTheme2) => {