From ad4c2092a5ecc75101d317401b41a9fb8de508a4 Mon Sep 17 00:00:00 2001
From: Pascal Hartig <realpassy@fb.com>
Date: Fri, 5 Apr 2019 06:44:40 -0700
Subject: [PATCH] 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                    | 10 ++++-
 src/chrome/UpdateIndicator.js             | 48 +++++++++++++++++++++++
 src/chrome/__tests__/TitleBar.electron.js |  1 +
 src/reducers/application.js               | 25 +++++++++++-
 src/utils/launcher.js                     |  8 ++--
 5 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 src/chrome/UpdateIndicator.js

diff --git a/src/chrome/TitleBar.js b/src/chrome/TitleBar.js
index 12d55a63f..cd9cdd03c 100644
--- a/src/chrome/TitleBar.js
+++ b/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,
diff --git a/src/chrome/UpdateIndicator.js b/src/chrome/UpdateIndicator.js
new file mode 100644
index 000000000..4ac404e2c
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/chrome/__tests__/TitleBar.electron.js b/src/chrome/__tests__/TitleBar.electron.js
index 32badda47..c432cf568 100644
--- a/src/chrome/__tests__/TitleBar.electron.js
+++ b/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>,
   );
diff --git a/src/reducers/application.js b/src/reducers/application.js
index 3df49e1e2..f1de2e237 100644
--- a/src/reducers/application.js
+++ b/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;
   }
diff --git a/src/utils/launcher.js b/src/utils/launcher.js
index 4943e0e48..7031d95ee 100644
--- a/src/utils/launcher.js
+++ b/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,
+      },
     });
   }
 }