Chore: Refactor run button and remove component incl. test (#48348)

.betterer.results

@@ -233,9 +233,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx:3933225580": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/explore/RunButton.test.tsx:4267530266": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/explore/SecondaryActions.test.tsx:1177396128": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

public/app/features/explore/ExploreToolbar.tsx

@@ -3,18 +3,25 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { DataSourceInstanceSettings, RawTimeRange } from '@grafana/data';
 import { config, DataSourcePicker } from '@grafana/runtime';
-import { PageToolbar, SetInterval, ToolbarButton, ToolbarButtonRow } from '@grafana/ui';
+import {
+  defaultIntervals,
+  PageToolbar,
+  RefreshPicker,
+  SetInterval,
+  ToolbarButton,
+  ToolbarButtonRow,
+} from '@grafana/ui';
 import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
 import { ExploreId } from 'app/types/explore';
 import { StoreState } from 'app/types/store';
 
 import { DashNavButton } from '../dashboard/components/DashNav/DashNavButton';
+import { getTimeSrv } from '../dashboard/services/TimeSrv';
 import { updateFiscalYearStartMonthForSession, updateTimeZoneForSession } from '../profile/state/reducers';
 import { getFiscalYearStartMonth, getTimeZone } from '../profile/state/selectors';
 
 import { ExploreTimeControls } from './ExploreTimeControls';
 import { LiveTailButton } from './LiveTailButton';
-import { RunButton } from './RunButton';
 import { changeDatasource } from './state/datasource';
 import { splitClose, splitOpen } from './state/main';
 import { cancelQueries, runQueries } from './state/query';
@@ -58,6 +65,35 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
     syncTimes(exploreId);
   };
 
+  renderRefreshPicker = (showSmallTimePicker: boolean) => {
+    const { loading, refreshInterval, isLive } = this.props;
+
+    let refreshPickerText: string | undefined = loading ? 'Cancel' : 'Run query';
+    let refreshPickerTooltip = undefined;
+    let refreshPickerWidth = '108px';
+    if (showSmallTimePicker) {
+      refreshPickerTooltip = refreshPickerText;
+      refreshPickerText = undefined;
+      refreshPickerWidth = '35px';
+    }
+
+    return (
+      <RefreshPicker
+        onIntervalChanged={this.onChangeRefreshInterval}
+        value={refreshInterval}
+        isLoading={loading}
+        text={refreshPickerText}
+        tooltip={refreshPickerTooltip}
+        intervals={getTimeSrv().getValidIntervals(defaultIntervals)}
+        isLive={isLive}
+        onRefresh={() => this.onRunQuery(loading)}
+        noIntervalPicker={isLive}
+        primary={true}
+        width={refreshPickerWidth}
+      />
+    );
+  };
+
   render() {
     const {
       datasourceMissing,
@@ -144,15 +180,7 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
               />
             )}
 
-            <RunButton
+            {this.renderRefreshPicker(showSmallTimePicker)}
-              refreshInterval={refreshInterval}
-              onChangeRefreshInterval={this.onChangeRefreshInterval}
-              isSmall={splitted || showSmallTimePicker}
-              isLive={isLive}
-              loading={loading || (isLive && !isPaused)}
-              onRun={this.onRunQuery}
-              showDropdown={!isLive}
-            />
 
             {refreshInterval && <SetInterval func={this.onRunQuery} interval={refreshInterval} loading={loading} />}
 

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

@@ -1,49 +0,0 @@
-import { shallow } from 'enzyme';
-import React from 'react';
-
-import { RefreshPicker } from '@grafana/ui';
-import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
-
-import { RunButton, Props } from './RunButton';
-
-const setup = (propOverrides?: object) => {
-  const props: Props = {
-    isSmall: false,
-    loading: false,
-    isLive: false,
-    onRun: jest.fn(),
-    refreshInterval: '5m',
-    onChangeRefreshInterval: jest.fn(),
-    showDropdown: false,
-  };
-
-  Object.assign(props, propOverrides);
-
-  const wrapper = shallow(<RunButton {...props} />);
-  return wrapper;
-};
-
-const validIntervals = ['1d'];
-jest.mock('app/features/dashboard/services/TimeSrv', () => ({
-  getTimeSrv: jest.fn().mockReturnValue({
-    getValidIntervals(intervals: string[]): string[] {
-      return validIntervals;
-    },
-  }),
-}));
-const getTimeSrvMock = getTimeSrv as any as jest.Mock<TimeSrv>;
-
-beforeEach(() => {
-  getTimeSrvMock.mockClear();
-});
-
-describe('RunButton', () => {
-  describe('if showdropdown is set', () => {
-    it('should render a RefreshPicker with only valid intervals', () => {
-      const wrapper = setup({ showDropdown: true });
-
-      expect(wrapper.find(RefreshPicker)).toHaveLength(1);
-      expect(wrapper.find(RefreshPicker).props().intervals).toEqual(validIntervals);
-    });
-  });
-});

public/app/features/explore/RunButton.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { RefreshPicker, defaultIntervals } from '@grafana/ui';
-import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
-
-export type Props = {
-  isSmall?: boolean;
-  loading: boolean;
-  isLive: boolean;
-  onRun: (loading: boolean) => void;
-  refreshInterval?: string;
-  onChangeRefreshInterval: (interval: string) => void;
-  showDropdown: boolean;
-};
-
-export function RunButton(props: Props) {
-  const { isSmall, loading, onRun, onChangeRefreshInterval, refreshInterval, showDropdown, isLive } = props;
-  const intervals = getTimeSrv().getValidIntervals(defaultIntervals);
-  let text: string | undefined = loading ? 'Cancel' : 'Run query';
-  let tooltip = '';
-  let width = '108px';
-
-  if (isLive) {
-    return null;
-  }
-
-  if (isSmall) {
-    tooltip = text;
-    text = undefined;
-    width = '35px';
-  }
-
-  return (
-    <RefreshPicker
-      onIntervalChanged={onChangeRefreshInterval}
-      value={refreshInterval}
-      isLoading={loading}
-      text={text}
-      tooltip={tooltip}
-      intervals={intervals}
-      isLive={isLive}
-      onRefresh={() => onRun(loading)}
-      noIntervalPicker={!showDropdown}
-      primary={true}
-      width={width}
-    />
-  );
-}