Explore & Dashboard: New Refresh picker (#16505)

* Added RefreshButton

* Added RefreshSelect

* Added RefreshSelectButton

* Added RefreshPicker

* Removed the magic string Paused

* Minor style changes and using Off instead of Pause

* Added HeadlessSelect

* Added HeadlessSelect story

* Added SelectButton

* Removed RefreshSelectButton

* Added TimePicker and moved ClickOutsideWrapper to ui/components

* Added TimePickerPopOver

* Added react-calendar

* Missed yarn lock file

* Added inputs to popover

* Added TimePicker and RefreshPicker to DashNav

* Moved TimePicker and RefreshPicker to app/core

* Added react-calendar to app and removed from ui/components

* Fixed PopOver onClick

* Moved everything back to ui components because of typings problems

* Exporing RefreshPicker and TimePicker

* Added Apply and inputs

* Added typings

* Added TimePickerInput and logic

* Fixed parsing of string to Moments

* Fixed range string

* Styling and connecting the calendars and inputs

* Changed Calendar styling

* Added backward forward and zoom

* Fixed responsive styles

* Moved TimePicker and RefreshPicker into app core

* Renamed menuIsOpen to isOpen

* Changed from className={} to className=""

* Moved Popover to TimePickerOptionGroup

* Renamed all PopOver to Popover

* Renamed popOver to popover and some minor refactorings

* Renamed files with git mv

* Added ButtonSelect and refactored RefreshPicker

* Refactored TimePicker to use new ButtonSelect

* Removed HeadlessSelect as suggested

* fix: Fix typings and misc errors after rebase

* wip: Enable time picker on dashboard and add tooltip

* Merge branch 'master' into hugoh/new-timepicker-and-unified-component

# Conflicts:
#	packages/grafana-ui/package.json
#	packages/grafana-ui/src/components/Input/Input.test.tsx
#	packages/grafana-ui/src/components/Input/Input.tsx
#	packages/grafana-ui/src/utils/validate.ts
#	public/app/features/dashboard/panel_editor/QueryOptions.tsx
#	yarn.lock

* fix: Snapshot update

* Move TimePicker default options into the TimePicker as statics, pass the tooltipContent down the line when wanted and wrap the button in a tooltip element

* fix: Override internal state prop if we provide one in a prop

* Updated snapshots

* Let dashnav control refreshPicker state

* feat: Add a stringToMs function

* wip: RefreshPicker

* wip: Move RefreshPicker to @grafana/ui

* wip: Move TimePicker to @grafana/ui

* wip: Remove comments

* wip: Add refreshPicker to explore

* wip: Use default intervals if the prop is missing

* wip: Nicer way of setting defaults

* fix: Control the select component

* wip: Add onMoveForward/onMoveBack

* Remove code related to the new time picker and refresh picker from dashnav

* Fix: Typings after merge

* chore: Minor fix after merge

* chore: Remove _.map usage

* chore: Moved refresh-picker logic out of the refresh picker since it will work a little differently in explore and dashboards until we have replaced the TimeSrv

* feat: Add an Interval component to @grafana/ui

* chore: Remove intervalId from redux state and move setInterval logic from ExploreToolbar to its own Interval component

* feat: Add refreshInterval to Explore's URL state

* feat: Pick up refreshInterval from url on page load

* fix: Set default refreshInterval when no value can be retained from URL

* fix: Update test initial state with refreshInterval

* fix: Handle URLs before RefreshPicker

* fix: Move RefreshInterval to url position 3 since the segments can take multiple positions

* fix: A better way of detecting urls without RefreshInterval in Explore

* chore: Some Explore typings

* fix: Attach refresh picker to interval picker

* chore: Sass fix for refresh button border radius

* fix: Remove refreshInterval from URL

* fix: Intervals now start when previous interval is finished

* fix: Use clearTimeout instead of clearInterval

* fix: Make sure there's a delay set before adding a timeout when we have slow explore queries

* wip: Add refresh picker to dashboard

* feat: Add util for removing keys with empty values

* feat: RefreshPicker in dashboards and tmp rem out old RefreshPicker

* fix: Remove the jumpy:ness in the refreshpicker

* Changed placement and made it hide when your in dashboard settings

* chore: Move logic related to refresh picker out of DashNav to its own component

* feat: Add tooltip to refreshpicker

* fix: Fix bug with refreshpicker not updating when setting to 'off'

* fix: Make it possible to override refresh intervals using the dashboard intervals

* chore: Change name of Interval to SetInterval to align with ecmascripts naming since its basically the same but declarative and async

* fix: Use default intervals when auto refresh is empty in dashboard settings

* fix: Hide time/interval picker when hidden is true on the model, such as on the home dashboard

* fix: Interval picker will have to handle location changes since timeSrv wont

* RefreshPicker: Refactoring refresh picker

* RefreshPicker: minor refactoring

public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx

@@ -1,36 +0,0 @@
-import { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
-
-export interface Props {
-  onClick: () => void;
-}
-
-interface State {
-  hasEventListener: boolean;
-}
-
-export class ClickOutsideWrapper extends PureComponent<Props, State> {
-  state = {
-    hasEventListener: false,
-  };
-
-  componentDidMount() {
-    window.addEventListener('click', this.onOutsideClick, false);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('click', this.onOutsideClick, false);
-  }
-
-  onOutsideClick = event => {
-    const domNode = ReactDOM.findDOMNode(this) as Element;
-
-    if (!domNode || !domNode.contains(event.target)) {
-      this.props.onClick();
-    }
-  };
-
-  render() {
-    return this.props.children;
-  }
-}

public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap

@@ -4,86 +4,88 @@ exports[`TeamPicker renders correctly 1`] = `
 <div
   className="user-picker"
 >
-  <div
-    className="css-0 gf-form-input gf-form-input--form-dropdown"
-    onKeyDown={[Function]}
-  >
+  <div>
     <div
-      className="css-0 gf-form-select-box__control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
+      className="css-0 gf-form-input gf-form-input--form-dropdown"
+      onKeyDown={[Function]}
     >
       <div
-        className="css-0 gf-form-select-box__value-container"
+        className="css-0 gf-form-select-box__control"
+        onMouseDown={[Function]}
+        onTouchEnd={[Function]}
       >
         <div
-          className="css-0 gf-form-select-box__placeholder"
-        >
-          Select a team
-        </div>
-        <div
-          className="css-0"
+          className="css-0 gf-form-select-box__value-container"
         >
           <div
-            className="gf-form-select-box__input"
-            style={
-              Object {
-                "display": "inline-block",
-              }
-            }
+            className="css-0 gf-form-select-box__placeholder"
+          >
+            Select a team
+          </div>
+          <div
+            className="css-0"
           >
-            <input
-              aria-autocomplete="list"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-2-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              spellCheck="false"
-              style={
-                Object {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
             <div
+              className="gf-form-select-box__input"
               style={
                 Object {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
+                  "display": "inline-block",
                 }
               }
             >
-              
+              <input
+                aria-autocomplete="list"
+                autoCapitalize="none"
+                autoComplete="off"
+                autoCorrect="off"
+                disabled={false}
+                id="react-select-2-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                spellCheck="false"
+                style={
+                  Object {
+                    "background": 0,
+                    "border": 0,
+                    "boxSizing": "content-box",
+                    "color": "inherit",
+                    "fontSize": "inherit",
+                    "opacity": 1,
+                    "outline": 0,
+                    "padding": 0,
+                    "width": "1px",
+                  }
+                }
+                tabIndex="0"
+                type="text"
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "height": 0,
+                    "left": 0,
+                    "overflow": "scroll",
+                    "position": "absolute",
+                    "top": 0,
+                    "visibility": "hidden",
+                    "whiteSpace": "pre",
+                  }
+                }
+              >
+                
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        className="css-0 gf-form-select-box__indicators"
-      >
-        <span
-          className="gf-form-select-box__select-arrow "
-        />
+        <div
+          className="css-0 gf-form-select-box__indicators"
+        >
+          <span
+            className="gf-form-select-box__select-arrow "
+          />
+        </div>
       </div>
     </div>
   </div>

public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap

@@ -4,86 +4,88 @@ exports[`UserPicker renders correctly 1`] = `
 <div
   className="user-picker"
 >
-  <div
-    className="css-0 gf-form-input gf-form-input--form-dropdown"
-    onKeyDown={[Function]}
-  >
+  <div>
     <div
-      className="css-0 gf-form-select-box__control"
-      onMouseDown={[Function]}
-      onTouchEnd={[Function]}
+      className="css-0 gf-form-input gf-form-input--form-dropdown"
+      onKeyDown={[Function]}
     >
       <div
-        className="css-0 gf-form-select-box__value-container"
+        className="css-0 gf-form-select-box__control"
+        onMouseDown={[Function]}
+        onTouchEnd={[Function]}
       >
         <div
-          className="css-0 gf-form-select-box__placeholder"
-        >
-          Select user
-        </div>
-        <div
-          className="css-0"
+          className="css-0 gf-form-select-box__value-container"
         >
           <div
-            className="gf-form-select-box__input"
-            style={
-              Object {
-                "display": "inline-block",
-              }
-            }
+            className="css-0 gf-form-select-box__placeholder"
+          >
+            Select user
+          </div>
+          <div
+            className="css-0"
           >
-            <input
-              aria-autocomplete="list"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect="off"
-              disabled={false}
-              id="react-select-2-input"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              spellCheck="false"
-              style={
-                Object {
-                  "background": 0,
-                  "border": 0,
-                  "boxSizing": "content-box",
-                  "color": "inherit",
-                  "fontSize": "inherit",
-                  "opacity": 1,
-                  "outline": 0,
-                  "padding": 0,
-                  "width": "1px",
-                }
-              }
-              tabIndex="0"
-              type="text"
-              value=""
-            />
             <div
+              className="gf-form-select-box__input"
               style={
                 Object {
-                  "height": 0,
-                  "left": 0,
-                  "overflow": "scroll",
-                  "position": "absolute",
-                  "top": 0,
-                  "visibility": "hidden",
-                  "whiteSpace": "pre",
+                  "display": "inline-block",
                 }
               }
             >
-              
+              <input
+                aria-autocomplete="list"
+                autoCapitalize="none"
+                autoComplete="off"
+                autoCorrect="off"
+                disabled={false}
+                id="react-select-2-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                spellCheck="false"
+                style={
+                  Object {
+                    "background": 0,
+                    "border": 0,
+                    "boxSizing": "content-box",
+                    "color": "inherit",
+                    "fontSize": "inherit",
+                    "opacity": 1,
+                    "outline": 0,
+                    "padding": 0,
+                    "width": "1px",
+                  }
+                }
+                tabIndex="0"
+                type="text"
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "height": 0,
+                    "left": 0,
+                    "overflow": "scroll",
+                    "position": "absolute",
+                    "top": 0,
+                    "visibility": "hidden",
+                    "whiteSpace": "pre",
+                  }
+                }
+              >
+                
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        className="css-0 gf-form-select-box__indicators"
-      >
-        <span
-          className="gf-form-select-box__select-arrow "
-        />
+        <div
+          className="css-0 gf-form-select-box__indicators"
+        >
+          <span
+            className="gf-form-select-box__select-arrow "
+          />
+        </div>
       </div>
     </div>
   </div>