Explore: Fix showing of Prometheus data in Query inspector (#28128)

* Fix showing of data in explore's query inspector

* Add test

* Add test

* Updat etest

* Implement react-testing-library and remove props export

* Update tests for consistency

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -51,6 +51,8 @@ export const Tab = React.forwardRef<HTMLLIElement, TabProps>(
   }
 );
 
+Tab.displayName = 'Tab';
+
 const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
   const colors = theme.colors;
 

public/app/features/explore/ExploreQueryInspector.test.tsx

@@ -0,0 +1,82 @@
+import React, { ComponentProps } from 'react';
+import { Observable } from 'rxjs';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TimeRange, LoadingState } from '@grafana/data';
+import { ExploreId } from 'app/types';
+import { ExploreQueryInspector } from './ExploreQueryInspector';
+
+type ExploreQueryInspectorProps = ComponentProps<typeof ExploreQueryInspector>;
+
+jest.mock('../dashboard/components/Inspector/styles', () => ({
+  getPanelInspectorStyles: () => ({}),
+}));
+
+jest.mock('app/core/services/backend_srv', () => ({
+  getBackendSrv: () => ({
+    getInspectorStream: () =>
+      new Observable(subscriber => {
+        subscriber.next(response());
+        subscriber.next(response(true));
+      }) as any,
+  }),
+}));
+
+jest.mock('app/core/services/context_srv', () => ({
+  contextSrv: {
+    user: { orgId: 1 },
+  },
+}));
+
+const setup = () => {
+  const props: ExploreQueryInspectorProps = {
+    loading: false,
+    width: 100,
+    exploreId: ExploreId.left,
+    onClose: jest.fn(),
+    queryResponse: {
+      state: LoadingState.Done,
+      series: [],
+      timeRange: {} as TimeRange,
+    },
+  };
+
+  return render(<ExploreQueryInspector {...props} />);
+};
+
+describe('ExploreQueryInspector', () => {
+  it('should render closable drawer component', () => {
+    setup();
+    expect(screen.getByTitle(/close query inspector/i)).toBeInTheDocument();
+  });
+  it('should render 2 Tabs', () => {
+    setup();
+    expect(screen.getByLabelText(/tab stats/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/tab query inspector/i)).toBeInTheDocument();
+  });
+  it('should display query data', () => {
+    setup();
+    fireEvent.click(screen.getByLabelText(/tab query inspector/i));
+    fireEvent.click(screen.getByText(/expand all/i));
+    expect(screen.getByText(/very unique test value/i)).toBeInTheDocument();
+  });
+});
+
+const response = (hideFromInspector = false) => ({
+  status: 1,
+  statusText: '',
+  ok: true,
+  headers: {} as any,
+  redirected: false,
+  type: 'basic',
+  url: '',
+  request: {} as any,
+  data: {
+    test: {
+      testKey: 'Very unique test value',
+    },
+  },
+  config: {
+    url: '',
+    hideFromInspector,
+  },
+});

public/app/features/explore/ExploreQueryInspector.tsx

@@ -14,9 +14,9 @@ import { InspectStatsTab } from '../dashboard/components/Inspector/InspectStatsT
 import { getPanelInspectorStyles } from '../dashboard/components/Inspector/styles';
 
 function stripPropsFromResponse(response: any) {
-  // ignore silent requests
+  // ignore silent requests and return early
   if (response.config?.hideFromInspector) {
-    return {};
+    return;
   }
 
   const clonedResponse = { ...response }; // clone - dont modify the response
@@ -65,7 +65,7 @@ interface Props {
   onClose: () => void;
 }
 
-function ExploreQueryInspector(props: Props) {
+export function ExploreQueryInspector(props: Props) {
   const [formattedJSON, setFormattedJSON] = useState({});
 
   const getTextForClipboard = () => {
@@ -98,7 +98,9 @@ function ExploreQueryInspector(props: Props) {
       .getInspectorStream()
       .subscribe(resp => {
         const strippedResponse = stripPropsFromResponse(resp);
+        if (strippedResponse) {
           setResponse(strippedResponse);
+        }
       });
 
     return () => {
@@ -108,7 +110,6 @@ function ExploreQueryInspector(props: Props) {
 
   const haveData = response && Object.keys(response).length > 0;
   const styles = getPanelInspectorStyles();
-
   const statsTab: TabConfig = {
     label: 'Stats',
     value: 'stats',