Add state to login button when disconnected

Summary: Indicate intern connection state via an icon, now that we are polling when offline this icon automatically goes away one we reconnect

Reviewed By: aigoncharov

Differential Revision: D44502479

fbshipit-source-id: fb411940f1e4cad50539fe08df6d6194b176404a

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({
           <LeftSidebarToggleButton />
           <ExportEverythingEverywhereAllAtOnceButton />
           <ExtrasMenu />
-          {config.showLogin && <LoginButton />}
+          {config.showLogin && <LoginConnectivityButton />}
         </Layout.Container>
       </Layout.Bottom>
     </Layout.Container>
@@ -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 (
+      <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={