feat: show selected filters when searching in notebooks querybuilder (#3409)

* feat: show selected filters when searching

* chore: update to float selected items

* chore: update sorting per explorer

* chore: add tag selector count and used shared component across the board

* style: run prettier

* chore: add some safety

Co-authored-by: Subir Jolly <subirjolly@Subirs-MacBook-Pro.local>

Author: subirjolly

src/flows/pipes/QueryBuilder/CardList.tsx

@@ -1,4 +1,12 @@
-import React, {FC, useCallback, useContext, useEffect, useState} from 'react'
+// Libraries
+import React, {
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import {
   Input,
   AlignItems,
@@ -7,15 +15,22 @@ import {
   FlexBox,
 } from '@influxdata/clockface'
 
+// Contexts
 import {QueryBuilderContext} from 'src/flows/pipes/QueryBuilder/context'
 import {PipeContext} from 'src/flows/context/pipe'
 
+// Utils
 import {toComponentStatus} from 'src/shared/utils/toComponentStatus'
+
+// Types
 import {RemoteDataState, BuilderAggregateFunctionType} from 'src/types'
+
+// Components
 import SearchableDropdown from 'src/shared/components/SearchableDropdown'
+import TagSelectorCount from 'src/shared/components/TagSelectorCount'
+import WaitingText from 'src/shared/components/WaitingText'
 import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
 import SelectorList from 'src/timeMachine/components/SelectorList'
-import WaitingText from 'src/shared/components/WaitingText'
 
 const DEBOUNCE_TIMEOUT = 500
 const debounce_array = []
@@ -44,6 +59,13 @@ const Card: FC<Props> = ({idx}) => {
   const [keySearches, setKeySearches] = useState([])
   const [valueSearches, setValueSearches] = useState([])
 
+  const allItems = useMemo(() => {
+    const results = new Set(card?.values?.results)
+    const selected = card?.values?.selected?.filter(s => !results.has(s))
+
+    return [...selected, ...Array.from(results)]
+  }, [card?.values?.selected, card?.values?.results])
+
   const _remove =
     idx !== 0 &&
     (() => {
@@ -87,7 +109,6 @@ const Card: FC<Props> = ({idx}) => {
   const valueSelect = val => {
     const _vals = [...card.values.selected]
     const index = _vals.indexOf(val)
-
     if (index === -1) {
       _vals.push(val)
     } else {
@@ -173,10 +194,7 @@ const Card: FC<Props> = ({idx}) => {
         <WaitingText text="Loading tag values" />
       </BuilderCard.Empty>
     )
-  } else if (
-    card.values.loading === RemoteDataState.Done &&
-    !card.values.results.length
-  ) {
+  } else if (card.values.loading === RemoteDataState.Done && !allItems.length) {
     _values = (
       <BuilderCard.Empty>
         No values found <small>in the current time range</small>
@@ -185,7 +203,7 @@ const Card: FC<Props> = ({idx}) => {
   } else {
     _values = (
       <SelectorList
-        items={card.values.results}
+        items={allItems}
         selectedItems={card.values.selected}
         onSelectItem={valueSelect}
         multiSelect
@@ -245,6 +263,9 @@ const Card: FC<Props> = ({idx}) => {
             menuTestID="tag-selector--dropdown-menu"
             options={card.keys.results}
           />
+          {!!card?.values?.selected?.length && (
+            <TagSelectorCount count={card.values.selected.length} />
+          )}
         </FlexBox>
         <Input
           value={valueSearches[idx] || ''}

src/shared/components/TagSelectorCount.scss

@@ -0,0 +1,14 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.tag-selector-count {
+  flex: 0 0 30px;
+  height: 30px;
+  background-color: $cf-grey-5;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  font-weight: 900;
+  user-select: none;
+  color: $c-pool;
+  font-size: 13px;
+}

src/shared/components/TagSelectorCount.tsx

@@ -0,0 +1,21 @@
+import React, {FC} from 'react'
+import './TagSelectorCount.scss'
+
+interface OwnProps {
+  count: number
+}
+
+const TagSelectorCount: FC<OwnProps> = ({count}) => {
+  const pluralizer = count <= 1 ? '' : 's'
+
+  return (
+    <div
+      className="tag-selector-count"
+      title={`${count} value${pluralizer} selected`}
+    >
+      {count}
+    </div>
+  )
+}
+
+export default TagSelectorCount

src/style/chronograf.scss

@@ -45,6 +45,7 @@
 @import 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss';
 @import 'src/shared/components/selectorList/SelectorList.scss';
 @import 'src/shared/components/CodeSnippet.scss';
+@import 'src/shared/components/TagSelectorCount.scss';
 @import 'src/buckets/components/Retention.scss';
 @import 'src/buckets/components/BucketAddDataButton.scss';
 @import 'src/buckets/components/NoBucketsWarning.scss';

src/timeMachine/components/TagSelector.tsx

@@ -48,6 +48,7 @@ import {
   BuilderAggregateFunctionType,
   RemoteDataState,
 } from 'src/types'
+import TagSelectorCount from 'src/shared/components/TagSelectorCount'
 
 const SEARCH_DEBOUNCE_MS = 500
 
@@ -210,17 +211,8 @@ class TagSelector extends PureComponent<Props> {
   private get selectedCounter(): JSX.Element {
     const {selectedValues} = this.props
 
-    const pluralizer = selectedValues.length === 1 ? '' : 's'
-
     if (selectedValues.length > 0) {
-      return (
-        <div
-          className="tag-selector--count"
-          title={`${selectedValues.length} value${pluralizer} selected`}
-        >
-          {selectedValues.length}
-        </div>
-      )
+      return <TagSelectorCount count={selectedValues.length} />
     }
   }