Use enums instead of string constants

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -25,10 +25,7 @@ import replaceTemplate, {replaceInterval} from 'src/tempVars/utils/replace'
 
 // Constants
 import {IS_STATIC_LEGEND} from 'src/shared/constants'
-import {
-  TYPE_QUERY_CONFIG,
-  DISPLAY_OPTIONS_QUERIES,
-} from 'src/dashboards/constants'
+import {TYPE_QUERY_CONFIG, CEOTabs} from 'src/dashboards/constants'
 import {OVERLAY_TECHNOLOGY} from 'src/shared/constants/classNames'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
 import {
@@ -94,7 +91,7 @@ interface Props {
 interface State {
   queriesWorkingDraft: QueriesModels.QueryConfig[]
   activeQueryIndex: number
-  displayOptionsTab: string
+  activeEditorTab: CEOTabs
   isStaticLegend: boolean
 }
 
@@ -146,7 +143,7 @@ class CellEditorOverlay extends Component<Props, State> {
     this.state = {
       queriesWorkingDraft,
       activeQueryIndex: 0,
-      displayOptionsTab: DISPLAY_OPTIONS_QUERIES,
+      activeEditorTab: CEOTabs.Queries,
       isStaticLegend: IS_STATIC_LEGEND(legend),
     }
   }
@@ -183,7 +180,7 @@ class CellEditorOverlay extends Component<Props, State> {
       editQueryStatus,
     } = this.props
 
-    const {displayOptionsTab, queriesWorkingDraft, isStaticLegend} = this.state
+    const {activeEditorTab, queriesWorkingDraft, isStaticLegend} = this.state
 
     return (
       <div
@@ -218,8 +215,8 @@ class CellEditorOverlay extends Component<Props, State> {
               selected={this.findSelectedSource()}
               onSetQuerySource={this.handleSetQuerySource}
               isSavable={this.isSaveable}
-              displayOptionsTab={displayOptionsTab}
-              onClickDisplayOptions={this.handleClickDisplayOptionsTab}
+              activeEditorTab={activeEditorTab}
+              onSetActiveEditorTab={this.handleSetActiveEditorTab}
             />
             {this.cellEditorBottom}
           </CEOBottom>
@@ -233,12 +230,12 @@ class CellEditorOverlay extends Component<Props, State> {
 
     const {
       activeQueryIndex,
-      displayOptionsTab,
+      activeEditorTab,
       queriesWorkingDraft,
       isStaticLegend,
     } = this.state
 
-    if (displayOptionsTab === DISPLAY_OPTIONS_QUERIES) {
+    if (activeEditorTab === CEOTabs.Queries) {
       return (
         <QueryMaker
           source={this.source}
@@ -351,15 +348,15 @@ class CellEditorOverlay extends Component<Props, State> {
     this.props.onSave(newCell)
   }
 
-  private handleClickDisplayOptionsTab = (tabName: string) => {
-    this.setState({displayOptionsTab: tabName})
+  private handleSetActiveEditorTab = (tabName: CEOTabs): void => {
+    this.setState({activeEditorTab: tabName})
   }
 
-  private handleSetActiveQueryIndex = activeQueryIndex => {
+  private handleSetActiveQueryIndex = (activeQueryIndex): void => {
     this.setState({activeQueryIndex})
   }
 
-  private handleToggleStaticLegend = isStaticLegend => () => {
+  private handleToggleStaticLegend = isStaticLegend => (): void => {
     this.setState({isStaticLegend})
   }
 

ui/src/dashboards/components/OverlayControls.tsx

@@ -5,10 +5,7 @@ import SourceSelector from 'src/dashboards/components/SourceSelector'
 import RadioButtons from 'src/reusable_ui/components/radio_buttons/RadioButtons'
 import {ButtonShape} from 'src/reusable_ui/types'
 
-import {
-  DISPLAY_OPTIONS_QUERIES,
-  DISPLAY_OPTIONS_VIS,
-} from 'src/dashboards/constants'
+import {CEOTabs} from 'src/dashboards/constants'
 
 import * as QueriesModels from 'src/types/queries'
 import * as SourcesModels from 'src/types/sources'
@@ -16,8 +13,8 @@ import * as SourcesModels from 'src/types/sources'
 interface Props {
   onCancel: () => void
   onSave: () => void
-  displayOptionsTab: string
-  onClickDisplayOptions: (tabName: string) => void
+  activeEditorTab: CEOTabs
+  onSetActiveEditorTab: (tabName: CEOTabs) => void
   isSavable: boolean
   sources: SourcesModels.SourceOption[]
   onSetQuerySource: (source: SourcesModels.Source) => void
@@ -33,8 +30,8 @@ const OverlayControls: SFC<Props> = ({
   onCancel,
   isSavable,
   onSetQuerySource,
-  displayOptionsTab,
-  onClickDisplayOptions,
+  activeEditorTab,
+  onSetActiveEditorTab,
 }) => (
   <div className="overlay-controls">
     <SourceSelector
@@ -45,9 +42,9 @@ const OverlayControls: SFC<Props> = ({
     />
     <div className="overlay-controls--tabs">
       <RadioButtons
-        activeButton={displayOptionsTab}
-        buttons={[DISPLAY_OPTIONS_QUERIES, DISPLAY_OPTIONS_VIS]}
-        onChange={onClickDisplayOptions}
+        activeButton={activeEditorTab}
+        buttons={[CEOTabs.Queries, CEOTabs.Vis]}
+        onChange={onSetActiveEditorTab}
         shape={ButtonShape.StretchToFit}
       />
     </div>

ui/src/dashboards/constants/index.ts

@@ -109,5 +109,7 @@ export const TYPE_SHIFTED: string = 'shifted queryConfig'
 export const TYPE_FLUX: string = 'flux'
 export const DASHBOARD_NAME_MAX_LENGTH: number = 50
 
-export const DISPLAY_OPTIONS_QUERIES = 'Queries'
-export const DISPLAY_OPTIONS_VIS = 'Visualization'
+export enum CEOTabs {
+  Queries = 'Queries',
+  Vis = 'Visualization',
+}