feat: enable clearable text fields on search widget (#2976)

* starting to use clearable field: dashboardlist

* now using clearable field: SearchWidget

* working on search-source bar
* updated raw flux editor : updated placeholder text and successfully tested the functions; via the 'functions' button in the flux script notebook 'create notebook' page

* enabled in Alerts Page search

* adding clearbutton to the FluxToolbarSearch

* added clearing to all the filters in the querybuilder

* removed dead code, added clearing to components in notebooks, and the user list

Author: jrenee42

src/alerting/components/AlertsColumn.tsx

@@ -72,6 +72,10 @@ const AlertsColumnHeader: FC<OwnProps & StateProps> = ({
     />
   )
 
+  // not using the SearchWidget here, just adding the onClear to the Input;
+  // because using the SearchWidget instead changes how the 'children(searchTerm)'
+  // function is called (with the vanilla Input, it is called on each keystroke,
+  // with the searchWidget is it only called once at render time)
   return (
     <Panel
       backgroundColor={InfluxColors.Grey5}
@@ -102,6 +106,7 @@ const AlertsColumnHeader: FC<OwnProps & StateProps> = ({
           onChange={e => onChangeSearchTerm(e.target.value)}
           testID={`filter--input ${type}`}
           tabIndex={tabIndex}
+          onClear={() => onChangeSearchTerm('')}
         />
       </div>
       <div className="alerting-index--column-body">

src/annotations/components/controlBar/AnnotationsSearchBar.scss

@@ -8,6 +8,7 @@ import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
 import {BucketContext} from 'src/flows/context/bucket.scoped'
 import {PipeContext} from 'src/flows/context/pipe'
 
+// this is used by notebooks
 const BucketSelector: FC = () => {
   const {data, update} = useContext(PipeContext)
   const {loading, buckets} = useContext(BucketContext)
@@ -122,6 +123,7 @@ const BucketSelector: FC = () => {
           placeholder="Search for a bucket"
           className="tag-selector--search"
           onChange={e => setSearch(e.target.value)}
+          onClear={() => setSearch('')}
         />
       </BuilderCard.Menu>
       <List

src/annotations/components/controlBar/AnnotationsSearchBar.tsx

@@ -210,6 +210,7 @@ const Card: FC<Props> = ({idx}) => {
             onChange={evt => {
               valueSearch(evt.target.value)
             }}
+            onClear={() => valueSearch('')}
           />
         </BuilderCard.Menu>
         {_values}
@@ -252,6 +253,7 @@ const Card: FC<Props> = ({idx}) => {
           onChange={evt => {
             valueSearch(evt.target.value)
           }}
+          onClear={() => valueSearch('')}
         />
       </BuilderCard.Menu>
       {_values}

src/annotations/components/controlBar/AnnotationsSearchBarItem.tsx

@@ -1,15 +1,10 @@
 import React, {FC, useState, useMemo, useCallback} from 'react'
 
-import {
-  Input,
-  InputType,
-  IconFont,
-  EmptyState,
-  ComponentSize,
-} from '@influxdata/clockface'
+import {EmptyState, ComponentSize} from '@influxdata/clockface'
 import {FLUX_FUNCTIONS} from 'src/shared/constants/fluxFunctions'
 import {FluxToolbarFunction} from 'src/types/shared'
 import Fn from './function'
+import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 
 interface Props {
   onSelect: (fn: FluxToolbarFunction) => void
@@ -22,8 +17,8 @@ interface FilteredFn {
 const Functions: FC<Props> = ({onSelect}) => {
   const [search, setSearch] = useState('')
   const updateSearch = useCallback(
-    e => {
-      setSearch(e.target.value)
+    text => {
+      setSearch(text)
     },
     [search, setSearch]
   )
@@ -74,12 +69,10 @@ const Functions: FC<Props> = ({onSelect}) => {
     return (
       <div className="flux-toolbar">
         <div className="flux-toolbar--search">
-          <Input
-            type={InputType.Text}
-            icon={IconFont.Search_New}
-            placeholder="Filter Functions..."
-            onChange={updateSearch}
-            value={search}
+          <SearchWidget
+            placeholderText="Filter Functions..."
+            onSearch={updateSearch}
+            searchTerm={search}
             testID="flux-toolbar-search--input"
           />
         </div>

src/flows/pipes/QueryBuilder/BucketSelector.tsx

@@ -36,6 +36,10 @@ const DashboardList: FC<Props> = ({dashboards, org}) => {
     setSearchTerm(e.target.value)
   }
 
+  const clear = (): void => {
+    setSearchTerm('')
+  }
+
   let dashboardsList = (
     <EmptyState size={ComponentSize.ExtraSmall}>
       <EmptyState.Text>You don't have any Dashboards</EmptyState.Text>
@@ -90,6 +94,7 @@ const DashboardList: FC<Props> = ({dashboards, org}) => {
         placeholder="Filter dashboards..."
         onChange={handleInputChange}
         id="filter-dashboards"
+        onClear={clear}
       />
       {dashboardsList}
     </>

src/flows/pipes/QueryBuilder/CardList.tsx

@@ -3,7 +3,7 @@ import React, {Component, ChangeEvent} from 'react'
 import {debounce} from 'lodash'
 
 // Components
-import {Input} from '@influxdata/clockface'
+import {ComponentSize, Input} from '@influxdata/clockface'
 
 // Types
 import {IconFont} from '@influxdata/clockface'
@@ -17,6 +17,9 @@ interface Props {
   placeholderText: string
   searchTerm: string
   testID: string
+  tabIndex?: number
+  autoFocus?: boolean
+  size?: ComponentSize
 }
 
 interface State {
@@ -30,6 +33,9 @@ class SearchWidget extends Component<Props, State> {
     placeholderText: 'Search...',
     searchTerm: '',
     testID: 'search-widget',
+    autoFocus: false,
+    tabIndex: 0,
+    size: ComponentSize.Small,
   }
 
   public componentDidUpdate(prevProps: Props) {
@@ -50,7 +56,7 @@ class SearchWidget extends Component<Props, State> {
   }
 
   public render() {
-    const {placeholderText, testID} = this.props
+    const {placeholderText, testID, tabIndex = 0, autoFocus, size} = this.props
     const {searchTerm} = this.state
 
     return (
@@ -63,6 +69,10 @@ class SearchWidget extends Component<Props, State> {
           onBlur={this.handleBlur}
           testID={testID}
           className="search-widget-input"
+          tabIndex={tabIndex}
+          onClear={this.clear}
+          autoFocus={autoFocus}
+          size={size}
         />
       </ErrorBoundary>
     )
@@ -79,6 +89,9 @@ class SearchWidget extends Component<Props, State> {
   private handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
     this.setState({searchTerm: e.target.value}, this.handleSearch)
   }
+  private clear = (): void => {
+    this.setState({searchTerm: ''}, this.handleSearch)
+  }
 }
 
 export default SearchWidget