Left rail log in icon decided by atom, cache user profile

Summary:
Previously the left rail state was decided by prescense of user profile but we are moving to logged in state being based on the atom.

As a result we need to cache the user profile so we have something to display when user not on vpn on startup

Reviewed By: aigoncharov

Differential Revision: D44502477

fbshipit-source-id: 11462d24c773d6d364e844b4f606e124e5278348

desktop/flipper-ui-core/src/deprecated-exports.tsx

@@ -20,7 +20,8 @@ export {
   internGraphPOSTAPIRequest,
   graphQLQuery,
   isLoggedIn,
-  getUser,
+  fetchUser,
+  getCachedUser,
 } from './fb-stubs/user';
 export {FlipperPlugin, FlipperDevicePlugin, BaseAction} from './plugin';
 export {PluginClient, Props, KeyboardActions} from './plugin';

desktop/flipper-ui-core/src/dispatcher/handleOpenPluginDeeplink.tsx

@@ -9,8 +9,12 @@
 
 import React from 'react';
 import {Dialog, getFlipperLib} from 'flipper-plugin';
-import {isTest, UserNotSignedInError} from 'flipper-common';
-import {getUser} from '../fb-stubs/user';
+import {
+  isTest,
+  UserNotSignedInError,
+  UserUnauthorizedError,
+} from 'flipper-common';
+import {fetchUser} from '../fb-stubs/user';
 import {State, Store} from '../reducers/index';
 import {checkForUpdate} from '../fb-stubs/checkForUpdate';
 import {getAppVersion} from '../utils/info';
@@ -226,7 +230,7 @@ async function verifyLighthouseAndUserLoggedIn(
     });
 
     try {
-      const user = await getUser();
+      const user = await fetchUser();
       spinnerDialog.close();
       // User is logged in
       if (user) {
@@ -237,7 +241,10 @@ async function verifyLighthouseAndUserLoggedIn(
       }
     } catch (e) {
       spinnerDialog.close();
-      if (e instanceof UserNotSignedInError) {
+      if (
+        e instanceof UserNotSignedInError ||
+        e instanceof UserUnauthorizedError
+      ) {
         // connection, but user is not logged in
         return await showPleaseLoginDialog(store, title);
       }

desktop/flipper-ui-core/src/fb-stubs/user.tsx

@@ -10,10 +10,14 @@
 import {GraphFileUpload, User} from 'flipper-common';
 import {Atom, createState} from 'flipper-plugin';
 
-export async function getUser(): Promise<User | null> {
+export async function fetchUser(): Promise<User | null> {
   throw new Error('Feature not implemented');
 }
 
+export function getCachedUser(): User | null {
+  return null;
+}
+
 export async function internGraphPOSTAPIRequest(
   _endpoint: string,
   _formFields: {

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

@@ -78,6 +78,7 @@ import {css} from '@emotion/css';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import {StyleGuide} from './StyleGuide';
 import {useEffect} from 'react';
+import {isLoggedIn} from '../fb-stubs/user';
 
 const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
   width: kind === 'small' ? 32 : 36,
@@ -588,8 +589,9 @@ function SetupDoctorButton() {
 
 function LoginButton() {
   const dispatch = useDispatch();
+  const loggedIn = useValue(isLoggedIn());
   const user = useStore((state) => state.user);
-  const login = (user?.id ?? null) !== null;
+
   const profileUrl = user?.profile_picture?.uri;
   const [showLogout, setShowLogout] = useState(false);
   const onHandleVisibleChange = useCallback(
@@ -597,7 +599,7 @@ function LoginButton() {
     [],
   );
 
-  return login ? (
+  return loggedIn ? (
     <Popover
       content={
         <Button