Replace launcher error bar with titlebar indicator

Summary:
When starting Flipper with `--launcher-msg`, it currently shows a red error bar at the bottom. That's not ideal for various reasons including it looking kinda bad and it only supporting a single error (the last one set).

This instead adds an action that shows an indicator next to the version at the top as we had it before with the previous system.

Reviewed By: danielbuechele

Differential Revision: D14778859

fbshipit-source-id: 28591de6262e090a4e59a7f5a8cd86d7b3abf8fe

src/chrome/TitleBar.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {ActiveSheet} from '../reducers/application';
+import type {ActiveSheet, LauncherMsg} from '../reducers/application';
 
 import {
   colors,
@@ -28,6 +28,7 @@ import {
 import DevicesButton from './DevicesButton.js';
 import ScreenCaptureButtons from './ScreenCaptureButtons.js';
 import AutoUpdateVersion from './AutoUpdateVersion.js';
+import UpdateIndicator from './UpdateIndicator.js';
 import config from '../fb-stubs/config.js';
 import {isAutoUpdaterEnabled} from '../utils/argvUtils.js';
 import isProduction from '../utils/isProduction.js';
@@ -66,6 +67,7 @@ type Props = {|
   toggleLeftSidebarVisible: (visible?: boolean) => void,
   toggleRightSidebarVisible: (visible?: boolean) => void,
   setActiveSheet: (sheet: ActiveSheet) => void,
+  launcherMsg: LauncherMsg,
 |};
 
 const VersionText = styled(Text)({
@@ -100,7 +102,9 @@ class TitleBar extends Component<Props> {
 
         {isAutoUpdaterEnabled() ? (
           <AutoUpdateVersion version={this.props.version} />
-        ) : null}
+        ) : (
+          <UpdateIndicator launcherMsg={this.props.launcherMsg} />
+        )}
         {config.bugReportButtonVisible && (
           <Button
             compact={true}
@@ -141,6 +145,7 @@ export default connect<Props, OwnProps, _, _, _, _>(
       rightSidebarVisible,
       rightSidebarAvailable,
       downloadingImportData,
+      launcherMsg,
     },
   }) => ({
     windowIsFocused,
@@ -148,6 +153,7 @@ export default connect<Props, OwnProps, _, _, _, _>(
     rightSidebarVisible,
     rightSidebarAvailable,
     downloadingImportData,
+    launcherMsg,
   }),
   {
     setActiveSheet,

src/chrome/UpdateIndicator.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import type {LauncherMsg} from '../reducers/application.js';
+import {colors, Component, FlexRow, Glyph, styled} from 'flipper';
+
+const Container = styled(FlexRow)({
+  alignItems: 'center',
+  marginLeft: 4,
+});
+
+type Props = {
+  launcherMsg: LauncherMsg,
+};
+
+function getSeverityColor(severity: 'warning' | 'error'): string {
+  switch (severity) {
+    case 'warning':
+      return colors.light30;
+    case 'error':
+      return colors.cherry;
+  }
+  // Flow isn't smart enough to see that the above is already exhaustive.
+  return '';
+}
+
+export default class UpdateIndicator extends Component<Props, void> {
+  render() {
+    if (this.props.launcherMsg.message.length == 0) {
+      return null;
+    }
+
+    return (
+      <Container>
+        <span title={this.props.launcherMsg.message}>
+          <Glyph
+            color={getSeverityColor(this.props.launcherMsg.severity)}
+            name="caution-triangle"
+          />
+        </span>
+      </Container>
+    );
+  }
+}

src/chrome/__tests__/TitleBar.electron.js

@@ -26,6 +26,7 @@ test('TitleBar is rendered', () => {
         toggleRightSidebarVisible={() => {}}
         setActiveSheet={_sheet => {}}
         version="1.0.0"
+        launcherMsg={{message: 'Hello world', severity: 'warning'}}
       />
     </Provider>,
   );

src/reducers/application.js

@@ -26,6 +26,11 @@ export type ActiveSheet =
   | typeof ACTIVE_SHEET_SHARE_DATA_IN_FILE
   | null;
 
+export type LauncherMsg = {
+  message: string,
+  severity: 'warning' | 'error',
+};
+
 export type State = {
   leftSidebarVisible: boolean,
   rightSidebarVisible: boolean,
@@ -39,6 +44,7 @@ export type State = {
     secure: number,
   },
   downloadingImportData: boolean,
+  launcherMsg: LauncherMsg,
 };
 
 type BooleanActionType =
@@ -67,6 +73,13 @@ export type Action =
         insecure: number,
         secure: number,
       },
+    }
+  | {
+      type: 'LAUNCHER_MSG',
+      payload: {
+        severity: 'warning' | 'error',
+        message: string,
+      },
     };
 
 const initialState: () => State = () => ({
@@ -82,6 +95,10 @@ const initialState: () => State = () => ({
     secure: 8088,
   },
   downloadingImportData: false,
+  launcherMsg: {
+    severity: 'warning',
+    message: '',
+  },
 });
 
 export default function reducer(state: State, action: Action): State {
@@ -118,12 +135,16 @@ export default function reducer(state: State, action: Action): State {
       activeSheet: ACTIVE_SHEET_SHARE_DATA_IN_FILE,
       exportFile: action.payload.file,
     };
-  }
-  if (action.type === 'SET_SERVER_PORTS') {
+  } else if (action.type === 'SET_SERVER_PORTS') {
     return {
       ...state,
       serverPorts: action.payload,
     };
+  } else if (action.type === 'LAUNCHER_MSG') {
+    return {
+      ...state,
+      launcherMsg: action.payload,
+    };
   } else {
     return state;
   }

src/utils/launcher.js

@@ -9,11 +9,13 @@ import type {ProcessConfig} from './processConfig.js';
 import type {Store} from '../reducers/index.js';
 
 export function initLauncherHooks(config: ProcessConfig, store: Store) {
-  // TODO(T40488739): This must be replaced with a proper display before launching this.
   if (config.launcherMsg) {
     store.dispatch({
-      type: 'SERVER_ERROR',
-      payload: config.launcherMsg,
+      type: 'LAUNCHER_MSG',
+      payload: {
+        severity: 'warning',
+        message: config.launcherMsg,
+      },
     });
   }
 }