From 83ecb4e25612b060170a37401fe1a5d604d97586 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Tue, 25 Jul 2023 07:28:03 -0700
Subject: [PATCH] Rework user profile button

Summary:
1. fixed state when no connectivity by using a disabled button, now its styled correctly, (before it was tiny)
2. No need to show the user profile button as its own icon since log in is forced by flipper, so move log out into the more menu

Reviewed By: mweststrate

Differential Revision: D47720740

fbshipit-source-id: c7531a2a2897627c2627080179fd77adfed5c30c
---
 .../src/sandy-chrome/Navbar.tsx               | 77 ++++++-------------
 1 file changed, 23 insertions(+), 54 deletions(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
index 988f98d44..b8a2af494 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
@@ -21,14 +21,12 @@ import {getRenderHostInstance} from 'flipper-frontend-core';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useDispatch, 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, Menu, Modal, Popover, Tooltip} from 'antd';
+import {currentUser, isConnected, logoutUser} from '../fb-stubs/user';
+import {Badge, Button, Menu, Modal} from 'antd';
 import {
   BellOutlined,
   BugOutlined,
   LayoutOutlined,
-  LoginOutlined,
   MobileOutlined,
   RocketOutlined,
   SettingOutlined,
@@ -110,6 +108,8 @@ export const Navbar = withTrackingScope(function Navbar({
         )}
       </Layout.Horizontal>
       <Layout.Horizontal style={{gap: 6, alignItems: 'center'}}>
+        <NoConnectivityWarning />
+
         <NotificationButton
           toplevelSelection={toplevelSelection}
           setToplevelSelection={setToplevelSelection}
@@ -117,7 +117,7 @@ export const Navbar = withTrackingScope(function Navbar({
         <TroubleshootMenu setToplevelSelection={setToplevelSelection} />
         <ExtrasMenu />
         <RightSidebarToggleButton />
-        {config.showLogin && <LoginConnectivityButton />}
+
         <UpdateIndicator />
       </Layout.Horizontal>
     </Layout.Horizontal>
@@ -336,10 +336,12 @@ export function NavbarButton({
   disabled = false,
   flipIcon = false,
   zIndex,
+  colorOverride,
 }: {
   icon: (props: any) => any;
   label: string;
   // TODO remove optional
+  colorOverride?: string;
   zIndex?: number;
   onClick?: () => void;
   toggled?: boolean;
@@ -367,7 +369,7 @@ export function NavbarButton({
       disabled={disabled}>
       <Icon
         style={{
-          color,
+          color: colorOverride || color,
           fontSize: 24,
           transform: flipIcon ? 'scaleX(-1)' : undefined,
         }}
@@ -376,7 +378,7 @@ export function NavbarButton({
         style={{
           margin: 0,
           fontSize: theme.fontSize.small,
-          color: theme.textColorSecondary,
+          color: colorOverride || theme.textColorSecondary,
         }}>
         {label}
       </span>
@@ -401,60 +403,21 @@ export function NavbarButton({
   }
 }
 
-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),
-    [],
-  );
-
+function NoConnectivityWarning() {
   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>
+      <NavbarButton
+        disabled
+        icon={WarningOutlined}
+        colorOverride={theme.errorColor}
+        label="No connectivity"
+      />
     );
   }
 
-  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>
-  ) : (
-    <NavbarButton
-      icon={LoginOutlined}
-      label="Log In"
-      onClick={showLoginDialog}
-    />
-  );
+  return null;
 }
 
 const menu = css`
@@ -593,6 +556,7 @@ function ExtrasMenu() {
   const settings = useStore((state) => state.settingsState);
   const {showWelcomeAtStartup} = settings;
   const [welcomeVisible, setWelcomeVisible] = useState(showWelcomeAtStartup);
+  const loggedIn = useValue(currentUser());
 
   return (
     <>
@@ -655,6 +619,11 @@ function ExtrasMenu() {
             <Menu.Item key="help" onClick={() => setWelcomeVisible(true)}>
               Help
             </Menu.Item>
+            {config.showLogin && loggedIn && (
+              <Menu.Item key="logout" onClick={async () => await logoutUser()}>
+                Logout
+              </Menu.Item>
+            )}
           </Menu.SubMenu>
         </Menu>
       </NUX>