move login button to navbar

Reviewed By: elboman

Differential Revision: D47398401

fbshipit-source-id: 9d49f79e97af5f3373e9c872d9d59e7f9e15694e

desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx

@@ -8,27 +8,16 @@
  */
 
 import React, {cloneElement, useState, useCallback, useMemo} from 'react';
-import {
-  Button,
-  Divider,
-  Badge,
-  Tooltip,
-  Avatar,
-  Popover,
-  Menu,
-  Modal,
-} from 'antd';
+import {Button, Divider, Badge, Tooltip, Menu, Modal} from 'antd';
 import {
   MobileFilled,
   AppstoreOutlined,
   BellOutlined,
   FileExclamationOutlined,
-  LoginOutlined,
   SettingOutlined,
   MedicineBoxOutlined,
   RocketOutlined,
   BugOutlined,
-  WarningOutlined,
   ApiOutlined,
 } from '@ant-design/icons';
 import {SidebarLeft, SidebarRight} from './SandyIcons';
@@ -63,7 +52,6 @@ import NetworkGraph from '../chrome/NetworkGraph';
 import FpsGraph from '../chrome/FpsGraph';
 import UpdateIndicator from '../chrome/UpdateIndicator';
 import PluginManager from '../chrome/plugin-manager/PluginManager';
