Add x-platform update indicator

Summary: Use the new multi-platform update endpoint to indicate when new updates are available for Linux or Windows.

Reviewed By: danielbuechele

Differential Revision: D16939899

fbshipit-source-id: 11c1dc0d4fd19362a1163c613a7b7116c5edf996

src/chrome/UpdateIndicator.tsx

@@ -7,7 +7,15 @@
 
 import {LauncherMsg} from '../reducers/application';
 import {colors, FlexRow, Glyph, styled} from 'flipper';
+import Tooltip from '../ui/components/Tooltip';
+import isProduction from '../utils/isProduction';
+import {
+  checkForUpdate,
+  VersionCheckResult,
+} from '../utils/publicVersionChecker';
+import {reportPlatformFailures} from '../utils/metrics';
 import React from 'react';
+import {shell} from 'electron';
 
 const Container = styled(FlexRow)({
   alignItems: 'center',
@@ -16,6 +24,11 @@ const Container = styled(FlexRow)({
 
 type Props = {
   launcherMsg: LauncherMsg;
+  version: string;
+};
+
+type State = {
+  versionCheckResult: VersionCheckResult;
 };
 
 function getSeverityColor(severity: 'warning' | 'error'): string {
@@ -27,8 +40,12 @@ function getSeverityColor(severity: 'warning' | 'error'): string {
   }
 }
 
-export default class UpdateIndicator extends React.Component<Props> {
-  render() {
+export default class UpdateIndicator extends React.PureComponent<Props, State> {
+  state = {
+    versionCheckResult: {kind: 'up-to-date'} as VersionCheckResult,
+  };
+
+  renderMessage(): React.ReactNode {
     if (this.props.launcherMsg.message.length == 0) {
       return null;
     }
@@ -44,4 +61,56 @@ export default class UpdateIndicator extends React.Component<Props> {
       </Container>
     );
   }
+
+  renderUpdateIndicator(): React.ReactNode {
+    const result = this.state.versionCheckResult;
+    if (result.kind !== 'update-available') {
+      return null;
+    }
+
+    const container = (
+      <Container>
+        <span onClick={() => shell.openExternal(result.url)}>
+          <Glyph
+            color={getSeverityColor(this.props.launcherMsg.severity)}
+            name="caution-triangle"
+          />
+        </span>
+      </Container>
+    );
+    return (
+      <Tooltip
+        options={{position: 'toLeft'}}
+        title={`Update to Flipper v${
+          result.version
+        } available. Click to download.`}
+        children={container}
+      />
+    );
+  }
+
+  componentDidMount() {
+    if (isProduction()) {
+      reportPlatformFailures(
+        checkForUpdate(this.props.version).then(res => {
+          if (res.kind === 'error') {
+            console.warn('Version check failure: ', res.msg);
+            throw new Error(res.msg);
+          }
+
+          this.setState({versionCheckResult: res});
+        }),
+        'publicVersionCheck',
+      );
+    }
+  }
+
+  render(): React.ReactNode {
+    return (
+      <>
+        {this.renderMessage()}
+        {this.renderUpdateIndicator()}
+      </>
+    );
+  }
 }