Refactor: RefreshPicker export things as statics on class (#19443)

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -8,10 +8,7 @@ import memoizeOne from 'memoize-one';
 import { GrafanaTheme } from '../../types';
 import { withTheme } from '../../themes';
 
-export const offOption = { label: 'Off', value: '' };
-export const liveOption = { label: 'Live', value: 'LIVE' };
-export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
-export const isLive = (refreshInterval: string): boolean => refreshInterval === liveOption.value;
+const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
 
 const getStyles = memoizeOne((theme: GrafanaTheme) => {
   return {
@@ -38,10 +35,9 @@ export interface Props {
 }
 
 export class RefreshPickerBase extends PureComponent<Props> {
-  // Make it exported as static properties to be easier to access. The global exports need to be accessed by direct
-  // import of this source file which won't work if this was installed as package.
-  static offOption = offOption;
-  static liveOption = liveOption;
+  static offOption = { label: 'Off', value: '' };
+  static liveOption = { label: 'Live', value: 'LIVE' };
+  static isLive = (refreshInterval: string): boolean => refreshInterval === RefreshPicker.liveOption.value;
 
   constructor(props: Props) {
     super(props);
@@ -54,10 +50,10 @@ export class RefreshPickerBase extends PureComponent<Props> {
       .map(interval => ({ label: interval, value: interval }));
 
     if (this.props.hasLiveOption) {
-      options.unshift(liveOption);
+      options.unshift(RefreshPicker.liveOption);
     }
 
-    options.unshift(offOption);
+    options.unshift(RefreshPicker.offOption);
     return options;
   };
 
@@ -73,13 +69,13 @@ export class RefreshPickerBase extends PureComponent<Props> {
     const { onRefresh, intervals, tooltip, value, refreshButton, buttonSelectClassName, theme } = this.props;
     const options = this.intervalsToOptions(intervals);
     const currentValue = value || '';
-    const selectedValue = options.find(item => item.value === currentValue) || offOption;
+    const selectedValue = options.find(item => item.value === currentValue) || RefreshPicker.offOption;
     const styles = getStyles(theme);
 
     const cssClasses = classNames({
       'refresh-picker': true,
-      'refresh-picker--off': selectedValue.label === offOption.label,
-      'refresh-picker--live': selectedValue === liveOption,
+      'refresh-picker--off': selectedValue.label === RefreshPicker.offOption.label,
+      'refresh-picker--live': selectedValue === RefreshPicker.liveOption,
     });
 
     return (
@@ -116,5 +112,6 @@ export const RefreshPicker = withTheme<
   {
     offOption: typeof RefreshPickerBase.offOption;
     liveOption: typeof RefreshPickerBase.liveOption;
+    isLive: typeof RefreshPickerBase.isLive;
   }
 >(RefreshPickerBase);

packages/grafana-ui/src/components/SetInterval/SetInterval.tsx

@@ -4,7 +4,7 @@ import { tap, switchMap } from 'rxjs/operators';
 import _ from 'lodash';
 
 import { stringToMs, SelectableValue } from '@grafana/data';
-import { isLive } from '../RefreshPicker/RefreshPicker';
+import { RefreshPicker } from '../RefreshPicker/RefreshPicker';
 
 export function getIntervalFromString(strInterval: string): SelectableValue<number> {
   return {
@@ -39,7 +39,7 @@ export class SetInterval extends PureComponent<Props> {
         switchMap(props => {
           // If the query is live, empty value is emited. `of` creates single value,
           // which is merged to propsSubject stream
-          if (isLive(props.interval)) {
+          if (RefreshPicker.isLive(props.interval)) {
             return of({});
           }
 
@@ -61,7 +61,10 @@ export class SetInterval extends PureComponent<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    if ((isLive(prevProps.interval) && isLive(this.props.interval)) || _.isEqual(prevProps, this.props)) {
+    if (
+      (RefreshPicker.isLive(prevProps.interval) && RefreshPicker.isLive(this.props.interval)) ||
+      _.isEqual(prevProps, this.props)
+    ) {
       return;
     }
     // if props changed, a new value is emited from propsSubject

public/app/core/utils/explore.test.ts

@@ -16,8 +16,7 @@ import {
 import { ExploreUrlState, ExploreMode } from 'app/types/explore';
 import store from 'app/core/store';
 import { LogsDedupStrategy, LogsModel, LogLevel, dateTime } from '@grafana/data';
-import { DataQueryError } from '@grafana/ui';
-import { liveOption, offOption } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
+import { DataQueryError, RefreshPicker } from '@grafana/ui';
 
 const DEFAULT_EXPLORE_STATE: ExploreUrlState = {
   datasource: null,
@@ -341,7 +340,7 @@ describe('getRefIds', () => {
 describe('refreshIntervalToSortOrder', () => {
   describe('when called with live option', () => {
     it('then it should return ascending', () => {
-      const result = refreshIntervalToSortOrder(liveOption.value);
+      const result = refreshIntervalToSortOrder(RefreshPicker.liveOption.value);
 
       expect(result).toBe(SortOrder.Ascending);
     });
@@ -349,7 +348,7 @@ describe('refreshIntervalToSortOrder', () => {
 
   describe('when called with off option', () => {
     it('then it should return descending', () => {
-      const result = refreshIntervalToSortOrder(offOption.value);
+      const result = refreshIntervalToSortOrder(RefreshPicker.offOption.value);
 
       expect(result).toBe(SortOrder.Descending);
     });

public/app/core/utils/explore.ts

 // Libraries
 import _ from 'lodash';
 import { Unsubscribable } from 'rxjs';
-import { isLive } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
 // Services & Utils
 import {
   dateMath,
@@ -21,7 +20,7 @@ import store from 'app/core/store';
 import kbn from 'app/core/utils/kbn';
 import { getNextRefIdChar } from './query';
 // Types
-import { DataQuery, DataSourceApi, DataQueryError, DataQueryRequest, PanelModel } from '@grafana/ui';
+import { DataQuery, DataSourceApi, DataQueryError, DataQueryRequest, PanelModel, RefreshPicker } from '@grafana/ui';
 import { ExploreUrlState, HistoryItem, QueryTransaction, QueryOptions, ExploreMode } from 'app/types/explore';
 import { config } from '../config';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
@@ -488,7 +487,7 @@ export enum SortOrder {
 }
 
 export const refreshIntervalToSortOrder = (refreshInterval: string) =>
-  isLive(refreshInterval) ? SortOrder.Ascending : SortOrder.Descending;
+  RefreshPicker.isLive(refreshInterval) ? SortOrder.Ascending : SortOrder.Descending;
 
 export const sortLogsResult = (logsResult: LogsModel, sortOrder: SortOrder): LogsModel => {
   const rows = logsResult ? logsResult.rows : [];

public/app/features/explore/state/actions.ts

@@ -22,7 +22,7 @@ import {
 } from 'app/core/utils/explore';
 // Types
 import { ThunkResult, ExploreUrlState, ExploreItemState } from 'app/types';
-import { DataSourceApi, DataQuery, DataSourceSelectItem, QueryFixAction, PanelData } from '@grafana/ui';
+import { DataSourceApi, DataQuery, DataSourceSelectItem, QueryFixAction, PanelData, RefreshPicker } from '@grafana/ui';
 
 import {
   RawTimeRange,
@@ -74,7 +74,6 @@ import {
 } from './actionTypes';
 import { ActionOf, ActionCreator } from 'app/core/redux/actionCreatorFactory';
 import { getTimeZone } from 'app/features/profile/state/selectors';
-import { offOption } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
 import { getShiftedTimeRange } from 'app/core/utils/timePicker';
 import { updateLocation } from '../../../core/actions';
 import { getTimeSrv } from '../../dashboard/services/TimeSrv';
@@ -124,7 +123,7 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun
     await dispatch(importQueries(exploreId, queries, currentDataSourceInstance, newDataSourceInstance));
 
     if (getState().explore[exploreId].isLive) {
-      dispatch(changeRefreshInterval(exploreId, offOption.value));
+      dispatch(changeRefreshInterval(exploreId, RefreshPicker.offOption.value));
     }
 
     await dispatch(loadDatasource(exploreId, newDataSourceInstance, orgId));

public/app/features/explore/state/reducers.ts

@@ -11,7 +11,7 @@ import {
 } from 'app/core/utils/explore';
 import { ExploreItemState, ExploreState, ExploreId, ExploreUpdateState, ExploreMode } from 'app/types/explore';
 import { LoadingState, toLegacyResponseData, DefaultTimeRange } from '@grafana/data';
-import { DataQuery, DataSourceApi, PanelData, DataQueryRequest } from '@grafana/ui';
+import { DataQuery, DataSourceApi, PanelData, DataQueryRequest, RefreshPicker } from '@grafana/ui';
 import {
   HigherOrderAction,
   ActionTypes,
@@ -59,7 +59,6 @@ import { reducerFactory, ActionOf } from 'app/core/redux';
 import { updateLocation } from 'app/core/actions/location';
 import { LocationUpdate } from '@grafana/runtime';
 import TableModel from 'app/core/table_model';
-import { isLive } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
 import { ResultProcessor } from '../utils/ResultProcessor';
 
 export const DEFAULT_RANGE = {
@@ -191,11 +190,11 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
     filter: changeRefreshIntervalAction,
     mapper: (state, action): ExploreItemState => {
       const { refreshInterval } = action.payload;
-      const live = isLive(refreshInterval);
+      const live = RefreshPicker.isLive(refreshInterval);
       const sortOrder = refreshIntervalToSortOrder(refreshInterval);
       const logsResult = sortLogsResult(state.logsResult, sortOrder);
 
-      if (isLive(state.refreshInterval) && !live) {
+      if (RefreshPicker.isLive(state.refreshInterval) && !live) {
         stopQueryState(state.querySubscription);
       }