Add prescan step

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

@@ -5,6 +5,7 @@ import keyMirror from 'keymirror';
 import Box from '../box/box.jsx';
 import Modal from '../modal/modal.jsx';
 
+import PrescanStep from './prescan-step.jsx';
 import ScanningStep from '../../containers/scanning-step.jsx';
 import ConnectingStep from './connecting-step.jsx';
 import ConnectedStep from './connected-step.jsx';
@@ -14,6 +15,7 @@ import UnavailableStep from './unavailable-step.jsx';
 import styles from './connection-modal.css';
 
 const PHASES = keyMirror({
+    prescan: null,
     scanning: null,
     connecting: null,
     connected: null,
@@ -31,6 +33,7 @@ const ConnectionModalComponent = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
+            {props.phase === PHASES.prescan && <PrescanStep {...props} />}
             {props.phase === PHASES.scanning && <ScanningStep {...props} />}
             {props.phase === PHASES.connecting && <ConnectingStep {...props} />}
             {props.phase === PHASES.connected && <ConnectedStep {...props} />}

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

@@ -0,0 +1,55 @@
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Box from '../box/box.jsx';
+import Dots from './dots.jsx';
+
+import radarIcon from './icons/searching.png';
+import bluetoothIcon from './icons/bluetooth-white.svg';
+
+import styles from './connection-modal.css';
+
+const PrescanStep = props => (
+    <Box className={styles.body}>
+        <Box className={styles.activityArea}>
+            <Box className={styles.centeredRow}>
+                <div className={styles.centeredRow}>
+                    <img
+                        className={styles.radar}
+                        src={radarIcon}
+                    />
+                    <img
+                        className={styles.bluetoothConnectingIcon}
+                        src={bluetoothIcon}
+                    />
+                </div>
+            </Box>
+        </Box>
+        <Box className={styles.bottomArea}>
+            <Box className={styles.instructions}>
+                {props.connectingMessage}
+            </Box>
+            <Dots
+                counter={1}
+                total={4}
+            />
+            <button
+                className={styles.connectionButton}
+                // onClick={props.onRefresh}
+            >
+                <FormattedMessage
+                    defaultMessage="Search for WeDo"
+                    description="Button in prompt for starting a search"
+                    id="gui.connection.startSearch"
+                />
+            </button>
+        </Box>
+    </Box>
+);
+
+PrescanStep.propTypes = {
+    connectingMessage: PropTypes.node.isRequired
+};
+
+export default PrescanStep;

src/lib/libraries/extensions/index.jsx

@@ -153,6 +153,19 @@ export default [
             />
         ),
         featured: true,
-        disabled: true
+        disabled: false,
+        launchDeviceConnectionFlow: true,
+        startWithPrescanStep: true,
+        deviceImage: ev3DeviceImage,
+        smallDeviceImage: ev3MenuImage,
+        connectingMessage: (
+            <FormattedMessage
+                defaultMessage="Connecting"
+                description="Message to help people connect to their WeDo."
+                id="gui.extension.wedo2.connectingMessage"
+            />
+        ),
+        helpLink: 'https://scratch.mit.edu/wedo'
+
     }
 ];