Add deprecation notice notification

Summary: Add deprecation notice device icon and notification

Reviewed By: lblasa

Differential Revision: D34582475

fbshipit-source-id: 90fde15caf1925b42f50fbfc77dece88c82833cf

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

@@ -31,7 +31,7 @@ export function connectFlipperServerToStore(
   logger: Logger,
 ) {
   server.on('notification', ({type, title, description}) => {
-    const text = `[$type] ${title}: ${description}`;
+    const text = `[${type}] ${title}: ${description}`;
     console.warn(text);
     notification.open({
       message: title,

desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppSelector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {Button, Dropdown, Menu, Radio, Typography} from 'antd';
+import {Button, Dropdown, Menu, Radio, Tooltip, Typography} from 'antd';
 import {
   AppleOutlined,
   AndroidOutlined,
@@ -102,7 +102,14 @@ export function AppSelector() {
             }>
             <AppInspectButton title="Select the device / app to inspect">
               <Layout.Horizontal gap center>
-                <AppIcon appname={client?.query.app} device={selectedDevice} />
+                {client?.query.rsocket ? (
+                  <DeprecationIcon />
+                ) : (
+                  <AppIcon
+                    appname={client?.query.app}
+                    device={selectedDevice}
+                  />
+                )}
                 <Layout.Container grow shrink>
                   <Text strong>{client?.query.app ?? ''}</Text>
                   <Text>{selectedDevice?.title || 'Available devices'}</Text>
@@ -181,6 +188,21 @@ function AppIcon({
   );
 }
 
+function DeprecationIcon() {
+  return (
+    <Tooltip title="RSockets are being deprecated at Flipper. Please, use the latest Flipper client in your app to migrate to WebSockets.">
+      <AppIconContainer style={{background: theme.warningColor}}>
+        <Glyph
+          name="caution-triangle"
+          size={24}
+          variant="outline"
+          color="white"
+        />
+      </AppIconContainer>
+    </Tooltip>
+  );
+}
+
 const AppIconContainer = styled.div({
   borderRadius: 4,
   width: 36,