Fix template variable control bar not persisting whether it was open

ui/src/dashboards/containers/DashboardPage.tsx

@@ -84,6 +84,8 @@ interface Props extends ManualRefreshProps, WithRouterProps {
   timeRange: QueriesModels.TimeRange
   zoomedTimeRange: QueriesModels.TimeRange
   inPresentationMode: boolean
+  showTemplateVariableControlBar: boolean
+  toggleTemplateVariableControlBar: typeof appActions.toggleTemplateVariableControlBar
   handleClickPresentationButton: AppActions.DelayEnablePresentationModeDispatcher
   cellQueryStatus: {
     queryID: string
@@ -126,7 +128,6 @@ interface State {
   windowHeight: number
   selectedCell: DashboardsModels.Cell | null
   dashboardLinks: DashboardsModels.DashboardSwitcherLinks
-  showTempVarControls: boolean
   showAnnotationControls: boolean
 }
 
@@ -141,7 +142,6 @@ class DashboardPage extends Component<Props, State> {
       windowHeight: window.innerHeight,
       dashboardLinks: EMPTY_LINKS,
       showAnnotationControls: false,
-      showTempVarControls: false,
     }
   }
 
@@ -217,10 +217,12 @@ class DashboardPage extends Component<Props, State> {
       thresholdsListType,
       thresholdsListColors,
       inPresentationMode,
+      showTemplateVariableControlBar,
       handleChooseAutoRefresh,
       handleShowCellEditorOverlay,
       handleHideCellEditorOverlay,
       handleClickPresentationButton,
+      toggleTemplateVariableControlBar,
     } = this.props
     const low = zoomedLower || lower
     const up = zoomedUpper || upper
@@ -267,11 +269,7 @@ class DashboardPage extends Component<Props, State> {
       templatesIncludingDashTime = []
     }
 
-    const {
-      dashboardLinks,
-      showTempVarControls,
-      showAnnotationControls,
-    } = this.state
+    const {dashboardLinks, showAnnotationControls} = this.state
 
     return (
       <div className="page dashboard-page">
@@ -307,15 +305,15 @@ class DashboardPage extends Component<Props, State> {
           dashboardLinks={dashboardLinks}
           activeDashboard={dashboard ? dashboard.name : ''}
           showAnnotationControls={showAnnotationControls}
-          showTempVarControls={showTempVarControls}
+          showTempVarControls={showTemplateVariableControlBar}
           handleChooseAutoRefresh={handleChooseAutoRefresh}
           handleChooseTimeRange={this.handleChooseTimeRange}
-          onToggleShowTempVarControls={this.toggleTempVarControls}
+          onToggleShowTempVarControls={toggleTemplateVariableControlBar}
           onToggleShowAnnotationControls={this.toggleAnnotationControls}
           handleClickPresentationButton={handleClickPresentationButton}
         />
         {!inPresentationMode &&
-          showTempVarControls && (
+          showTemplateVariableControlBar && (
             <TemplateControlBar
               templates={dashboard && dashboard.templates}
               meRole={meRole}
@@ -526,10 +524,6 @@ class DashboardPage extends Component<Props, State> {
     }
   }
 
-  private toggleTempVarControls = () => {
-    this.setState({showTempVarControls: !this.state.showTempVarControls})
-  }
-
   private toggleAnnotationControls = () => {
     this.setState({showAnnotationControls: !this.state.showAnnotationControls})
   }
@@ -572,7 +566,7 @@ const mstp = (state, {params: {dashboardID}}) => {
   const {
     app: {
       ephemeral: {inPresentationMode},
-      persisted: {autoRefresh},
+      persisted: {autoRefresh, showTemplateVariableControlBar},
     },
     dashboardUI: {dashboards, cellQueryStatus, zoomedTimeRange},
     sources,
@@ -618,6 +612,7 @@ const mstp = (state, {params: {dashboardID}}) => {
     thresholdsListColors,
     gaugeColors,
     lineColors,
+    showTemplateVariableControlBar,
   }
 }
 
@@ -634,6 +629,7 @@ const mdtp = {
   cloneDashboardCellAsync: dashboardActions.cloneDashboardCellAsync,
   deleteDashboardCellAsync: dashboardActions.deleteDashboardCellAsync,
   templateVariableLocalSelected: dashboardActions.templateVariableLocalSelected,
+  toggleTemplateVariableControlBar: appActions.toggleTemplateVariableControlBar,
   getDashboardWithTemplatesAsync:
     dashboardActions.getDashboardWithTemplatesAsync,
   rehydrateTemplatesAsync: dashboardActions.rehydrateTemplatesAsync,

ui/src/shared/actions/app.ts

@@ -9,6 +9,7 @@ import {
   ActionTypes,
   EnablePresentationModeAction,
   DisablePresentationModeAction,
+  ToggleTemplateVariableControlBarAction,
   DelayEnablePresentationModeDispatcher,
   SetAutoRefreshActionCreator,
   SetAutoRefreshAction,
@@ -42,3 +43,7 @@ export const setAutoRefresh: SetAutoRefreshActionCreator = (
     milliseconds,
   },
 })
+
+export const toggleTemplateVariableControlBar = (): ToggleTemplateVariableControlBarAction => ({
+  type: ActionTypes.ToggleTemplateVariableControlBar,
+})

ui/src/shared/constants/index.ts

@@ -402,6 +402,7 @@ export const HTTP_FORBIDDEN = 403
 export const HTTP_NOT_FOUND = 404
 
 export const AUTOREFRESH_DEFAULT = 0 // in milliseconds
+export const SHOW_TEMP_VAR_CONTROL_BAR_DEFAULT = false
 
 export const GRAPH = 'graph'
 export const TABLE = 'table'

ui/src/shared/reducers/app.ts

@@ -1,6 +1,9 @@
 import {combineReducers} from 'redux'
 
-import {AUTOREFRESH_DEFAULT} from 'src/shared/constants'
+import {
+  AUTOREFRESH_DEFAULT,
+  SHOW_TEMP_VAR_CONTROL_BAR_DEFAULT,
+} from 'src/shared/constants'
 import {ActionTypes, Action} from 'src/types/actions/app'
 
 interface State {
@@ -9,6 +12,7 @@ interface State {
   }
   persisted: {
     autoRefresh: number
+    showTemplateVariableControlBar: boolean
   }
 }
 
@@ -18,6 +22,7 @@ const initialState: State = {
   },
   persisted: {
     autoRefresh: AUTOREFRESH_DEFAULT,
+    showTemplateVariableControlBar: SHOW_TEMP_VAR_CONTROL_BAR_DEFAULT,
   },
 }
 
@@ -62,6 +67,14 @@ const appPersistedReducer = (
       }
     }
 
+    case ActionTypes.ToggleTemplateVariableControlBar: {
+      const update = !state.showTemplateVariableControlBar
+      return {
+        ...state,
+        showTemplateVariableControlBar: update,
+      }
+    }
+
     default:
       return state
   }

ui/src/types/actions/app.ts

@@ -4,7 +4,7 @@ export enum ActionTypes {
   EnablePresentationMode = 'ENABLE_PRESENTATION_MODE',
   DisablePresentationMode = 'DISABLE_PRESENTATION_MODE',
   SetAutoRefresh = 'SET_AUTOREFRESH',
-  TemplateControlBarVisibilityToggled = 'TemplateControlBarVisibilityToggledAction',
+  ToggleTemplateVariableControlBar = 'TOGGLE_TEMPLATE_VARIABLE_CONTROL_BAR',
   Noop = 'NOOP',
 }
 
@@ -12,6 +12,7 @@ export type Action =
   | EnablePresentationModeAction
   | DisablePresentationModeAction
   | SetAutoRefreshAction
+  | ToggleTemplateVariableControlBarAction
 
 export type EnablePresentationModeActionCreator = () => EnablePresentationModeAction
 
@@ -23,6 +24,10 @@ export interface DisablePresentationModeAction {
   type: ActionTypes.DisablePresentationMode
 }
 
+export interface ToggleTemplateVariableControlBarAction {
+  type: ActionTypes.ToggleTemplateVariableControlBar
+}
+
 export type DelayEnablePresentationModeDispatcher = () => DelayEnablePresentationModeThunk
 
 export type DelayEnablePresentationModeThunk = (