added presisted time range (#56)

Author: gurinder39

public/app/core/components/TimePicker/TimePickerWithHistory.tsx

@@ -1,12 +1,13 @@
+import { merge, uniqBy } from 'lodash';
 import React, { CSSProperties } from 'react';
-import { useSelector } from 'react-redux';
-import { uniqBy } from 'lodash';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
 
 import { t } from '@grafana/ui/src/utils/i18n';
 import appEvents from 'app/core/app_events';
 import { TimeRange, isDateTime, rangeUtil, AppEvents } from '@grafana/data';
 import { TimeRangePickerProps, TimeRangePicker, useTheme2 } from '@grafana/ui';
-import { FnGlobalState } from 'app/core/reducers/fn-slice';
+import { FnGlobalState, updatePartialFnStates } from 'app/core/reducers/fn-slice';
 import { StoreState } from 'app/types';
 
 import { LocalStorageValueProvider } from '../LocalStorageValueProvider';
@@ -35,6 +36,9 @@ const FnText: React.FC = () => {
 };
 
 export const TimePickerWithHistory: React.FC<Props> = (props) => {
+  const { fnGlobalTimeRange } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
+  const dispatch = useDispatch();
+
   return (
     <LocalStorageValueProvider<LSTimePickerHistoryItem[]> storageKey={LOCAL_STORAGE_KEY} defaultValue={[]}>
       {(rawValues, onSaveToStore) => {
@@ -45,7 +49,13 @@ export const TimePickerWithHistory: React.FC<Props> = (props) => {
           <TimeRangePicker
             {...props}
             history={history}
+            {...merge({}, props, { value: fnGlobalTimeRange || props.value })}
             onChange={(value) => {
+              dispatch(
+                updatePartialFnStates({
+                  fnGlobalTimeRange: value,
+                })
+              );
               onAppendToHistory(value, values, onSaveToStore);
               props.onChange(value);
             }}

public/app/core/reducers/fn-slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
 
-import { GrafanaThemeType } from '@grafana/data';
+import { GrafanaThemeType, TimeRange } from '@grafana/data';
 
 import { AnyObject } from '../../fn-app/types';
 
@@ -13,6 +13,7 @@ export interface FnGlobalState {
   pageTitle: string;
   queryParams: AnyObject;
   hiddenVariables: readonly string[];
+  fnGlobalTimeRange: TimeRange | null;
 }
 
 export type UpdateFNGlobalStateAction = PayloadAction<Partial<FnGlobalState>>;
@@ -55,6 +56,7 @@ export const INITIAL_FN_STATE: FnGlobalState = {
   pageTitle: '',
   queryParams: {},
   hiddenVariables: [],
+  fnGlobalTimeRange: null,
 } as const;
 
 const reducers: SliceCaseReducers<FnGlobalState> = {