Dashboard: new updated time picker (#20931)

* Dashboard: started to implement new time picker.

* TimePicker: working in full screen (except calendar).

* TimePicker: first draft on narrow screen variant.

* TimePicker: small adjustments to the narrow design.

* TimePicker: enabled range selection and started to style calendar.

* TimePicker: applied some more styling.

* Calendar: added so the calendar range selection is styled properly.

* Calendar: added styling for timepicker calendar in narrow screen.

* TimePicker: made it possible to select range from calendar.

* TimePicker: made the calendar have previous selected value.

* TimePicker: moved calendar to be able to update form state.

* TimePicker: calendar is now displayed onFocus or onClick.

* TimePicker: calendar will be closed if click outside input.

* Calendar: fixed the styling of the calendar in narrow screen.

* Calendar: made it work properly with narrow screen.

* TimePicker: connected recent to absolute time range.

* TimePicker: changed the label on recent ranges.

* TimePicker: cleaned up the range list and options.

* TimePicker: some more cleaning up.

* TimePicker: cleaned up the calendar a bit.

* TimePicker: some more refactorings.

* TimePicker: refactorings.

* TimePicker: styled modal properly.

* TimePicker: empty recent list.

* TimePicker: width when calendar in full screen.

* TimePicker: will validate input value.

* TimePicker: removed unused code.

* TimePicker: positioning with emotion instead of sass.

* Calendar: Made sure we send the dates in the correct order to the calendar.

* TimePicker: fixed theme.

* TimePicker: fixed positioning of the content.

* TimePicker: positioning of narrow.

* TimePicker: added some simple tets.

* TimePicker: fixed issue with invalid and added error message.

* TimePicker: added history.

* TimePicker: cleaned up snapshot data.

* TimePicker: fixed so we keep the quick values in the input.

* TimePicker: fixed the missing styling on UTC.

* TimePicker: added missing caret icon.

* TimePicker: fixed formatting on recent time ranges.

* TimePicker: added missing -.

* TimePicker: refactorings after feedback.

* TimePicker: renamed reserved prop name.

* TimePicker: added missing onChange call.

* TimePicker: removed alternative return type.

* TimePicker: fixed the sorting order on the recent list.

* TimePicker: added useCallback for the onEvent functions.

* TimePicker: moving away from default export.

* TimePicker: used the isMathString instead of private function.

* TimePicker: minor refactoring simplify the code.

* TimePicker: Added empty container that will expand when less then 4 recent searches.

* TimePicker: changed the top to be absolute relative to the container.

* TimePicker: updated snapshots for failing tests.

* Fixed shadow

* Move it down a bit

* added some more tests.

* Fixed so we change the anchor point of the time picker in really small screens.

* removed memo.

* fixed snapshot.

* Make sure that we always use the correct timeZone when formatting output.

* Fixed form background.

* Some minor fixes after demo.

* Making sure that empty info box is centered.

* updated snapshots for timepicker after css changes.

* fixed so we don't overflow when input validation error.

* adjusted final things on the time picker.

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -1,30 +1,40 @@
 // Libaries
 import React, { Component } from 'react';
-import { dateMath } from '@grafana/data';
+import { dateMath, GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
 
 // Types
 import { DashboardModel } from '../../state';
 import { LocationState, CoreEvents } from 'app/types';
-import { TimeRange, TimeOption, RawTimeRange } from '@grafana/data';
+import { TimeRange } from '@grafana/data';
 
 // State
 import { updateLocation } from 'app/core/actions';
 
 // Components
-import { TimePicker, RefreshPicker } from '@grafana/ui';
+import { RefreshPicker, withTheme, stylesFactory, Themeable } from '@grafana/ui';
+import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 
 // Utils & Services
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import { defaultSelectOptions } from '@grafana/ui/src/components/TimePicker/TimePicker';
 
-export interface Props {
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    container: css`
+      position: relative;
+      display: flex;
+      padding: 2px 2px;
+    `,
+  };
+});
+
+export interface Props extends Themeable {
   $injector: any;
   dashboard: DashboardModel;
   updateLocation: typeof updateLocation;
   location: LocationState;
 }
-
-export class DashNavTimeControls extends Component<Props> {
+class UnthemedDashNavTimeControls extends Component<Props> {
   timeSrv: TimeSrv = getTimeSrv();
   $rootScope = this.props.$injector.get('$rootScope');
 
@@ -83,37 +93,22 @@ export class DashNavTimeControls extends Component<Props> {
     this.$rootScope.appEvent(CoreEvents.zoomOut, 2);
   };
 
-  setActiveTimeOption = (timeOptions: TimeOption[], rawTimeRange: RawTimeRange): TimeOption[] => {
-    return timeOptions.map(option => {
-      if (option.to === rawTimeRange.to && option.from === rawTimeRange.from) {
-        return {
-          ...option,
-          active: true,
-        };
-      }
-      return {
-        ...option,
-        active: false,
-      };
-    });
-  };
-
   render() {
-    const { dashboard } = this.props;
+    const { dashboard, theme } = this.props;
     const intervals = dashboard.timepicker.refresh_intervals;
     const timePickerValue = this.timeSrv.timeRange();
     const timeZone = dashboard.getTimezone();
+    const styles = getStyles(theme);
 
     return (
-      <div className="dashboard-timepicker-wrapper">
-        <TimePicker
+      <div className={styles.container}>
+        <TimePickerWithHistory
           value={timePickerValue}
           onChange={this.onChangeTimePicker}
           timeZone={timeZone}
           onMoveBackward={this.onMoveBack}
           onMoveForward={this.onMoveForward}
           onZoom={this.onZoom}
-          selectOptions={this.setActiveTimeOption(defaultSelectOptions, timePickerValue.raw)}
         />
         <RefreshPicker
           onIntervalChanged={this.onChangeRefreshInterval}
@@ -126,3 +121,5 @@ export class DashNavTimeControls extends Component<Props> {
     );
   }
 }
+
+export const DashNavTimeControls = withTheme(UnthemedDashNavTimeControls);