add support button

src/components/LinkButton.tsx

@@ -0,0 +1,53 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020 The Pybricks Authors
+
+import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
+import { WithI18nProps, withI18n } from '@shopify/react-i18n';
+import React from 'react';
+import { TooltipId } from './button';
+import en from './button.en.json';
+
+export interface LinkButtonProps {
+    /** A unique id for each instance. */
+    readonly id: string;
+    /** The URL to open. */
+    readonly url: string;
+    /** Tooltip text that appears when hovering over the button. */
+    readonly tooltip: TooltipId;
+    /** Icon shown on the button. */
+    readonly icon: string;
+    /** When true or undefined, the button is enabled. */
+    readonly enabled?: boolean;
+}
+
+type Props = LinkButtonProps & WithI18nProps;
+
+class LinkButton extends React.Component<Props> {
+    render(): JSX.Element {
+        return (
+            <Tooltip
+                content={this.props.i18n.translate(this.props.tooltip)}
+                position={Position.BOTTOM}
+            >
+                <Button
+                    intent={Intent.PRIMARY}
+                    disabled={this.props.enabled === false}
+                    className="no-box-shadow"
+                    style={
+                        this.props.enabled === false
+                            ? { pointerEvents: 'none' }
+                            : undefined
+                    }
+                >
+                    <a href={this.props.url} target="_blank" rel="noopener noreferrer">
+                        <img src={this.props.icon} alt={this.props.id} />
+                    </a>
+                </Button>
+            </Tooltip>
+        );
+    }
+}
+
+export default withI18n({ id: 'linkButton', fallback: en, translations: { en } })(
+    LinkButton,
+);

src/components/SupportButton.tsx

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020 The Pybricks Authors
+
+import { connect } from 'react-redux';
+import LinkButton, { LinkButtonProps } from './LinkButton';
+import { TooltipId } from './button';
+import supportIcon from './images/stop.svg'; // FIXME: replace with correct icon
+
+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

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

src/components/button.en.json

@@ -9,5 +9,6 @@
         "disconnect": { "tooltip": "Disconnect Bluetooth" }
     },
     "flash": { "tooltip": "Flash hub firmware" },
-    "docs": { "tooltip": "Show/hide documentation" }
+    "docs": { "tooltip": "Show/hide documentation" },
+    "support": { "tooltip": "Open Pybricks Support web site" }
 }

src/components/button.ts

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