Move changelog loading to server

Summary: per title

Reviewed By: aigoncharov

Differential Revision: D32723706

fbshipit-source-id: ce5108da9f5da6fdfa7d1a66a31a4f8f430eb78d

desktop/flipper-common/src/server-types.tsx

@@ -133,6 +133,7 @@ export type IOSDeviceParams = {
 
 export type FlipperServerCommands = {
   'get-config': () => Promise<FlipperServerConfig>;
+  'get-changelog': () => Promise<string>;
   'device-start-logging': (serial: string) => Promise<void>;
   'device-stop-logging': (serial: string) => Promise<void>;
   'device-supports-screenshot': (serial: string) => Promise<boolean>;

desktop/flipper-server-core/src/FlipperServerImpl.tsx

@@ -37,6 +37,7 @@ import {KeytarManager} from './utils/keytar';
 import {PluginManager} from './plugins/PluginManager';
 import {runHealthcheck, getHealthChecks} from './utils/runHealthchecks';
 import {openFile} from './utils/openFile';
+import {getChangelog} from './utils/pathUtils';
 
 /**
  * FlipperServer takes care of all incoming device & client connections.
@@ -195,6 +196,7 @@ export class FlipperServerImpl implements FlipperServer {
 
   private commandHandler: FlipperServerCommands = {
     'get-config': async () => this.config,
+    'get-changelog': getChangelog,
     'device-start-logging': async (serial: string) =>
       this.getDevice(serial).startLogging(),
     'device-stop-logging': async (serial: string) =>

desktop/flipper-server-core/src/utils/pathUtils.tsx

@@ -30,7 +30,16 @@ export function getStaticPath(
     : absolutePath;
 }
 
-export function getChangelogPath() {
+export async function getChangelog() {
+  return (
+    await fs.promises.readFile(
+      path.join(getChangelogPath(), 'CHANGELOG.md'),
+      'utf8',
+    )
+  ).trim();
+}
+
+function getChangelogPath() {
   const changelogPath = getStaticPath(isFBBuild ? 'facebook' : '.');
   if (fs.existsSync(changelogPath)) {
     return changelogPath;

desktop/flipper-ui-core/src/chrome/ChangelogSheet.tsx

@@ -8,13 +8,11 @@
  */
 
 import {Markdown} from '../ui';
-import {readFileSync} from 'fs';
 import React, {Component} from 'react';
-import path from 'path';
 import {reportUsage} from 'flipper-common';
-import {getChangelogPath} from '../utils/pathUtils';
 import {Modal} from 'antd';
-import {theme} from 'flipper-plugin';
+import {Dialog, theme} from 'flipper-plugin';
+import {getRenderHostInstance} from '../RenderHost';
 
 const changelogKey = 'FlipperChangelogStatus';
 
@@ -22,16 +20,6 @@ type ChangelogStatus = {
   lastHeader: string;
 };
 
-let getChangelogFromDisk = (): string => {
-  const changelogFromDisk: string = readFileSync(
-    path.join(getChangelogPath(), 'CHANGELOG.md'),
-    'utf8',
-  ).trim();
-
-  getChangelogFromDisk = () => changelogFromDisk;
-  return changelogFromDisk;
-};
-
 const changelogSectionStyle = {
   padding: 10,
   maxHeight: '60vh',
@@ -45,9 +33,10 @@ const changelogSectionStyle = {
 type Props = {
   onHide: () => void;
   recent?: boolean;
+  changelog: string;
 };
 
-export default class ChangelogSheet extends Component<Props, {}> {
+class ChangelogSheet extends Component<Props, {}> {
   componentDidMount() {
     if (!this.props.recent) {
       // opened through the menu
@@ -57,7 +46,9 @@ export default class ChangelogSheet extends Component<Props, {}> {
 
   componentWillUnmount(): void {
     if (this.props.recent) {
-      markChangelogRead(window.localStorage, getChangelogFromDisk());
+      if (this.props.changelog) {
+        markChangelogRead(window.localStorage, this.props.changelog);
+      }
     }
     if (!this.props.recent) {
       reportUsage('changelog:closed');
@@ -65,7 +56,7 @@ export default class ChangelogSheet extends Component<Props, {}> {
   }
 
   render() {
-    return (
+    return this.props.changelog ? (
       <Modal
         visible
         title="Changelog"
@@ -74,13 +65,13 @@ export default class ChangelogSheet extends Component<Props, {}> {
         <Markdown
           source={
             this.props.recent
-              ? getRecentChangelog(window.localStorage, getChangelogFromDisk())
-              : getChangelogFromDisk()
+              ? getRecentChangelog(window.localStorage, this.props.changelog)
+              : this.props.changelog
           }
           style={changelogSectionStyle}
         />
       </Modal>
-    );
+    ) : null;
   }
 }
 
@@ -100,7 +91,7 @@ function getFirstHeader(changelog: string): string {
 
 export function hasNewChangesToShow(
   localStorage: Storage | undefined,
-  changelog: string = getChangelogFromDisk(),
+  changelog: string,
 ): boolean {
   if (!localStorage) {
     return false;
@@ -151,3 +142,25 @@ export /*for test*/ function markChangelogRead(
   };
   localStorage.setItem(changelogKey, JSON.stringify(status));
 }
+
+export function showChangelog(onlyIfNewChanges: boolean) {
+  getRenderHostInstance()
+    .flipperServer.exec('get-changelog')
+    .then((changelog) => {
+      const show =
+        !onlyIfNewChanges ||
+        hasNewChangesToShow(window.localStorage, changelog);
+      if (show) {
+        Dialog.showModal((onHide) => (
+          <ChangelogSheet
+            onHide={onHide}
+            recent={onlyIfNewChanges}
+            changelog={changelog}
+          />
+        ));
+      }
+    })
+    .catch((e) => {
+      console.error('Failed to load changelog', e);
+    });
+}

desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx

@@ -29,7 +29,7 @@ import {AppInspect} from './appinspect/AppInspect';
 import PluginContainer from '../PluginContainer';
 import {ContentContainer} from './ContentContainer';
 import {Notification} from './notification/Notification';
-import ChangelogSheet, {hasNewChangesToShow} from '../chrome/ChangelogSheet';
+import {showChangelog} from '../chrome/ChangelogSheet';
 import PlatformSelectWizard, {
   hasPlatformWizardBeenDone,
 } from '../chrome/PlatformSelectWizard';
@@ -98,9 +98,6 @@ export function SandyApp() {
     })`;
 
     registerStartupTime(logger);
-    if (hasNewChangesToShow(window.localStorage)) {
-      Dialog.showModal((onHide) => <ChangelogSheet onHide={onHide} recent />);
-    }
 
     if (hasPlatformWizardBeenDone(window.localStorage)) {
       Dialog.showModal((onHide) => (
@@ -113,6 +110,8 @@ export function SandyApp() {
       ));
     }
 
+    showChangelog(true);
+
     // don't warn about logger, even with a new logger we don't want to re-register
     // eslint-disable-next-line
   }, []);

desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx

@@ -17,14 +17,7 @@ import {
   BugOutlined,
   HistoryOutlined,
 } from '@ant-design/icons';
-import {
-  Dialog,
-  Layout,
-  NUX,
-  theme,
-  Tracked,
-  TrackingScope,
-} from 'flipper-plugin';
+import {Layout, NUX, theme, Tracked, TrackingScope} from 'flipper-plugin';
 
 const {Text, Title} = Typography;
 
@@ -33,8 +26,8 @@ import config from '../fb-stubs/config';
 import isProduction from '../utils/isProduction';
 import {getAppVersion} from '../utils/info';
 import {getFlipperLib} from 'flipper-plugin';
-import ChangelogSheet from '../chrome/ChangelogSheet';
 import {ReleaseChannel} from 'flipper-common';
+import {showChangelog} from '../chrome/ChangelogSheet';
 
 const RowContainer = styled(FlexRow)({
   alignItems: 'flex-start',
@@ -192,11 +185,9 @@ function WelcomeScreenContent() {
                 size="small"
                 icon={<HistoryOutlined />}
                 title="Changelog"
-                onClick={() =>
-                  Dialog.showModal((onHide) => (
-                    <ChangelogSheet onHide={onHide} />
-                  ))
-                }
+                onClick={() => {
+                  showChangelog(false);
+                }}
               />
             </NUX>
           </Tooltip>

desktop/flipper-ui-core/src/utils/pathUtils.tsx

@@ -11,9 +11,6 @@
 /* eslint-disable node/no-sync */
 
 import path from 'path';
-import fs from 'fs';
-
-import config from '../fb-stubs/config';
 import {getRenderHostInstance} from '../RenderHost';
 
 /**
@@ -33,15 +30,3 @@ export function getStaticPath(
     ? absolutePath.replace('app.asar', 'app.asar.unpacked')
     : absolutePath;
 }
-
-/**
- * @deprecated
- */
-export function getChangelogPath() {
-  const changelogPath = getStaticPath(config.isFBBuild ? 'facebook' : '.');
-  if (fs.existsSync(changelogPath)) {
-    return changelogPath;
-  } else {
-    throw new Error('Changelog path path does not exist: ' + changelogPath);
-  }
-}