Merge pull request #2662 from paulkaplan/add-ev3-connection-message

Add ev3 connection message and help links

src/components/connection-modal/connecting-step.jsx

@@ -28,11 +28,7 @@ const ConnectingStep = props => (
         </Box>
         <Box className={styles.bottomArea}>
             <Box className={styles.instructions}>
-                <FormattedMessage
-                    defaultMessage="Connecting"
-                    description=""
-                    id="gui.connection.connecting"
-                />
+                {props.connectingMessage}
             </Box>
             <Dots
                 counter={1}
@@ -64,6 +60,7 @@ const ConnectingStep = props => (
 );
 
 ConnectingStep.propTypes = {
+    connectingMessage: PropTypes.node.isRequired,
     deviceImage: PropTypes.string.isRequired,
     onDisconnect: PropTypes.func
 };

src/components/connection-modal/connection-modal.css

@@ -183,8 +183,41 @@
     align-items: center;
 }
 
+.scratch-link-help {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 100%;
+    padding: 1rem 0;
+}
+
+.scratch-link-help-step {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 3rem;
+}
+
 .scratch-link-icon {
-    max-width: 150px;
+    max-width: 50px;
+}
+
+.help-step-image {
+    margin-right: 0.5rem;
+}
+
+.help-step-number {
+    background: $pen-primary;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $ui-white;
+    font-weight: bold;
+    margin-right: 0.5rem;
+    min-width: 2rem;
+    height: 2rem;
 }
 
 .button-row {
@@ -262,7 +295,7 @@
 
 .instructions {
     text-align: center;
-    padding: 1rem;
+    margin-top: 1rem;
 }
 
 .dots-row {
@@ -270,7 +303,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    padding-bottom: 1rem;
+    margin: 1rem;
 }
 
 .dots-holder {

src/components/connection-modal/connection-modal.jsx

@@ -27,6 +27,7 @@ const ConnectionModalComponent = props => (
         contentLabel={props.name}
         headerClassName={styles.header}
         headerImage={props.smallDeviceImage}
+        onHelp={props.onHelp}
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
@@ -40,8 +41,10 @@ const ConnectionModalComponent = props => (
 );
 
 ConnectionModalComponent.propTypes = {
+    connectingMessage: PropTypes.node,
     name: PropTypes.node,
     onCancel: PropTypes.func.isRequired,
+    onHelp: PropTypes.func.isRequired,
     phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
     smallDeviceImage: PropTypes.string,
     title: PropTypes.string.isRequired

src/components/connection-modal/error-step.jsx

@@ -26,7 +26,7 @@ const ErrorStep = props => (
                 <FormattedMessage
                     defaultMessage="Oops, looks like something went wrong."
                     description="The device connection process has encountered an error."
-                    id="gui.connection.errorMessage"
+                    id="gui.connection.error.errorMessage"
                 />
             </div>
             <Dots
@@ -43,7 +43,9 @@ const ErrorStep = props => (
                         src={backIcon}
                     />
                     <FormattedMessage
-                        id="gui.connection.tryagainbutton"
+                        defaultMessage="Try again"
+                        description="Button to initiate trying the device connection again after an error"
+                        id="gui.connection.error.tryagainbutton"
                     />
                 </button>
                 <button
@@ -55,7 +57,9 @@ const ErrorStep = props => (
                         src={helpIcon}
                     />
                     <FormattedMessage
-                        id="gui.connection.helpbutton"
+                        defaultMessage="Help"
+                        description="Button to view help content"
+                        id="gui.connection.error.helpbutton"
                     />
                 </button>
             </Box>

src/components/connection-modal/unavailable-step.jsx

@@ -6,30 +6,54 @@ import Box from '../box/box.jsx';
 import Dots from './dots.jsx';
 import helpIcon from './icons/help.svg';
 import backIcon from './icons/back.svg';
-import scratchLinkIcon from './icons/scratch-link.png';
+import bluetoothIcon from './icons/bluetooth.svg';
+import scratchLinkIcon from './icons/scratchlink.svg';
 
 import styles from './connection-modal.css';
 
 const UnavailableStep = props => (
     <Box className={styles.body}>
         <Box className={styles.activityArea}>
-            <Box className={styles.centeredRow}>
-                <div className={styles.deviceActivity}>
-                    <img
-                        className={styles.scratchLinkIcon}
-                        src={scratchLinkIcon}
-                    />
+            <div className={styles.scratchLinkHelp}>
+                <div className={styles.scratchLinkHelpStep}>
+                    <div className={styles.helpStepNumber}>
+                        {'1'}
+                    </div>
+                    <div className={styles.helpStepImage}>
+                        <img
+                            className={styles.scratchLinkIcon}
+                            src={scratchLinkIcon}
+                        />
+                    </div>
+                    <div className={styles.helpStepText}>
+                        <FormattedMessage
+                            defaultMessage="Make sure you have Scratch Link installed and running"
+                            description="Message for getting Scratch Link installed"
+                            id="gui.connection.unavailable.installscratchlink"
+                        />
+                    </div>
                 </div>
-            </Box>
+                <div className={styles.scratchLinkHelpStep}>
+                    <div className={styles.helpStepNumber}>
+                        {'2'}
+                    </div>
+                    <div className={styles.helpStepImage}>
+                        <img
+                            className={styles.scratchLinkIcon}
+                            src={bluetoothIcon}
+                        />
+                    </div>
+                    <div className={styles.helpStepText}>
+                        <FormattedMessage
+                            defaultMessage="Check that Bluetooth is enabled"
+                            description="Message for making sure Bluetooth is enabled"
+                            id="gui.connection.unavailable.enablebluetooth"
+                        />
+                    </div>
+                </div>
+            </div>
         </Box>
         <Box className={styles.bottomArea}>
-            <div className={styles.instructions}>
-                <FormattedMessage
-                    defaultMessage="Please start Scratch Link and turn on Bluetooth."
-                    description="Scratch link is not installed message"
-                    id="gui.connection.unavailableMessage"
-                />
-            </div>
             <Dots
                 error
                 total={3}
@@ -46,7 +70,7 @@ const UnavailableStep = props => (
                     <FormattedMessage
                         defaultMessage="Try again"
                         description="Button to initiate trying the device connection again after an error"
-                        id="gui.connection.tryagainbutton"
+                        id="gui.connection.unavailable.tryagainbutton"
                     />
                 </button>
                 <button
@@ -60,7 +84,7 @@ const UnavailableStep = props => (
                     <FormattedMessage
                         defaultMessage="Help"
                         description="Button to view help content"
-                        id="gui.connection.helpbutton"
+                        id="gui.connection.unavailable.helpbutton"
                     />
                 </button>
             </Box>

src/components/modal/modal.css

@@ -122,3 +122,14 @@ $sides: 20rem;
     font-weight: normal;
     padding-left: 0;
 }
+
+.header-item-help {
+    padding: 0;
+    margin-right: -4.75rem;
+}
+
+.help-button {
+    font-weight: normal;
+    padding-right: 0;
+    font-size: 0.75rem;
+}

src/components/modal/modal.jsx

@@ -9,6 +9,7 @@ import Button from '../button/button.jsx';
 import CloseButton from '../close-button/close-button.jsx';
 
 import backIcon from '../../lib/assets/icon--back.svg';
+import helpIcon from '../../lib/assets/icon--help.svg';
 
 import styles from './modal.css';
 
@@ -27,6 +28,26 @@ const ModalComponent = props => (
             grow={1}
         >
             <div className={classNames(styles.header, props.headerClassName)}>
+                {props.onHelp ? (
+                    <div
+                        className={classNames(
+                            styles.headerItem,
+                            styles.headerItemHelp
+                        )}
+                    >
+                        <Button
+                            className={styles.helpButton}
+                            iconSrc={helpIcon}
+                            onClick={props.onHelp}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Help"
+                                description="Help button in modal"
+                                id="gui.modal.help"
+                            />
+                        </Button>
+                    </div>
+                ) : null}
                 <div
                     className={classNames(
                         styles.headerItem,
@@ -82,6 +103,7 @@ ModalComponent.propTypes = {
     fullScreen: PropTypes.bool,
     headerClassName: PropTypes.string,
     headerImage: PropTypes.string,
+    onHelp: PropTypes.func,
     onRequestClose: PropTypes.func
 };
 

src/containers/blocks.jsx

@@ -355,7 +355,9 @@ class Blocks extends React.Component {
                 extensionId: extensionId,
                 deviceImage: extension.deviceImage,
                 smallDeviceImage: extension.smallDeviceImage,
-                name: extension.name
+                name: extension.name,
+                connectingMessage: extension.connectingMessage,
+                helpLink: extension.helpLink
             }});
         }
     }
@@ -419,8 +421,10 @@ class Blocks extends React.Component {
                 ) : null}
                 {this.state.connectionModal ? (
                     <ConnectionModal
+                        connectingMessage={this.state.connectionModal.connectingMessage}
                         deviceImage={this.state.connectionModal.deviceImage}
                         extensionId={this.state.connectionModal.extensionId}
+                        helpLink={this.state.connectionModal.helpLink}
                         name={this.state.connectionModal.name}
                         smallDeviceImage={this.state.connectionModal.smallDeviceImage}
                         vm={vm}

src/containers/connection-modal.jsx

@@ -12,7 +12,8 @@ class ConnectionModal extends React.Component {
             'handleConnected',
             'handleConnecting',
             'handleDisconnect',
-            'handleError'
+            'handleError',
+            'handleHelp'
         ]);
         this.state = {
             phase: PHASES.scanning
@@ -76,11 +77,12 @@ class ConnectionModal extends React.Component {
         });
     }
     handleHelp () {
-        // @todo: implement the help button
+        window.open(this.props.helpLink, '_blank');
     }
     render () {
         return (
             <ConnectionModalComponent
+                connectingMessage={this.props.connectingMessage}
                 deviceImage={this.props.deviceImage}
                 extensionId={this.props.extensionId}
                 name={this.props.name}
@@ -100,8 +102,10 @@ class ConnectionModal extends React.Component {
 }
 
 ConnectionModal.propTypes = {
+    connectingMessage: PropTypes.node.isRequired,
     deviceImage: PropTypes.string.isRequired,
     extensionId: PropTypes.string.isRequired,
+    helpLink: PropTypes.string.isRequired,
     name: PropTypes.node.isRequired,
     onCancel: PropTypes.func.isRequired,
     onStatusButtonUpdate: PropTypes.func.isRequired,

src/lib/libraries/extensions/index.jsx

@@ -106,7 +106,15 @@ export default [
         disabled: true,
         launchDeviceConnectionFlow: true,
         deviceImage: microbitDeviceImage,
-        smallDeviceImage: microbitMenuImage
+        smallDeviceImage: microbitMenuImage,
+        connectingMessage: (
+            <FormattedMessage
+                defaultMessage="Connecting"
+                description="Message to help people connect to their micro:bit."
+                id="gui.extension.microbit.connectingMessage"
+            />
+        ),
+        helpLink: 'https://scratch.mit.edu/microbit'
     },
     {
         name: 'LEGO MINDSTORMS EV3',
@@ -123,7 +131,15 @@ export default [
         disabled: true,
         launchDeviceConnectionFlow: true,
         deviceImage: ev3DeviceImage,
-        smallDeviceImage: ev3MenuImage
+        smallDeviceImage: ev3MenuImage,
+        connectingMessage: (
+            <FormattedMessage
+                defaultMessage="Connecting. Make sure the pin on your EV3 is set to 1234."
+                description="Message to help people connect to their EV3. Must note the PIN should be 1234."
+                id="gui.extension.ev3.connectingMessage"
+            />
+        ),
+        helpLink: 'https://scratch.mit.edu/ev3'
     },
     {
         name: 'LEGO WeDo 2.0',