From 5b9097e7ffae5b611a723f6c447511fa09901896 Mon Sep 17 00:00:00 2001
From: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com>
Date: Tue, 21 Nov 2023 09:17:41 -0700
Subject: [PATCH] Explore: Wrap RawPrometheusContainer with PanelChrome
 (#78084)

* Use LoadingState type for loading prop

* Fix test
---
 .../RawPrometheus/RawPrometheusContainer.test.tsx  |  9 +++++++--
 .../RawPrometheus/RawPrometheusContainer.tsx       | 14 ++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/public/app/features/explore/RawPrometheus/RawPrometheusContainer.test.tsx b/public/app/features/explore/RawPrometheus/RawPrometheusContainer.test.tsx
index a310592e37a..bdc901630ba 100644
--- a/public/app/features/explore/RawPrometheus/RawPrometheusContainer.test.tsx
+++ b/public/app/features/explore/RawPrometheus/RawPrometheusContainer.test.tsx
@@ -1,7 +1,8 @@
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
 
-import { FieldType, getDefaultTimeRange, InternalTimeZones, toDataFrame } from '@grafana/data';
+import { FieldType, getDefaultTimeRange, InternalTimeZones, toDataFrame, LoadingState } from '@grafana/data';
+import { getTemplateSrv } from 'app/features/templating/template_srv';
 import { TABLE_RESULTS_STYLE } from 'app/types';
 
 import { RawPrometheusContainer } from './RawPrometheusContainer';
@@ -53,7 +54,7 @@ const dataFrame = toDataFrame({
 
 const defaultProps = {
   exploreId: 'left',
-  loading: false,
+  loading: LoadingState.NotStarted,
   width: 800,
   onCellFilterAdded: jest.fn(),
   tableResult: [dataFrame],
@@ -65,6 +66,10 @@ const defaultProps = {
 };
 
 describe('RawPrometheusContainer', () => {
+  beforeAll(() => {
+    getTemplateSrv();
+  });
+
   it('should render component for prometheus', () => {
     render(<RawPrometheusContainer {...defaultProps} showRawPrometheus={true} />);
 
diff --git a/public/app/features/explore/RawPrometheus/RawPrometheusContainer.tsx b/public/app/features/explore/RawPrometheus/RawPrometheusContainer.tsx
index 9bcfacab161..3cf40901475 100644
--- a/public/app/features/explore/RawPrometheus/RawPrometheusContainer.tsx
+++ b/public/app/features/explore/RawPrometheus/RawPrometheusContainer.tsx
@@ -4,7 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { applyFieldOverrides, DataFrame, SelectableValue, SplitOpen, TimeZone } from '@grafana/data';
 import { getTemplateSrv, reportInteraction } from '@grafana/runtime';
-import { Collapse, RadioButtonGroup, Table, AdHocFilterItem } from '@grafana/ui';
+import { RadioButtonGroup, Table, AdHocFilterItem, PanelChrome } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { PANEL_BORDER } from 'app/core/constants';
 import { StoreState, TABLE_RESULTS_STYLE } from 'app/types';
@@ -12,7 +12,6 @@ import { ExploreItemState, TABLE_RESULTS_STYLES, TableResultsStyle } from 'app/t
 
 import { MetaInfoText } from '../MetaInfoText';
 import RawListContainer from '../PrometheusListView/RawListContainer';
-import { selectIsWaitingForData } from '../state/query';
 import { exploreDataLinkPostProcessorFactory } from '../utils/links';
 
 interface RawPrometheusContainerProps {
@@ -32,11 +31,10 @@ interface PrometheusContainerState {
 function mapStateToProps(state: StoreState, { exploreId }: RawPrometheusContainerProps) {
   const explore = state.explore;
   const item: ExploreItemState = explore.panes[exploreId]!;
-  const { tableResult, rawPrometheusResult, range } = item;
-  const loadingInState = selectIsWaitingForData(exploreId)(state);
+  const { tableResult, rawPrometheusResult, range, queryResponse } = item;
   const rawPrometheusFrame: DataFrame[] = rawPrometheusResult ? [rawPrometheusResult] : [];
   const result = (tableResult?.length ?? 0) > 0 && rawPrometheusResult ? tableResult : rawPrometheusFrame;
-  const loading = result && result.length > 0 ? false : loadingInState;
+  const loading = queryResponse.state;
 
   return { loading, tableResult: result, range };
 }
@@ -86,7 +84,6 @@ export class RawPrometheusContainer extends PureComponent<Props, PrometheusConta
 
     return (
       <div className={spacing}>
-        {this.state.resultsStyle === TABLE_RESULTS_STYLE.raw ? 'Raw' : 'Table'}
         <RadioButtonGroup
           onClick={() => {
             const props = {
@@ -133,13 +130,14 @@ export class RawPrometheusContainer extends PureComponent<Props, PrometheusConta
       (frame: DataFrame | undefined): frame is DataFrame => !!frame && frame.length !== 0
     );
 
+    const title = this.state.resultsStyle === TABLE_RESULTS_STYLE.raw ? 'Raw' : 'Table';
     const label = this.state?.resultsStyle !== undefined ? this.renderLabel() : 'Table';
 
     // Render table as default if resultsStyle is not set.
     const renderTable = !this.state?.resultsStyle || this.state?.resultsStyle === TABLE_RESULTS_STYLE.table;
 
     return (
-      <Collapse label={label} loading={loading} isOpen>
+      <PanelChrome title={title} actions={label} loadingState={loading}>
         {frames?.length && (
           <>
             {renderTable && (
@@ -155,7 +153,7 @@ export class RawPrometheusContainer extends PureComponent<Props, PrometheusConta
           </>
         )}
         {!frames?.length && <MetaInfoText metaItems={[{ value: '0 series returned' }]} />}
-      </Collapse>
+      </PanelChrome>
     );
   }
 }