Add deprecation notice notification

Summary: Add deprecation notice device icon and notification

Reviewed By: lblasa

Differential Revision: D34582475

fbshipit-source-id: 90fde15caf1925b42f50fbfc77dece88c82833cf

desktop/flipper-common/src/server-types.tsx

@@ -80,6 +80,7 @@ export type ClientQuery = {
   readonly device: string;
   readonly device_id: string;
   readonly sdk_version?: number;
+  rsocket?: boolean;
 };
 
 export type ClientDescription = {
@@ -105,7 +106,7 @@ export type FlipperServerEvents = {
   'server-state': {state: FlipperServerState; error?: string};
   'server-error': any;
   notification: {
-    type: 'error';
+    type: 'success' | 'info' | 'error' | 'warning';
     title: string;
     description: string;
   };

desktop/flipper-server-core/src/comms/ServerAdapter.tsx

@@ -107,6 +107,8 @@ export interface ServerEventsListener {
   onClientMessage(clientId: string, payload: string): void;
 
   onClientSetupError(clientQuery: ClientQuery, error: any): void;
+
+  onDeprecationNotice: (message: string) => void;
 }
 
 /**

desktop/flipper-server-core/src/comms/ServerController.tsx

@@ -16,6 +16,7 @@ import {
   Logger,
   UninitializedClient,
   reportPlatformFailures,
+  FlipperServerEvents,
 } from 'flipper-common';
 import CertificateProvider from '../utils/CertificateProvider';
 import {ClientConnection, ConnectionStatus} from './ClientConnection';
@@ -169,8 +170,17 @@ export class ServerController
     clientConnection: ClientConnection,
     downgrade?: boolean,
   ): Promise<ClientDescription> {
-    const {app, os, device, device_id, sdk_version, csr, csr_path, medium} =
-      clientQuery;
+    const {
+      app,
+      os,
+      device,
+      device_id,
+      sdk_version,
+      csr,
+      csr_path,
+      medium,
+      rsocket,
+    } = clientQuery;
     const transformedMedium = transformCertificateExchangeMediumToType(medium);
     console.info(
       `[conn] Connection established: ${app} on ${device_id}. Medium ${medium}. CSR: ${csr_path}`,
@@ -185,6 +195,7 @@ export class ServerController
         device_id,
         sdk_version,
         medium: transformedMedium,
+        rsocket,
       },
       {csr, csr_path},
       downgrade,
@@ -513,6 +524,15 @@ export class ServerController
       this.flipperServer.pluginManager.stopAllServerAddOns(id);
     }
   }
+
+  onDeprecationNotice(message: string) {
+    const notification: FlipperServerEvents['notification'] = {
+      type: 'warning',
+      title: 'Deprecation notice',
+      description: message,
+    };
+    this.flipperServer.emit('notification', notification);
+  }
 }
 
 class ConnectionTracker {

desktop/flipper-server-core/src/comms/ServerRSocket.tsx

@@ -105,9 +105,10 @@ class ServerRSocket extends ServerAdapter {
     }
 
     const clientQuery: SecureClientQuery = JSON.parse(payload.data);
+    clientQuery.rsocket = true;
     // TODO: Add a migration guide
-    console.warn(
-      `[conn] RSockets are being deprecated at Flipper. Please, migrate to WebSockets. App: ${clientQuery.app}. Device: ${clientQuery.device}.`,
+    this.listener.onDeprecationNotice(
+      `[conn] RSockets are being deprecated at Flipper. Please, use the latest Flipper client in your app to migrate to WebSockets. App: ${clientQuery.app}. Device: ${clientQuery.device}.`,
     );
 
     this.listener.onSecureConnectionAttempt(clientQuery);

desktop/flipper-server-core/src/comms/__tests__/utils.tsx

@@ -63,4 +63,5 @@ export const createMockSEListener = (): ServerEventsListener => ({
   onError: jest.fn(),
   onClientMessage: jest.fn(),
   onClientSetupError: jest.fn(),
+  onDeprecationNotice: jest.fn(),
 });

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,

desktop/static/icons.json

@@ -615,5 +615,8 @@
   ],
   "app-cms": [
     16
+  ],
+  "caution-triangle-outline": [
+    24
   ]
 }