Adding menu options in sidebar, and improving order (#3713)

* Adding category and board options at the top

* Updating UI

* Updating test

* Updating test

* Updating icon

* Fixing bug and translation

* Updating createCategory component

* Removing unused vars

* Removing unused vars

* Updating UI

* fixed tests

* fixed tests

* fixed tests

* Updating test

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>

mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`components/boardSelector renders with no results 1`] = `
           >
             <button
               aria-label="Close dialog"
-              class="IconButton size--medium"
+              class="IconButton dialog__close size--medium"
               title="Close dialog"
               type="button"
             >
@@ -126,7 +126,7 @@ exports[`components/boardSelector renders with some results 1`] = `
           >
             <button
               aria-label="Close dialog"
-              class="IconButton size--medium"
+              class="IconButton dialog__close size--medium"
               title="Close dialog"
               type="button"
             >
@@ -327,7 +327,7 @@ exports[`components/boardSelector renders without start searching 1`] = `
           >
             <button
               aria-label="Close dialog"
-              class="IconButton size--medium"
+              class="IconButton dialog__close size--medium"
               title="Close dialog"
               type="button"
             >

mattermost-plugin/webapp/src/components/boardSelector.scss

@@ -23,15 +23,8 @@
             position: relative;
             width: 600px;
             height: 450px;
-
-            .toolbar {
-                flex-direction: row-reverse;
-                padding: 0;
-                position: absolute;
-                right: 18px;
-                top: 18px;
-            }
         }
+
         .confirmation-dialog-box {
             .dialog {
                 position: fixed;

webapp/i18n/en.json

@@ -242,6 +242,7 @@
   "Sidebar.untitled-view": "(Untitled View)",
   "SidebarCategories.BlocksMenu.Move": "Move To...",
   "SidebarCategories.CategoryMenu.CreateNew": "Create New Category",
+  "SidebarCategories.CategoryMenu.CreateBoard": "Create New Board",
   "SidebarCategories.CategoryMenu.Delete": "Delete Category",
   "SidebarCategories.CategoryMenu.DeleteModal.Body": "Boards in <b>{categoryName}</b> will move back to the Boards categories. You're not removed from any boards.",
   "SidebarCategories.CategoryMenu.DeleteModal.Title": "Delete this category?",

webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >
@@ -95,7 +95,7 @@ exports[`/components/confirmationDialogBox confirmDialog with Confirm Button Tex
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >

