Allows users to close a measurement they have open

Applies to:
  - Data Explorer
  - CEO

ui/src/data_explorer/reducers/queryConfigs.js

@@ -34,13 +34,16 @@ const queryConfigs = (state = {}, action) => {
 
     case 'DE_CHOOSE_MEASUREMENT': {
       const {queryID, measurement} = action.payload
+
       const nextQueryConfig = chooseMeasurement(state[queryID], measurement)
 
-      return Object.assign({}, state, {
-        [queryID]: Object.assign(nextQueryConfig, {
+      return {
+        ...state,
+        [queryID]: {
+          ...nextQueryConfig,
           rawText: state[queryID].rawText,
-        }),
-      })
+        },
+      }
     }
 
     // there is an additional reducer for this same action in the ui reducer

ui/src/shared/components/MeasurementListItem.tsx

@@ -1,5 +1,6 @@
+import _ from 'lodash'
 import classnames from 'classnames'
-import React, {SFC} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 import TagList from 'src/shared/components/TagList'
 
 import {Query, Source} from 'src/types'
@@ -17,51 +18,93 @@ interface Props {
   onChooseMeasurement: (measurement: string) => () => void
 }
 
-const noop = () => {}
+interface State {
+  isOpen: boolean
+}
 
-const MeasurementListItem: SFC<Props> = ({
-  query,
-  isActive,
-  querySource,
-  measurement,
-  onChooseTag,
-  onGroupByTag,
-  numTagsActive,
-  onAcceptReject,
-  areTagsAccepted,
-  onChooseMeasurement,
-}) => (
-  <div
-    key={measurement}
-    onClick={isActive ? noop : onChooseMeasurement(measurement)}
-  >
-    <div className={classnames('query-builder--list-item', {active: isActive})}>
-      <span>
-        <div className="query-builder--caret icon caret-right" />
-        {measurement}
-      </span>
-      {isActive &&
-        numTagsActive >= 1 && (
-          <div
-            className={classnames('flip-toggle', {flipped: areTagsAccepted})}
-            onClick={onAcceptReject}
-          >
-            <div className="flip-toggle--container">
-              <div className="flip-toggle--front">!=</div>
-              <div className="flip-toggle--back">=</div>
-            </div>
-          </div>
+class MeasurementListItem extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {isOpen: this.isCurrentMeasurement}
+  }
+
+  public render() {
+    const {
+      query,
+      querySource,
+      measurement,
+      onChooseTag,
+      onGroupByTag,
+      numTagsActive,
+      areTagsAccepted,
+    } = this.props
+
+    return (
+      <div key={measurement} onClick={this.handleClick}>
+        <div
+          className={classnames('query-builder--list-item', {
+            active: this.shouldShow,
+          })}
+        >
+          <span>
+            <div className="query-builder--caret icon caret-right" />
+            {measurement}
+          </span>
+          {this.shouldShow &&
+            numTagsActive >= 1 && (
+              <div
+                className={classnames('flip-toggle', {
+                  flipped: areTagsAccepted,
+                })}
+                onClick={this.handleAcceptReject}
+              >
+                <div className="flip-toggle--container">
+                  <div className="flip-toggle--front">!=</div>
+                  <div className="flip-toggle--back">=</div>
+                </div>
+              </div>
+            )}
+        </div>
+        {this.shouldShow && (
+          <TagList
+            query={query}
+            querySource={querySource}
+            onChooseTag={onChooseTag}
+            onGroupByTag={onGroupByTag}
+          />
         )}
-    </div>
-    {isActive && (
-      <TagList
-        query={query}
-        querySource={querySource}
-        onChooseTag={onChooseTag}
-        onGroupByTag={onGroupByTag}
-      />
-    )}
-  </div>
-)
+      </div>
+    )
+  }
+
+  private handleAcceptReject = (e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation()
+
+    const {onAcceptReject} = this.props
+    onAcceptReject()
+  }
+
+  private handleClick = () => {
+    const {measurement, onChooseMeasurement} = this.props
+
+    if (!this.isCurrentMeasurement) {
+      this.setState({isOpen: true}, () => {
+        onChooseMeasurement(measurement)()
+      })
+    } else {
+      this.setState({isOpen: !this.state.isOpen})
+    }
+  }
+
+  private get shouldShow(): boolean {
+    return this.isCurrentMeasurement && this.state.isOpen
+  }
+
+  private get isCurrentMeasurement(): boolean {
+    const {query, measurement} = this.props
+    return _.get(query, 'measurement') === measurement
+  }
+}
 
 export default MeasurementListItem

ui/src/shared/components/TagListItem.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames'
 import _ from 'lodash'
-import React, {PureComponent} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 
 interface Tag {
   key: string
@@ -36,11 +36,13 @@ class TagListItem extends PureComponent<Props, State> {
     this.handleFilterText = this.handleFilterText.bind(this)
   }
 
-  public handleChoose(tagValue: string) {
+  public handleChoose(tagValue: string, e: MouseEvent<HTMLElement>) {
+    e.stopPropagation()
     this.props.onChooseTag({key: this.props.tagKey, value: tagValue})
   }
 
-  public handleClickKey() {
+  public handleClickKey(e: MouseEvent<HTMLElement>) {
+    e.stopPropagation()
     this.setState({isOpen: !this.state.isOpen})
   }