feat(mespapiers): Replace SearchInput by SearchBar from cozy-ui

cozy · May 31, 2023 · f03271e · f03271e
1 parent f008689
commit f03271e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 119 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/Home/SearchHeader.jsx b/packages/cozy-mespapiers-lib/src/components/Home/SearchHeader.jsx
@@ -2,11 +2,12 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
 import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 import FilterButton from './FilterButton'
 import { useMultiSelection } from '../Hooks/useMultiSelection'
-import SearchInput from '../SearchInput'
 import ThemesFilter from '../ThemesFilter'
 
 const SearchHeader = ({
@@ -15,6 +16,7 @@ const SearchHeader = ({
   selectedTheme,
   setSelectedTheme
 }) => {
+  const { t } = useI18n()
   const { isDesktop } = useBreakpoints()
   const { isMultiSelectionActive } = useMultiSelection()
   const [isThemesFilterDisplayed, setIsThemesFilterDisplayed] = useState(true)
@@ -41,8 +43,9 @@ const SearchHeader = ({
       })}
     >
       <div className="u-flex u-w-100 u-flex-items-center">
-        <SearchInput
-          value={searchValue}
+        <SearchBar
+          placeholder={t('common.search')}
+          defaultValue={searchValue}
           onChange={ev => setSearchValue(ev.target.value)}
           onFocus={handleFocus}
         />

diff --git a/packages/cozy-mespapiers-lib/src/components/SearchInput/SearchInput.jsx b/packages/cozy-mespapiers-lib/src/components/SearchInput/SearchInput.jsx
diff --git a/packages/cozy-mespapiers-lib/src/components/SearchInput/index.js b/packages/cozy-mespapiers-lib/src/components/SearchInput/index.js
diff --git a/packages/cozy-mespapiers-lib/src/components/Views/Home.spec.jsx b/packages/cozy-mespapiers-lib/src/components/Views/Home.spec.jsx
@@ -97,13 +97,13 @@ describe('Home components:', () => {
   })
 
   it('should display PaperGroup, SearchInput, ThemesFilter & FeaturedPlaceholdersList', () => {
-    const { getByTestId, queryAllByTestId } = setup({
+    const { getByTestId, queryAllByTestId, getByPlaceholderText } = setup({
       isLoading: false,
       withData: true
     })
 
     expect(getByTestId('PaperGroup'))
-    expect(getByTestId('SearchInput'))
+    expect(getByPlaceholderText('Name of the paper, owner or info'))
     expect(queryAllByTestId('ThemesFilter')).not.toHaveLength(0)
     expect(getByTestId('FeaturedPlaceholdersList'))
   })
@@ -127,37 +127,38 @@ describe('Home components:', () => {
   })
 
   it('should hide ThemesFilter when SearchInput is focused, on Mobile', () => {
-    const { queryAllByTestId, getByTestId } = setup({
+    const { queryAllByTestId, getByPlaceholderText } = setup({
       isLoading: false,
       withData: true,
       isDesktop: false
     })
 
     expect(queryAllByTestId('ThemesFilter')).not.toHaveLength(0)
-    fireEvent.focus(getByTestId('SearchInput'))
+    fireEvent.focus(getByPlaceholderText('Name of the paper, owner or info'))
     expect(queryAllByTestId('ThemesFilter')).toHaveLength(0)
   })
 
   it('should display ThemesFilter when click on SwitchButton, on Mobile', () => {
-    const { queryAllByTestId, getByTestId } = setup({
+    const { queryAllByTestId, getByTestId, getByPlaceholderText } = setup({
       isLoading: false,
       withData: true,
       isDesktop: false
     })
-    fireEvent.focus(getByTestId('SearchInput'))
+
+    fireEvent.focus(getByPlaceholderText('Name of the paper, owner or info'))
     expect(queryAllByTestId('ThemesFilter')).toHaveLength(0)
     fireEvent.click(getByTestId('SwitchButton'))
     expect(queryAllByTestId('ThemesFilter')).not.toHaveLength(0)
   })
 
   it('should keep SwitchButton when click on it, on Mobile', () => {
-    const { queryByTestId, getByTestId } = setup({
+    const { queryByTestId, getByTestId, getByPlaceholderText } = setup({
       isLoading: false,
       withData: true,
       isDesktop: false
     })
 
-    fireEvent.focus(getByTestId('SearchInput'))
+    fireEvent.focus(getByPlaceholderText('Name of the paper, owner or info'))
     expect(getByTestId('SwitchButton')).toBeInTheDocument()
     fireEvent.click(getByTestId('SwitchButton'))
     expect(queryByTestId('SwitchButton')).toBeInTheDocument()
@@ -217,14 +218,14 @@ describe('Home components:', () => {
 
   describe('multi-selection mode', () => {
     it('should display PaperGroup & SearchInput', () => {
-      const { getByTestId } = setup({
+      const { getByTestId, getByPlaceholderText } = setup({
         isLoading: false,
         withData: true,
         isMultiSelectionActive: true
       })
 
       expect(getByTestId('PaperGroup'))
-      expect(getByTestId('SearchInput'))
+      expect(getByPlaceholderText('Name of the paper, owner or info'))
     })
 
     it('should display ThemesFilter by default', () => {