webapp/src/components/__snapshots__/dialog.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`components/dialog should match snapshot 1`] = `
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >
@@ -61,7 +61,7 @@ exports[`components/dialog should return dialog and click on cancel button 1`] =
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >

webapp/src/components/boardsSwitcher/boardsSwitcher.scss

@@ -9,8 +9,8 @@
         background-color: rgba(var(--sidebar-text-rgb), 0.08);
         color: rgba(var(--sidebar-text-rgb), 0.56);
         flex: 1;
-        padding: 6px 8px;
+        padding: 6px 8px 6px 4px;
-        gap: 6px;
+        gap: 4px;
         border-radius: 4px;
         cursor: pointer;
         height: 28px;
@@ -28,9 +28,17 @@
     }
 
     .add-board-icon {
-        margin-left: 4px;
+        border-radius: 28px;
+        margin-left: 8px;
         width: 28px;
         height: 28px;
         flex: 0 0 28px;
+        background-color: rgba(var(--sidebar-text-rgb), 0.08);
+        color: rgba(var(--sidebar-text-rgb), 0.72);
+
+        &:hover {
+            background-color: rgba(var(--sidebar-text-rgb), 0.16);
+            color: var(--sidebar-text);
+        }
     }
 }

webapp/src/components/boardsSwitcher/boardsSwitcher.tsx

@@ -2,17 +2,19 @@
 // See LICENSE.txt for license information.
 import React, {useEffect, useState} from 'react'
 
-import {useIntl} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 
+import MenuWrapper from '../../widgets/menuWrapper'
+import CompassIcon from '../../widgets/icons/compassIcon'
+import Menu from '../../widgets/menu'
 import Search from '../../widgets/icons/search'
-
+import CreateCategory from '../createCategory/createCategory'
 import {useAppSelector} from '../../store/hooks'
 
 import {
     getOnboardingTourCategory,
     getOnboardingTourStep,
 } from '../../store/users'
-
 import {getCurrentCard} from '../../store/cards'
 
 import './boardsSwitcher.scss'
@@ -26,7 +28,7 @@ import IconButton from '../../widgets/buttons/iconButton'
 import SearchForBoardsTourStep from '../../components/onboardingTour/searchForBoards/searchForBoards'
 
 type Props = {
-    onBoardTemplateSelectorOpen?: () => void,
+    onBoardTemplateSelectorOpen: () => void,
     userIsGuest?: boolean,
 }
 
@@ -35,11 +37,11 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
 
     const [showSwitcher, setShowSwitcher] = useState<boolean>(false)
     const onboardingTourCategory = useAppSelector(getOnboardingTourCategory)
+    const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false)
     const onboardingTourStep = useAppSelector(getOnboardingTourStep)
     const currentCard = useAppSelector(getCurrentCard)
     const noCardOpen = !currentCard
 
-
     const shouldViewSearchForBoardsTour = noCardOpen &&
                                        onboardingTourCategory === TOUR_SIDEBAR &&
                                        onboardingTourStep === SidebarTourSteps.SEARCH_FOR_BOARDS.toString()
@@ -68,6 +70,10 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
         }
     }
 
+    const handleCreateNewCategory = () => {
+        setShowCreateCategoryModal(true)
+    }
+
     useEffect(() => {
         document.addEventListener('keydown', handleQuickSwitchKeyPress)
         document.addEventListener('keydown', handleEscKeyPress)
@@ -95,19 +101,53 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
             {shouldViewSearchForBoardsTour && <div><SearchForBoardsTourStep/></div>}
             {
                 Utils.isFocalboardPlugin() && !props.userIsGuest &&
-                <IconButton
+                <MenuWrapper>
-                    size='small'
+                    <IconButton
-                    inverted={true}
+                        size='small'
-                    className='add-board-icon'
+                        inverted={true}
-                    onClick={props.onBoardTemplateSelectorOpen}
+                        className='add-board-icon'
-                    icon={<AddIcon/>}
+                        icon={<AddIcon/>}
-                />
+                    />
+                    <Menu>
+                        <Menu.Text
+                            id='create-new-board-option'
+                            icon={<CompassIcon icon='plus' />}
+                            onClick={props.onBoardTemplateSelectorOpen}
+                            name='Create new board'
+                        />
+                        <Menu.Text
+                            id='createNewCategory'
+                            name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.CreateNew', defaultMessage: 'Create New Category'})}
+                            icon={
+                                <CompassIcon
+                                    icon='folder-plus-outline'
+                                    className='CreateNewFolderIcon'
+                                />
+                            }
+                            onClick={handleCreateNewCategory}
+                        />
+                    </Menu>
+                </MenuWrapper>
             }
 
             {
                 showSwitcher &&
                 <BoardSwitcherDialog onClose={() => setShowSwitcher(false)} />
             }
+
+            {
+                showCreateCategoryModal && (
+                    <CreateCategory
+                        onClose={() => setShowCreateCategoryModal(false)}
+                        title={(
+                            <FormattedMessage
+                                id='SidebarCategories.CategoryMenu.CreateNew'
+                                defaultMessage='Create New Category'
+                            />
+                        )}
+                    />
+                )
+            }
         </div>
     )
 }

webapp/src/components/boardsSwitcherDialog/__snapshots__/boardSwitcherDialog.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`component/BoardSwitcherDialog base case 1`] = `
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >

webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.scss

@@ -10,10 +10,6 @@
         color: rgba(var(--center-channel-color-rgb), 0.56);
     }
 
