adding logged in user to sidebar

Summary: Adding UI that shows when a user is logged in and allows the user to log out.

Reviewed By: jknoxville

Differential Revision: D14224401

fbshipit-source-id: 314a1c2f9a1021258e724e824be7577eb85d4b9e

src/chrome/MainSidebar.js

@@ -32,6 +32,7 @@ import React from 'react';
 import NotificationsHub from '../NotificationsHub.js';
 import {selectPlugin} from '../reducers/connections.js';
 import {setActiveSheet} from '../reducers/application.js';
+import UserAccount from './UserAccount.js';
 import {connect} from 'react-redux';
 
 const ListItem = styled('div')(({active}) => ({
@@ -107,7 +108,6 @@ const Plugins = styled(FlexColumn)({
 
 const PluginDebugger = styled(FlexBox)(props => ({
   color: colors.blackAlpha50,
-  borderTop: `1px solid ${colors.blackAlpha10}`,
   alignItems: 'center',
   padding: 10,
   flexShrink: 0,
@@ -345,6 +345,7 @@ class MainSidebar extends PureComponent<MainSidebarProps> {
           />
           &nbsp;Plugin not showing?
         </PluginDebugger>
+        <UserAccount />
       </Sidebar>
     );
   }

src/chrome/UserAccount.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import type {User} from '../reducers/user';
+
+import {styled, PureComponent, FlexRow, Glyph, Text, colors} from 'flipper';
+import {logout} from '../reducers/user';
+import {connect} from 'react-redux';
+import electron from 'electron';
+import {findDOMNode} from 'react-dom';
+
+const Container = styled(FlexRow)({
+  alignItems: 'center',
+  padding: '5px 10px',
+  borderTop: `1px solid ${colors.blackAlpha10}`,
+  fontWeight: 500,
+});
+
+const ProfilePic = styled('img')({
+  borderRadius: '999em',
+  flexShrink: 0,
+  width: 25,
+  marginRight: 6,
+});
+
+const UserName = styled(Text)({
+  flexGrow: 1,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  marginRight: 6,
+  textOverflow: 'ellipsis',
+});
+
+type UserAccountProps = {|
+  user: User,
+  logout: () => void,
+|};
+
+class UserAccount extends PureComponent<UserAccountProps> {
+  _ref: ?Element;
+
+  setRef = (ref: React.ElementRef<*>) => {
+    const element = findDOMNode(ref);
+    if (element instanceof HTMLElement) {
+      this._ref = element;
+    }
+  };
+
+  showDetails = () => {
+    const menuTemplate = [
+      {
+        label: 'Sign Out',
+        click: this.props.logout,
+      },
+    ];
+
+    const menu = electron.remote.Menu.buildFromTemplate(menuTemplate);
+    const {bottom, left} = this._ref ? this._ref.getBoundingClientRect() : {};
+    menu.popup({
+      window: electron.remote.getCurrentWindow(),
+      async: true,
+      x: parseInt(left, 10),
+      y: parseInt(bottom, 10) + 8,
+    });
+  };
+
+  render() {
+    return this.props.user?.name ? (
+      <Container innerRef={this.setRef} onClick={this.showDetails}>
+        <ProfilePic src={this.props.user.profile_picture?.uri} />
+        <UserName>{this.props.user.name}</UserName>
+        <Glyph name="chevron-down" size={10} variant="outline" />
+      </Container>
+    ) : null;
+  }
+}
+
+export default connect<UserAccountProps, {||}, _, _, _, _>(
+  ({user}) => ({
+    user,
+  }),
+  {
+    logout,
+  },
+)(UserAccount);