diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx index d448170c2..b6c8479e0 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx @@ -28,6 +28,7 @@ import { MedicineBoxOutlined, RocketOutlined, BugOutlined, + WarningOutlined, } from '@ant-design/icons'; import {SidebarLeft, SidebarRight} from './SandyIcons'; import {useDispatch, useStore} from '../utils/useStore'; @@ -78,7 +79,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'; +import {isConnected, isLoggedIn} from '../fb-stubs/user'; const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({ width: kind === 'small' ? 32 : 36, @@ -205,7 +206,7 @@ export const LeftRail = withTrackingScope(function LeftRail({ - {config.showLogin && } + {config.showLogin && } @@ -587,7 +588,7 @@ function SetupDoctorButton() { ); } -function LoginButton() { +function LoginConnectivityButton() { const dispatch = useDispatch(); const loggedIn = useValue(isLoggedIn()); const user = useStore((state) => state.user); @@ -599,6 +600,20 @@ function LoginButton() { [], ); + const connected = useValue(isConnected()); + + if (!connected) { + return ( + + + + ); + } + return loggedIn ? (