change support button to settings button

and add new empty settings drawer

src/components/App.tsx

@@ -6,6 +6,7 @@ import { useSelector } from 'react-redux';
 import SplitterLayout from 'react-splitter-layout';
 import { RootState } from '../reducers';
 import Editor from './Editor';
+import SettingsDrawer from './SettingsDrawer';
 import StatusBar from './StatusBar';
 import Terminal from './Terminal';
 import Toolbar from './Toolbar';
@@ -61,6 +62,7 @@ function App(): JSX.Element {
                 )}
             </SplitterLayout>
             <StatusBar />
+            <SettingsDrawer />
         </div>
     );
 }

src/components/SettingsButton.tsx

@@ -0,0 +1,30 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021 The Pybricks Authors
+
+import { connect } from 'react-redux';
+import { Action, Dispatch } from '../actions';
+import { openSettings as openSettings } from '../actions/app';
+import ActionButton, { ActionButtonProps } from './ActionButton';
+import { TooltipId } from './button-i18n';
+import settingsIcon from './images/settings.svg';
+
+type StateProps = undefined;
+type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
+type OwnProps = Pick<ActionButtonProps, 'id'>;
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    onAction: (): Action => dispatch(openSettings()),
+});
+
+const mergeProps = (
+    _stateProps: StateProps,
+    dispatchProps: DispatchProps,
+    ownProps: OwnProps,
+): ActionButtonProps => ({
+    tooltip: TooltipId.Settings,
+    icon: settingsIcon,
+    ...dispatchProps,
+    ...ownProps,
+});
+
+export default connect(undefined, mapDispatchToProps, mergeProps)(ActionButton);

src/components/SettingsDrawer.tsx

