From 805a911c080a748da57fa6d42f8fd3338a099521 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Wed, 18 Mar 2020 06:44:45 -0700
Subject: [PATCH] Show recent changes automatically at startup

Summary:
This shows a changelog as popup at startup, but only if it wasn't shown before, and only if there are new items in the changelog.

The full changelog can still be accessed through the menu

Changelog: From this release onward we will show important update messages through this dialog.

Reviewed By: passy

Differential Revision: D20492594

fbshipit-source-id: 4663979c8781b468430b9f8b628c4f506578b461
---
 desktop/src/App.tsx                           |  21 +++-
 desktop/src/chrome/ChangelogSheet.tsx         | 112 ++++++++++++++++--
 .../chrome/__tests__/ChangelogSheet.node.tsx  |  93 +++++++++++++++
 desktop/src/reducers/application.tsx          |   3 +
 4 files changed, 219 insertions(+), 10 deletions(-)
 create mode 100644 desktop/src/chrome/__tests__/ChangelogSheet.node.tsx

diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index 2da03f74b..972210453 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -37,6 +37,8 @@ import {
   ACTIVE_SHEET_PLUGIN_SHEET,
   ACTIVE_SHEET_JS_EMULATOR_LAUNCHER,
   ACTIVE_SHEET_CHANGELOG,
+  setActiveSheet,
+  ACTIVE_SHEET_CHANGELOG_RECENT_ONLY,
 } from './reducers/application';
 import {Logger} from './fb-interfaces/Logger';
 import BugReporter from './fb-stubs/BugReporter';
@@ -46,7 +48,7 @@ import PluginManager from './chrome/plugin-manager/PluginManager';
 import StatusBar from './chrome/StatusBar';
 import SettingsSheet from './chrome/SettingsSheet';
 import DoctorSheet from './chrome/DoctorSheet';
-import ChangelogSheet from './chrome/ChangelogSheet';
+import ChangelogSheet, {hasNewChangesToShow} from './chrome/ChangelogSheet';
 
 const version = remote.app.getVersion();
 
@@ -63,7 +65,11 @@ type StateFromProps = {
   staticView: StaticView;
 };
 
