diff --git a/desktop/flipper-common/src/server-types.tsx b/desktop/flipper-common/src/server-types.tsx index 2343b1c1c..9d81ee093 100644 --- a/desktop/flipper-common/src/server-types.tsx +++ b/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; }; diff --git a/desktop/flipper-server-core/src/comms/ServerAdapter.tsx b/desktop/flipper-server-core/src/comms/ServerAdapter.tsx index 2192d5a75..bcecdb99d 100644 --- a/desktop/flipper-server-core/src/comms/ServerAdapter.tsx +++ b/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; } /** diff --git a/desktop/flipper-server-core/src/comms/ServerController.tsx b/desktop/flipper-server-core/src/comms/ServerController.tsx index b630f98a0..a88a84829 100644 --- a/desktop/flipper-server-core/src/comms/ServerController.tsx +++ b/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 { - 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 { diff --git a/desktop/flipper-server-core/src/comms/ServerRSocket.tsx b/desktop/flipper-server-core/src/comms/ServerRSocket.tsx index 72702209b..221f062bc 100644 --- a/desktop/flipper-server-core/src/comms/ServerRSocket.tsx +++ b/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); diff --git a/desktop/flipper-server-core/src/comms/__tests__/utils.tsx b/desktop/flipper-server-core/src/comms/__tests__/utils.tsx index 864bab419..709fdb7ba 100644 --- a/desktop/flipper-server-core/src/comms/__tests__/utils.tsx +++ b/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(), }); diff --git a/desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx b/desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx index eaa99649c..45f8848c3 100644 --- a/desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx +++ b/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, diff --git a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppSelector.tsx index 6dd085bd2..388b9ad79 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppSelector.tsx +++ b/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() { }> - + {client?.query.rsocket ? ( + + ) : ( + + )} {client?.query.app ?? ''} {selectedDevice?.title || 'Available devices'} @@ -181,6 +188,21 @@ function AppIcon({ ); } +function DeprecationIcon() { + return ( + + + + + + ); +} + const AppIconContainer = styled.div({ borderRadius: 4, width: 36, diff --git a/desktop/static/icons.json b/desktop/static/icons.json index 7c6c324b2..33f6a919d 100644 --- a/desktop/static/icons.json +++ b/desktop/static/icons.json @@ -615,5 +615,8 @@ ], "app-cms": [ 16 + ], + "caution-triangle-outline": [ + 24 ] } \ No newline at end of file