Explore: Refactor RichHistory.tsx into a functional component (#78144)

* Refactor to functional component

* Remove theme as it's unused

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

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
 import { SortOrder } from 'app/core/utils/richHistory';
 
 import { RichHistory, RichHistoryProps, Tabs } from './RichHistory';
@@ -21,7 +20,6 @@ jest.mock('@grafana/runtime', () => ({
 
 const setup = (propOverrides?: Partial<RichHistoryProps>) => {
   const props: RichHistoryProps = {
-    theme: {} as GrafanaTheme2,
     exploreId: 'left',
     height: 100,
     activeDatasourceInstance: 'Test datasource',

public/app/features/explore/RichHistory/RichHistory.tsx

@@ -1,8 +1,8 @@
 import { debounce } from 'lodash';
-import React, { PureComponent } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Themeable2, TabbedContainer, TabConfig, withTheme2 } from '@grafana/ui';
+import { TabbedContainer, TabConfig } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { SortOrder, RichHistorySearchFilters, RichHistorySettings } from 'app/core/utils/richHistory';
 import { RichHistoryQuery } from 'app/types/explore';
@@ -27,7 +27,7 @@ export const getSortOrderOptions = () =>
     { label: t('explore.rich-history.datasource-z-a', 'Data source Z-A'), value: SortOrder.DatasourceZA },
   ].filter((option) => supportedFeatures().availableFilters.includes(option.value));
 
-export interface RichHistoryProps extends Themeable2 {
+export interface RichHistoryProps {
   richHistory: RichHistoryQuery[];
   richHistoryTotal?: number;
   richHistorySettings: RichHistorySettings;
@@ -45,61 +45,7 @@ export interface RichHistoryProps extends Themeable2 {
   onClose: () => void;
 }
 
-type RichHistoryState = {
+export function RichHistory(props: RichHistoryProps) {
-  loading: boolean;
-};
-
-class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
-  state: RichHistoryState = {
-    loading: false,
-  };
-
-  updateSettings = (settingsToUpdate: Partial<RichHistorySettings>) => {
-    this.props.updateHistorySettings({ ...this.props.richHistorySettings, ...settingsToUpdate });
-  };
-
-  updateFilters = (filtersToUpdate?: Partial<RichHistorySearchFilters>) => {
-    const filters = {
-      ...this.props.richHistorySearchFilters!,
-      ...filtersToUpdate,
-      page: 1, // always load fresh results when updating filters
-    };
-    this.props.updateHistorySearchFilters(this.props.exploreId, filters);
-    this.loadRichHistory();
-  };
-
-  clearResults = () => {
-    this.props.clearRichHistoryResults(this.props.exploreId);
-  };
-
-  loadRichHistory = debounce(() => {
-    this.props.loadRichHistory(this.props.exploreId);
-    this.setState({
-      loading: true,
-    });
-  }, 300);
-
-  onChangeRetentionPeriod = (retentionPeriod: SelectableValue<number>) => {
-    if (retentionPeriod.value !== undefined) {
-      this.updateSettings({ retentionPeriod: retentionPeriod.value });
-    }
-  };
-
-  toggleStarredTabAsFirstTab = () =>
-    this.updateSettings({ starredTabAsFirstTab: !this.props.richHistorySettings.starredTabAsFirstTab });
-
-  toggleActiveDatasourceOnly = () =>
-    this.updateSettings({ activeDatasourceOnly: !this.props.richHistorySettings.activeDatasourceOnly });
-
-  componentDidUpdate(prevProps: Readonly<RichHistoryProps>) {
-    if (prevProps.richHistory !== this.props.richHistory) {
-      this.setState({
-        loading: false,
-      });
-    }
-  }
-
-  render() {
   const {
     richHistory,
     richHistoryTotal,
@@ -109,8 +55,44 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
     onClose,
     firstTab,
     activeDatasourceInstance,
-    } = this.props;
+  } = props;
-    const { loading } = this.state;
+
+  const [loading, setLoading] = useState(false);
+
+  const updateSettings = (settingsToUpdate: Partial<RichHistorySettings>) => {
+    props.updateHistorySettings({ ...props.richHistorySettings, ...settingsToUpdate });
+  };
+
+  const updateFilters = (filtersToUpdate?: Partial<RichHistorySearchFilters>) => {
+    const filters = {
+      ...props.richHistorySearchFilters!,
+      ...filtersToUpdate,
+      page: 1, // always load fresh results when updating filters
+    };
+    props.updateHistorySearchFilters(props.exploreId, filters);
+    loadRichHistory();
+  };
+
+  const loadRichHistory = debounce(() => {
+    props.loadRichHistory(props.exploreId);
+    setLoading(true);
+  }, 300);
+
+  const onChangeRetentionPeriod = (retentionPeriod: SelectableValue<number>) => {
+    if (retentionPeriod.value !== undefined) {
+      updateSettings({ retentionPeriod: retentionPeriod.value });
+    }
+  };
+
+  const toggleStarredTabAsFirstTab = () =>
+    updateSettings({ starredTabAsFirstTab: !props.richHistorySettings.starredTabAsFirstTab });
+
+  const toggleActiveDatasourceOnly = () =>
+    updateSettings({ activeDatasourceOnly: !props.richHistorySettings.activeDatasourceOnly });
+
+  useEffect(() => {
+    setLoading(false);
+  }, [richHistory]);
 
   const QueriesTab: TabConfig = {
     label: t('explore.rich-history.query-history', 'Query history'),
@@ -120,12 +102,12 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
         queries={richHistory}
         totalQueries={richHistoryTotal || 0}
         loading={loading}
-          updateFilters={this.updateFilters}
+        updateFilters={updateFilters}
-          clearRichHistoryResults={() => this.props.clearRichHistoryResults(this.props.exploreId)}
+        clearRichHistoryResults={() => props.clearRichHistoryResults(props.exploreId)}
-          loadMoreRichHistory={() => this.props.loadMoreRichHistory(this.props.exploreId)}
+        loadMoreRichHistory={() => props.loadMoreRichHistory(props.exploreId)}
         activeDatasourceInstance={activeDatasourceInstance}
-          richHistorySettings={this.props.richHistorySettings}
+        richHistorySettings={props.richHistorySettings}
-          richHistorySearchFilters={this.props.richHistorySearchFilters}
+        richHistorySearchFilters={props.richHistorySearchFilters}
         exploreId={exploreId}
         height={height}
       />
@@ -142,11 +124,11 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
         totalQueries={richHistoryTotal || 0}
         loading={loading}
         activeDatasourceInstance={activeDatasourceInstance}
-          updateFilters={this.updateFilters}
+        updateFilters={updateFilters}
-          clearRichHistoryResults={() => this.props.clearRichHistoryResults(this.props.exploreId)}
+        clearRichHistoryResults={() => props.clearRichHistoryResults(props.exploreId)}
-          loadMoreRichHistory={() => this.props.loadMoreRichHistory(this.props.exploreId)}
+        loadMoreRichHistory={() => props.loadMoreRichHistory(props.exploreId)}
-          richHistorySettings={this.props.richHistorySettings}
+        richHistorySettings={props.richHistorySettings}
-          richHistorySearchFilters={this.props.richHistorySearchFilters}
+        richHistorySearchFilters={props.richHistorySearchFilters}
         exploreId={exploreId}
       />
     ),
@@ -158,12 +140,12 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
     value: Tabs.Settings,
     content: (
       <RichHistorySettingsTab
-          retentionPeriod={this.props.richHistorySettings.retentionPeriod}
+        retentionPeriod={props.richHistorySettings.retentionPeriod}
-          starredTabAsFirstTab={this.props.richHistorySettings.starredTabAsFirstTab}
+        starredTabAsFirstTab={props.richHistorySettings.starredTabAsFirstTab}
-          activeDatasourceOnly={this.props.richHistorySettings.activeDatasourceOnly}
+        activeDatasourceOnly={props.richHistorySettings.activeDatasourceOnly}
-          onChangeRetentionPeriod={this.onChangeRetentionPeriod}
+        onChangeRetentionPeriod={onChangeRetentionPeriod}
-          toggleStarredTabAsFirstTab={this.toggleStarredTabAsFirstTab}
+        toggleStarredTabAsFirstTab={toggleStarredTabAsFirstTab}
-          toggleactiveDatasourceOnly={this.toggleActiveDatasourceOnly}
+        toggleactiveDatasourceOnly={toggleActiveDatasourceOnly}
         deleteRichHistory={deleteRichHistory}
       />
     ),
@@ -179,7 +161,4 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
       closeIconTooltip={t('explore.rich-history.close-tooltip', 'Close query history')}
     />
   );
-  }
 }
-
-export const RichHistory = withTheme2(UnThemedRichHistory);