Replace toggleFlux with on/off functions (#4569)

ui/src/dashboards/components/SourceSelector.tsx

@@ -18,7 +18,8 @@ interface Props {
   sourceSupportsFlux: boolean
   queries: QueriesModels.QueryConfig[]
   isDynamicSourceSelected: boolean
-  toggleFlux: () => void
+  toggleFluxOn: () => void
+  toggleFluxOff: () => void
   onSelectDynamicSource: () => void
   onChangeSource: (source: SourcesModels.Source, type: QueryType) => void
 }
@@ -27,7 +28,8 @@ const SourceSelector: SFC<Props> = ({
   source,
   sources = [],
   queries,
-  toggleFlux,
+  toggleFluxOn,
+  toggleFluxOff,
   isFluxSelected,
   onChangeSource,
   sourceSupportsFlux,
@@ -56,7 +58,7 @@ const SourceSelector: SFC<Props> = ({
           id="flux-source"
           titleText="Flux"
           value="Flux"
-          onClick={toggleFlux}
+          onClick={toggleFluxOn}
           active={isFluxSelected}
           disabled={!sourceSupportsFlux}
         >
@@ -66,7 +68,7 @@ const SourceSelector: SFC<Props> = ({
           id="influxql-source"
           titleText="InfluxQL"
           value="InfluxQL"
-          onClick={toggleFlux}
+          onClick={toggleFluxOff}
           active={!isFluxSelected}
           disabled={!sourceSupportsFlux}
         >

ui/src/shared/components/TimeMachine/TimeMachine.tsx

@@ -157,7 +157,8 @@ class TimeMachine extends PureComponent<Props, State> {
           queries={this.queriesWorkingDraft}
           templates={templates}
           source={this.source}
-          toggleFlux={this.toggleFlux}
+          toggleFluxOn={this.toggleFluxOn}
+          toggleFluxOff={this.toggleFluxOff}
           sources={this.formattedSources}
           isFluxSelected={this.isFluxSelected}
           isViewingRawData={isViewingRawData}
@@ -520,14 +521,21 @@ class TimeMachine extends PureComponent<Props, State> {
     this.setState({isViewingRawData: !this.state.isViewingRawData})
   }
 
-  private toggleFlux = (): void => {
+  private toggleFluxOn = (): void => {
-    const newQueryType = this.isFluxSelected
+    if (!this.isFluxSelected) {
-      ? QueryType.InfluxQL
+      const newQueryType = QueryType.Flux
-      : QueryType.Flux
       const source = this.useDynamicSource ? null : this.source
-
       this.updateQueryDraftsSource(source, newQueryType)
     }
+  }
+
+  private toggleFluxOff = (): void => {
+    if (this.isFluxSelected) {
+      const newQueryType = QueryType.InfluxQL
+      const source = this.useDynamicSource ? null : this.source
+      this.updateQueryDraftsSource(source, newQueryType)
+    }
+  }
 }
 
 const ConnectedTimeMachine = (props: PassedProps) => {

ui/src/shared/components/TimeMachine/TimeMachineControls.tsx

@@ -32,7 +32,8 @@ interface Props {
   onSelectDynamicSource: () => void
   timeRange: QueriesModels.TimeRange
   updateEditorTimeRange: (timeRange: QueriesModels.TimeRange) => void
-  toggleFlux: () => void
+  toggleFluxOn: () => void
+  toggleFluxOff: () => void
   toggleIsViewingRawData: () => void
 }
 
@@ -43,7 +44,8 @@ const TimeMachineControls: SFC<Props> = ({
   queries,
   templates,
   timeRange,
-  toggleFlux,
+  toggleFluxOn,
+  toggleFluxOff,
   isFluxSelected,
   isViewingRawData,
   autoRefreshDuration,
@@ -61,7 +63,8 @@ const TimeMachineControls: SFC<Props> = ({
         source={source}
         sources={sources}
         queries={queries}
-        toggleFlux={toggleFlux}
+        toggleFluxOn={toggleFluxOn}
+        toggleFluxOff={toggleFluxOff}
         sourceSupportsFlux={sourceSupportsFlux}
         isFluxSelected={isFluxSelected}
         onChangeSource={onChangeSource}