From eef04c98a2c0eda4b9551235394b153a60472c19 Mon Sep 17 00:00:00 2001 From: "cannalee90@gmail.com" Date: Wed, 19 Oct 2022 00:21:23 +0900 Subject: [PATCH 1/7] create new menu for suboption menu --- webapp/src/components/sidebar/sidebarBoardItem.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx index 5eff9310699..7329d361474 100644 --- a/webapp/src/components/sidebar/sidebarBoardItem.tsx +++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx @@ -41,6 +41,8 @@ import {getCurrentBoardId, getMySortedBoards} from '../../store/boards' import {UserSettings} from '../../userSettings' import {Archiver} from '../../archiver' +import SeparatorOption from '../../widgets/menu/separatorOption' + const iconForViewType = (viewType: IViewType): JSX.Element => { switch (viewType) { case 'board': return @@ -238,6 +240,13 @@ const SidebarBoardItem = (props: Props) => { position='auto' > {generateMoveToCategoryOptions(board.id)} + + } + name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.CreateNew', defaultMessage: 'Create New Category'})} + onClick={() => {}} + /> {!me?.is_guest && Date: Wed, 19 Oct 2022 00:26:21 +0900 Subject: [PATCH 2/7] show modal when click sub-menu --- .../components/sidebar/sidebarBoardItem.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx index 7329d361474..27dc31344f8 100644 --- a/webapp/src/components/sidebar/sidebarBoardItem.tsx +++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React, {useCallback, useRef, useState} from 'react' -import {useIntl} from 'react-intl' +import {FormattedMessage, useIntl} from 'react-intl' import {generatePath, useHistory, useRouteMatch} from 'react-router-dom' import {Board} from '../../blocks/board' @@ -43,6 +43,8 @@ import {Archiver} from '../../archiver' import SeparatorOption from '../../widgets/menu/separatorOption' +import CreateCategory from '../../components/createCategory/createCategory' + const iconForViewType = (viewType: IViewType): JSX.Element => { switch (viewType) { case 'board': return @@ -80,6 +82,7 @@ const SidebarBoardItem = (props: Props) => { const dispatch = useAppDispatch() const myAllBoards = useAppSelector(getMySortedBoards) const currentBoardID = useAppSelector(getCurrentBoardId) + const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false) const generateMoveToCategoryOptions = (boardID: string) => { return props.allCategories.map((category) => ( @@ -245,7 +248,9 @@ const SidebarBoardItem = (props: Props) => { id='createNewCategory' icon={} name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.CreateNew', defaultMessage: 'Create New Category'})} - onClick={() => {}} + onClick={() => { + setShowCreateCategoryModal(true) + }} /> {!me?.is_guest && @@ -308,6 +313,16 @@ const SidebarBoardItem = (props: Props) => { ))} + {showCreateCategoryModal && + setShowCreateCategoryModal(false)} + title={( + + )} + />} ) } From 71ff5c442cd68cda04d99a48cec0e405fd936f30 Mon Sep 17 00:00:00 2001 From: "cannalee90@gmail.com" Date: Fri, 21 Oct 2022 00:34:50 +0900 Subject: [PATCH 3/7] change category of board to newly created one --- .../createCategory/createCategory.tsx | 2 ++ .../components/sidebar/sidebarBoardItem.tsx | 19 ++++++++++++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/createCategory/createCategory.tsx b/webapp/src/components/createCategory/createCategory.tsx index f33feab3435..7d1301056cf 100644 --- a/webapp/src/components/createCategory/createCategory.tsx +++ b/webapp/src/components/createCategory/createCategory.tsx @@ -28,6 +28,7 @@ type Props = { initialValue?: string onClose: () => void title: JSX.Element + onCreate?: () => Promise } const CreateCategory = (props: Props): JSX.Element => { @@ -71,6 +72,7 @@ const CreateCategory = (props: Props): JSX.Element => { } as Category await mutator.createCategory(category) + await props.onCreate?.() } props.onClose() diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx index 27dc31344f8..0dbd3824e01 100644 --- a/webapp/src/components/sidebar/sidebarBoardItem.tsx +++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx @@ -83,6 +83,7 @@ const SidebarBoardItem = (props: Props) => { const myAllBoards = useAppSelector(getMySortedBoards) const currentBoardID = useAppSelector(getCurrentBoardId) const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false) + const [selectedBoardId, setSelectedBoardId] = useState() const generateMoveToCategoryOptions = (boardID: string) => { return props.allCategories.map((category) => ( @@ -197,6 +198,18 @@ const SidebarBoardItem = (props: Props) => { } } + const handleOnCreate = async () => { + const nextCategoriesList = await octoClient.getSidebarCategories(teamID) + const toCategory = nextCategoriesList. + find((category) => props.allCategories.every((prevCategory) => prevCategory.id !== category.id)) + + if (!toCategory || !selectedBoardId) { + return + } + + await mutator.moveBoardToCategory(teamID, selectedBoardId, toCategory.id, props.categoryBoards.id) + } + const boardItemRef = useRef(null) const title = board.title || intl.formatMessage({id: 'Sidebar.untitled-board', defaultMessage: '(Untitled Board)'}) @@ -249,6 +262,7 @@ const SidebarBoardItem = (props: Props) => { icon={} name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.CreateNew', defaultMessage: 'Create New Category'})} onClick={() => { + setSelectedBoardId(board.id) setShowCreateCategoryModal(true) }} /> @@ -315,13 +329,16 @@ const SidebarBoardItem = (props: Props) => { ))} {showCreateCategoryModal && setShowCreateCategoryModal(false)} + onClose={() => { + setShowCreateCategoryModal(false) + }} title={( )} + onCreate={handleOnCreate} />} ) From 9fe4f9944c475c4ed701f46b0bd4ea42ab1d1f44 Mon Sep 17 00:00:00 2001 From: "cannalee90@gmail.com" Date: Fri, 21 Oct 2022 23:52:28 +0900 Subject: [PATCH 4/7] apply review for getting newly created category --- webapp/src/components/createCategory/createCategory.tsx | 6 +++--- webapp/src/components/sidebar/sidebarBoardItem.tsx | 8 ++------ webapp/src/mutator.ts | 4 ++-- webapp/src/octoClient.ts | 6 ++++-- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/webapp/src/components/createCategory/createCategory.tsx b/webapp/src/components/createCategory/createCategory.tsx index 7d1301056cf..bcdbcd68938 100644 --- a/webapp/src/components/createCategory/createCategory.tsx +++ b/webapp/src/components/createCategory/createCategory.tsx @@ -28,7 +28,7 @@ type Props = { initialValue?: string onClose: () => void title: JSX.Element - onCreate?: () => Promise + onCreate?: (id: Category) => Promise } const CreateCategory = (props: Props): JSX.Element => { @@ -71,8 +71,8 @@ const CreateCategory = (props: Props): JSX.Element => { teamID, } as Category - await mutator.createCategory(category) - await props.onCreate?.() + const createdCategory = await mutator.createCategory(category) + await props.onCreate?.(createdCategory) } props.onClose() diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx index 0dbd3824e01..70e79d415ca 100644 --- a/webapp/src/components/sidebar/sidebarBoardItem.tsx +++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx @@ -15,7 +15,7 @@ import MenuWrapper from '../../widgets/menuWrapper' import BoardPermissionGate from '../permissions/boardPermissionGate' import './sidebarBoardItem.scss' -import {CategoryBoards, updateBoardCategories} from '../../store/sidebar' +import {Category, CategoryBoards, updateBoardCategories} from '../../store/sidebar' import CreateNewFolder from '../../widgets/icons/newFolder' import {useAppDispatch, useAppSelector} from '../../store/hooks' import {getCurrentBoardViews, getCurrentViewId} from '../../store/views' @@ -198,11 +198,7 @@ const SidebarBoardItem = (props: Props) => { } } - const handleOnCreate = async () => { - const nextCategoriesList = await octoClient.getSidebarCategories(teamID) - const toCategory = nextCategoriesList. - find((category) => props.allCategories.every((prevCategory) => prevCategory.id !== category.id)) - + const handleOnCreate = async (toCategory: Category) => { if (!toCategory || !selectedBoardId) { return } diff --git a/webapp/src/mutator.ts b/webapp/src/mutator.ts index b6353f5e2ec..2124c734302 100644 --- a/webapp/src/mutator.ts +++ b/webapp/src/mutator.ts @@ -919,8 +919,8 @@ class Mutator { return this.unhideViewColumns(boardId, view, [columnOptionId]) } - async createCategory(category: Category): Promise { - await octoClient.createSidebarCategory(category) + async createCategory(category: Category): Promise { + return octoClient.createSidebarCategory(category) } async deleteCategory(teamID: string, categoryID: string): Promise { diff --git a/webapp/src/octoClient.ts b/webapp/src/octoClient.ts index 756b58cfe3e..42de6f396c5 100644 --- a/webapp/src/octoClient.ts +++ b/webapp/src/octoClient.ts @@ -767,14 +767,16 @@ class OctoClient { return (await this.getJson(response, [])) as CategoryBoards[] } - async createSidebarCategory(category: Category): Promise { + async createSidebarCategory(category: Category): Promise { const path = `/api/v2/teams/${category.teamID}/categories` const body = JSON.stringify(category) - return fetch(this.getBaseURL() + path, { + const response = await fetch(this.getBaseURL() + path, { method: 'POST', headers: this.headers(), body, }) + + return await response.json() as Category } async deleteSidebarCategory(teamID: string, categoryID: string): Promise { From 59961f68fc964b5eb68dd9cde6232ce6843e6e93 Mon Sep 17 00:00:00 2001 From: "cannalee90@gmail.com" Date: Wed, 26 Oct 2022 09:06:53 +0900 Subject: [PATCH 5/7] change proper parameter name --- webapp/src/components/createCategory/createCategory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/createCategory/createCategory.tsx b/webapp/src/components/createCategory/createCategory.tsx index bcdbcd68938..a2541585bfe 100644 --- a/webapp/src/components/createCategory/createCategory.tsx +++ b/webapp/src/components/createCategory/createCategory.tsx @@ -28,7 +28,7 @@ type Props = { initialValue?: string onClose: () => void title: JSX.Element - onCreate?: (id: Category) => Promise + onCreate?: (category: Category) => Promise } const CreateCategory = (props: Props): JSX.Element => { From 3839b8a0402034c13d083812ebf4e680aa260258 Mon Sep 17 00:00:00 2001 From: "cannalee90@gmail.com" Date: Sun, 30 Oct 2022 21:56:13 +0900 Subject: [PATCH 6/7] add unit test for creating new category --- .../sidebarBoardItem.test.tsx.snap | 451 ++++++++++++++++++ .../sidebar/sidebarBoardItem.test.tsx | 36 ++ 2 files changed, 487 insertions(+) diff --git a/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap b/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap index dfcb02c079c..80c7b91c79d 100644 --- a/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap +++ b/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap @@ -67,6 +67,457 @@ exports[`components/sidebarBoardItem renders default icon if no custom icon set `; +exports[`components/sidebarBoardItem should have create category sub-menu 1`] = ` +
+
+
+ i +
+
+ board title +
+
+
+ +
+
+
+
+