[C-4671] Add clear search button

packages/mobile/src/screens/search-screen-v2/SearchBarV2.tsx

@@ -1,6 +1,11 @@
-import { Dimensions } from 'react-native'
+import { Dimensions, Pressable } from 'react-native'
 
-import { IconSearch, TextInput, TextInputSize } from '@audius/harmony-native'
+import {
+  IconCloseAlt,
+  IconSearch,
+  TextInput,
+  TextInputSize
+} from '@audius/harmony-native'
 
 import { useSearchQuery } from './searchState'
 
@@ -12,9 +17,21 @@ const messages = {
 
 export const SearchBarV2 = () => {
   const [query, setQuery] = useSearchQuery()
+
+  const clearQuery = () => {
+    setQuery('')
+  }
+
   return (
     <TextInput
       startIcon={IconSearch}
+      endIcon={() =>
+        query ? (
+          <Pressable onPress={clearQuery} hitSlop={10}>
+            <IconCloseAlt size='s' color='subdued' />
+          </Pressable>
+        ) : null
+      }
       size={TextInputSize.SMALL}
       label={messages.label}
       placeholder={messages.label}

packages/web/src/components/search-bar/ConnectedSearchBar.jsx

@@ -173,6 +173,35 @@ class ConnectedSearchBar extends Component {
     })
   }
 
+  onClear = () => {
+    this.props.clearSearch()
+    this.setState({ value: '' })
+
+    const locationSearchParams = new URLSearchParams(
+      this.props.history.location.search
+    )
+
+    locationSearchParams.delete('query')
+
+    let newPath = '/search'
+
+    const searchMatch = matchPath(getPathname(this.props.history.location), {
+      path: SEARCH_PAGE
+    })
+
+    if (searchMatch) {
+      newPath = generatePath(SEARCH_PAGE, {
+        ...searchMatch.params
+      })
+    }
+
+    this.props.history.push({
+      pathname: newPath,
+      search: locationSearchParams.toString(),
+      state: {}
+    })
+  }
+
   render() {
     if (!this.props.search.tracks) {
       this.props.search.tracks = []
@@ -307,6 +336,7 @@ class ConnectedSearchBar extends Component {
           onSubmit={this.onSubmit}
           goToRoute={this.props.goToRoute}
           addRecentSearch={this.props.addRecentSearch}
+          onClear={this.onClear}
         />
       </div>
     )

packages/web/src/components/search/SearchBarV2.jsx

@@ -5,7 +5,9 @@ import {
   IconArrowRight as IconArrow,
   IconSearch,
   setupHotkeys,
-  removeHotkeys
+  removeHotkeys,
+  IconCloseAlt,
+  Flex
 } from '@audius/harmony'
 import AutoComplete from 'antd/lib/auto-complete'
 import Input from 'antd/lib/input'
@@ -433,6 +435,13 @@ class SearchBar extends Component {
                 onClick={() => this.props.onSubmit('')}
               />
             }
+            suffix={
+              this.state.value ? (
+                <Flex onClick={() => this.props.onClear()}>
+                  <IconCloseAlt size='2xs' color='subdued' />
+                </Flex>
+              ) : null
+            }
             onKeyDown={this.onKeyDown}
             spellCheck={false}
           />