[REFACTOR] Move TimeRangeControls/ToolbarIconButton respectively to plugin-system/components

ui/components/src/index.ts

@@ -35,6 +35,7 @@ export * from './Table';
 export * from './ThresholdsEditor';
 export * from './TimeChart';
 export * from './TimeSeriesTooltip';
+export * from './ToolbarIconButton';
 export * from './FormatControls';
 export * from './YAxisLabel';
 export * from './context';

ui/dashboards/src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx

@@ -25,8 +25,8 @@ import {
 } from '@mui/material';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
 import { TemplateVariableList } from '../Variables';
-import { TimeRangeControls } from '../TimeRangeControls';
 
 interface DashboardStickyToolbarProps {
   initialVariableIsSticky?: boolean;

ui/dashboards/src/components/DashboardToolbar/DashboardToolbar.tsx

@@ -13,11 +13,11 @@
 
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
 import { OnSaveDashboard, useEditMode } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
-import { TimeRangeControls } from '../TimeRangeControls';
 import { EditVariablesButton } from '../Variables';
 import { EditDatasourcesButton } from '../Datasources';
 import { EditButton } from '../EditButton';

ui/dashboards/src/components/DownloadButton/DownloadButton.tsx

@@ -13,10 +13,9 @@
 
 import { useRef } from 'react';
 import DownloadIcon from 'mdi-material-ui/DownloadOutline';
-import { InfoTooltip } from '@perses-dev/components';
+import { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';
 import { TOOLTIP_TEXT } from '../../constants';
 import { useDashboard } from '../../context';
-import { ToolbarIconButton } from '../ToolbarIconButton';
 
 interface DownloadButtonProps {
   // The button look best at heights >= 28 pixels

ui/dashboards/src/components/EditJsonButton/EditJsonButton.tsx

@@ -12,9 +12,8 @@
 // limitations under the License.
 
 import CodeIcon from 'mdi-material-ui/CodeBraces';
-import { InfoTooltip } from '@perses-dev/components';
+import { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';
 import { TOOLTIP_TEXT } from '../../constants';
-import { ToolbarIconButton } from '../ToolbarIconButton';
 import { useEditJsonDialog } from '../../context';
 
 export interface EditJsonButtonProps {

ui/dashboards/src/components/index.ts

@@ -31,6 +31,4 @@ export * from './PanelGroupDialog';
 export * from './QuerySummaryTable';
 export * from './SaveChangesConfirmationDialog';
 export * from './SaveDashboardButton';
-export * from './TimeRangeControls';
-export * from './ToolbarIconButton';
 export * from './Variables';

ui/explore/src/components/ExploreToolbar/ExploreToolbar.tsx

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { Stack, Box, useTheme, useMediaQuery } from '@mui/material';
-import { TimeRangeControls } from '@perses-dev/dashboards';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
 import React from 'react';
 
 export interface ExploreToolbarProps {

ui/dashboards/src/components/TimeRangeControls/TimeRangeControls.test.tsx → ui/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx

@@ -15,14 +15,14 @@ import { generatePath } from 'react-router';
 import { createMemoryHistory, MemoryHistory } from 'history';
 import userEvent from '@testing-library/user-event';
 import { screen, act, RenderOptions, render } from '@testing-library/react';
-import { TimeRangeProvider, TimeRangeProviderWithQueryParams } from '@perses-dev/plugin-system';
 import { DurationString } from '@perses-dev/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { QueryParamProvider } from 'use-query-params';
 import React, { useLayoutEffect, useState } from 'react';
 import { Router } from 'react-router-dom';
 import { SnackbarProvider } from '@perses-dev/components';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { TimeRangeProvider, TimeRangeProviderWithQueryParams } from '@perses-dev/plugin-system';
 import { TimeRangeControls } from './TimeRangeControls';
 
 const history = createMemoryHistory({

ui/dashboards/src/components/TimeRangeControls/TimeRangeControls.tsx → ui/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx

@@ -13,11 +13,17 @@
 
 import RefreshIcon from 'mdi-material-ui/Refresh';
 import { Stack } from '@mui/material';
-import { DateTimeRangePicker, RefreshIntervalPicker, InfoTooltip, TimeOption } from '@perses-dev/components';
-import { useTimeRange } from '@perses-dev/plugin-system';
+import {
+  DateTimeRangePicker,
+  RefreshIntervalPicker,
+  InfoTooltip,
+  TimeOption,
+  ToolbarIconButton,
+} from '@perses-dev/components';
 import { DurationString } from '@perses-dev/core';
 import { useCallback } from 'react';
-import { ToolbarIconButton } from '../ToolbarIconButton';
+import { TOOLTIP_TEXT } from '../../constants';
+import { useTimeRange } from '../../runtime';
 
 export const DEFAULT_TIME_RANGE_OPTIONS: TimeOption[] = [
   { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },
@@ -40,11 +46,6 @@ export const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [
   { value: { pastDuration: '60s' }, display: '1m' },
 ];
 
-export const TOOLTIP_TEXT = {
-  refresh: 'Refresh',
-  refreshInterval: 'Auto refresh interval',
-};
-
 const DEFAULT_HEIGHT = '34px';
 
 interface TimeRangeControlsProps {

ui/plugin-system/src/components/index.ts

@@ -23,5 +23,6 @@ export * from './PluginKindSelect';
 export * from './PluginRegistry';
 export * from './PluginSpecEditor';
 export * from './TimeSeriesQueryEditor';
+export * from './TimeRangeControls';
 export * from './Variables';
 export * from './ProjectSelect';

ui/plugin-system/src/constants/user-interface-text.ts

@@ -15,4 +15,7 @@ export const TOOLTIP_TEXT = {
   // Variable editor buttons
   refreshVariableValues: 'Refresh values',
   copyVariableValues: 'Copy values to clipboard',
+  // Time range controls buttons
+  refresh: 'Refresh',
+  refreshInterval: 'Auto refresh interval',
 };