-type Props = StateFromProps & OwnProps;
+type DispatchProps = {
+  setActiveSheet: typeof setActiveSheet;
+};
+
+type Props = StateFromProps & OwnProps & DispatchProps;
 
 export class App extends React.Component<Props> {
   componentDidMount() {
@@ -79,6 +85,10 @@ export class App extends React.Component<Props> {
     });
     ipcRenderer.send('getLaunchTime');
     ipcRenderer.send('componentDidMount');
+
+    if (hasNewChangesToShow(window.localStorage)) {
+      this.props.setActiveSheet(ACTIVE_SHEET_CHANGELOG_RECENT_ONLY);
+    }
   }
 
   getSheet = (onHide: () => any) => {
@@ -101,6 +111,8 @@ export class App extends React.Component<Props> {
         return <DoctorSheet onHide={onHide} />;
       case ACTIVE_SHEET_CHANGELOG:
         return <ChangelogSheet onHide={onHide} />;
+      case ACTIVE_SHEET_CHANGELOG_RECENT_ONLY:
+        return <ChangelogSheet onHide={onHide} recent />;
       case ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT:
         return <ExportDataPluginSheet onHide={onHide} />;
       case ACTIVE_SHEET_SHARE_DATA:
@@ -163,7 +175,7 @@ export class App extends React.Component<Props> {
   }
 }
 
-export default connect<StateFromProps, {}, OwnProps, Store>(
+export default connect<StateFromProps, DispatchProps, OwnProps, Store>(
   ({
     application: {leftSidebarVisible, activeSheet, share},
     connections: {errors, staticView},
@@ -174,4 +186,7 @@ export default connect<StateFromProps, {}, OwnProps, Store>(
     errors,
     staticView,
   }),
+  {
+    setActiveSheet,
+  },
 )(App);
diff --git a/desktop/src/chrome/ChangelogSheet.tsx b/desktop/src/chrome/ChangelogSheet.tsx
index 2d1a7ed1e..32032041f 100644
--- a/desktop/src/chrome/ChangelogSheet.tsx
+++ b/desktop/src/chrome/ChangelogSheet.tsx
@@ -14,10 +14,21 @@ import path from 'path';
 import {reportUsage} from '../utils/metrics';
 import {getStaticPath} from '../utils/pathUtils';
 
-const changelog: string = readFileSync(
-  path.join(getStaticPath(), 'CHANGELOG.md'),
-  'utf8',
-);
+const changelogKey = 'FlipperChangelogStatus';
+
+type ChangelogStatus = {
+  lastHeader: string;
+};
+
+let getChangelogFromDisk = (): string => {
+  const changelogFromDisk: string = readFileSync(
+    path.join(getStaticPath(), 'CHANGELOG.md'),
+    'utf8',
+  ).trim();
+
+  getChangelogFromDisk = () => changelogFromDisk;
+  return changelogFromDisk;
+};
 
 const Container = styled(FlexColumn)({
   padding: 20,
@@ -43,15 +54,24 @@ const changelogSectionStyle = {
 
 type Props = {
   onHide: () => void;
+  recent?: boolean;
 };
 
 export default class ChangelogSheet extends Component<Props, {}> {
   componentDidMount() {
-    reportUsage('changelog:opened');
+    if (!this.props.recent) {
+      // opened through the menu
+      reportUsage('changelog:opened');
+    }
   }
 
   componentWillUnmount(): void {
-    reportUsage('changelog:closed');
+    if (this.props.recent) {
+      markChangelogRead(window.localStorage, getChangelogFromDisk());
+    }
+    if (!this.props.recent) {
+      reportUsage('changelog:closed');
+    }
   }
 
   render() {
@@ -59,7 +79,17 @@ export default class ChangelogSheet extends Component<Props, {}> {
       <Container>
         <Title>Changelog</Title>
         <FlexRow>
-          <Markdown source={changelog} style={changelogSectionStyle} />
+          <Markdown
+            source={
+              this.props.recent
+                ? getRecentChangelog(
+                    window.localStorage,
+                    getChangelogFromDisk(),
+                  )
+                : getChangelogFromDisk()
+            }
+            style={changelogSectionStyle}
+          />
         </FlexRow>
         <FlexRow>
           <Button type="primary" compact padded onClick={this.props.onHide}>
@@ -70,3 +100,71 @@ export default class ChangelogSheet extends Component<Props, {}> {
     );
   }
 }
+
+function getChangelogStatus(
+  localStorage: Storage,
+): ChangelogStatus | undefined {
+  return JSON.parse(localStorage.getItem(changelogKey) || '{}');
+}
+
+function getFirstHeader(changelog: string): string {
+  const match = changelog.match(/(^|\n)(#.*?)\n/);
+  if (match) {
+    return match[2];
+  }
+  return '';
+}
+
+export function hasNewChangesToShow(
+  localStorage: Storage | undefined,
+  changelog: string = getChangelogFromDisk(),
+): boolean {
+  if (!localStorage) {
+    return false;
+  }
+  const status = getChangelogStatus(localStorage);
+  if (!status || !status.lastHeader) {
+    return true;
+  }
+  const firstHeader = getFirstHeader(changelog);
+  if (firstHeader && firstHeader !== status.lastHeader) {
+    return true;
+  }
+  return false;
+}
+
+export /*for test*/ function getRecentChangelog(
+  localStorage: Storage | undefined,
+  changelog: string,
+): string {
+  if (!localStorage) {
+    return 'Changelog not available';
+  }
+  const status = getChangelogStatus(localStorage);
+  if (!status || !status.lastHeader) {
+    return changelog.trim();
+  }
+  const lastHeaderIndex = changelog.indexOf(status.lastHeader);
+  if (lastHeaderIndex === -1) {
+    return changelog.trim();
+  } else {
+    return changelog.substr(0, lastHeaderIndex).trim();
+  }
+}
+
+export /*for test*/ function markChangelogRead(
+  localStorage: Storage | undefined,
+  changelog: string,
+) {
+  if (!localStorage) {
+    return;
+  }
+  const firstHeader = getFirstHeader(changelog);
+  if (!firstHeader) {
+    return;
+  }
+  const status: ChangelogStatus = {
+    lastHeader: firstHeader,
+  };
+  localStorage.setItem(changelogKey, JSON.stringify(status));
+}
diff --git a/desktop/src/chrome/__tests__/ChangelogSheet.node.tsx b/desktop/src/chrome/__tests__/ChangelogSheet.node.tsx
new file mode 100644
index 000000000..5fa7ab3a4
--- /dev/null
+++ b/desktop/src/chrome/__tests__/ChangelogSheet.node.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {
+  hasNewChangesToShow,
+  getRecentChangelog,
+  markChangelogRead,
+} from '../ChangelogSheet';
+
+class StubStorage {
+  data: Record<string, string> = {};
+
+  setItem(key: string, value: string) {
+    this.data[key] = value;
+  }
+
+  getItem(key: string) {
+    return this.data[key];
+  }
+}
+
+const changelog = `
+
+# Version 2.0
+
+* Nice feature one
+* Important fix
+
+# Version 1.0
+
+* Not very exciting actually
+
+`;
+
+describe('ChangelogSheet', () => {
+  let storage!: Storage;
+
+  beforeEach(() => {
+    storage = new StubStorage() as any;
+  });
+
+  test('without storage, should show changes', () => {
+    expect(hasNewChangesToShow(undefined, changelog)).toBe(false);
+    expect(getRecentChangelog(storage, changelog)).toEqual(changelog.trim());
+    expect(hasNewChangesToShow(storage, changelog)).toBe(true);
+  });
+
+  test('with last header, should not show changes', () => {
+    markChangelogRead(storage, changelog);
+    expect(storage.data).toMatchInlineSnapshot(`
+      Object {
+        "FlipperChangelogStatus": "{\\"lastHeader\\":\\"# Version 2.0\\"}",
+      }
+    `);
+    expect(hasNewChangesToShow(storage, changelog)).toBe(false);
+
+    const newChangelog = `
+# Version 3.0
+
+* Cool!
+
+# Version 2.5
+
+* This is visible as well
+
+${changelog}
+`;
+
+    expect(hasNewChangesToShow(storage, newChangelog)).toBe(true);
+    expect(getRecentChangelog(storage, newChangelog)).toMatchInlineSnapshot(`
+"# Version 3.0
+
+* Cool!
+
+# Version 2.5
+
+* This is visible as well"
+`);
+    markChangelogRead(storage, newChangelog);
+    expect(storage.data).toMatchInlineSnapshot(`
+      Object {
+        "FlipperChangelogStatus": "{\\"lastHeader\\":\\"# Version 3.0\\"}",
+      }
+    `);
+    expect(hasNewChangesToShow(storage, newChangelog)).toBe(false);
+  });
+});
diff --git a/desktop/src/reducers/application.tsx b/desktop/src/reducers/application.tsx
index 7b6edc628..ed0b1b5e3 100644
--- a/desktop/src/reducers/application.tsx
+++ b/desktop/src/reducers/application.tsx
@@ -29,6 +29,8 @@ export const UNSET_SHARE: 'UNSET_SHARE' = 'UNSET_SHARE';
 export const ACTIVE_SHEET_JS_EMULATOR_LAUNCHER: 'ACTIVE_SHEET_JS_EMULATOR_LAUNCHER' =
   'ACTIVE_SHEET_JS_EMULATOR_LAUNCHER';
 export const ACTIVE_SHEET_CHANGELOG = 'ACTIVE_SHEET_CHANGELOG';
+export const ACTIVE_SHEET_CHANGELOG_RECENT_ONLY =
+  'ACTIVE_SHEET_CHANGELOG_RECENT_ONLY';
 
 export type ActiveSheet =
   | typeof ACTIVE_SHEET_PLUGIN_SHEET
@@ -42,6 +44,7 @@ export type ActiveSheet =
   | typeof ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT
   | typeof ACTIVE_SHEET_JS_EMULATOR_LAUNCHER
   | typeof ACTIVE_SHEET_CHANGELOG
+  | typeof ACTIVE_SHEET_CHANGELOG_RECENT_ONLY
   | null;
 
 export type LauncherMsg = {