Add 'show changelog' menu item [3/n]

Summary:
Added a menu option to show the current changelog.

Automatically showing it will be done in a next diff.

Reviewed By: passy

Differential Revision: D20219725

fbshipit-source-id: 96727d2e4b2280a814f28298e7440db5e4dd7870

CHANGELOG.md

@@ -1,3 +1,3 @@
-# Pre-history
+# Changelog
 
-Please see our [releases GitHub page](https://github.com/facebook/flipper/releases) for a full list of changes of old releases.
+See [static/desktop/CHANGELOG.md](static/desktop/CHANGELOG.md)

desktop/src/App.tsx

@@ -36,6 +36,7 @@ import {
   ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT,
   ACTIVE_SHEET_PLUGIN_SHEET,
   ACTIVE_SHEET_JS_EMULATOR_LAUNCHER,
+  ACTIVE_SHEET_CHANGELOG,
 } from './reducers/application';
 import {Logger} from './fb-interfaces/Logger';
 import BugReporter from './fb-stubs/BugReporter';
@@ -45,6 +46,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';
 
 const version = remote.app.getVersion();
 
@@ -97,6 +99,8 @@ export class App extends React.Component<Props> {
         return <SettingsSheet platform={process.platform} onHide={onHide} />;
       case ACTIVE_SHEET_DOCTOR:
         return <DoctorSheet onHide={onHide} />;
+      case ACTIVE_SHEET_CHANGELOG:
+        return <ChangelogSheet onHide={onHide} />;
       case ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT:
         return <ExportDataPluginSheet onHide={onHide} />;
       case ACTIVE_SHEET_SHARE_DATA:

desktop/src/MenuBar.tsx

@@ -17,6 +17,7 @@ import {
   setActiveSheet,
   ACTIVE_SHEET_PLUGINS,
   ACTIVE_SHEET_SETTINGS,
+  ACTIVE_SHEET_CHANGELOG,
 } from './reducers/application';
 import {setStaticView} from './reducers/connections';
 import SupportRequestFormV2 from './fb-stubs/SupportRequestFormV2';
@@ -376,6 +377,12 @@ function getTemplate(
             shell.openExternal('https://github.com/facebook/flipper/issues');
           },
         },
+        {
+          label: 'Changelog',
+          click() {
+            store.dispatch(setActiveSheet(ACTIVE_SHEET_CHANGELOG));
+          },
+        },
       ],
     },
   ];

desktop/src/chrome/ChangelogSheet.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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 {FlexColumn, styled, Text, FlexRow, Button, Markdown} from 'flipper';
+import {readFileSync} from 'fs';
+import React, {Component} from 'react';
+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 Container = styled(FlexColumn)({
+  padding: 20,
+  width: 600,
+});
+
+const Title = styled(Text)({
+  marginBottom: 18,
+  marginRight: 10,
+  fontWeight: 100,
+  fontSize: '40px',
+});
+
+const changelogSectionStyle = {
+  padding: 10,
+  maxHeight: '60vh',
+  overflow: 'scroll',
+  marginBottom: 10,
+  background: 'white',
+  borderRadius: 4,
+  width: '100%',
+};
+
+type Props = {
+  onHide: () => void;
+};
+
+export default class ChangelogSheet extends Component<Props, {}> {
+  componentDidMount() {
+    reportUsage('changelog:opened');
+  }
+
+  componentWillUnmount(): void {
+    reportUsage('changelog:closed');
+  }
+
+  render() {
+    return (
+      <Container>
+        <Title>Changelog</Title>
+        <FlexRow>
+          <Markdown source={changelog} style={changelogSectionStyle} />
+        </FlexRow>
+        <FlexRow>
+          <Button type="primary" compact padded onClick={this.props.onHide}>
+            Close
+          </Button>
+        </FlexRow>
+      </Container>
+    );
+  }
+}

desktop/src/reducers/application.tsx

@@ -28,6 +28,7 @@ export const SET_EXPORT_STATUS_MESSAGE: 'SET_EXPORT_STATUS_MESSAGE' =
 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 type ActiveSheet =
   | typeof ACTIVE_SHEET_PLUGIN_SHEET
@@ -40,6 +41,7 @@ export type ActiveSheet =
   | typeof ACTIVE_SHEET_SHARE_DATA_IN_FILE
   | typeof ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT
   | typeof ACTIVE_SHEET_JS_EMULATOR_LAUNCHER
+  | typeof ACTIVE_SHEET_CHANGELOG
   | null;
 
 export type LauncherMsg = {

desktop/src/ui/components/Markdown.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import React, {PureComponent} from 'react';
+import React, {PureComponent, CSSProperties} from 'react';
 import styled from '@emotion/styled';
 import ReactMarkdown from 'react-markdown';
 import {colors} from './colors';
@@ -76,9 +76,9 @@ class LinkReference extends PureComponent<{href: string}> {
   }
 }
 
-export function Markdown(props: {source: string}) {
+export function Markdown(props: {source: string; style?: CSSProperties}) {
   return (
-    <Container>
+    <Container style={props.style}>
       <ReactMarkdown
         source={props.source}
         renderers={{

desktop/static/CHANGELOG.md

@@ -1,3 +1,3 @@
-# Changelog
+# Pre-history
 
-See [static/CHANGELOG.md](static/CHANGELOG.md)
+Please see our [releases GitHub page](https://github.com/facebook/flipper/releases) for a full list of changes of old releases.