From 1c3df6ed8ef07469acbd65e4f3b84a9635fd63f3 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 22 Sep 2020 12:01:46 -0700
Subject: [PATCH] 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           |  2 +-
 desktop/app/src/chrome/NetworkGraph.tsx       |  2 +-
 desktop/app/src/chrome/TitleBar.tsx           |  5 +-
 .../src/sandy-chrome/TemporarilyTitlebar.tsx  | 81 +++++++++++--------
 4 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/desktop/app/src/chrome/FpsGraph.tsx b/desktop/app/src/chrome/FpsGraph.tsx
index 39f6364c6..befb7c5ae 100644
--- a/desktop/app/src/chrome/FpsGraph.tsx
+++ b/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}
diff --git a/desktop/app/src/chrome/NetworkGraph.tsx b/desktop/app/src/chrome/NetworkGraph.tsx
index be31bbf4d..3f642eaca 100644
--- a/desktop/app/src/chrome/NetworkGraph.tsx
+++ b/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>
   );
diff --git a/desktop/app/src/chrome/TitleBar.tsx b/desktop/app/src/chrome/TitleBar.tsx
index 81b04a2a6..c773e59ce 100644
--- a/desktop/app/src/chrome/TitleBar.tsx
+++ b/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,
   };
diff --git a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
index dbb2a015a..bee4b0e67 100644
--- a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
+++ b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
@@ -8,20 +8,24 @@
  */
 
 import React from 'react';
-import {connect} from 'react-redux';
-import {State as Store} from '../reducers';
-import {Settings, updateSettings} from '../reducers/settings';
+import {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};
-type DispatchFromProps = {disableSandy: (settings: Settings) => void};
-type OwnProps = {};
+const version = remote.app.getVersion();
 
-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<
-  StateFromProps,
-  DispatchFromProps,
-  OwnProps,
-  Store
->(
-  ({settingsState}) => ({settings: settingsState}),
-  (dispatch) => ({
-    disableSandy: (settings: Settings) => {
-      console.log(settings);
-      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>
-  </TemporarilyTitlebarContainer>
-));
+// This component should be dropped, and insetTitlebar should be removed from Electron startup once Sandy is the default
+// But: figure out where to put the graphs, version numbers, flipper rating ets :)
+export function TemporarilyTitlebar() {
+  const dispatch = useDispatch();
+  const settings = useStore((state) => state.settingsState);
+  const launcherMsg = useStore((state) => state.application.launcherMsg);
+  const isFocused = useStore((state) => state.application.windowIsFocused);
+
+  return (
+    <TemporarilyTitlebarContainer focused={isFocused}>
+      [Sandy] Flipper{' '}
+      <Button
+        size="small"
+        type="link"
+        icon={<CloseCircleOutlined />}
+        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>
+  );
+}