PanelInspector: hides Query tab for plugins without Query ability (#24216)

* PanelInspector: fixes so Query tab is hidden for plugins without Query ability

* Refactor: changes after PR comments

public/app/features/dashboard/components/Inspector/PanelInspector.tsx

@@ -27,6 +27,7 @@ import { config } from 'app/core/config';
 import { getPanelInspectorStyles } from './styles';
 import { getPanelInspectorStyles } from './styles';
 import { StoreState } from 'app/types';
 import { StoreState } from 'app/types';
 import { InspectDataTab } from './InspectDataTab';
 import { InspectDataTab } from './InspectDataTab';
+import { supportsDataQuery } from '../PanelEditor/utils';
 
 
 interface OwnProps {
 interface OwnProps {
   dashboard: DashboardModel;
   dashboard: DashboardModel;
@@ -269,7 +270,7 @@ export class PanelInspectorUnconnected extends PureComponent<Props, State> {
     const error = last?.error;
     const error = last?.error;
     const tabs = [];
     const tabs = [];
 
 
-    if (plugin && !plugin.meta.skipDataQuery) {
+    if (supportsDataQuery(plugin)) {
       tabs.push({ label: 'Data', value: InspectTab.Data });
       tabs.push({ label: 'Data', value: InspectTab.Data });
       tabs.push({ label: 'Stats', value: InspectTab.Stats });
       tabs.push({ label: 'Stats', value: InspectTab.Stats });
     }
     }
@@ -284,7 +285,7 @@ export class PanelInspectorUnconnected extends PureComponent<Props, State> {
       tabs.push({ label: 'Error', value: InspectTab.Error });
       tabs.push({ label: 'Error', value: InspectTab.Error });
     }
     }
 
 
-    if (dashboard.meta.canEdit) {
+    if (dashboard.meta.canEdit && supportsDataQuery(plugin)) {
       tabs.push({ label: 'Query', value: InspectTab.Query });
       tabs.push({ label: 'Query', value: InspectTab.Query });
     }
     }
     return tabs;
     return tabs;

public/app/features/dashboard/components/Inspector/QueryInspector.tsx

@@ -8,6 +8,7 @@ import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipb
 import { CoreEvents } from 'app/types';
 import { CoreEvents } from 'app/types';
 import { PanelModel } from 'app/features/dashboard/state';
 import { PanelModel } from 'app/features/dashboard/state';
 import { getPanelInspectorStyles } from './styles';
 import { getPanelInspectorStyles } from './styles';
+import { supportsDataQuery } from '../PanelEditor/utils';
 
 
 interface DsQuery {
 interface DsQuery {
   isLoading: boolean;
   isLoading: boolean;
@@ -188,6 +189,10 @@ export class QueryInspector extends PureComponent<Props, State> {
     const styles = getPanelInspectorStyles();
     const styles = getPanelInspectorStyles();
     const haveData = Object.keys(response).length > 0;
     const haveData = Object.keys(response).length > 0;
 
 
+    if (!supportsDataQuery(this.props.panel.plugin)) {
+      return null;
+    }
+
     return (
     return (
       <>
       <>
         <div aria-label={selectors.components.PanelInspector.Query.content}>
         <div aria-label={selectors.components.PanelInspector.Query.content}>

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

-import { FieldConfig, standardFieldConfigEditorRegistry } from '@grafana/data';
+import { FieldConfig, PanelPlugin, standardFieldConfigEditorRegistry } from '@grafana/data';
+import { supportsDataQuery } from './utils';
 
 
 describe('standardFieldConfigEditorRegistry', () => {
 describe('standardFieldConfigEditorRegistry', () => {
   const dummyConfig: FieldConfig = {
   const dummyConfig: FieldConfig = {
@@ -20,3 +21,32 @@ describe('standardFieldConfigEditorRegistry', () => {
     });
     });
   });
   });
 });
 });
+
+describe('supportsDataQuery', () => {
+  describe('when called with plugin that supports queries', () => {
+    it('then it should return true', () => {
+      const plugin = ({ meta: { skipDataQuery: false } } as unknown) as PanelPlugin;
+      expect(supportsDataQuery(plugin)).toBe(true);
+    });
+  });
+
+  describe('when called with plugin that does not support queries', () => {
+    it('then it should return false', () => {
+      const plugin = ({ meta: { skipDataQuery: true } } as unknown) as PanelPlugin;
+      expect(supportsDataQuery(plugin)).toBe(false);
+    });
+  });
+
+  describe('when called without skipDataQuery', () => {
+    it('then it should return false', () => {
+      const plugin = ({ meta: {} } as unknown) as PanelPlugin;
+      expect(supportsDataQuery(plugin)).toBe(false);
+    });
+  });
+
+  describe('when called without plugin', () => {
+    it('then it should return false', () => {
+      expect(supportsDataQuery(undefined)).toBe(false);
+    });
+  });
+});

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

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 import { PanelModel } from '../../state/PanelModel';
 import { PanelModel } from '../../state/PanelModel';
 import { DisplayMode } from './types';
 import { DisplayMode } from './types';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
+import { PanelPlugin } from '@grafana/data';
 
 
 export function calculatePanelSize(mode: DisplayMode, width: number, height: number, panel: PanelModel): CSSProperties {
 export function calculatePanelSize(mode: DisplayMode, width: number, height: number, panel: PanelModel): CSSProperties {
   if (mode === DisplayMode.Fill) {
   if (mode === DisplayMode.Fill) {
@@ -24,3 +25,7 @@ export function calculatePanelSize(mode: DisplayMode, width: number, height: num
     height: pHeight * scale,
     height: pHeight * scale,
   };
   };
 }
 }
+
+export function supportsDataQuery(plugin: PanelPlugin | undefined): boolean {
+  return plugin?.meta.skipDataQuery === false;
+}