Always show Flipper version

Summary:
This moves the version display from the updater component
to the titlebar itself, so it'll be shown even in dev mode.

This is already useful when using it on platforms like Linux
where the updater isn't supported, but will also help when
moving to the launcher model.

Reviewed By: jknoxville

Differential Revision: D13819139

fbshipit-source-id: cbc127b8ccdf932f823bc1f40319f296516dfc31

src/App.js

@@ -15,7 +15,7 @@ import BugReporterDialog from './chrome/BugReporterDialog.js';
 import ErrorBar from './chrome/ErrorBar.js';
 import PluginContainer from './PluginContainer.js';
 import Sheet from './chrome/Sheet.js';
-import {ipcRenderer} from 'electron';
+import {ipcRenderer, remote} from 'electron';
 import PluginDebugger from './chrome/PluginDebugger.js';
 import {
   ACTIVE_SHEET_BUG_REPORTER,
@@ -27,6 +27,8 @@ import type BugReporter from './fb-stubs/BugReporter.js';
 import type BaseDevice from './devices/BaseDevice.js';
 import type {ActiveSheet} from './reducers/application.js';
 
+const version = remote.app.getVersion();
+
 type Props = {
   logger: Logger,
   bugReporter: BugReporter,
@@ -71,7 +73,7 @@ export class App extends React.Component<Props> {
   render() {
     return (
       <FlexColumn grow={true}>
-        <TitleBar />
+        <TitleBar version={version} />
         <Sheet>{this.getSheet}</Sheet>
         <FlexRow grow={true}>
           {this.props.leftSidebarVisible && <MainSidebar />}

src/__tests__/__snapshots__/App.electron.js.snap

@@ -58,6 +58,12 @@ exports[`Empty app state matches snapshot 1`] = `
     <div
       className="css-12zzrdt"
     />
+    <span
+      className="css-lli23c"
+    >
+      3.0.0
+      -dev
+    </span>
     <div
       className="css-1cecbfb"
       onClick={[Function]}

src/chrome/AutoUpdateVersion.js

@@ -17,13 +17,6 @@ import {
 import {remote} from 'electron';
 import isProduction from '../utils/isProduction.js';
 import config from '../fb-stubs/config.js';
-const version = remote.app.getVersion();
-
-const VersionText = styled(Text)({
-  color: colors.light50,
-  marginLeft: 4,
-  marginTop: 2,
-});
 
 const Container = styled(FlexRow)({
   alignItems: 'center',
@@ -39,7 +32,11 @@ type State = {
   error?: string,
 };
 
-export default class AutoUpdateVersion extends Component<{}, State> {
+type Props = {
+  version: string,
+};
+
+export default class AutoUpdateVersion extends Component<Props, State> {
   state = {
     updater: 'update-not-available',
   };
@@ -49,7 +46,7 @@ export default class AutoUpdateVersion extends Component<{}, State> {
       // this will fail, if the app is not code signed
       try {
         remote.autoUpdater.setFeedURL({
-          url: `${config.updateServer}?version=${version}`,
+          url: `${config.updateServer}?version=${this.props.version}`,
         });
       } catch (e) {
         console.error(e);
@@ -107,7 +104,6 @@ export default class AutoUpdateVersion extends Component<{}, State> {
             <Glyph color={colors.light30} name="breaking-news" />
           </span>
         )}
-        {isProduction() && <VersionText>{version}</VersionText>}
       </Container>
     );
   }

src/chrome/TitleBar.js

@@ -15,6 +15,7 @@ import {
   Component,
   Spacer,
   styled,
+  Text,
 } from 'flipper';
 import {connect} from 'react-redux';
 import {
@@ -28,6 +29,7 @@ import ScreenCaptureButtons from './ScreenCaptureButtons.js';
 import AutoUpdateVersion from './AutoUpdateVersion.js';
 import config from '../fb-stubs/config.js';
 import {isAutoUpdaterEnabled} from '../utils/argvUtils.js';
+import isProduction from '../utils/isProduction.js';
 
 const AppTitleBar = styled(FlexRow)(({focused}) => ({
   background: focused
@@ -57,8 +59,15 @@ type Props = {|
   toggleLeftSidebarVisible: (visible?: boolean) => void,
   toggleRightSidebarVisible: (visible?: boolean) => void,
   setActiveSheet: (sheet: ActiveSheet) => void,
+  version: string,
 |};
 
+const VersionText = styled(Text)({
+  color: colors.light50,
+  marginLeft: 4,
+  marginTop: 2,
+});
+
 class TitleBar extends Component<Props> {
   render() {
     return (
@@ -66,7 +75,13 @@ class TitleBar extends Component<Props> {
         <DevicesButton />
         <ScreenCaptureButtons />
         <Spacer />
-        {isAutoUpdaterEnabled() ? <AutoUpdateVersion /> : null}
+        <VersionText>
+          {this.props.version}
+          {isProduction() ? '' : '-dev'}
+        </VersionText>
+        {isAutoUpdaterEnabled() ? (
+          <AutoUpdateVersion version={this.props.version} />
+        ) : null}
         {config.bugReportButtonVisible && (
           <Button
             compact={true}

src/chrome/__tests__/TitleBar.electron.js

@@ -24,6 +24,7 @@ test('TitleBar is rendered', () => {
         toggleLeftSidebarVisible={() => {}}
         toggleRightSidebarVisible={() => {}}
         setActiveSheet={_sheet => {}}
+        version="1.0.0"
       />
     </Provider>,
   );

src/chrome/__tests__/__snapshots__/TitleBar.electron.js.snap

@@ -55,6 +55,12 @@ exports[`TitleBar is rendered 1`] = `
   <div
     className="css-12zzrdt"
   />
+  <span
+    className="css-lli23c"
+  >
+    1.0.0
+    -dev
+  </span>
   <div
     className="css-1cecbfb"
     onClick={[Function]}