luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Revert "Add category to the board search (#3626)" (#3706)

Browse source 
This reverts commit c28620594a.
This commit is contained in:
Scott Bishel 2022-08-22 08:20:24 -06:00 committed by GitHub
parent c89ea6ce9c
commit e26f5d7f4d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 4 additions and 366 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

231
webapp/src/components/boardsSwitcherDialog/__snapshots__/boardSwitcherDialog.test.tsx.snap
View file

@ -20,6 +20,7 @@ exports[`component/BoardSwitcherDialog base case 1`] = `
> >
<button <button
aria-label="Close dialog" aria-label="Close dialog"
class="IconButton size--medium"
title="Close dialog" title="Close dialog"
type="button" type="button"
> >
@ -99,233 +100,3 @@ exports[`component/BoardSwitcherDialog base case 1`] = `
</div> </div>
</div> </div>
`; `;
exports[`component/BoardSwitcherDialog find one, default category 1`] = `
<div>
<div
class="Dialog dialog-back BoardSwitcherDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
<div
class="dialog"
role="dialog"
>
<div
class="toolbar"
>
<button
aria-label="Close dialog"
title="Close dialog"
type="button"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</button>
<div
class="toolbar--right"
/>
</div>
<div
class="BoardSwitcherDialogBody"
>
<div
class="head"
>
<h3
class="text-heading4"
>
Find Boards
</h3>
<h5>
Type to find a board. Use
<b>
UP/DOWN
</b>
to browse.
<b>
ENTER
</b>
to select,
<b>
ESC
</b>
to dismiss
</h5>
<div
class="queryWrapper"
>
<i
class="CompassIcon icon-magnify MagnifyIcon"
/>
<input
class="searchQuery"
maxlength="100"
placeholder="Search for boards"
type="text"
/>
</div>
</div>
<div
class="searchResults"
>
<div
class="searchResult"
tabindex="-1"
>
<div
class="blockSearchResult"
>
<i
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<div
class="resultTitle"
>
<span>
hello
</span>
</div>
<div
class="categoryTitle"
>
<span
class="ml-2 text-light"
>
Boards
</span>
</div>
<span
class="teamTitle"
>
Dunder Mifflin
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`component/BoardSwitcherDialog find one, with custom category 1`] = `
<div>
<div
class="Dialog dialog-back BoardSwitcherDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
<div
class="dialog"
role="dialog"
>
<div
class="toolbar"
>
<button
aria-label="Close dialog"
title="Close dialog"
type="button"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</button>
<div
class="toolbar--right"
/>
</div>
<div
class="BoardSwitcherDialogBody"
>
<div
class="head"
>
<h3
class="text-heading4"
>
Find Boards
</h3>
<h5>
Type to find a board. Use
<b>
UP/DOWN
</b>
to browse.
<b>
ENTER
</b>
to select,
<b>
ESC
</b>
to dismiss
</h5>
<div
class="queryWrapper"
>
<i
class="CompassIcon icon-magnify MagnifyIcon"
/>
<input
class="searchQuery"
maxlength="100"
placeholder="Search for boards"
type="text"
/>
</div>
</div>
<div
class="searchResults"
>
<div
class="searchResult"
tabindex="-1"
>
<div
class="blockSearchResult"
>
<i
class="CompassIcon icon-lock-outline LockOutlineIcon"
/>
<div
class="resultTitle"
>
<span>
hello
</span>
</div>
<div
class="categoryTitle"
>
<span
class="ml-2 text-light"
>
TestCategory
</span>
</div>
<span
class="teamTitle"
>
Dunder Mifflin
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

26
webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.scss
View file

@ -15,6 +15,7 @@
} }
span { span {
display: inline-block;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -23,36 +24,11 @@
.resultTitle { .resultTitle {
max-width: 60%; max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.teamTitle { .teamTitle {
right: auto; right: auto;
margin-left: auto; margin-left: auto;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.56);
flex: 1;
text-align: right;
}
.categoryTitle,
.teamTitle {
max-width: 20%;
width: max-content;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.categoryTitle {
margin-left: auto;
flex: 2;
text-align: right;
}
.resultTitle {
flex: 6;
} }
} }

90
webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.test.tsx
View file

@ -4,40 +4,22 @@
import React from 'react' import React from 'react'
import {MockStoreEnhanced} from "redux-mock-store" import {MockStoreEnhanced} from "redux-mock-store"
import {mocked} from 'jest-mock'
import {Provider as ReduxProvider} from 'react-redux' import {Provider as ReduxProvider} from 'react-redux'
import {render, screen, act} from '@testing-library/react' import {render} from "@testing-library/react"
import userEvent from '@testing-library/user-event'
import {createMemoryHistory, History} from "history" import {createMemoryHistory, History} from "history"
import {Router} from "react-router-dom" import {Router} from "react-router-dom"
import octoClient from '../../octoClient'
import {Team} from "../../store/teams" import {Team} from "../../store/teams"
import {TestBlockFactory} from "../../test/testBlockFactory" import {TestBlockFactory} from "../../test/testBlockFactory"
import {mockStateStore, wrapDNDIntl} from "../../testUtils" import {mockStateStore, wrapDNDIntl} from "../../testUtils"
import {Board, createBoard} from '../../../../webapp/src/blocks/board'
import {Utils} from '../../../../webapp/src/utils'
import BoardSwitcherDialog from "./boardSwitcherDialog" import BoardSwitcherDialog from "./boardSwitcherDialog"
jest.mock('../../octoClient')
const mockedOctoClient = mocked(octoClient, true)
jest.mock('../../../../webapp/src/utils')
const mockedUtils = mocked(Utils, true)
const wait = (ms: number) => {
return new Promise<void>((resolve) => {
setTimeout(resolve, ms)
})
}
describe('component/BoardSwitcherDialog', () => { describe('component/BoardSwitcherDialog', () => {
const team1: Team = { const team1: Team = {
@ -65,9 +47,6 @@ describe('component/BoardSwitcherDialog', () => {
teams: { teams: {
allTeams: [team1, team2], allTeams: [team1, team2],
current: team1, current: team1,
},
sidebar: {
categoryAttributes: [],
} }
} }
@ -94,71 +73,4 @@ describe('component/BoardSwitcherDialog', () => {
const {container} = render(component) const {container} = render(component)
expect(container).toMatchSnapshot() expect(container).toMatchSnapshot()
}) })
test('find one, default category', async () => {
const onCloseHandler = jest.fn()
const newBoard = createBoard({id: 'found-board', title: 'hello', teamId: 'team-id-1'} as Board)
mockedOctoClient.searchAll.mockResolvedValue([newBoard])
mockedUtils.uuid.mockReturnValue('Really a UUID')
const component = wrapDNDIntl(
<Router history={history}>
<ReduxProvider store={store}>
<BoardSwitcherDialog onClose={onCloseHandler}/>
</ReduxProvider>
</Router>
)
const {container} = render(component)
await act(async () => {
const inputElement = screen.getByPlaceholderText('Search for boards')
await userEvent.type(inputElement, 'test')
await wait(300)
})
expect(container).toMatchSnapshot()
})
test('find one, with custom category', async () => {
const onCloseHandler = jest.fn()
const myState = {
users: {
me: me,
},
teams: {
allTeams: [team1, team2],
current: team1,
},
sidebar: {
categoryAttributes: [{
name: 'TestCategory',
boardIDs: ['found-board']
},],
}
}
const myStore = mockStateStore([], myState)
const newBoard = createBoard({id: 'found-board', title: 'hello', teamId: 'team-id-1'} as Board)
mockedOctoClient.searchAll.mockResolvedValue([newBoard])
mockedUtils.uuid.mockReturnValue('Really a UUID')
const component = wrapDNDIntl(
<Router history={history}>
<ReduxProvider store={myStore}>
<BoardSwitcherDialog onClose={onCloseHandler}/>
</ReduxProvider>
</Router>
)
const {container} = render(component)
await act(async () => {
const inputElement = screen.getByPlaceholderText('Search for boards')
await userEvent.type(inputElement, 'test')
await wait(300)
})
expect(container).toMatchSnapshot()
})
}) })

23
webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx
View file

@ -18,12 +18,6 @@ import {Utils} from '../../utils'
import {BoardTypeOpen, BoardTypePrivate} from '../../blocks/board' import {BoardTypeOpen, BoardTypePrivate} from '../../blocks/board'
import { Constants } from '../../constants' import { Constants } from '../../constants'
import {
CategoryBoards,
DefaultCategory,
getSidebarCategories,
} from '../../store/sidebar'
type Props = { type Props = {
onClose: () => void onClose: () => void
} }
@ -35,7 +29,6 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const [IDs, setIDs] = useState<any>({}) const [IDs, setIDs] = useState<any>({})
const intl = useIntl() const intl = useIntl()
const partialCategories = useAppSelector<Array<CategoryBoards>>(getSidebarCategories)
const team = useAppSelector(getCurrentTeam) const team = useAppSelector(getCurrentTeam)
const me = useAppSelector(getMe) const me = useAppSelector(getMe)
const title = intl.formatMessage({id: 'FindBoardsDialog.Title', defaultMessage: 'Find Boards'}) const title = intl.formatMessage({id: 'FindBoardsDialog.Title', defaultMessage: 'Find Boards'})
@ -76,15 +69,6 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => {
return items.map((item, i) => { return items.map((item, i) => {
const resultTitle = item.title || untitledBoardTitle const resultTitle = item.title || untitledBoardTitle
const teamTitle = teamsById[item.teamId].title const teamTitle = teamsById[item.teamId].title
let categoryTitle = DefaultCategory.name
for(const category of partialCategories){
if(category.boardIDs.find(id => id === item.id)){
categoryTitle = category.name
break
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
setIDs((prevIDs: any) => ({ setIDs((prevIDs: any) => ({
...prevIDs, ...prevIDs,
@ -99,12 +83,7 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => {
> >
{item.type === BoardTypeOpen && <Globe/>} {item.type === BoardTypeOpen && <Globe/>}
{item.type === BoardTypePrivate && <LockOutline/>} {item.type === BoardTypePrivate && <LockOutline/>}
<div className='resultTitle'> <span className='resultTitle'>{resultTitle}</span>
<span>{resultTitle}</span>
</div>
<div className='categoryTitle'>
<span className='ml-2 text-light'>{categoryTitle}</span>
</div>
<span className='teamTitle'>{teamTitle}</span> <span className='teamTitle'>{teamTitle}</span>
</div> </div>
) )