Dashboard: Remove the current panel from the list of options in the Dashboard datasource (#41826)

* Dashboard: Update check for current panel

* Get datasource name as before

* Update public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

* import SHARED_DASHBOARD_QUERY

* Add some unit tests

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getDefaultTimeRange, LoadingState } from '@grafana/data';
+import { SHARED_DASHBOARD_QUERY } from './types';
+import { DashboardQueryEditor } from './DashboardQueryEditor';
+import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { DashboardModel } from 'app/features/dashboard/state';
+
+jest.mock('app/core/config', () => ({
+  ...((jest.requireActual('app/core/config') as unknown) as object),
+  panels: {
+    timeseries: {
+      info: {
+        logos: {
+          small: '',
+        },
+      },
+    },
+  },
+}));
+
+jest.mock('app/features/plugins/datasource_srv', () => ({
+  getDatasourceSrv: () => ({
+    get: () => ({}),
+    getInstanceSettings: () => ({}),
+  }),
+}));
+
+describe('DashboardQueryEditor', () => {
+  const mockOnChange = jest.fn();
+  const mockOnRunQueries = jest.fn();
+  const mockPanelData = {
+    state: LoadingState.Done,
+    series: [],
+    timeRange: getDefaultTimeRange(),
+  };
+  const mockQueries = [{ refId: 'A' }];
+  let mockDashboard: DashboardModel;
+
+  beforeEach(() => {
+    mockDashboard = new DashboardModel({
+      panels: [
+        {
+          targets: [],
+          type: 'timeseries',
+          id: 1,
+          title: 'My first panel',
+        },
+        {
+          targets: [],
+          id: 2,
+          type: 'timeseries',
+          title: 'Another panel',
+        },
+        {
+          datasource: {
+            uid: SHARED_DASHBOARD_QUERY,
+          },
+          targets: [],
+          id: 3,
+          type: 'timeseries',
+          title: 'A dashboard query panel',
+        },
+      ],
+    });
+    jest.spyOn(getDashboardSrv(), 'getCurrent').mockImplementation(() => mockDashboard);
+  });
+
+  it('does not show a panel with the SHARED_DASHBOARD_QUERY datasource as an option in the dropdown', () => {
+    render(
+      <DashboardQueryEditor
+        queries={mockQueries}
+        panelData={mockPanelData}
+        onChange={mockOnChange}
+        onRunQueries={mockOnRunQueries}
+      />
+    );
+    const select = screen.getByText('Choose panel');
+    userEvent.click(select);
+    expect(screen.getByText('My first panel')).toBeInTheDocument();
+    expect(screen.getByText('Another panel')).toBeInTheDocument();
+    expect(screen.queryByText('A dashboard query panel')).not.toBeInTheDocument();
+  });
+
+  it('does not show the current panelInEdit as an option in the dropdown', () => {
+    mockDashboard.initEditPanel(mockDashboard.panels[0]);
+    render(
+      <DashboardQueryEditor
+        queries={mockQueries}
+        panelData={mockPanelData}
+        onChange={mockOnChange}
+        onRunQueries={mockOnRunQueries}
+      />
+    );
+    const select = screen.getByText('Choose panel');
+    userEvent.click(select);
+    expect(screen.queryByText('My first panel')).not.toBeInTheDocument();
+    expect(screen.getByText('Another panel')).toBeInTheDocument();
+    expect(screen.queryByText('A dashboard query panel')).not.toBeInTheDocument();
+  });
+});

public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx

@@ -3,7 +3,7 @@ import { LegacyForms, VerticalGroup } from '@grafana/ui';
 import { DataQuery, PanelData, SelectableValue } from '@grafana/data';
 import { css } from '@emotion/css';
 
-import { DashboardQuery, ResultInfo, SHARED_DASHBODARD_QUERY } from './types';
+import { DashboardQuery, ResultInfo, SHARED_DASHBOARD_QUERY } from './types';
 import config from 'app/core/config';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { PanelModel } from 'app/features/dashboard/state';
@@ -115,7 +115,8 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
 
   getPanelDescription = (panel: PanelModel): string => {
     const { defaultDatasource } = this.state;
-    const dsname = panel.datasource ? panel.datasource : defaultDatasource;
+    const datasource = panel.datasource ? panel.datasource : defaultDatasource;
+    const dsname = getDatasourceSrv().getInstanceSettings(datasource)?.name;
 
     if (panel.targets.length === 1) {
       return '1 query to ' + dsname;
@@ -141,7 +142,7 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
         continue;
       }
 
-      if (panel.targets && panel.datasource !== SHARED_DASHBODARD_QUERY) {
+      if (panel.targets && panel.id !== dashboard.panelInEdit?.id && panel.datasource?.uid !== SHARED_DASHBOARD_QUERY) {
         const item = {
           value: panel.id,
           label: panel.title ? panel.title : 'Panel ' + panel.id,
@@ -174,7 +175,7 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
           <div className="gf-form-label">Use results from panel</div>
           <Select
             menuShouldPortal
-            placeholder="Choose Panel"
+            placeholder="Choose panel"
             isSearchable={true}
             options={panels}
             value={selected}

public/app/plugins/datasource/dashboard/index.ts

@@ -1,3 +1,3 @@
 export { isSharedDashboardQuery, runSharedRequest } from './runSharedRequest';
 export { DashboardQueryEditor } from './DashboardQueryEditor';
-export { SHARED_DASHBODARD_QUERY } from './types';
+export { SHARED_DASHBOARD_QUERY } from './types';

public/app/plugins/datasource/dashboard/runSharedRequest.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { QueryRunnerOptions } from 'app/features/query/state/PanelQueryRunner';
-import { DashboardQuery, SHARED_DASHBODARD_QUERY } from './types';
+import { DashboardQuery, SHARED_DASHBOARD_QUERY } from './types';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import {
   DataQuery,
@@ -17,11 +17,11 @@ export function isSharedDashboardQuery(datasource: string | DataSourceRef | Data
     // default datasource
     return false;
   }
-  if (datasource === SHARED_DASHBODARD_QUERY || (datasource as any)?.uid === SHARED_DASHBODARD_QUERY) {
+  if (datasource === SHARED_DASHBOARD_QUERY || (datasource as any)?.uid === SHARED_DASHBOARD_QUERY) {
     return true;
   }
   const ds = datasource as DataSourceApi;
-  return ds.meta && ds.meta.name === SHARED_DASHBODARD_QUERY;
+  return ds.meta && ds.meta.name === SHARED_DASHBOARD_QUERY;
 }
 
 export function runSharedRequest(options: QueryRunnerOptions): Observable<PanelData> {

public/app/plugins/datasource/dashboard/types.ts

@@ -1,6 +1,6 @@
 import { DataFrame, DataQuery, DataQueryError } from '@grafana/data';
 
-export const SHARED_DASHBODARD_QUERY = '-- Dashboard --';
+export const SHARED_DASHBOARD_QUERY = '-- Dashboard --';
 
 export interface DashboardQuery extends DataQuery {
   panelId?: number;