diff --git a/webapp/src/components/sidebar/__snapshots__/sidebarCategory.test.tsx.snap b/webapp/src/components/sidebar/__snapshots__/sidebarCategory.test.tsx.snap
index 6f106c7c5..dcfdd0d70 100644
--- a/webapp/src/components/sidebar/__snapshots__/sidebarCategory.test.tsx.snap
+++ b/webapp/src/components/sidebar/__snapshots__/sidebarCategory.test.tsx.snap
@@ -355,3 +355,271 @@ exports[`components/sidebarCategory sidebar collapsed without active board 1`] =
`;
+
+exports[`components/sidebarCategory sidebar template close other 1`] = `
+
+
+
+`;
+
+exports[`components/sidebarCategory sidebar template close self 1`] = `
+
+
+
+`;
diff --git a/webapp/src/components/sidebar/sidebar.tsx b/webapp/src/components/sidebar/sidebar.tsx
index 821ad7497..08d4e433f 100644
--- a/webapp/src/components/sidebar/sidebar.tsx
+++ b/webapp/src/components/sidebar/sidebar.tsx
@@ -29,10 +29,12 @@ import BoardsSwitcher from '../boardsSwitcher/boardsSwitcher'
import wsClient, {WSClient} from '../../wsclient'
import {getCurrentTeam} from '../../store/teams'
-import {getMe} from '../../store/users'
import {Constants} from "../../constants"
+import {getMe} from "../../store/users"
+import {getCurrentViewId} from '../../store/views'
+
import SidebarCategory from './sidebarCategory'
import SidebarSettingsMenu from './sidebarSettingsMenu'
import SidebarUserMenu from './sidebarUserMenu'
@@ -41,6 +43,7 @@ import {addMissingItems} from './utils'
type Props = {
activeBoardId?: string
onBoardTemplateSelectorOpen: () => void
+ onBoardTemplateSelectorClose?: () => void
}
function getWindowDimensions() {
@@ -60,6 +63,7 @@ const Sidebar = (props: Props) => {
const partialCategories = useAppSelector>(getSidebarCategories)
const me = useAppSelector(getMe)
const sidebarCategories = addMissingItems(partialCategories, boards)
+ const activeViewID = useAppSelector(getCurrentViewId)
useEffect(() => {
wsClient.addOnChange((_: WSClient, categories: Category[]) => {
@@ -192,10 +196,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}
/>
))
}
diff --git a/webapp/src/components/sidebar/sidebarCategory.test.tsx b/webapp/src/components/sidebar/sidebarCategory.test.tsx
index 02490d776..43dea41b9 100644
--- a/webapp/src/components/sidebar/sidebarCategory.test.tsx
+++ b/webapp/src/components/sidebar/sidebarCategory.test.tsx
@@ -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(
+
+
+ {}}
+ categoryBoards={categoryBoards1}
+ boards={boards}
+ allCategories={allCategoryBoards}
+ index={0}
+ onBoardTemplateSelectorClose={mockTemplateClose}
+ />
+
+ ,
+ )
+ 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(
+
+
+ {}}
+ categoryBoards={categoryBoards1}
+ boards={boards}
+ allCategories={allCategoryBoards}
+ index={0}
+ onBoardTemplateSelectorClose={mockTemplateClose}
+ />
+
+ ,
+ )
+ 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()
+ })
+
})
diff --git a/webapp/src/components/sidebar/sidebarCategory.tsx b/webapp/src/components/sidebar/sidebarCategory.tsx
index cb3fbb952..13fbe4005 100644
--- a/webapp/src/components/sidebar/sidebarCategory.tsx
+++ b/webapp/src/components/sidebar/sidebarCategory.tsx
@@ -47,11 +47,13 @@ import SidebarBoardItem from './sidebarBoardItem'
type Props = {
activeCategoryId?: string
activeBoardID?: string
+ activeViewID?: string
hideSidebar: () => void
categoryBoards: CategoryBoards
boards: Board[]
allCategories: Array
index: number
+ onBoardTemplateSelectorClose?: () => void
}
export const ClassForManageCategoriesTourStep = 'manageCategoriesTourStep'
@@ -96,11 +98,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 || ''}
diff --git a/webapp/src/components/workspace.tsx b/webapp/src/components/workspace.tsx
index 718b6cda6..e90ac0009 100644
--- a/webapp/src/components/workspace.tsx
+++ b/webapp/src/components/workspace.tsx
@@ -174,6 +174,7 @@ const Workspace = (props: Props) => {
{!props.readonly &&
}