feat: add multiselect for measurements (#5673)

* feat: add multiselect for measurements

* fix: missed some edgecase behaviors

* fix: updating styling and text per design review

Co-authored-by: drdelambre <drdelambre>

Author: drdelambre

src/timeMachine/actions/queryBuilderThunks.ts

@@ -78,7 +78,14 @@ const loadTagSelectorValues =
 
     const state = getState()
     const {buckets, tags} = getActiveQuery(state).builderConfig
-    const tagsSelections = tags.slice(0, index)
+    const tagsSelections = tags
+      .slice(0, index)
+      .filter(
+        t =>
+          t.key !== '_measurement' ||
+          t.values.length !== 1 ||
+          t.values[0] !== '_all'
+      )
 
     if (!buckets[0]) {
       return
@@ -155,7 +162,14 @@ export const loadTagSelector =
     dispatch(setBuilderTagKeysStatus(index, RemoteDataState.Loading))
 
     const state = getState()
-    const tagsSelections = tags.slice(0, index)
+    const tagsSelections = tags
+      .slice(0, index)
+      .filter(
+        t =>
+          t.key !== '_measurement' ||
+          t.values.length !== 1 ||
+          t.values[0] !== '_all'
+      )
 
     const bucket = buckets[0]
 
@@ -328,7 +342,11 @@ export const selectTagValue =
       currentTag.key === '_field'
     ) {
       newValues = [value]
-    } else if (isFlagEnabled('newQueryBuilder') && index === 0) {
+    } else if (
+      isFlagEnabled('newQueryBuilder') &&
+      index === 0 &&
+      !isFlagEnabled('measurementMultiselect')
+    ) {
       newValues = [value]
     } else {
       newValues = [...values, value]

src/timeMachine/components/SelectorList.tsx

@@ -12,6 +12,7 @@ interface Props {
   children?: JSX.Element | JSX.Element[]
   testID?: string
   wrapText?: boolean
+  disabled?: boolean
 }
 
 const SelectorList: FC<Props> = props => {
@@ -23,6 +24,7 @@ const SelectorList: FC<Props> = props => {
     children,
     testID,
     wrapText,
+    disabled,
   } = props
 
   return (
@@ -48,6 +50,7 @@ const SelectorList: FC<Props> = props => {
             selected={selected}
             size={ComponentSize.ExtraSmall}
             wrapText={wrapText}
+            disabled={disabled}
           >
             {indicator}
             {item}

src/timeMachine/components/TagSelector.tsx

@@ -9,6 +9,7 @@ import {
   FlexBox,
   FlexDirection,
   Input,
+  List,
 } from '@influxdata/clockface'
 import SearchableDropdown from 'src/shared/components/SearchableDropdown'
 import WaitingText from 'src/shared/components/WaitingText'
@@ -20,12 +21,16 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Actions
 import {
-  removeTagSelector,
+  addTagSelector,
   searchTagKeys,
   searchTagValues,
   selectTagKey,
   selectTagValue,
+  loadTagSelector,
+  removeTagSelector,
 } from 'src/timeMachine/actions/queryBuilderThunks'
+import {setBuilderTagValuesSelection} from 'src/timeMachine/actions/queryBuilder'
+
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 import {
@@ -91,7 +96,7 @@ class TagSelector extends PureComponent<Props> {
       index === 0 &&
       (selectedKey === '' || selectedKey === '_measurement') &&
       aggregateFunctionType !== 'group' &&
-      selectedValues.length <= 1
+      (isFlagEnabled('measurementMultiselect') || selectedValues.length <= 1)
     )
   }
 
@@ -202,6 +207,35 @@ class TagSelector extends PureComponent<Props> {
     )
   }
 
+  private toggleSelectAll() {
+    const {
+      selectedValues,
+      onSetBuilderTagValuesSelection,
+      onAddTagSelector,
+      onRemoveTagSelector,
+      index,
+      isLast,
+      shouldClearLast,
+      onLoadTagSelector,
+    } = this.props
+
+    if (selectedValues.length === 1 && selectedValues[0] === '_all') {
+      onSetBuilderTagValuesSelection(0, [])
+
+      if (shouldClearLast) {
+        onRemoveTagSelector(index + 1)
+      }
+    } else {
+      onSetBuilderTagValuesSelection(0, ['_all'])
+
+      if (isLast) {
+        onAddTagSelector()
+      } else {
+        onLoadTagSelector(index + 1)
+      }
+    }
+  }
+
   private get values() {
     const {selectedKey, values, valuesStatus, selectedValues} = this.props
 
@@ -232,13 +266,38 @@ class TagSelector extends PureComponent<Props> {
       )
     }
 
+    // underscore values are not allowed for user data
+    // so there shouldn't be collisions
+    const selectedAll =
+      selectedValues.length === 1 && selectedValues[0] === '_all'
+
     return (
       <SelectorList
-        items={values}
+        items={values.filter(t => t !== '_all')}
         selectedItems={selectedValues}
         onSelectItem={this.handleSelectValue}
-        multiSelect={!this.props.isInCheckOverlay || this.isCompliant}
-      />
+        multiSelect={
+          !this.props.isInCheckOverlay ||
+          (this.isCompliant && isFlagEnabled('measurementMultiselect'))
+        }
+        disabled={selectedAll}
+      >
+        {this.isCompliant && isFlagEnabled('measurementMultiselect') && (
+          <List.Item
+            className="selector-list--item select-all"
+            testID="selector-list --select-all"
+            key="_all"
+            value="_all"
+            onClick={() => this.toggleSelectAll()}
+            title="Select All"
+            selected={selectedAll}
+            size={ComponentSize.ExtraSmall}
+          >
+            <List.Indicator type="checkbox" />
+            All Measurements
+          </List.Item>
+        )}
+      </SelectorList>
     )
   }
 
@@ -350,6 +409,9 @@ const mstp = (state: AppState, ownProps: OwnProps) => {
     values = [...ADDITIONAL_GROUP_BY_COLUMNS, ...tags.map(tag => tag.key)]
   }
   const isInCheckOverlay = getIsInCheckOverlay(state)
+  const isLast = ownProps.index === tags.length - 1
+  const shouldClearLast =
+    ownProps.index === tags.length - 2 && !tags[tags.length - 1].values.length
 
   return {
     aggregateFunctionType,
@@ -363,6 +425,8 @@ const mstp = (state: AppState, ownProps: OwnProps) => {
     valuesSearchTerm,
     keysSearchTerm,
     isInCheckOverlay,
+    isLast,
+    shouldClearLast,
   }
 }
 
@@ -375,6 +439,9 @@ const mdtp = {
   onSetBuilderAggregateFunctionType: setBuilderAggregateFunctionType,
   onSetKeysSearchTerm: setKeysSearchTerm,
   onSetValuesSearchTerm: setValuesSearchTerm,
+  onSetBuilderTagValuesSelection: setBuilderTagValuesSelection,
+  onAddTagSelector: addTagSelector,
+  onLoadTagSelector: loadTagSelector,
 }
 
 const connector = connect(mstp, mdtp)

src/timeMachine/utils/queryBuilder.ts

@@ -107,7 +107,12 @@ function buildQueryFromConfig(
 ): string {
   const [bucket] = builderConfig.buckets
 
-  const tags = Array.from(builderConfig.tags)
+  const tags = Array.from(builderConfig.tags).filter(
+    t =>
+      t.key !== '_measurement' ||
+      t.values.length !== 1 ||
+      t.values[0] !== '_all'
+  )
 
   // todo: (bucky) - check to see if we can combine filter calls
   // https://github.com/influxdata/influxdb/issues/16076