mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-21 13:38:56 +02:00
Merge pull request #3729 from sbishel/close-template-selector
Close template selector if same board/view clicked
This commit is contained in:
Scott Bishel
GitHub
commit
282e24890e
@ -355,3 +355,271 @@ exports[`components/sidebarCategory sidebar collapsed without active board 1`] =
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`components/sidebarCategory sidebar template close other 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="SidebarCategory"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-item category ' expanded "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title category-title"
|
||||||
|
title="Category 1"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-chevron-down ChevronDownIcon"
|
||||||
|
/>
|
||||||
|
Category 1
|
||||||
|
<div
|
||||||
|
class="sidebarCategoriesTour"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="SidebarBoardItem subitem "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-icon"
|
||||||
|
>
|
||||||
|
i
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title"
|
||||||
|
title="board title"
|
||||||
|
>
|
||||||
|
board title
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper x"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="SidebarBoardItem subitem active"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-icon"
|
||||||
|
>
|
||||||
|
i
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title"
|
||||||
|
title="board title"
|
||||||
|
>
|
||||||
|
board title
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper x"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="SidebarBoardItem sidebar-view-item active"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="BoardIcon Icon"
|
||||||
|
fill="currentColor"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
opacity="0.8"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M4 4H20V20H4V4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM8 6H6V12H8V6ZM11 6H13V16H11V6ZM18 6H16V9H18V6Z"
|
||||||
|
fill="currentColor"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title"
|
||||||
|
title="view title"
|
||||||
|
>
|
||||||
|
view title
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/sidebarCategory sidebar template close self 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="SidebarCategory"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-item category ' expanded "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title category-title"
|
||||||
|
title="Category 1"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-chevron-down ChevronDownIcon"
|
||||||
|
/>
|
||||||
|
Category 1
|
||||||
|
<div
|
||||||
|
class="sidebarCategoriesTour"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="SidebarBoardItem subitem active"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-icon"
|
||||||
|
>
|
||||||
|
i
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title"
|
||||||
|
title="board title"
|
||||||
|
>
|
||||||
|
board title
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper x"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="SidebarBoardItem sidebar-view-item active"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="BoardIcon Icon"
|
||||||
|
fill="currentColor"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
opacity="0.8"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M4 4H20V20H4V4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM8 6H6V12H8V6ZM11 6H13V16H11V6ZM18 6H16V9H18V6Z"
|
||||||
|
fill="currentColor"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title"
|
||||||
|
title="view title"
|
||||||
|
>
|
||||||
|
view title
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="SidebarBoardItem subitem "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-icon"
|
||||||
|
>
|
||||||
|
i
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="octo-sidebar-title"
|
||||||
|
title="board title"
|
||||||
|
>
|
||||||
|
board title
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper x"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|||||||
@ -29,10 +29,12 @@ import BoardsSwitcher from '../boardsSwitcher/boardsSwitcher'
|
|||||||
import wsClient, {WSClient} from '../../wsclient'
|
import wsClient, {WSClient} from '../../wsclient'
|
||||||
|
|
||||||
import {getCurrentTeam} from '../../store/teams'
|
import {getCurrentTeam} from '../../store/teams'
|
||||||
import {getMe} from '../../store/users'
|
|
||||||
|
|
||||||
import {Constants} from "../../constants"
|
import {Constants} from "../../constants"
|
||||||
|
|
||||||
|
import {getMe} from "../../store/users"
|
||||||
|
import {getCurrentViewId} from '../../store/views'
|
||||||
|
|
||||||
import SidebarCategory from './sidebarCategory'
|
import SidebarCategory from './sidebarCategory'
|
||||||
import SidebarSettingsMenu from './sidebarSettingsMenu'
|
import SidebarSettingsMenu from './sidebarSettingsMenu'
|
||||||
import SidebarUserMenu from './sidebarUserMenu'
|
import SidebarUserMenu from './sidebarUserMenu'
|
||||||
@ -41,6 +43,7 @@ import {addMissingItems} from './utils'
|
|||||||
type Props = {
|
type Props = {
|
||||||
activeBoardId?: string
|
activeBoardId?: string
|
||||||
onBoardTemplateSelectorOpen: () => void
|
onBoardTemplateSelectorOpen: () => void
|
||||||
|
onBoardTemplateSelectorClose?: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
function getWindowDimensions() {
|
function getWindowDimensions() {
|
||||||
@ -60,6 +63,7 @@ const Sidebar = (props: Props) => {
|
|||||||
const partialCategories = useAppSelector<Array<CategoryBoards>>(getSidebarCategories)
|
const partialCategories = useAppSelector<Array<CategoryBoards>>(getSidebarCategories)
|
||||||
const me = useAppSelector<IUser|null>(getMe)
|
const me = useAppSelector<IUser|null>(getMe)
|
||||||
const sidebarCategories = addMissingItems(partialCategories, boards)
|
const sidebarCategories = addMissingItems(partialCategories, boards)
|
||||||
|
const activeViewID = useAppSelector(getCurrentViewId)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
wsClient.addOnChange((_: WSClient, categories: Category[]) => {
|
wsClient.addOnChange((_: WSClient, categories: Category[]) => {
|
||||||
@ -192,10 +196,12 @@ const Sidebar = (props: Props) => {
|
|||||||
hideSidebar={hideSidebar}
|
hideSidebar={hideSidebar}
|
||||||
key={category.id}
|
key={category.id}
|
||||||
activeBoardID={props.activeBoardId}
|
activeBoardID={props.activeBoardId}
|
||||||
|
activeViewID={activeViewID}
|
||||||
categoryBoards={category}
|
categoryBoards={category}
|
||||||
boards={boards}
|
boards={boards}
|
||||||
allCategories={sidebarCategories}
|
allCategories={sidebarCategories}
|
||||||
index={index}
|
index={index}
|
||||||
|
onBoardTemplateSelectorClose={props.onBoardTemplateSelectorClose}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|||||||
@ -153,4 +153,66 @@ describe('components/sidebarCategory', () => {
|
|||||||
userEvent.click(subItems[0] as Element)
|
userEvent.click(subItems[0] as Element)
|
||||||
expect(container).toMatchSnapshot()
|
expect(container).toMatchSnapshot()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test('sidebar template close self', () => {
|
||||||
|
const mockStore = configureStore([])
|
||||||
|
const store = mockStore(state)
|
||||||
|
|
||||||
|
const mockTemplateClose = jest.fn()
|
||||||
|
|
||||||
|
const component = wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<Router history={history}>
|
||||||
|
<SidebarCategory
|
||||||
|
activeBoardID={board1.id}
|
||||||
|
hideSidebar={() => {}}
|
||||||
|
categoryBoards={categoryBoards1}
|
||||||
|
boards={boards}
|
||||||
|
allCategories={allCategoryBoards}
|
||||||
|
index={0}
|
||||||
|
onBoardTemplateSelectorClose={mockTemplateClose}
|
||||||
|
/>
|
||||||
|
</Router>
|
||||||
|
</ReduxProvider>,
|
||||||
|
)
|
||||||
|
const {container} = render(component)
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
// testing collapsed state of category
|
||||||
|
const subItems = container.querySelectorAll('.subitem')
|
||||||
|
expect(subItems).toBeDefined()
|
||||||
|
userEvent.click(subItems[0] as Element)
|
||||||
|
expect(mockTemplateClose).toBeCalled()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('sidebar template close other', () => {
|
||||||
|
const mockStore = configureStore([])
|
||||||
|
const store = mockStore(state)
|
||||||
|
|
||||||
|
const mockTemplateClose = jest.fn()
|
||||||
|
|
||||||
|
const component = wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<Router history={history}>
|
||||||
|
<SidebarCategory
|
||||||
|
activeBoardID={board2.id}
|
||||||
|
hideSidebar={() => {}}
|
||||||
|
categoryBoards={categoryBoards1}
|
||||||
|
boards={boards}
|
||||||
|
allCategories={allCategoryBoards}
|
||||||
|
index={0}
|
||||||
|
onBoardTemplateSelectorClose={mockTemplateClose}
|
||||||
|
/>
|
||||||
|
</Router>
|
||||||
|
</ReduxProvider>,
|
||||||
|
)
|
||||||
|
const {container} = render(component)
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
|
||||||
|
// testing collapsed state of category
|
||||||
|
const subItems = container.querySelectorAll('.category-title')
|
||||||
|
expect(subItems).toBeDefined()
|
||||||
|
userEvent.click(subItems[0] as Element)
|
||||||
|
expect(mockTemplateClose).not.toBeCalled()
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|||||||
@ -47,11 +47,13 @@ import SidebarBoardItem from './sidebarBoardItem'
|
|||||||
type Props = {
|
type Props = {
|
||||||
activeCategoryId?: string
|
activeCategoryId?: string
|
||||||
activeBoardID?: string
|
activeBoardID?: string
|
||||||
|
activeViewID?: string
|
||||||
hideSidebar: () => void
|
hideSidebar: () => void
|
||||||
categoryBoards: CategoryBoards
|
categoryBoards: CategoryBoards
|
||||||
boards: Board[]
|
boards: Board[]
|
||||||
allCategories: Array<CategoryBoards>
|
allCategories: Array<CategoryBoards>
|
||||||
index: number
|
index: number
|
||||||
|
onBoardTemplateSelectorClose?: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ClassForManageCategoriesTourStep = 'manageCategoriesTourStep'
|
export const ClassForManageCategoriesTourStep = 'manageCategoriesTourStep'
|
||||||
@ -96,11 +98,17 @@ const SidebarCategory = (props: Props) => {
|
|||||||
}, [shouldViewManageCatergoriesTour])
|
}, [shouldViewManageCatergoriesTour])
|
||||||
|
|
||||||
const showBoard = useCallback((boardId) => {
|
const showBoard = useCallback((boardId) => {
|
||||||
|
if (boardId === props.activeBoardID && props.onBoardTemplateSelectorClose) {
|
||||||
|
props.onBoardTemplateSelectorClose()
|
||||||
|
}
|
||||||
Utils.showBoard(boardId, match, history)
|
Utils.showBoard(boardId, match, history)
|
||||||
props.hideSidebar()
|
props.hideSidebar()
|
||||||
}, [match, history])
|
}, [match, history])
|
||||||
|
|
||||||
const showView = useCallback((viewId, boardId) => {
|
const showView = useCallback((viewId, boardId) => {
|
||||||
|
if (viewId === props.activeViewID && props.onBoardTemplateSelectorClose) {
|
||||||
|
props.onBoardTemplateSelectorClose()
|
||||||
|
}
|
||||||
// if the same board, reuse the match params
|
// if the same board, reuse the match params
|
||||||
// otherwise remove viewId and cardId, results in first view being selected
|
// otherwise remove viewId and cardId, results in first view being selected
|
||||||
const params = {...match.params, boardId: boardId || '', viewId: viewId || ''}
|
const params = {...match.params, boardId: boardId || '', viewId: viewId || ''}
|
||||||
|
|||||||
@ -174,6 +174,7 @@ const Workspace = (props: Props) => {
|
|||||||
{!props.readonly &&
|
{!props.readonly &&
|
||||||
<Sidebar
|
<Sidebar
|
||||||
onBoardTemplateSelectorOpen={openBoardTemplateSelector}
|
onBoardTemplateSelectorOpen={openBoardTemplateSelector}
|
||||||
|
onBoardTemplateSelectorClose={closeBoardTemplateSelector}
|
||||||
activeBoardId={board?.id}
|
activeBoardId={board?.id}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user