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.findByRole('button', {name: 'Add content'}).click()
cy.findByRole('button', {name: 'checkbox'}).click()
cy.findByDisplayValue('').type('three{enter}')
cy.findByDisplayValue('').type('four{enter}')
cy.findByDisplayValue('').type('{esc}')
cy.focused().type('three{enter}')
cy.focused().type('four{enter}')
cy.focused().type('{esc}')
cy.findByDisplayValue('three').prev().click()
// Close card dialog

4
webapp/i18n/en.json
View File

@ -272,7 +272,7 @@
"ViewHeader.properties": "Properties",
"ViewHeader.properties-menu": "Properties menu",
"ViewHeader.search": "Search",
"ViewHeader.search-text": "Search text",
"ViewHeader.search-text": "Search cards",
"ViewHeader.select-a-template": "Select a template",
"ViewHeader.set-default-template": "Set as default",
"ViewHeader.sort": "Sort",
@ -312,4 +312,4 @@
"tutorial_tip.ok": "Next",
"tutorial_tip.out": "Opt out of these tips.",
"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>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -743,13 +748,18 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
<div
class="octo-spacer"
/>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div>
</div>
<div
@ -1347,13 +1357,18 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -2049,13 +2064,18 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -2751,13 +2771,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -3453,13 +3478,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -4155,13 +4185,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -4857,13 +4892,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -5559,13 +5599,18 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -6261,13 +6306,18 @@ exports[`components/centerPanel return centerPanel and select one card and click
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -6963,13 +7013,18 @@ exports[`components/centerPanel return centerPanel and select one card and click
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -7647,13 +7702,18 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = `
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -7974,13 +8034,18 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -8466,13 +8531,18 @@ exports[`components/centerPanel should match snapshot for Kanban, not shared 1`]
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -9005,13 +9075,18 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
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>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -1018,13 +1023,18 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
<div
class="octo-spacer"
/>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div>
</div>
<div
@ -1728,13 +1738,18 @@ exports[`src/components/workspace should match snapshot 1`] = `
</span>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -2235,13 +2250,18 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
<div
class="octo-spacer"
/>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</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>
</button>
</div>
<button
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
title=""
value=""
/>
</div>
<div
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
class="Dialog dialog-back BoardSwitcherDialog"
>
<div
class="backdrop"
/>
<div
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
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -454,6 +457,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -700,6 +706,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -897,6 +906,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
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>
</button>
</div>
<button
class="Button"
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
class="ModalWrapper"
>
@ -182,14 +186,18 @@ exports[`components/viewHeader/viewHeader return viewHeader readonly 1`] = `
<div
class="octo-spacer"
/>
<button
class="Button"
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
</div>
</div>
`;
@ -230,14 +238,18 @@ exports[`components/viewHeader/viewHeader return viewHeader without permissions
<div
class="octo-spacer"
/>
<button
class="Button"
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</div>
<div
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
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`] = `
<div>
<button
class="Button"
type="button"
<div
class="board-search-field"
>
<span>
Search
</span>
</button>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
value=""
/>
</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>
<input
class="Editable "
placeholder="Search text"
title="Hello"
value="Hello"
/>
<div
class="board-search-field"
>
<i
class="CompassIcon icon-magnify board-search-icon"
/>
<input
class="Editable "
placeholder="Search cards"
title="Hello"
value="Hello"
/>
</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()
})
test('return input after click on search button', () => {
test('search text after input', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
@ -55,20 +55,7 @@ describe('components/viewHeader/ViewHeaderSearch', () => {
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button')
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')
const elementSearchText = screen.getByPlaceholderText('Search cards')
userEvent.type(elementSearchText, 'Hello')
expect(container).toMatchSnapshot()
})

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

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