self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-11-27 08:31:20 +02:00
Code Issues Releases Activity

Adding search bar instead of search button for board (#3070)

Browse Source 
* Adding search bar instead of search button for board

* Updating translation

* Updating tests

* Updating test

* Updating test
This commit is contained in:
Asaad Mahmood 2022-05-19 21:05:55 +05:00 committed by GitHub
parent 6e7326d4e0
commit e01cf226cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 335 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/cypress/integration/cardBadges.ts
View File

@ -34,9 +34,9 @@ describe('Card badges', () => {
cy.log('**Add checkboxes**') cy.log('**Add checkboxes**')
cy.findByRole('button', {name: 'Add content'}).click() cy.findByRole('button', {name: 'Add content'}).click()
cy.findByRole('button', {name: 'checkbox'}).click() cy.findByRole('button', {name: 'checkbox'}).click()
cy.findByDisplayValue('').type('three{enter}') cy.focused().type('three{enter}')
cy.findByDisplayValue('').type('four{enter}') cy.focused().type('four{enter}')
cy.findByDisplayValue('').type('{esc}') cy.focused().type('{esc}')
cy.findByDisplayValue('three').prev().click() cy.findByDisplayValue('three').prev().click()
// Close card dialog // Close card dialog

4
webapp/i18n/en.json
View File

@ -272,7 +272,7 @@
"ViewHeader.properties": "Properties", "ViewHeader.properties": "Properties",
"ViewHeader.properties-menu": "Properties menu", "ViewHeader.properties-menu": "Properties menu",
"ViewHeader.search": "Search", "ViewHeader.search": "Search",
"ViewHeader.search-text": "Search text", "ViewHeader.search-text": "Search cards",
"ViewHeader.select-a-template": "Select a template", "ViewHeader.select-a-template": "Select a template",
"ViewHeader.set-default-template": "Set as default", "ViewHeader.set-default-template": "Set as default",
"ViewHeader.sort": "Sort", "ViewHeader.sort": "Sort",
@ -312,4 +312,4 @@
"tutorial_tip.ok": "Next", "tutorial_tip.ok": "Next",
"tutorial_tip.out": "Opt out of these tips.", "tutorial_tip.out": "Opt out of these tips.",
"tutorial_tip.seen": "Seen this before?" "tutorial_tip.seen": "Seen this before?"
} }

255
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View File

@ -244,13 +244,18 @@ exports[`components/centerPanel return centerPanel and click on card to show car
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -743,13 +748,18 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
<div <div
class="octo-spacer" class="octo-spacer"
/> />
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div> </div>
</div> </div>
<div <div
@ -1347,13 +1357,18 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -2049,13 +2064,18 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -2751,13 +2771,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -3453,13 +3478,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -4155,13 +4185,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -4857,13 +4892,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -5559,13 +5599,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -6261,13 +6306,18 @@ exports[`components/centerPanel return centerPanel and select one card and click
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -6963,13 +7013,18 @@ exports[`components/centerPanel return centerPanel and select one card and click
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -7647,13 +7702,18 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = `
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -7974,13 +8034,18 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -8466,13 +8531,18 @@ exports[`components/centerPanel should match snapshot for Kanban, not shared 1`]
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -9005,13 +9075,18 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >

68
webapp/src/components/__snapshots__/workspace.test.tsx.snap
View File

@ -511,13 +511,18 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -1018,13 +1023,18 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
<div <div
class="octo-spacer" class="octo-spacer"
/> />
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div> </div>
</div> </div>
<div <div
@ -1728,13 +1738,18 @@ exports[`src/components/workspace should match snapshot 1`] = `
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -2235,13 +2250,18 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
<div <div
class="octo-spacer" class="octo-spacer"
/> />
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div> </div>
</div> </div>
<div <div

18
webapp/src/components/boardTemplateSelector/__snapshots__/boardTemplateSelectorPreview.test.tsx.snap
View File

@ -127,13 +127,19 @@ exports[`components/boardTemplateSelector/boardTemplateSelectorPreview should ma
</span> </span>
</button> </button>
</div> </div>
<button <div
type="button" class="board-search-field"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
title=""
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >

3
webapp/src/components/boardsSwitcherDialog/__snapshots__/boardSwitcherDialog.test.tsx.snap
View File

@ -5,6 +5,9 @@ exports[`component/BoardSwitcherDialog base case 1`] = `
<div <div
class="Dialog dialog-back BoardSwitcherDialog" class="Dialog dialog-back BoardSwitcherDialog"
> >
<div
class="backdrop"
/>
<div <div
class="wrapper" class="wrapper"
> >

12
webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap
View File

@ -231,6 +231,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
<div <div
class="Dialog dialog-back ShareBoardDialog" class="Dialog dialog-back ShareBoardDialog"
> >
<div
class="backdrop"
/>
<div <div
class="wrapper" class="wrapper"
> >
@ -454,6 +457,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
<div <div
class="Dialog dialog-back ShareBoardDialog" class="Dialog dialog-back ShareBoardDialog"
> >
<div
class="backdrop"
/>
<div <div
class="wrapper" class="wrapper"
> >
@ -700,6 +706,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
<div <div
class="Dialog dialog-back ShareBoardDialog" class="Dialog dialog-back ShareBoardDialog"
> >
<div
class="backdrop"
/>
<div <div
class="wrapper" class="wrapper"
> >
@ -897,6 +906,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
<div <div
class="Dialog dialog-back ShareBoardDialog" class="Dialog dialog-back ShareBoardDialog"
> >
<div
class="backdrop"
/>
<div <div
class="wrapper" class="wrapper"
> >

54
webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap
View File

@ -94,14 +94,18 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = `
</span> </span>
</button> </button>
</div> </div>
<button <div
class="Button" class="board-search-field"
type="button"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >
@ -182,14 +186,18 @@ exports[`components/viewHeader/viewHeader return viewHeader readonly 1`] = `
<div <div
class="octo-spacer" class="octo-spacer"
/> />
<button <div
class="Button" class="board-search-field"
type="button"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div> </div>
</div> </div>
`; `;
@ -230,14 +238,18 @@ exports[`components/viewHeader/viewHeader return viewHeader without permissions
<div <div
class="octo-spacer" class="octo-spacer"
/> />
<button <div
class="Button" class="board-search-field"
type="button"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div <div
class="ModalWrapper" class="ModalWrapper"
> >

49
webapp/src/components/viewHeader/__snapshots__/viewHeaderSearch.test.tsx.snap
View File

@ -1,35 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/viewHeader/ViewHeaderSearch return input after click on search button 1`] = `
<div>
<input
class="Editable "
placeholder="Search text"
value=""
/>
</div>
`;
exports[`components/viewHeader/ViewHeaderSearch return search menu 1`] = ` exports[`components/viewHeader/ViewHeaderSearch return search menu 1`] = `
<div> <div>
<button <div
class="Button" class="board-search-field"
type="button"
> >
<span> <i
Search class="CompassIcon icon-magnify board-search-icon"
</span> />
</button> <input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div> </div>
`; `;
exports[`components/viewHeader/ViewHeaderSearch search text after input after click on search button and search text 1`] = ` exports[`components/viewHeader/ViewHeaderSearch search text after input 1`] = `
<div> <div>
<input <div
class="Editable " class="board-search-field"
placeholder="Search text" >
title="Hello" <i
value="Hello" class="CompassIcon icon-magnify board-search-icon"
/> />
<input
class="Editable "
placeholder="Search cards"
title="Hello"
value="Hello"
/>
</div>
</div> </div>
`; `;

24
webapp/src/components/viewHeader/viewHeader.scss
View File

@ -53,3 +53,27 @@
} }
} }
} }
.board-search-field {
position: relative;
input {
font-size: 12px;
border-radius: 4px;
padding: 0 12px 0 32px;
height: 32px;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
padding-bottom: 1px;
&:focus {
border-color: rgba(var(--button-bg-rgb), 1);
}
}
.board-search-icon {
position: absolute;
top: 9px;
left: 12px;
color: rgba(var(--center-channel-color-rgb), 0.64);
}
}

17
webapp/src/components/viewHeader/viewHeaderSearch.test.tsx
View File

@ -47,7 +47,7 @@ describe('components/viewHeader/ViewHeaderSearch', () => {
) )
expect(container).toMatchSnapshot() expect(container).toMatchSnapshot()
}) })
test('return input after click on search button', () => { test('search text after input', () => {
const {container} = render( const {container} = render(
wrapIntl( wrapIntl(
<ReduxProvider store={store}> <ReduxProvider store={store}>
@ -55,20 +55,7 @@ describe('components/viewHeader/ViewHeaderSearch', () => {
</ReduxProvider>, </ReduxProvider>,
), ),
) )
const buttonElement = screen.getByRole('button') const elementSearchText = screen.getByPlaceholderText('Search cards')
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
})
test('search text after input after click on search button and search text', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeaderSearch/>
</ReduxProvider>,
),
)
userEvent.click(screen.getByRole('button'))
const elementSearchText = screen.getByPlaceholderText('Search text')
userEvent.type(elementSearchText, 'Hello') userEvent.type(elementSearchText, 'Hello')
expect(container).toMatchSnapshot() expect(container).toMatchSnapshot()
}) })

35
webapp/src/components/viewHeader/viewHeaderSearch.tsx
View File

@ -2,11 +2,11 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React, {useState, useRef, useEffect, useMemo} from 'react' import React, {useState, useRef, useEffect, useMemo} from 'react'
import {useRouteMatch} from 'react-router-dom' import {useRouteMatch} from 'react-router-dom'
import {FormattedMessage, useIntl} from 'react-intl' import {useIntl} from 'react-intl'
import {useHotkeys} from 'react-hotkeys-hook' import {useHotkeys} from 'react-hotkeys-hook'
import {debounce} from 'lodash' import {debounce} from 'lodash'
import Button from '../../widgets/buttons/button' import CompassIcon from '../../widgets/icons/compassIcon'
import Editable from '../../widgets/editable' import Editable from '../../widgets/editable'
import {useAppSelector, useAppDispatch} from '../../store/hooks' import {useAppSelector, useAppDispatch} from '../../store/hooks'
@ -19,7 +19,6 @@ const ViewHeaderSearch = (): JSX.Element => {
const match = useRouteMatch<{viewId?: string}>() const match = useRouteMatch<{viewId?: string}>()
const searchFieldRef = useRef<{focus(selectAll?: boolean): void}>(null) const searchFieldRef = useRef<{focus(selectAll?: boolean): void}>(null)
const [isSearching, setIsSearching] = useState(Boolean(searchText))
const [searchValue, setSearchValue] = useState(searchText) const [searchValue, setSearchValue] = useState(searchText)
const [currentView, setCurrentView] = useState(match.params?.viewId) const [currentView, setCurrentView] = useState(match.params?.viewId)
@ -35,7 +34,6 @@ const ViewHeaderSearch = (): JSX.Element => {
if (viewId !== currentView) { if (viewId !== currentView) {
setCurrentView(viewId) setCurrentView(viewId)
setSearchValue('') setSearchValue('')
setIsSearching(false)
// Previously debounced calls to change the search text should be cancelled // Previously debounced calls to change the search text should be cancelled
// to avoid resetting the search text. // to avoid resetting the search text.
@ -50,46 +48,33 @@ const ViewHeaderSearch = (): JSX.Element => {
} }
}, []) }, [])
useEffect(() => {
searchFieldRef.current?.focus()
}, [isSearching])
useHotkeys('ctrl+shift+f,cmd+shift+f', () => { useHotkeys('ctrl+shift+f,cmd+shift+f', () => {
setIsSearching(true)
searchFieldRef.current?.focus(true) searchFieldRef.current?.focus(true)
}) })
if (isSearching) { return (
return ( <div className='board-search-field'>
<CompassIcon
icon='magnify'
className='board-search-icon'
/>
<Editable <Editable
ref={searchFieldRef} ref={searchFieldRef}
value={searchValue} value={searchValue}
placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search text'})} placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search cards'})}
onChange={(value) => { onChange={(value) => {
setSearchValue(value) setSearchValue(value)
debouncedDispatchSearchText(value) debouncedDispatchSearchText(value)
}} }}
onCancel={() => { onCancel={() => {
setSearchValue('') setSearchValue('')
setIsSearching(false)
debouncedDispatchSearchText('') debouncedDispatchSearchText('')
}} }}
onSave={() => { onSave={() => {
if (searchValue === '') {
setIsSearching(false)
}
debouncedDispatchSearchText(searchValue) debouncedDispatchSearchText(searchValue)
}} }}
/> />
) </div>
}
return (
<Button onClick={() => setIsSearching(true)}>
<FormattedMessage
id='ViewHeader.search'
defaultMessage='Search'
/>
</Button>
) )
} }