@@ -0,0 +1,55 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021 The Pybricks Authors
+
+import { Drawer } from '@blueprintjs/core';
+import { WithI18nProps, withI18n } from '@shopify/react-i18n';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Action, Dispatch } from '../actions';
+import { closeSettings } from '../actions/app';
+import { RootState } from '../reducers';
+import { SettingsStringId } from './settings-i18n';
+import en from './settings-i18n.en.json';
+
+type StateProps = {
+    open: boolean;
+};
+
+type DispatchProps = {
+    onClose: () => void;
+};
+
+type SettingsProps = StateProps & DispatchProps & WithI18nProps;
+
+class SettingsDrawer extends React.PureComponent<SettingsProps> {
+    render(): JSX.Element {
+        const { i18n, open, onClose } = this.props;
+        return (
+            <Drawer
+                isOpen={open}
+                icon="cog"
+                title={i18n.translate(SettingsStringId.Title)}
+                onClose={() => onClose()}
+            ></Drawer>
+        );
+    }
+}
+
+const mapStateToProps = (state: RootState): StateProps => ({
+    open: state.app.showSettings,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    onClose: (): Action => dispatch(closeSettings()),
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(
+    withI18n({
+        id: 'settings',
+        fallback: en,
+        translations: { en },
+    })(SettingsDrawer),
+);

src/components/SupportButton.tsx

@@ -1,24 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2020 The Pybricks Authors
-
-import { connect } from 'react-redux';
-import LinkButton, { LinkButtonProps } from './LinkButton';
-import { TooltipId } from './button-i18n';
-import supportIcon from './images/support.svg';
-
-type StateProps = undefined;
-type DispatchProps = undefined;
-type OwnProps = Pick<LinkButtonProps, 'id'>;
-
-const mergeProps = (
-    _stateProps: StateProps,
-    _dispatchProps: DispatchProps,
-    ownProps: OwnProps,
-): LinkButtonProps => ({
-    url: 'https://github.com/pybricks/support/issues',
-    tooltip: TooltipId.Support,
-    icon: supportIcon,
-    ...ownProps,
-});
-
-export default connect(undefined, undefined, mergeProps)(LinkButton);

src/components/Toolbar.tsx

@@ -10,8 +10,8 @@ import OpenButton from './OpenButton';
 import ReplButton from './ReplButton';
 import RunButton from './RunButton';
 import SaveAsButton from './SaveAsButton';
+import SettingsButton from './SettingsButton';
 import StopButton from './StopButton';
-import SupportButton from './SupportButton';
 
 class Toolbar extends React.Component {
     render(): JSX.Element {
@@ -39,7 +39,7 @@ class Toolbar extends React.Component {
                 </Navbar.Group>
                 <Navbar.Group align={Alignment.RIGHT}>
                     <ButtonGroup>
-                        <SupportButton id="support" />
+                        <SettingsButton id="settings" />
                         <DocsButton id="docs" />
                     </ButtonGroup>
                 </Navbar.Group>

src/components/button-i18n.en.json

@@ -10,5 +10,5 @@
     },
     "flash": { "tooltip": "Flash hub firmware" },
     "docs": { "tooltip": "Show/hide documentation" },
-    "support": { "tooltip": "Open Pybricks Support web site" }
+    "settings": { "tooltip": "Open setting" }
 }

src/components/button-i18n.ts

@@ -13,5 +13,5 @@ export enum TooltipId {
     BluetoothConnect = 'bluetooth.connect.tooltip',
     BluetoothDisconnect = 'bluetooth.disconnect.tooltip',
     Docs = 'docs.tooltip',
-    Support = 'support.tooltip',
+    Settings = 'settings.tooltip',
 }

src/components/images/settings.svg

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 50 50"
+   xml:space="preserve"
+   sodipodi:docname="settings.svg"
+   width="50"
+   height="50"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
+   id="metadata41"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs39" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="2089"
+   inkscape:window-height="1160"
+   id="namedview37"
+   showgrid="false"
+   inkscape:pagecheckerboard="true"
+   inkscape:zoom="15.418475"
+   inkscape:cx="21.7408"
+   inkscape:cy="28.83975"
+   inkscape:window-x="0"
+   inkscape:window-y="27"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g4"
+   transform="matrix(0.08166572,0,0,0.08166572,4.9999835,4.9999835)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+	<path
+   d="m 20.701,281.901 32.1,0.2 c 4.8,24.7 14.3,48.7 28.7,70.5 l -22.8,22.6 c -8.2,8.1 -8.2,21.2 -0.2,29.4 l 24.6,24.9 c 8.1,8.2 21.2,8.2 29.4,0.2 l 22.8,-22.6 c 21.6,14.6 45.5,24.5 70.2,29.5 l -0.2,32.1 c -0.1,11.5 9.2,20.8 20.7,20.9 l 35,0.2 c 11.5,0.1 20.8,-9.2 20.9,-20.7 l 0.2,-32.1 c 24.7,-4.8 48.7,-14.3 70.5,-28.7 l 22.6,22.8 c 8.1,8.2 21.2,8.2 29.4,0.2 l 24.9,-24.6 c 8.2,-8.1 8.2,-21.2 0.2,-29.4 l -22.6,-22.8 c 14.6,-21.6 24.5,-45.5 29.5,-70.2 l 32.1,0.2 c 11.5,0.1 20.8,-9.2 20.9,-20.7 l 0.2,-35 c 0.1,-11.5 -9.2,-20.8 -20.7,-20.9 l -32.1,-0.2 c -4.8,-24.7 -14.3,-48.7 -28.7,-70.5 l 22.8,-22.6 c 8.2,-8.1 8.2,-21.2 0.2,-29.4 l -24.6,-24.9 c -8.1,-8.2 -21.2,-8.2 -29.4,-0.2 l -22.8,22.6 c -21.6,-14.6 -45.5,-24.5 -70.2,-29.5 l 0.2,-32.1 c 0.1,-11.5 -9.2,-20.8 -20.7,-20.9 l -35,-0.2 c -11.5,-0.1 -20.8,9.2 -20.9,20.7 l -0.3,32.1 c -24.8,4.8 -48.8,14.3 -70.5,28.7 l -22.6,-22.8 c -8.1,-8.2 -21.2,-8.2 -29.4,-0.2 l -24.8,24.6 c -8.2,8.1 -8.2,21.2 -0.2,29.4 l 22.6,22.8 c -14.6,21.6 -24.5,45.5 -29.5,70.2 l -32.1,-0.2 c -11.5,-0.1 -20.8,9.2 -20.9,20.7 l -0.2,35 c -0.1,11.4 9.2,20.8 20.7,20.9 z m 158.6,-103.3 c 36.6,-36.2 95.5,-35.9 131.7,0.7 36.2,36.6 35.9,95.5 -0.7,131.7 -36.6,36.2 -95.5,35.9 -131.7,-0.7 -36.2,-36.6 -35.9,-95.5 0.7,-131.7 z"
+   id="path2"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:0.90707964" />
+</g>
+<g
+   id="g6"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g8"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g10"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g12"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g14"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g16"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g18"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g20"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g22"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g24"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g26"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g28"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g30"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g32"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+<g
+   id="g34"
+   transform="matrix(0.08166572,0,0,0.08166572,224.90098,-214.90102)"
+   style="fill:#ffffff;fill-opacity:0.90707964">
+</g>
+</svg>

src/components/settings-i18n.en.json

@@ -0,0 +1,5 @@
+{
+    "settings": {
+        "title": "Settings"
+    }
+}

src/components/settings-i18n.en.test.ts

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021 The Pybricks Authors
+
+import { lookup } from '../../test';
+import { SettingsStringId } from './settings-i18n';
+import en from './settings-i18n.en.json';
+
+describe('Ensure .json file has matches for SettingsStringIds', () => {
+    test.each(Object.values(SettingsStringId))('%s', (id) => {
+        expect(lookup(en, id)).toBeDefined();
+    });
+});

src/components/settings-i18n.ts

@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021 The Pybricks Authors
+// File: components/settings-i18n.ts
+// Settings translation keys.
+
+export enum SettingsStringId {
+    Title = 'settings.title',
+}