feat: force measurement selection for data explorer (#4523)

Author: asalem1

src/timeMachine/actions/queryBuilderThunks.ts

@@ -53,6 +53,7 @@ import {
   setFunctions,
 } from 'src/timeMachine/actions/queryBuilder'
 import {setBuckets} from 'src/buckets/actions/creators'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Constants
 import {AGG_WINDOW_AUTO} from 'src/timeMachine/constants/queryBuilder'
@@ -321,10 +322,15 @@ export const selectTagValue = (index: number, value: string) => (
     currentTag.key === '_field'
   ) {
     newValues = [value]
+  } else if (isFlagEnabled('newQueryBuilder') && index === 0) {
+    newValues = [value]
   } else {
     newValues = [...values, value]
   }
 
+  if (newValues.length === 0 && index === 0) {
+    dispatch(removeTagSelector(index + 1))
+  }
   dispatch(setBuilderTagValuesSelection(index, newValues))
 
   // don't add a new tag filter if we're grouping

src/timeMachine/components/SelectorList.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {SFC} from 'react'
+import React, {FC} from 'react'
 
 // Components
 import {List, ComponentSize} from '@influxdata/clockface'
@@ -14,7 +14,7 @@ interface Props {
   wrapText?: boolean
 }
 
-const SelectorList: SFC<Props> = props => {
+const SelectorList: FC<Props> = props => {
   const {
     items,
     selectedItems,

src/timeMachine/components/SubmitQueryButton.tsx

@@ -150,7 +150,14 @@ const mstp = (state: AppState) => {
   const queryStatus = getActiveTimeMachine(state).queryResults.status
 
   const activeQueryText = getActiveQuery(state).text
-  const submitButtonDisabled = activeQueryText === ''
+  const tags = getActiveQuery(state).builderConfig?.tags ?? []
+  const activeQuery = getActiveQuery(state)
+  const measurementTag = tags?.[0]
+  const submitButtonDisabled =
+    activeQueryText === '' ||
+    (activeQuery.editMode === 'builder' &&
+      measurementTag &&
+      measurementTag.values.length === 0)
   const allVars = getAllVariables(state)
   const orgID = getOrg(state).id
 

src/timeMachine/components/TagSelector.tsx

@@ -26,6 +26,7 @@ import {
   selectTagKey,
   selectTagValue,
 } from 'src/timeMachine/actions/queryBuilderThunks'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 import {
   setBuilderAggregateFunctionType,
@@ -85,9 +86,29 @@ class TagSelector extends PureComponent<Props> {
     )
   }
 
+  private get isCompliant() {
+    const {
+      index,
+      selectedKey,
+      selectedValues,
+      aggregateFunctionType,
+    } = this.props
+
+    return (
+      isFlagEnabled('newQueryBuilder') &&
+      index === 0 &&
+      selectedKey === '_measurement' &&
+      aggregateFunctionType !== 'group' &&
+      selectedValues.length <= 1
+    )
+  }
+
   private get header() {
     const {aggregateFunctionType, index, isInCheckOverlay} = this.props
 
+    if (this.isCompliant) {
+      return null
+    }
     return (
       <BuilderCard.DropdownHeader
         options={['filter', 'group']}
@@ -133,6 +154,7 @@ class TagSelector extends PureComponent<Props> {
         : `Search ${selectedKey} tag values`
     return (
       <>
+        {this.isCompliant && <BuilderCard.Header title="Measurement" />}
         <BuilderCard.Menu testID={`tag-selector--container ${index}`}>
           {aggregateFunctionType !== 'group' && (
             <FlexBox
@@ -141,19 +163,21 @@ class TagSelector extends PureComponent<Props> {
               margin={ComponentSize.Small}
             >
               <ErrorBoundary>
-                <SearchableDropdown
-                  searchTerm={keysSearchTerm}
-                  emptyText="No Tags Found"
-                  searchPlaceholder="Search keys..."
-                  buttonStatus={toComponentStatus(keysStatus)}
-                  selectedOption={selectedKey}
-                  onSelect={this.handleSelectTag}
-                  onChangeSearchTerm={this.handleKeysSearch}
-                  testID="tag-selector--dropdown"
-                  buttonTestID="tag-selector--dropdown-button"
-                  menuTestID="tag-selector--dropdown-menu"
-                  options={keys}
-                />
+                {!this.isCompliant && (
+                  <SearchableDropdown
+                    searchTerm={keysSearchTerm}
+                    emptyText="No Tags Found"
+                    searchPlaceholder="Search keys..."
+                    buttonStatus={toComponentStatus(keysStatus)}
+                    selectedOption={selectedKey}
+                    onSelect={this.handleSelectTag}
+                    onChangeSearchTerm={this.handleKeysSearch}
+                    testID="tag-selector--dropdown"
+                    buttonTestID="tag-selector--dropdown-button"
+                    menuTestID="tag-selector--dropdown-menu"
+                    options={keys}
+                  />
+                )}
               </ErrorBoundary>
               {this.selectedCounter}
             </FlexBox>
@@ -206,7 +230,7 @@ class TagSelector extends PureComponent<Props> {
         items={values}
         selectedItems={selectedValues}
         onSelectItem={this.handleSelectValue}
-        multiSelect={!this.props.isInCheckOverlay}
+        multiSelect={!this.props.isInCheckOverlay || this.isCompliant}
       />
     )
   }

src/timeMachine/components/TimeMachine.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {useState, FunctionComponent} from 'react'
-import {connect} from 'react-redux'
+import {useSelector} from 'react-redux'
 import classnames from 'classnames'
 
 // Components
@@ -14,20 +14,12 @@ import ViewOptions from 'src/timeMachine/components/ViewOptions'
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 
 // Types
-import {AppState, TimeMachineTab} from 'src/types'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 
 const INITIAL_RESIZER_HANDLE = 0.4
 
-interface StateProps {
-  activeTab: TimeMachineTab
-  isViewingVisOptions: boolean
-}
-
-const TimeMachine: FunctionComponent<StateProps> = ({
-  activeTab,
-  isViewingVisOptions,
-}) => {
+const TimeMachine: FunctionComponent = () => {
+  const {activeTab, isViewingVisOptions} = useSelector(getActiveTimeMachine)
   const [dragPosition, setDragPosition] = useState([INITIAL_RESIZER_HANDLE])
 
   const containerClassName = classnames('time-machine', {
@@ -73,10 +65,4 @@ const TimeMachine: FunctionComponent<StateProps> = ({
   )
 }
 
-const mstp = (state: AppState) => {
-  const {activeTab, isViewingVisOptions} = getActiveTimeMachine(state)
-
-  return {activeTab, isViewingVisOptions}
-}
-
-export default connect<StateProps>(mstp)(TimeMachine)
+export default TimeMachine