Copied utilities to temporarily toolbar

Summary: This copies several utilities from the old title bar to the new one. We will have to revisit this in the future as it will eventually disappear. But in the mean time it makes sure version info and performance graphs are shown

Reviewed By: cekkaewnumchai

Differential Revision: D23824366

fbshipit-source-id: 0e495cd6d70db6a38da6df52b47ffee4bcb6f69f

desktop/app/src/chrome/FpsGraph.tsx

@@ -83,7 +83,7 @@ export default function FpsGraph({
   }, []);
 
   return (
-    <div>
+    <div style={{width, height}}>
       <canvas
         ref={canvasRef}
         width={width}

desktop/app/src/chrome/NetworkGraph.tsx

@@ -65,7 +65,7 @@ export default function NetworkGraph({
   }, []);
 
   return (
-    <div>
+    <div style={{width, height}}>
       <canvas ref={canvasRef} width={width} height={height} title={hoverText} />
     </div>
   );

desktop/app/src/chrome/TitleBar.tsx

@@ -101,7 +101,10 @@ const VersionText = styled(Text)({
   },
 });
 
-class Version extends React.Component<{children: string}, {copied: boolean}> {
+export class Version extends React.Component<
+  {children: string},
+  {copied: boolean}
+> {
   state = {
     copied: false,
   };

desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx

@@ -8,20 +8,24 @@
  */
 
 import React from 'react';
-import {connect} from 'react-redux';
+import {updateSettings} from '../reducers/settings';
-import {State as Store} from '../reducers';
-import {Settings, updateSettings} from '../reducers/settings';
 import {styled, colors} from 'flipper';
-import {Button} from 'antd';
+import {Button, Space} from 'antd';
 import {CloseCircleOutlined} from '@ant-design/icons';
+import FpsGraph from '../chrome/FpsGraph';
+import NetworkGraph from '../chrome/NetworkGraph';
+import isProduction from '../utils/isProduction';
+import {isAutoUpdaterEnabled} from '../utils/argvUtils';
+import AutoUpdateVersion from '../chrome/AutoUpdateVersion';
+import UpdateIndicator from '../chrome/UpdateIndicator';
+import RatingButton from '../chrome/RatingButton';
+import {Version} from '../chrome/TitleBar';
+import {useDispatch, useStore} from '../utils/useStore';
+import config from '../fb-stubs/config';
+import {remote} from 'electron';
 
-type StateFromProps = {settings: Settings};
+const version = remote.app.getVersion();
-type DispatchFromProps = {disableSandy: (settings: Settings) => void};
-type OwnProps = {};
 
-type Props = StateFromProps & DispatchFromProps & OwnProps;
-
-// This component should be dropped, and insetTitlebar should be removed from Electron startup once Sandy is the default
 const TemporarilyTitlebarContainer = styled('div')<{focused?: boolean}>(
   ({focused}) => ({
     textAlign: 'center',
@@ -37,29 +41,40 @@ const TemporarilyTitlebarContainer = styled('div')<{focused?: boolean}>(
       focused ? colors.macOSTitleBarBorder : colors.macOSTitleBarBorderBlur
     }`,
     WebkitAppRegion: 'drag',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
   }),
 );
 
-export const TemporarilyTitlebar = connect<
+// This component should be dropped, and insetTitlebar should be removed from Electron startup once Sandy is the default
-  StateFromProps,
+// But: figure out where to put the graphs, version numbers, flipper rating ets :)
-  DispatchFromProps,
+export function TemporarilyTitlebar() {
-  OwnProps,
+  const dispatch = useDispatch();
-  Store
+  const settings = useStore((state) => state.settingsState);
->(
+  const launcherMsg = useStore((state) => state.application.launcherMsg);
-  ({settingsState}) => ({settings: settingsState}),
+  const isFocused = useStore((state) => state.application.windowIsFocused);
-  (dispatch) => ({
+
-    disableSandy: (settings: Settings) => {
+  return (
-      console.log(settings);
+    <TemporarilyTitlebarContainer focused={isFocused}>
-      dispatch(updateSettings({...settings, enableSandy: false}));
-    },
-  }),
-)((props: Props) => (
-  <TemporarilyTitlebarContainer focused /*TODO: make dynamic */>
       [Sandy] Flipper{' '}
       <Button
         size="small"
         type="link"
         icon={<CloseCircleOutlined />}
-      onClick={() => props.disableSandy(props.settings)}></Button>
+        onClick={() =>
+          dispatch(updateSettings({...settings, enableSandy: false}))
+        }></Button>
+      {!isProduction() && <NetworkGraph height={20} width={60} />}
+      {!isProduction() && <FpsGraph height={20} width={60} />}
+      {config.showFlipperRating ? <RatingButton /> : null}
+      <Version>{version + (isProduction() ? '' : '-dev')}</Version>
+      {isAutoUpdaterEnabled() ? (
+        <AutoUpdateVersion version={version} />
+      ) : (
+        <UpdateIndicator launcherMsg={launcherMsg} version={version} />
+      )}
     </TemporarilyTitlebarContainer>
-));
+  );
+}