mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-21 13:38:56 +02:00
close template selector if same board/view clicked
This commit is contained in:
Scott Bishel
parent
feb49eaf19
commit
83fd009af8
@ -355,3 +355,271 @@ exports[`components/sidebarCategory sidebar collapsed without active board 1`] =
|
||||
</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>
|
||||
`;
|
||||
|
||||
@ -32,6 +32,7 @@ import {getCurrentTeam} from '../../store/teams'
|
||||
import {Constants} from "../../constants"
|
||||
|
||||
import {getMe} from "../../store/users"
|
||||
import {getCurrentViewId} from '../../store/views'
|
||||
|
||||
import SidebarCategory from './sidebarCategory'
|
||||
import SidebarSettingsMenu from './sidebarSettingsMenu'
|
||||
@ -41,6 +42,7 @@ import {addMissingItems} from './utils'
|
||||
type Props = {
|
||||
activeBoardId?: string
|
||||
onBoardTemplateSelectorOpen?: () => void
|
||||
onBoardTemplateSelectorClose?: () => void
|
||||
}
|
||||
|
||||
function getWindowDimensions() {
|
||||
@ -60,6 +62,7 @@ const Sidebar = (props: Props) => {
|
||||
const partialCategories = useAppSelector<Array<CategoryBoards>>(getSidebarCategories)
|
||||
const sidebarCategories = addMissingItems(partialCategories, boards)
|
||||
const me = useAppSelector(getMe)
|
||||
const activeViewID = useAppSelector(getCurrentViewId)
|
||||
|
||||
useEffect(() => {
|
||||
wsClient.addOnChange((_: WSClient, categories: Category[]) => {
|
||||
@ -189,10 +192,12 @@ const Sidebar = (props: Props) => {
|
||||
hideSidebar={hideSidebar}
|
||||
key={category.id}
|
||||
activeBoardID={props.activeBoardId}
|
||||
activeViewID={activeViewID}
|
||||
categoryBoards={category}
|
||||
boards={boards}
|
||||
allCategories={sidebarCategories}
|
||||
index={index}
|
||||
onBoardTemplateSelectorClose={props.onBoardTemplateSelectorClose}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
@ -153,4 +153,66 @@ describe('components/sidebarCategory', () => {
|
||||
userEvent.click(subItems[0] as Element)
|
||||
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()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
@ -48,11 +48,13 @@ import SidebarBoardItem from './sidebarBoardItem'
|
||||
type Props = {
|
||||
activeCategoryId?: string
|
||||
activeBoardID?: string
|
||||
activeViewID?: string
|
||||
hideSidebar: () => void
|
||||
categoryBoards: CategoryBoards
|
||||
boards: Board[]
|
||||
allCategories: Array<CategoryBoards>
|
||||
index: number
|
||||
onBoardTemplateSelectorClose?: () => void
|
||||
}
|
||||
|
||||
export const ClassForManageCategoriesTourStep = 'manageCategoriesTourStep'
|
||||
@ -97,11 +99,17 @@ const SidebarCategory = (props: Props) => {
|
||||
}, [shouldViewManageCatergoriesTour])
|
||||
|
||||
const showBoard = useCallback((boardId) => {
|
||||
if (boardId === props.activeBoardID && props.onBoardTemplateSelectorClose) {
|
||||
props.onBoardTemplateSelectorClose()
|
||||
}
|
||||
Utils.showBoard(boardId, match, history)
|
||||
props.hideSidebar()
|
||||
}, [match, history])
|
||||
|
||||
const showView = useCallback((viewId, boardId) => {
|
||||
if (viewId === props.activeViewID && props.onBoardTemplateSelectorClose) {
|
||||
props.onBoardTemplateSelectorClose()
|
||||
}
|
||||
// if the same board, reuse the match params
|
||||
// otherwise remove viewId and cardId, results in first view being selected
|
||||
const params = {...match.params, boardId: boardId || '', viewId: viewId || ''}
|
||||
|
||||
@ -164,6 +164,7 @@ const Workspace = (props: Props) => {
|
||||
{!props.readonly &&
|
||||
<Sidebar
|
||||
onBoardTemplateSelectorOpen={openBoardTemplateSelector}
|
||||
onBoardTemplateSelectorClose={closeBoardTemplateSelector}
|
||||
activeBoardId={board?.id}
|
||||
/>
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user