Turn update message into notification

Summary: Based on discussion in D25805957 (ffeb47ed75), instead of showing a warning icon in the siderail, Flipper now shows a notification if there is a version / launcher issue or an update available

Reviewed By: nikoant

Differential Revision: D25924534

fbshipit-source-id: 625e46e41d9aa58f49e8bb77e5c513de0ddfbd6a

desktop/app/src/chrome/UpdateIndicator.tsx

@@ -7,123 +7,112 @@
  * @format
  */
 
-import {LauncherMsg} from '../reducers/application';
+import {notification, Typography} from 'antd';
-import {FlexRow, Glyph, styled} from '../ui';
-import {Tooltip} from 'antd';
 import isProduction from '../utils/isProduction';
 import {
   checkForUpdate,
   VersionCheckResult,
 } from '../utils/publicVersionChecker';
 import {reportPlatformFailures} from '../utils/metrics';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
-import {shell} from 'electron';
 import config from '../utils/processConfig';
 import fbConfig from '../fb-stubs/config';
 import {useStore} from '../utils/useStore';
 import {remote} from 'electron';
-import {theme} from 'flipper-plugin';
+
 const version = remote.app.getVersion();
 
-const Container = styled(FlexRow)({
+export default function UpdateIndicator() {
-  alignItems: 'center',
+  const [versionCheckResult, setVersionCheckResult] = useState<
-});
+    VersionCheckResult
+  >({kind: 'up-to-date'});
+  const launcherMsg = useStore((state) => state.application.launcherMsg);
 
-type Props = {
+  // Effect to show notification if details change
-  launcherMsg: LauncherMsg;
+  useEffect(() => {
-  version: string;
+    switch (versionCheckResult.kind) {
-};
+      case 'up-to-date':
-
+        break;
-type State = {
+      case 'update-available':
-  versionCheckResult: VersionCheckResult;
+        console.log(
-};
+          `Flipper update available: ${versionCheckResult.version} at ${versionCheckResult.url}`,
-
+        );
-function getSeverityColor(severity: 'warning' | 'error'): string {
+        notification.info({
-  switch (severity) {
+          placement: 'bottomLeft',
-    case 'warning':
+          key: 'flipperupdatecheck',
-      return theme.warningColor;
+          message: 'Update available',
-    case 'error':
+          description: (
-      return theme.errorColor;
+            <>
-  }
+              Flipper version {versionCheckResult.version} is now available.
-}
+              {fbConfig.isFBBuild ? (
-
+                <>
-class UpdateIndicatorImpl extends React.PureComponent<Props, State> {
+                  {' '}
-  state = {
+                  Pull <code>~/fbsource</code> and/or restart Flipper to update
-    versionCheckResult: {kind: 'up-to-date'} as VersionCheckResult,
+                  to the latest version.
-  };
+                </>
-
+              ) : (
-  renderMessage(): React.ReactNode {
+                <>
-    if (this.props.launcherMsg.message.length == 0) {
+                  {' '}
-      return null;
+                  Click to{' '}
+                  <Typography.Link href={versionCheckResult.url}>
+                    download
+                  </Typography.Link>
+                  .
+                </>
+              )}
+            </>
+          ),
+          duration: null, // no auto close
+        });
+        break;
+      case 'error':
+        console.warn(
+          `Failed to check for Flipper update: ${versionCheckResult.msg}`,
+        );
+        break;
     }
+  }, [versionCheckResult]);
 
-    return (
+  // trigger the update check, unless there is a launcher message already
-      <Container>
+  useEffect(() => {
-        <span title={this.props.launcherMsg.message}>
+    if (launcherMsg && launcherMsg.message) {
-          <Glyph
+      if (launcherMsg.severity === 'error') {
-            color={getSeverityColor(this.props.launcherMsg.severity)}
+        notification.error({
-            name="caution-triangle"
+          placement: 'bottomLeft',
-          />
+          key: 'launchermsg',
-        </span>
+          message: 'Launch problem',
-      </Container>
+          description: launcherMsg.message,
-    );
+          duration: null,
-  }
+        });
-
+      } else {
-  renderUpdateIndicator(): React.ReactNode {
+        notification.warning({
-    const result = this.state.versionCheckResult;
+          placement: 'bottomLeft',
-    if (result.kind !== 'update-available') {
+          key: 'launchermsg',
-      return null;
+          message: 'Flipper version warning',
-    }
+          description: launcherMsg.message,
-
+          duration: null,
-    const container = (
+        });
-      <Container>
+      }
-        <span
+    } else if (
-          onClick={() => shell.openExternal(result.url)}
+      isProduction() &&
-          role="button"
+      (config().launcherEnabled || !fbConfig.isFBBuild)
-          tabIndex={0}>
+    ) {
-          <Glyph
-            color={getSeverityColor(this.props.launcherMsg.severity)}
-            name="caution-triangle"
-          />
-        </span>
-      </Container>
-    );
-    return (
-      <Tooltip
-        placement="right"
-        title={`Update to Flipper v${result.version} available. Click to download.`}
-        children={container}
-      />
-    );
-  }
-
-  componentDidMount() {
-    if (isProduction() && (config().launcherEnabled || !fbConfig.isFBBuild)) {
       reportPlatformFailures(
-        checkForUpdate(this.props.version).then((res) => {
+        checkForUpdate(version).then((res) => {
           if (res.kind === 'error') {
-            console.warn('Version check failure: ', res.msg);
+            console.warn('Version check failure: ', res);
-            throw new Error(res.msg);
+            setVersionCheckResult({
+              kind: 'error',
+              msg: res.msg,
+            });
+          } else {
+            setVersionCheckResult(res);
           }
-
-          this.setState({versionCheckResult: res});
         }),
         'publicVersionCheck',
       );
     }
-  }
+  }, [launcherMsg]);
 
-  render(): React.ReactNode {
+  return null;
-    return (
-      <>
-        {this.renderMessage()}
-        {this.renderUpdateIndicator()}
-      </>
-    );
-  }
-}
-
-export default function UpdateIndicator() {
-  const launcherMsg = useStore((state) => state.application.launcherMsg);
-  return <UpdateIndicatorImpl launcherMsg={launcherMsg} version={version} />;
 }