From 2bddb0cfc0757eda33278f29a4da4f3ff8a3341c Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Thu, 21 Jan 2021 10:42:05 -0800
Subject: [PATCH] Remove user menu for single-user

---
 webapp/i18n/en.json                |  1 +
 webapp/src/components/sidebar.scss |  3 +-
 webapp/src/components/sidebar.tsx  | 75 ++++++++++++++++++------------
 3 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 04562309a..152b40c0e 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -97,6 +97,7 @@
   "Sidebar.settings": "Settings",
   "Sidebar.spanish": "Spanish",
   "Sidebar.template-from-board": "New template from board",
+  "Sidebar.title": "Boards",
   "Sidebar.untitled": "Untitled",
   "Sidebar.untitled-board": "(Untitled Board)",
   "Sidebar.untitled-view": "(Untitled View)",
diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss
index dfb3e096e..c9df79af4 100644
--- a/webapp/src/components/sidebar.scss
+++ b/webapp/src/components/sidebar.scss
@@ -44,8 +44,9 @@
         padding: 3px 20px;
         margin-bottom: 5px;
 
-        >.username {
+        >.heading {
             line-height: 30px;
+            cursor: default;
         }
 
         >.IconButton {
diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx
index 0648e17cd..725c2e503 100644
--- a/webapp/src/components/sidebar.tsx
+++ b/webapp/src/components/sidebar.tsx
@@ -9,7 +9,7 @@ import {BoardView, MutableBoardView} from '../blocks/boardView'
 import mutator from '../mutator'
 import octoClient from '../octoClient'
 import {darkTheme, defaultTheme, lightTheme, setTheme} from '../theme'
-import {UserContext} from '../user'
+import {IUser, UserContext} from '../user'
 import {WorkspaceTree} from '../viewModel/workspaceTree'
 import Button from '../widgets/buttons/button'
 import IconButton from '../widgets/buttons/iconButton'
@@ -87,35 +87,21 @@ class Sidebar extends React.Component<Props, State> {
         return (
             <div className='Sidebar octo-sidebar'>
                 <div className='octo-sidebar-header'>
-                    <UserContext.Consumer>
-                        {(user) => (
-                            <div className='username'>
-                                <MenuWrapper>
-                                    <Button>
-                                        {user?.username}
-                                    </Button>
-                                    <Menu>
-                                        <Menu.Text
-                                            id='logout'
-                                            name={intl.formatMessage({id: 'Sidebar.logout', defaultMessage: 'Log out'})}
-                                            onClick={async () => {
-                                                octoClient.logout()
-                                                window.location.href = '/login'
-                                            }}
-                                        />
-                                        <Menu.Text
-                                            id='changePassword'
-                                            name={intl.formatMessage({id: 'Sidebar.changePassword', defaultMessage: 'Change password'})}
-                                            onClick={async () => {
-                                                window.location.href = '/change_password'
-                                            }}
-                                        />
-                                    </Menu>
-                                </MenuWrapper>
-
-                            </div>
-                        )}
-                    </UserContext.Consumer>
+                    <div className='heading'>
+                        <UserContext.Consumer>
+                            {(user) => {
+                                if (user) {
+                                    if (user.id === 'single-user') {
+                                        return (
+                                            <div>{intl.formatMessage({id: 'Sidebar.title', defaultMessage: 'Boards'})}</div>
+                                        )
+                                    }
+                                    return this.renderUserMenu(user)
+                                }
+                                return <div/>
+                            }}
+                        </UserContext.Consumer>
+                    </div>
 
                     <div className='octo-spacer'/>
                     <IconButton
@@ -375,6 +361,35 @@ class Sidebar extends React.Component<Props, State> {
         )
     }
 
+    private renderUserMenu(user: IUser): JSX.Element {
+        const {intl} = this.props
+
+        return (
+            <MenuWrapper>
+                <Button>
+                    {user.username}
+                </Button>
+                <Menu>
+                    <Menu.Text
+                        id='logout'
+                        name={intl.formatMessage({id: 'Sidebar.logout', defaultMessage: 'Log out'})}
+                        onClick={async () => {
+                            octoClient.logout()
+                            window.location.href = '/login'
+                        }}
+                    />
+                    <Menu.Text
+                        id='changePassword'
+                        name={intl.formatMessage({id: 'Sidebar.changePassword', defaultMessage: 'Change password'})}
+                        onClick={async () => {
+                            window.location.href = '/change_password'
+                        }}
+                    />
+                </Menu>
+            </MenuWrapper>
+        )
+    }
+
     private boardClicked(board: Board): void {
         this.props.showBoard(board.id)
     }