feat: update dashboard auto refresh configuration overlay (#3701)

* style: replace toggle with SelectGroup

* chore: re-group TimeRangeDropdown

* style: stack names, descriptions, and buttons

* style: replace Grid with FlexBox and add css styles for layover container

* chore: css style renaming

* feat: add TypeAheadDropDown for auto refresh input

* feat: add menuMaxHeight to Dropdown.Menu

* feat: replace SelectDropdown with DurationInput

* style: set timerange-dropdown width and padding

* feat: add selected option for auto refresh input

* style: add clock icon to TimeRangeDropdown

* style: adjust confirmation and cancel button width

* chore: remove unused className and comment

* chore: remove old component and related functions for refresh interval

* style: increase input width

* feat: add valid function for confirm button

* fix: remove unused PAUSED

* feature: replace SlideToggle with SelectDropdown for refresh indefinite option

* feature: move refresh interval above the inactivity timeout

* chore: remove unused import component

* feat: replace SelectDropdown with Dropdown and DurationInput components for inactivity timeout

* feat: move cancel and confirm button into FlexBox

* chore: remove unused import component

* chore: remove console.log

* chore: replace hard coded values with constant

* chore: use previous state in setPickerActive function

* chore: rename active to infiniteDuration

* chore: remove console.log

* feat: add arrow button next to input field

Author: appletreeisyellow

src/dashboards/components/AutoRefresh.scss

@@ -1,12 +1,23 @@
 @import '@influxdata/clockface/dist/variables.scss';
+.refresh-form-header {
+  padding: 0 $cf-space-l;
+}
+
+.refresh-form-body {
+  padding: $cf-space-m $cf-space-l;
+}
+
 .refresh-form-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: $cf-space-2xs + 4px $cf-space-2xl;
-  &.reverse {
-    flex-direction: row-reverse;
-  }
+  padding-top: $cf-space-l;
+}
+
+.refresh-form-container-title {
+  padding-bottom: $cf-space-xs;
+}
+
+.refresh-form-container-description {
+  color: $cf-grey-65;
+  padding-bottom: $cf-space-xs;
 }
 
 .refresh-form-container-child {
@@ -20,33 +31,20 @@
     grid-template-columns: 1fr;
   }
 }
-.refresh-form-column {
-  display: grid;
-}
-
-.refresh-timeout-span {
-  flex: 1;
-}
 
 .refresh-form-buttons {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 10px;
+  display: flex;
+  justify-content: flex-end;
   padding: $cf-space-s $cf-space-3xs $cf-space-2xs $cf-space-3xs;
 }
 
 .refresh-form-cancel-button {
-  width: 140px;
+  width: 100px;
   justify-self: end;
 }
 
 .refresh-form-activate-button {
-  width: 140px;
-}
-
-.refresh-form-timeout-dropdown {
-  padding: 0 0 0 $cf-space-2xs;
-  flex: 1;
+  width: 100px;
 }
 
 .refresh-form-time-label {
@@ -55,13 +53,24 @@
 
 .timerange-dropdown {
   justify-self: end;
-  width: 178px;
+  width: 100%;
+  padding-top: $cf-space-xs;
 }
 
-.refresh-form-timerange-toggle {
-  margin: 0px $cf-space-2xs;
+.refresh-input {
+  width: 210px;
 }
 
-.refresh-input {
-  width: 100px;
+.refresh-inactivity-timeout-container {
+  width: 210px;
+  display: flex;
+}
+
+.refresh-inactivity-timeout-num {
+  flex: 1;
+  padding-right: $cf-space-2xs;
+}
+
+.refresh-inactivity-timeout-unit {
+  flex: 1 0 20px;
 }

src/dashboards/components/AutoRefreshInput.tsx

@@ -86,6 +86,7 @@ const AutoRefreshInput: FC<Props> = ({handleRefreshMilliseconds, label}) => {
         customClass="refresh-input"
         validFunction={isValidInput}
         testID="auto-refresh-input"
+        arrowButtonOn={true}
       />
     </ButtonGroup>
   )