-    .toolbar {
-        padding: 4px;
-    }
-
     span {
         display: inline-block;
         height: 100%;

webapp/src/components/createCategory/__snapshots__/createCategory.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`components/createCategory/CreateCategory base case should match snapsho
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >
@@ -35,7 +35,9 @@ exports[`components/createCategory/CreateCategory base case should match snapsho
         <div
           class="CreateCategory"
         >
-          <h3>
+          <h3
+            class="dialog-title"
+          >
             <span>
               title
             </span>

webapp/src/components/createCategory/createCategory.scss

@@ -4,20 +4,14 @@
     .wrapper {
         .dialog {
             width: 600px;
-            height: 260px;
+            height: auto;
-        }
-
-        .toolbar {
-            flex-direction: row-reverse;
-            padding: 2px 6px;
         }
 
         .CreateCategory {
             display: flex;
             flex-direction: column;
-            padding: 0 40px 30px;
+            padding: 0 32px 24px;
-            gap: 12px;
+            gap: 24px;
-            flex: 1;
 
             .inputWrapper {
                 position: relative;
@@ -38,18 +32,20 @@
                 width: 100%;
             }
 
-            h3 {
-                margin-top: 0;
-            }
-
             input {
+                height: 48px;
                 font-size: 16px;
-                padding: 6px 12px;
                 border-radius: 4px;
-                border: 2px solid rgba(var(--center-channel-color-rgb), 0.16);
+                border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+                background: var(--center-channel-bg);
+                color: var(--center-channel-color);
+                padding: 0 16px;
+                flex: 1;
+                transition: border 0.15s ease-in;
 
                 &:focus {
                     border-color: var(--button-bg);
+                    box-shadow: inset 0 0 0 1px var(--button-bg);
                 }
             }
 

webapp/src/components/createCategory/createCategory.test.tsx

@@ -7,20 +7,59 @@ import {render} from "@testing-library/react"
 
 import userEvent from "@testing-library/user-event"
 
-import {wrapIntl} from "../../testUtils"
+import thunk from "redux-thunk"
+
+import {Provider as ReduxProvider} from 'react-redux'
+
+import {mocked} from "jest-mock"
+
+import {mockStateStore, wrapIntl} from "../../testUtils"
+
+import {IUser} from "../../user"
+
+import mutator from "../../mutator"
 
 import CreateCategory from "./createCategory"
 
+jest.mock('../../mutator')
+const mockedMutator = mocked(mutator, true)
+
 describe('components/createCategory/CreateCategory', () => {
+    const me: IUser = {
+        id: 'user-id-1',
+        username: 'username_1',
+        email: '',
+        nickname: '',
+        firstname: '',
+        lastname: '',
+        props: {},
+        create_at: 0,
+        update_at: 0,
+        is_bot: false,
+        roles: 'system_user',
+        is_guest: false,
+    }
+
+    const state = {
+        teams: {
+            current: {id: 'team-id', title: 'Test Team'},
+        },
+        users: {
+            me,
+        },
+    }
+    const store = mockStateStore([thunk], state)
+
     it('base case should match snapshot', () => {
         const component = wrapIntl(
-            <CreateCategory
+            <ReduxProvider store={store}>
-                onClose={jest.fn()}
+                <CreateCategory
-                onCreate={jest.fn()}
+                    onClose={jest.fn()}
-                title={
+                    title={
-                    <span>{'title'}</span>
+                        <span>{'title'}</span>
-                }
+                    }
-            />
+                />
+            </ReduxProvider>
         )
 
         const {container} = render(component)
@@ -30,13 +69,14 @@ describe('components/createCategory/CreateCategory', () => {
     it('should call onClose on being closed', () => {
         const onCloseHandler = jest.fn()
         const component = wrapIntl(
-            <CreateCategory
+            <ReduxProvider store={store}>
-                onClose={onCloseHandler}
+                <CreateCategory
-                onCreate={jest.fn()}
+                    onClose={onCloseHandler}
-                title={
+                    title={
-                    <span>{'title'}</span>
+                        <span>{'title'}</span>
-                }
+                    }
-            />
+                />
+            </ReduxProvider>
         )
 
         const {container} = render(component)
@@ -52,35 +92,39 @@ describe('components/createCategory/CreateCategory', () => {
     })
 
     it('should call onCreate on pressing enter', () => {
-        const onCreateHandler = jest.fn()
         const component = wrapIntl(
-            <CreateCategory
+            <ReduxProvider store={store}>
-                onClose={jest.fn()}
+                <CreateCategory
-                onCreate={onCreateHandler}
+                    onClose={jest.fn()}
-                title={
+                    title={
-                    <span>{'title'}</span>
+                        <span>{'title'}</span>
-                }
+                    }
-            />
+                />
+            </ReduxProvider>
         )
 
         const {container} = render(component)
         const inputField = container.querySelector('.categoryNameInput')
         expect(inputField).toBeTruthy()
         userEvent.type(inputField as Element, 'category name{enter}')
-        expect(onCreateHandler).toBeCalledWith('category name')
+        expect(mockedMutator.createCategory).toBeCalledWith({
+            name: "category name",
+            teamID: "team-id",
+            userID: "user-id-1",
+        })
     })
 
     it('should show initial value', () => {
-        const onCreateHandler = jest.fn()
         const component = wrapIntl(
-            <CreateCategory
+            <ReduxProvider store={store}>
-                initialValue='Dwight prank ideas'
+                <CreateCategory
-                onClose={jest.fn()}
+                    initialValue='Dwight prank ideas'
-                onCreate={onCreateHandler}
+                    onClose={jest.fn()}
-                title={
+                    title={
-                    <span>{'title'}</span>
+                        <span>{'title'}</span>
-                }
+                    }
-            />
+                />
+            </ReduxProvider>
         )
 
         const {container} = render(component)
@@ -90,16 +134,16 @@ describe('components/createCategory/CreateCategory', () => {
     })
 
     it('should clear input field on clicking clear icon', () => {
-        const onCreateHandler = jest.fn()
         const component = wrapIntl(
-            <CreateCategory
+            <ReduxProvider store={store}>
-                initialValue='Dunder Mifflin'
+                <CreateCategory
-                onClose={jest.fn()}
+                    initialValue='Dunder Mifflin'
-                onCreate={onCreateHandler}
+                    onClose={jest.fn()}
-                title={
+                    title={
-                    <span>{'title'}</span>
+                        <span>{'title'}</span>
-                }
+                    }
-            />
+                />
+            </ReduxProvider>
         )
 
         const {container} = render(component)

webapp/src/components/createCategory/createCategory.tsx

@@ -5,6 +5,17 @@ import React, {useState, KeyboardEvent} from 'react'
 
 import {useIntl} from 'react-intl'
 
+import {IUser} from '../../user'
+import {Category} from '../../store/sidebar'
+import {getCurrentTeam} from '../../store/teams'
+import mutator from '../../mutator'
+import {useAppSelector} from '../../store/hooks'
+import {
+    getMe,
+} from '../../store/users'
+
+import {Utils} from '../../utils'
+
 import Dialog from '../dialog'
 import Button from '../../widgets/buttons/button'
 
@@ -12,15 +23,18 @@ import './createCategory.scss'
 import CloseCircle from "../../widgets/icons/closeCircle"
 
 type Props = {
+    boardCategoryId?: string
+    renameModal?: boolean
     initialValue?: string
     onClose: () => void
-    onCreate: (name: string) => void
     title: JSX.Element
 }
 
 const CreateCategory = (props: Props): JSX.Element => {
     const intl = useIntl()
-
+    const me = useAppSelector<IUser|null>(getMe)
+    const team = useAppSelector(getCurrentTeam)
+    const teamID = team?.id || ''
     const placeholder = intl.formatMessage({id: 'Categories.CreateCategoryDialog.Placeholder', defaultMessage: 'Name your category' })
     const cancelText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CancelText', defaultMessage: 'Cancel' })
     const createText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CreateText', defaultMessage: 'Create' })
@@ -30,17 +44,45 @@ const CreateCategory = (props: Props): JSX.Element => {
 
     const handleKeypress = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
-            props.onCreate(name)
+            onCreate(name)
         }
     }
 
+    const onCreate = async (categoryName: string) => {
+        if (!me) {
+            Utils.logError('me not initialized')
+            return
+        }
+
+        if (props.renameModal) {
+            const category: Category = {
+                name: categoryName,
+                id: props.boardCategoryId,
+                userID: me.id,
+                teamID,
+            } as Category
+
+            await mutator.updateCategory(category)
+        } else {
+            const category: Category = {
+                name: categoryName,
+                userID: me.id,
+                teamID,
+            } as Category
+
+            await mutator.createCategory(category)
+        }
+
+        props.onClose()
+    }
+
     return (
         <Dialog
             className='CreateCategoryModal'
             onClose={props.onClose}
         >
             <div className='CreateCategory'>
-                <h3>{props.title}</h3>
+                <h3 className='dialog-title'>{props.title}</h3>
                 <div className='inputWrapper'>
                     <input
                         className='categoryNameInput'
@@ -70,7 +112,7 @@ const CreateCategory = (props: Props): JSX.Element => {
                     <Button
                         size={'medium'}
                         filled={Boolean(name.trim())}
-                        onClick={() => props.onCreate(name.trim())}
+                        onClick={() => onCreate(name.trim())}
                         disabled={!(name.trim())}
                     >
                         {props.initialValue ? updateText : createText}

webapp/src/components/dialog.scss

@@ -10,6 +10,19 @@
         bottom: 0;
     }
 
+    .dialog-title {
+        margin-top: 24px;
+        font-weight: 600;
+        font-size: 22px;
+        line-height: 28px;
+    }
+
+    .dialog__close {
+        top: 18px;
+        right: 18px;
+        position: absolute;
+    }
+
     .backdrop {
         @include z-index(dialog-backdrop);
         position: fixed;
@@ -26,14 +39,8 @@
         justify-content: center;
     }
 
-    .toolbar {
-        display: flex;
-        flex-direction: row;
-        padding: 16px;
-        justify-content: space-between;
-    }
-
     .dialog {
+        position: relative;
         display: flex;
         flex-direction: column;
         background-color: rgb(var(--center-channel-bg-rgb));
@@ -55,6 +62,7 @@
                 display: none !important;
             }
         }
+
         @media screen and (max-width: 975px) {
             position: fixed;
             top: 0;
@@ -63,26 +71,33 @@
             bottom: 0;
         }
 
-        > * {
+        >* {
             flex-shrink: 0;
         }
 
-        > .banner {
+        >.banner {
             background-color: rgba(230, 220, 192, 0.9);
             text-align: center;
             padding: 10px;
             color: #222;
         }
 
-        > .banner.error {
+        >.banner.error {
             background-color: rgba(230, 192, 192, 0.9);
         }
 
-        > .toolbar {
+        .IconButton {
-            display: flex;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
-            flex-direction: row;
+
-            padding: 24px;
+            &:hover {
-            justify-content: space-between;
+                color: rgba(var(--center-channel-color-rgb), 0.72);
+                background-color: rgba(var(--center-channel-color-rgb), 0.08);
+            }
+
+            &:active {
+                background-color: rgba(var(--button-bg-rgb), 0.08);
+                color: rgba(var(--button-bg-rgb), 1);
+            }
         }
 
         .toolbar--right {
@@ -90,7 +105,7 @@
             gap: 8px;
         }
 
-        > .content {
+        >.content {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
@@ -98,12 +113,13 @@
             @media not screen and (max-width: 975px) {
                 padding: 10px 126px;
             }
+
             @media screen and (max-width: 975px) {
                 padding: 10px;
             }
         }
 
-        > .content.fullwidth {
+        >.content.fullwidth {
             padding-left: 78px;
         }
     }

webapp/src/components/dialog.tsx

@@ -58,10 +58,11 @@ const Dialog = (props: Props) => {
                     className='dialog'
                 >
                     <div className='toolbar'>
-                        {title && <h1 className='text-heading5 mt-2'>{title}</h1>}
+                        {title && <h1 className='dialog-title'>{title}</h1>}
                         {
                             !props.hideCloseButton &&
                             <IconButton
+                                className='dialog__close'
                                 onClick={props.onClose}
                                 icon={<CloseIcon/>}
                                 title={closeDialogText}

webapp/src/components/searchDialog/searchDialog.scss

@@ -8,18 +8,6 @@
         }
     }
 
-    .wrapper {
-        .dialog {
-            .toolbar {
-                flex-direction: row-reverse;
-                padding: 0;
-                position: absolute;
-                right: 18px;
-                top: 18px;
-            }
-        }
-    }
-
     .wrapper {
         .dialog {
             position: relative;

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

@@ -107,33 +107,6 @@ exports[`components/sidebarBoardItem sidebar board item 1`] = `
             <div
               class="menu-options"
             >
-              <div>
-                <div
-                  aria-label="Delete board"
-                  class="MenuOption TextOption menu-option"
-                  role="button"
-                >
-                  <div
-                    class="d-flex"
-                  >
-                    <i
-                      class="CompassIcon icon-trash-can-outline DeleteIcon trash-can-outline"
-                    />
-                  </div>
-                  <div
-                    class="menu-option__content"
-                  >
-                    <div
-                      class="menu-name"
-                    >
-                      Delete board
-                    </div>
-                  </div>
-                  <div
-                    class="noicon"
-                  />
-                </div>
-              </div>
               <div>
                 <div
                   class="MenuOption SubMenuOption menu-option boardMoveToCategorySubmenu"
@@ -239,6 +212,33 @@ exports[`components/sidebarBoardItem sidebar board item 1`] = `
                   />
                 </div>
               </div>
+              <div>
+                <div
+                  aria-label="Delete board"
+                  class="MenuOption TextOption menu-option text-danger"
+                  role="button"
+                >
+                  <div
+                    class="d-flex"
+                  >
+                    <i
+                      class="CompassIcon icon-trash-can-outline DeleteIcon trash-can-outline"
+                    />
+                  </div>
+                  <div
+                    class="menu-option__content"
+                  >
+                    <div
+                      class="menu-name"
+                    >
+                      Delete board
+                    </div>
+                  </div>
+                  <div
+                    class="noicon"
+                  />
+                </div>
+              </div>
             </div>
             <div
               class="menu-spacer hideOnWidescreen"
@@ -349,33 +349,6 @@ exports[`components/sidebarBoardItem sidebar board item for guest 1`] = `
             <div
               class="menu-options"
             >
-              <div>
-                <div
-                  aria-label="Delete board"
-                  class="MenuOption TextOption menu-option"
-                  role="button"
-                >
-                  <div
-                    class="d-flex"
-                  >
-                    <i
-                      class="CompassIcon icon-trash-can-outline DeleteIcon trash-can-outline"
-                    />
-                  </div>
-                  <div
-                    class="menu-option__content"
-                  >
-                    <div
-                      class="menu-name"
-                    >
-                      Delete board
-                    </div>
-                  </div>
-                  <div
-                    class="noicon"
-                  />
-                </div>
-              </div>
               <div>
                 <div
                   class="MenuOption SubMenuOption menu-option boardMoveToCategorySubmenu"
@@ -429,6 +402,33 @@ exports[`components/sidebarBoardItem sidebar board item for guest 1`] = `
                   />
                 </div>
               </div>
+              <div>
+                <div
+                  aria-label="Delete board"
+                  class="MenuOption TextOption menu-option text-danger"
+                  role="button"
+                >
+                  <div
+                    class="d-flex"
+                  >
+                    <i
+                      class="CompassIcon icon-trash-can-outline DeleteIcon trash-can-outline"
+                    />
+                  </div>
+                  <div
+                    class="menu-option__content"
+                  >
+                    <div
+                      class="menu-name"
+                    >
+                      Delete board
+                    </div>
+                  </div>
+                  <div
+                    class="noicon"
+                  />
+                </div>
+              </div>
             </div>
             <div
               class="menu-spacer hideOnWidescreen"

webapp/src/components/sidebar/sidebar.test.tsx

@@ -69,11 +69,12 @@ describe('components/sidebarSidebar', () => {
         })
 
         const history = createMemoryHistory()
+        const onBoardTemplateSelectorOpen = jest.fn()
 
         const component = wrapIntl(
             <ReduxProvider store={store}>
                 <Router history={history}>
-                    <Sidebar/>
+                    <Sidebar onBoardTemplateSelectorOpen={onBoardTemplateSelectorOpen}/>
                 </Router>
             </ReduxProvider>,
         )
@@ -131,11 +132,12 @@ describe('components/sidebarSidebar', () => {
         })
 
         const history = createMemoryHistory()
+        const onBoardTemplateSelectorOpen = jest.fn()
 
         const component = wrapIntl(
             <ReduxProvider store={store}>
                 <Router history={history}>
-                    <Sidebar/>
+                    <Sidebar onBoardTemplateSelectorOpen={onBoardTemplateSelectorOpen}/>
                 </Router>
             </ReduxProvider>,
         )
@@ -192,11 +194,12 @@ describe('components/sidebarSidebar', () => {
         })
 
         const history = createMemoryHistory()
+        const onBoardTemplateSelectorOpen = jest.fn()
 
         const component = wrapIntl(
             <ReduxProvider store={store}>
                 <Router history={history}>
-                    <Sidebar/>
+                    <Sidebar onBoardTemplateSelectorOpen={onBoardTemplateSelectorOpen}/>
                 </Router>
             </ReduxProvider>,
         )
@@ -254,11 +257,12 @@ describe('components/sidebarSidebar', () => {
         })
 
         const history = createMemoryHistory()
+        const onBoardTemplateSelectorOpen = jest.fn()
 
         const component = wrapIntl(
             <ReduxProvider store={store}>
                 <Router history={history}>
-                    <Sidebar/>
+                    <Sidebar onBoardTemplateSelectorOpen={onBoardTemplateSelectorOpen}/>
                 </Router>
             </ReduxProvider>,
         )
@@ -305,7 +309,7 @@ describe('components/sidebarSidebar', () => {
     //     const component = wrapIntl(
     //         <ReduxProvider store={store}>
     //             <Router history={history}>
-    //                 <Sidebar/>
+    //                 <Sidebar onBoardTemplateSelectorOpen={onBoardTemplateSelectorOpen}/>
     //             </Router>
     //         </ReduxProvider>,
     //     )

webapp/src/components/sidebar/sidebar.tsx

@@ -40,7 +40,7 @@ import {addMissingItems} from './utils'
 
 type Props = {
     activeBoardId?: string
-    onBoardTemplateSelectorOpen?: () => void
+    onBoardTemplateSelectorOpen: () => void
 }
 
 function getWindowDimensions() {

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -235,20 +235,6 @@ const SidebarBoardItem = (props: Props) => {
                             position='auto'
                             parentRef={boardItemRef}
                         >
-                            <BoardPermissionGate
-                                boardId={board.id}
-                                permissions={[Permission.DeleteBoard]}
-                            >
-                                <Menu.Text
-                                    key={`deleteBlock-${board.id}`}
-                                    id='deleteBlock'
-                                    name={intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete board'})}
-                                    icon={<DeleteIcon/>}
-                                    onClick={() => {
-                                        props.onDeleteRequest(board)
-                                    }}
-                                />
-                            </BoardPermissionGate>
                             <Menu.SubMenu
                                 key={`moveBlock-${board.id}`}
                                 id='moveBlock'
@@ -279,6 +265,21 @@ const SidebarBoardItem = (props: Props) => {
                                 icon={<CloseIcon/>}
                                 onClick={() => handleHideBoard()}
                             />
+                            <BoardPermissionGate
+                                boardId={board.id}
+                                permissions={[Permission.DeleteBoard]}
+                            >
+                                <Menu.Text
+                                    key={`deleteBlock-${board.id}`}
+                                    id='deleteBlock'
+                                    className='text-danger'
+                                    name={intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete board'})}
+                                    icon={<DeleteIcon/>}
+                                    onClick={() => {
+                                        props.onDeleteRequest(board)
+                                    }}
+                                />
+                            </BoardPermissionGate>
                         </Menu>
                     </MenuWrapper>
                 </div>

webapp/src/components/sidebar/sidebarCategory.tsx

@@ -10,6 +10,7 @@ import {Board} from '../../blocks/board'
 import mutator from '../../mutator'
 import IconButton from '../../widgets/buttons/iconButton'
 import DeleteIcon from '../../widgets/icons/delete'
+import CompassIcon from '../../widgets/icons/compassIcon'
 import OptionsIcon from '../../widgets/icons/options'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
@@ -30,7 +31,6 @@ import {
 
 import {getCurrentCard} from '../../store/cards'
 import {Utils} from '../../utils'
-import Update from '../../widgets/icons/update'
 
 import { TOUR_SIDEBAR, SidebarTourSteps, TOUR_BOARD, FINISHED } from '../../components/onboardingTour/index'
 import telemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient'
@@ -244,6 +244,12 @@ const SidebarCategory = (props: Props) => {
                             {
                                 props.categoryBoards.id !== '' &&
                                 <React.Fragment>
+                                    <Menu.Text
+                                        id='updateCategory'
+                                        name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.Update', defaultMessage: 'Rename Category'})}
+                                        icon={<CompassIcon icon='pencil-outline'/>}
+                                        onClick={handleUpdateCategory}
+                                    />
                                     <Menu.Text
                                         id='deleteCategory'
                                         className='text-danger'
@@ -251,11 +257,12 @@ const SidebarCategory = (props: Props) => {
                                         icon={<DeleteIcon/>}
                                         onClick={() => setShowDeleteCategoryDialog(true)}
                                     />
+                                    <Menu.Separator/>
                                     <Menu.Text
-                                        id='updateCategory'
+                                        id='createNewCategory'
-                                        name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.Update', defaultMessage: 'Rename Category'})}
+                                        name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.CreateNew', defaultMessage: 'Create New Category'})}
-                                        icon={<Update/>}
+                                        icon={<CreateNewFolder/>}
-                                        onClick={handleUpdateCategory}
+                                        onClick={handleCreateNewCategory}
                                     />
                                 </React.Fragment>
                             }
@@ -315,21 +322,6 @@ const SidebarCategory = (props: Props) => {
                                 defaultMessage='Create New Category'
                             />
                         )}
-                        onCreate={async (name) => {
-                            if (!me) {
-                                Utils.logError('me not initialized')
-                                return
-                            }
-
-                            const category: Category = {
-                                name,
-                                userID: me.id,
-                                teamID,
-                            } as Category
-
-                            await mutator.createCategory(category)
-                            setShowCreateCategoryModal(false)
-                        }}
                     />
                 )
             }
@@ -345,22 +337,6 @@ const SidebarCategory = (props: Props) => {
                             />
                         )}
                         onClose={() => setShowUpdateCategoryModal(false)}
-                        onCreate={async (name) => {
-                            if (!me) {
-                                Utils.logError('me not initialized')
-                                return
-                            }
-
-                            const category: Category = {
-                                name,
-                                id: props.categoryBoards.id,
-                                userID: me.id,
-                                teamID,
-                            } as Category
-
-                            await mutator.updateCategory(category)
-                            setShowUpdateCategoryModal(false)
-                        }}
                     />
                 )
             }

webapp/src/components/viewLImitDialog/__snapshots__/viewLimitDialog.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`components/viewLimitDialog/ViewLiimitDialog show notify upgrade button
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >
@@ -96,7 +96,7 @@ exports[`components/viewLimitDialog/ViewLiimitDialog show upgrade button for sys
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >

webapp/src/components/viewLImitDialog/__snapshots__/viewLimitDialogWrapper.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`components/viewLimitDialog/ViewL]imitDialog show notify admin confirmat
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >
@@ -130,7 +130,7 @@ exports[`components/viewLimitDialog/ViewL]imitDialog show view limit dialog 1`]
         >
           <button
             aria-label="Close dialog"
-            class="IconButton size--medium"
+            class="IconButton dialog__close size--medium"
             title="Close dialog"
             type="button"
           >

webapp/src/widgets/menu/menu.scss

@@ -61,6 +61,7 @@
             display: flex;
             flex-direction: row;
             align-items: center;
+            justify-content: flex-start;
             position: relative;
             font-size: 14px;
             line-height: 24px;