From 3da7552779e6b102c445a9c0a48af2313edc42bf Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Wed, 18 Mar 2020 06:44:45 -0700 Subject: [PATCH] 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 | 4 +- desktop/src/App.tsx | 4 ++ desktop/src/MenuBar.tsx | 7 +++ desktop/src/chrome/ChangelogSheet.tsx | 72 ++++++++++++++++++++++++++ desktop/src/reducers/application.tsx | 2 + desktop/src/ui/components/Markdown.tsx | 6 +-- desktop/static/CHANGELOG.md | 4 +- 7 files changed, 92 insertions(+), 7 deletions(-) create mode 100644 desktop/src/chrome/ChangelogSheet.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index f5ff88011..a78bc211d 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx index 8ce041483..2da03f74b 100644 --- a/desktop/src/App.tsx +++ b/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 { return ; case ACTIVE_SHEET_DOCTOR: return ; + case ACTIVE_SHEET_CHANGELOG: + return ; case ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT: return ; case ACTIVE_SHEET_SHARE_DATA: diff --git a/desktop/src/MenuBar.tsx b/desktop/src/MenuBar.tsx index 2c5e05810..644ff123e 100644 --- a/desktop/src/MenuBar.tsx +++ b/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)); + }, + }, ], }, ]; diff --git a/desktop/src/chrome/ChangelogSheet.tsx b/desktop/src/chrome/ChangelogSheet.tsx new file mode 100644 index 000000000..2d1a7ed1e --- /dev/null +++ b/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 { + componentDidMount() { + reportUsage('changelog:opened'); + } + + componentWillUnmount(): void { + reportUsage('changelog:closed'); + } + + render() { + return ( + + Changelog + + + + + + + + ); + } +} diff --git a/desktop/src/reducers/application.tsx b/desktop/src/reducers/application.tsx index a71e33da4..7b6edc628 100644 --- a/desktop/src/reducers/application.tsx +++ b/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 = { diff --git a/desktop/src/ui/components/Markdown.tsx b/desktop/src/ui/components/Markdown.tsx index 652b23904..fb7c96cc8 100644 --- a/desktop/src/ui/components/Markdown.tsx +++ b/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 ( - +