Merge pull request #3729 from sbishel/close-template-selector

Close template selector if same board/view clicked

webapp/src/components/sidebar/__snapshots__/sidebarCategory.test.tsx.snap

@@ -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>
+`;

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<Array<CategoryBoards>>(getSidebarCategories)
     const me = useAppSelector<IUser|null>(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}
                         />
                     ))
                 }

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(
+            <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()
+    })
+
 })

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<CategoryBoards>
     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 || ''}

webapp/src/components/workspace.tsx

@@ -174,6 +174,7 @@ const Workspace = (props: Props) => {
             {!props.readonly &&
                 <Sidebar
                     onBoardTemplateSelectorOpen={openBoardTemplateSelector}
+                    onBoardTemplateSelectorClose={closeBoardTemplateSelector}
                     activeBoardId={board?.id}
                 />
             }