From 9b4aa225254c39f18e17dc319008643dca1aff4f Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Tue, 27 Dec 2022 15:13:19 +0100
Subject: [PATCH] feat: Add clean input button

---
 .../components/BarSearchAutosuggest.jsx       | 12 ++++++++++-
 .../search/components/BarSearchInputGroup.jsx | 21 ++++++++++++++++++-
 .../web/modules/search/components/styles.styl |  3 +++
 .../web/modules/views/Search/SearchView.jsx   | 20 +++++++++++++++---
 4 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/drive/web/modules/search/components/BarSearchAutosuggest.jsx b/src/drive/web/modules/search/components/BarSearchAutosuggest.jsx
index e4d2477339..85f28f86be 100644
--- a/src/drive/web/modules/search/components/BarSearchAutosuggest.jsx
+++ b/src/drive/web/modules/search/components/BarSearchAutosuggest.jsx
@@ -40,6 +40,11 @@ const BarSearchAutosuggest = ({ t }) => {
     clearSuggestions()
   }
 
+  const handleCleanInput = () => {
+    clearSuggestions()
+    setInput('')
+  }
+
   const onSuggestionSelected = async (event, { suggestion }) => {
     await openOnSelect(client, suggestion.onSelect)
     clearSuggestions()
@@ -64,7 +69,12 @@ const BarSearchAutosuggest = ({ t }) => {
   }
 
   const renderInputComponent = inputProps => (
-    <BarSearchInputGroup isBusy={isBusy} isFocus={focused}>
+    <BarSearchInputGroup
+      isBusy={isBusy}
+      isFocus={focused}
+      isInputNotEmpty={input !== ''}
+      onClean={handleCleanInput}
+    >
       <input {...inputProps} />
     </BarSearchInputGroup>
   )
diff --git a/src/drive/web/modules/search/components/BarSearchInputGroup.jsx b/src/drive/web/modules/search/components/BarSearchInputGroup.jsx
index 81038a970e..f85c1d86ed 100644
--- a/src/drive/web/modules/search/components/BarSearchInputGroup.jsx
+++ b/src/drive/web/modules/search/components/BarSearchInputGroup.jsx
@@ -2,13 +2,21 @@ import React from 'react'
 import cx from 'classnames'
 
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
 import Spinner from 'cozy-ui/transpiled/react/Icons/Spinner'
+import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
 
 import styles from 'drive/web/modules/search/components/styles.styl'
 
-const BarSearchInputGroup = ({ children, isBusy, isFocus }) => {
+const BarSearchInputGroup = ({
+  children,
+  isBusy,
+  isFocus,
+  onClean,
+  isInputNotEmpty
+}) => {
   return (
     <InputGroup
       fullwidth={true}
@@ -23,6 +31,17 @@ const BarSearchInputGroup = ({ children, isBusy, isFocus }) => {
           <Icon icon={Magnifier} color="#95999D" />
         )
       }
+      append={
+        isInputNotEmpty ? (
+          <IconButton
+            size="medium"
+            onClick={onClean}
+            className={styles['bar-search-input-group-clean-button']}
+          >
+            <Icon icon={CrossCircleIcon} />
+          </IconButton>
+        ) : null
+      }
     >
       {children}
     </InputGroup>
diff --git a/src/drive/web/modules/search/components/styles.styl b/src/drive/web/modules/search/components/styles.styl
index edfe8b2e0a..0d780abc4a 100644
--- a/src/drive/web/modules/search/components/styles.styl
+++ b/src/drive/web/modules/search/components/styles.styl
@@ -62,3 +62,6 @@
                 max-width 100%
                 height 100%
                 padding .5625em 1em .5625em .625em
+
+            .bar-search-input-group-clean-button
+                padding 11px
diff --git a/src/drive/web/modules/views/Search/SearchView.jsx b/src/drive/web/modules/views/Search/SearchView.jsx
index 3711c7edf5..5d154496f2 100644
--- a/src/drive/web/modules/views/Search/SearchView.jsx
+++ b/src/drive/web/modules/views/Search/SearchView.jsx
@@ -19,8 +19,14 @@ import SearchEmpty from './components/SearchEmpty'
 
 const SearchView = () => {
   const { t } = useI18n()
-  const { isBusy, suggestions, fetchSuggestions, hasSuggestions, query } =
-    useSearch()
+  const {
+    isBusy,
+    suggestions,
+    fetchSuggestions,
+    clearSuggestions,
+    hasSuggestions,
+    query
+  } = useSearch()
   const { router } = useRouter()
   const client = useClient()
   const { isMobile } = useBreakpoints()
@@ -43,6 +49,11 @@ const SearchView = () => {
     [client]
   )
 
+  const handleCleanInput = () => {
+    clearSuggestions()
+    setInput('')
+  }
+
   const isSearchEmpty = query !== '' && !hasSuggestions && !isBusy
 
   return (
@@ -60,7 +71,10 @@ const SearchView = () => {
           )}
           role="search"
         >
-          <BarSearchInputGroup>
+          <BarSearchInputGroup
+            isInputNotEmpty={input !== ''}
+            onClean={handleCleanInput}
+          >
             <Input
               fullwidth={true}
               value={input}