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`] = ` +
+
+
+
+ + Category 1 +
+
+
+ +
+
+
+
+ i +
+
+ board title +
+
+ +
+
+
+
+ i +
+
+ board title +
+
+ +
+
+ +
+
+`; + +exports[`components/sidebarCategory sidebar template close self 1`] = ` +
+
+
+
+ + Category 1 +
+
+
+ +
+
+
+
+ i +
+
+ board title +
+
+ +
+
+ +
+
+ i +
+
+ board title +
+
+ +
+
+
+
+`; 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 && }