-import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet';
 import constants from '../fb-stubs/constants';
 import {
   canFileExport,
@@ -79,7 +67,6 @@ import {css} from '@emotion/css';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import {StyleGuide} from './StyleGuide';
 import {useEffect} from 'react';
-import {isConnected, currentUser, logoutUser} from '../fb-stubs/user';
 
 const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
   width: kind === 'small' ? 32 : 36,
@@ -217,7 +204,6 @@ export const LeftRail = withTrackingScope(function LeftRail({
           <LeftSidebarToggleButton />
           <ExportEverythingEverywhereAllAtOnceButton />
           <ExtrasMenu />
-          {config.showLogin && <LoginConnectivityButton />}
         </Layout.Container>
       </Layout.Bottom>
     </Layout.Container>
@@ -614,62 +600,3 @@ function SetupDoctorButton() {
     </>
   );
 }
-
-function LoginConnectivityButton() {
-  const dispatch = useDispatch();
-  const loggedIn = useValue(currentUser());
-  const user = useStore((state) => state.user);
-
-  const profileUrl = user?.profile_picture?.uri;
-  const [showLogout, setShowLogout] = useState(false);
-  const onHandleVisibleChange = useCallback(
-    (visible) => setShowLogout(visible),
-    [],
-  );
-
-  const connected = useValue(isConnected());
-
-  if (!connected) {
-    return (
-      <Tooltip
-        placement="left"
-        title="No connection to intern, ensure you are VPN/Lighthouse for plugin updates and other features">
-        <WarningOutlined
-          style={{color: theme.warningColor, fontSize: '20px'}}
-        />
-      </Tooltip>
-    );
-  }
-
-  return loggedIn ? (
-    <Popover
-      content={
-        <Button
-          block
-          style={{backgroundColor: theme.backgroundDefault}}
-          onClick={async () => {
-            onHandleVisibleChange(false);
-            await logoutUser();
-          }}>
-          Log Out
-        </Button>
-      }
-      trigger="click"
-      placement="right"
-      visible={showLogout}
-      overlayStyle={{padding: 0}}
-      onVisibleChange={onHandleVisibleChange}>
-      <Layout.Container padv={theme.inlinePaddingV}>
-        <Avatar size="small" src={profileUrl} />
-      </Layout.Container>
-    </Popover>
-  ) : (
-    <>
-      <LeftRailButton
-        icon={<LoginOutlined />}
-        title="Log In"
-        onClick={() => showLoginDialog()}
-      />
-    </>
-  );
-}

desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx

@@ -7,8 +7,14 @@
  * @format
  */
 
-import {Layout, theme} from 'flipper-plugin';
-import React from 'react';
+import {Layout, styled, theme, useValue} from 'flipper-plugin';
+import React, {cloneElement, useCallback, useState} from 'react';
+import {useStore} from '../utils/useStore';
+import config from '../fb-stubs/config';
+import {isConnected, currentUser, logoutUser} from '../fb-stubs/user';
+import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet';
+import {Avatar, Badge, Button, Popover, Tooltip} from 'antd';
+import {LoginOutlined, WarningOutlined} from '@ant-design/icons';
 
 export function Navbar() {
   return (
@@ -34,7 +40,135 @@ export function Navbar() {
         <button>Doctor</button>
         <button>Help</button>
         <button>More</button>
+        {config.showLogin && <LoginConnectivityButton />}
       </Layout.Horizontal>
     </Layout.Horizontal>
   );
 }
+
+function LoginConnectivityButton() {
+  const loggedIn = useValue(currentUser());
+  const user = useStore((state) => state.user);
+
+  const profileUrl = user?.profile_picture?.uri;
+  const [showLogout, setShowLogout] = useState(false);
+  const onHandleVisibleChange = useCallback(
+    (visible) => setShowLogout(visible),
+    [],
+  );
+
+  const connected = useValue(isConnected());
+
+  if (!connected) {
+    return (
+      <Tooltip
+        placement="left"
+        title="No connection to intern, ensure you are VPN/Lighthouse for plugin updates and other features">
+        <WarningOutlined
+          style={{color: theme.warningColor, fontSize: '20px'}}
+        />
+      </Tooltip>
+    );
+  }
+
+  return loggedIn ? (
+    <Popover
+      content={
+        <Button
+          block
+          style={{backgroundColor: theme.backgroundDefault}}
+          onClick={async () => {
+            onHandleVisibleChange(false);
+            await logoutUser();
+          }}>
+          Log Out
+        </Button>
+      }
+      trigger="click"
+      placement="bottom"
+      visible={showLogout}
+      overlayStyle={{padding: 0}}
+      onVisibleChange={onHandleVisibleChange}>
+      <Layout.Container padv={theme.inlinePaddingV}>
+        <Avatar size={40} src={profileUrl} />
+      </Layout.Container>
+    </Popover>
+  ) : (
+    <>
+      <LeftRailButton
+        icon={<LoginOutlined />}
+        title="Log In"
+        onClick={() => showLoginDialog()}
+      />
+    </>
+  );
+}
+
+const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
+  width: kind === 'small' ? 32 : 36,
+  height: kind === 'small' ? 32 : 36,
+  border: 'none',
+  boxShadow: 'none',
+}));
+LeftRailButtonElem.displayName = 'LeftRailButtonElem';
+
+export function LeftRailButton({
+  icon,
+  small,
+  selected,
+  toggled,
+  count,
+  title,
+  onClick,
+  disabled,
+}: {
+  icon?: React.ReactElement;
+  small?: boolean;
+  toggled?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  count?: number | true;
+  title?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}) {
+  const iconElement =
+    icon && cloneElement(icon, {style: {fontSize: small ? 16 : 24}});
+
+  let res = (
+    <LeftRailButtonElem
+      title={title}
+      kind={small ? 'small' : undefined}
+      type={selected ? 'primary' : 'ghost'}
+      icon={iconElement}
+      onClick={onClick}
+      disabled={disabled}
+      style={{
+        color: toggled ? theme.primaryColor : undefined,
+        background: toggled ? theme.backgroundWash : undefined,
+      }}
+    />
+  );
+
+  if (count !== undefined) {
+    res =
+      count === true ? (
+        <Badge dot offset={[-8, 8]} {...{onClick}}>
+          {res}
+        </Badge>
+      ) : (
+        <Badge count={count} offset={[-6, 5]} {...{onClick}}>
+          {res}
+        </Badge>
+      );
+  }
+
+  if (title) {
+    res = (
+      <Tooltip title={title} placement="right">
+        {res}
+      </Tooltip>
+    );
+  }
+
+  return res;
+}