Merge pull request #4657 from evhan55/extensions/lib-index-file-refactor

Refactor extensions library index file

src/components/connection-modal/auto-scanning-step.jsx

@@ -45,8 +45,8 @@ const AutoScanningStep = props => (
                                 src={radarIcon}
                             />
                             <img
-                                className={styles.peripheralButtonImage}
-                                src={props.peripheralButtonImage}
+                                className={styles.connectionTipIcon}
+                                src={props.connectionTipIconURL}
                             />
                         </React.Fragment>
                     )}
@@ -142,9 +142,9 @@ const AutoScanningStep = props => (
 );
 
 AutoScanningStep.propTypes = {
+    connectionTipIconURL: PropTypes.string,
     onRefresh: PropTypes.func,
     onStartScan: PropTypes.func,
-    peripheralButtonImage: PropTypes.string,
     phase: PropTypes.oneOf(Object.keys(PHASES))
 };
 

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

@@ -15,7 +15,7 @@ const ConnectedStep = props => (
                 <div className={styles.peripheralActivity}>
                     <img
                         className={styles.peripheralActivityIcon}
-                        src={props.peripheralImage}
+                        src={props.connectionIconURL}
                     />
                     <img
                         className={styles.bluetoothConnectedIcon}
@@ -64,9 +64,9 @@ const ConnectedStep = props => (
 );
 
 ConnectedStep.propTypes = {
+    connectionIconURL: PropTypes.string.isRequired,
     onCancel: PropTypes.func,
-    onDisconnect: PropTypes.func,
-    peripheralImage: PropTypes.string.isRequired
+    onDisconnect: PropTypes.func
 };
 
 export default ConnectedStep;

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

@@ -18,7 +18,7 @@ const ConnectingStep = props => (
                 <div className={styles.peripheralActivity}>
                     <img
                         className={styles.peripheralActivityIcon}
-                        src={props.peripheralImage}
+                        src={props.connectionIconURL}
                     />
                     <img
                         className={styles.bluetoothConnectingIcon}
@@ -63,8 +63,8 @@ const ConnectingStep = props => (
 
 ConnectingStep.propTypes = {
     connectingMessage: PropTypes.node.isRequired,
-    onDisconnect: PropTypes.func,
-    peripheralImage: PropTypes.string.isRequired
+    connectionIconURL: PropTypes.string.isRequired,
+    onDisconnect: PropTypes.func
 };
 
 export default ConnectingStep;

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

@@ -162,7 +162,7 @@
     height: 80px; */
 }
 
-.peripheral-button-image {
+.connection-tip-icon {
     position: absolute;
 }
 

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

@@ -27,7 +27,7 @@ const ConnectionModalComponent = props => (
         className={styles.modalContent}
         contentLabel={props.name}
         headerClassName={styles.header}
-        headerImage={props.smallPeripheralImage}
+        headerImage={props.connectionSmallIconURL}
         id="connectionModal"
         onHelp={props.onHelp}
         onRequestClose={props.onCancel}
@@ -45,12 +45,12 @@ const ConnectionModalComponent = props => (
 
 ConnectionModalComponent.propTypes = {
     connectingMessage: PropTypes.node,
+    connectionSmallIconURL: PropTypes.string,
+    connectionTipIconURL: PropTypes.string,
     name: PropTypes.node,
     onCancel: PropTypes.func.isRequired,
     onHelp: PropTypes.func.isRequired,
-    peripheralButtonImage: PropTypes.string,
     phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
-    smallPeripheralImage: PropTypes.string,
     title: PropTypes.string.isRequired,
     useAutoScan: PropTypes.bool.isRequired
 };

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

@@ -17,7 +17,7 @@ const ErrorStep = props => (
                 <div className={styles.peripheralActivity}>
                     <img
                         className={styles.peripheralActivityIcon}
-                        src={props.peripheralImage}
+                        src={props.connectionIconURL}
                     />
                 </div>
             </Box>
@@ -70,9 +70,9 @@ const ErrorStep = props => (
 );
 
 ErrorStep.propTypes = {
+    connectionIconURL: PropTypes.string.isRequired,
     onHelp: PropTypes.func,
-    onScanning: PropTypes.func,
-    peripheralImage: PropTypes.string.isRequired
+    onScanning: PropTypes.func
 };
 
 export default ErrorStep;

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

@@ -23,7 +23,7 @@ class PeripheralTile extends React.Component {
                 <Box className={styles.peripheralTileName}>
                     <img
                         className={styles.peripheralTileImage}
-                        src={this.props.smallPeripheralImage}
+                        src={this.props.connectionSmallIconURL}
                     />
                     <Box className={styles.peripheralTileNameWrapper}>
                         <Box className={styles.peripheralTileNameLabel}>
@@ -77,11 +77,11 @@ class PeripheralTile extends React.Component {
 }
 
 PeripheralTile.propTypes = {
+    connectionSmallIconURL: PropTypes.string,
     name: PropTypes.string,
     onConnecting: PropTypes.func,
     peripheralId: PropTypes.string,
-    rssi: PropTypes.number,
-    smallPeripheralImage: PropTypes.string
+    rssi: PropTypes.number
 };
 
 export default PeripheralTile;

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

@@ -34,11 +34,11 @@ const ScanningStep = props => (
                     <div className={styles.peripheralTilePane}>
                         {props.peripheralList.map(peripheral =>
                             (<PeripheralTile
+                                connectionSmallIconURL={props.connectionSmallIconURL}
                                 key={peripheral.peripheralId}
                                 name={peripheral.name}
                                 peripheralId={peripheral.peripheralId}
                                 rssi={peripheral.rssi}
-                                smallPeripheralImage={props.smallPeripheralImage}
                                 onConnecting={props.onConnecting}
                             />)
                         )}
@@ -86,6 +86,7 @@ const ScanningStep = props => (
 );
 
 ScanningStep.propTypes = {
+    connectionSmallIconURL: PropTypes.string,
     onConnecting: PropTypes.func,
     onRefresh: PropTypes.func,
     peripheralList: PropTypes.arrayOf(PropTypes.shape({
@@ -93,8 +94,7 @@ ScanningStep.propTypes = {
         rssi: PropTypes.number,
         peripheralId: PropTypes.string
     })),
-    scanning: PropTypes.bool.isRequired,
-    smallPeripheralImage: PropTypes.string
+    scanning: PropTypes.bool.isRequired
 };
 
 ScanningStep.defaultProps = {

src/containers/auto-scanning-step.jsx

@@ -67,7 +67,7 @@ class AutoScanningStep extends React.Component {
     render () {
         return (
             <ScanningStepComponent
-                peripheralButtonImage={this.props.peripheralButtonImage}
+                connectionTipIconURL={this.props.connectionTipIconURL}
                 phase={this.state.phase}
                 title={this.props.extensionId}
                 onRefresh={this.handleRefresh}
@@ -78,9 +78,9 @@ class AutoScanningStep extends React.Component {
 }
 
 AutoScanningStep.propTypes = {
+    connectionTipIconURL: PropTypes.string,
     extensionId: PropTypes.string.isRequired,
     onConnecting: PropTypes.func.isRequired,
-    peripheralButtonImage: PropTypes.string,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 

src/containers/connection-modal.jsx

@@ -108,12 +108,12 @@ class ConnectionModal extends React.Component {
         return (
             <ConnectionModalComponent
                 connectingMessage={this.state.extension.connectingMessage}
+                connectionIconURL={this.state.extension.connectionIconURL}
+                connectionSmallIconURL={this.state.extension.connectionSmallIconURL}
+                connectionTipIconURL={this.state.extension.connectionTipIconURL}
                 extensionId={this.props.extensionId}
                 name={this.state.extension.name}
-                peripheralButtonImage={this.state.extension.peripheralButtonImage}
-                peripheralImage={this.state.extension.peripheralImage}
                 phase={this.state.phase}
-                smallPeripheralImage={this.state.extension.smallPeripheralImage}
                 title={this.props.extensionId}
                 useAutoScan={this.state.extension.useAutoScan}
                 vm={this.props.vm}

src/containers/scanning-step.jsx

@@ -54,10 +54,10 @@ class ScanningStep extends React.Component {
     render () {
         return (
             <ScanningStepComponent
+                connectionSmallIconURL={this.props.connectionSmallIconURL}
                 peripheralList={this.state.peripheralList}
                 phase={this.state.phase}
                 scanning={this.state.scanning}
-                smallPeripheralImage={this.props.smallPeripheralImage}
                 title={this.props.extensionId}
                 onConnected={this.props.onConnected}
                 onConnecting={this.props.onConnecting}
@@ -68,10 +68,10 @@ class ScanningStep extends React.Component {
 }
 
 ScanningStep.propTypes = {
+    connectionSmallIconURL: PropTypes.string,
     extensionId: PropTypes.string.isRequired,
     onConnected: PropTypes.func.isRequired,
     onConnecting: PropTypes.func.isRequired,
-    smallPeripheralImage: PropTypes.string,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 

src/lib/libraries/extensions/index.jsx

@@ -1,31 +1,42 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import musicImage from './music.png';
-import musicInsetImage from './music-small.svg';
-import penImage from './pen.png';
-import penInsetImage from './pen-small.svg';
-import videoImage from './video-sensing.png';
-import videoInsetImage from './video-sensing-small.svg';
-import translateImage from './translate.png';
-import translateInsetImage from './translate-small.png';
-import microbitImage from './microbit.png';
-import ev3Image from './ev3.png';
-import wedoImage from './wedo.png';
-import text2speechImage from './text2speech.png';
-import text2speechInsetImage from './text2speech-small.svg';
-import makeymakeyImage from './makeymakey.png';
-import makeymakeyInsetImage from './makeymakey-small.svg';
-import boostImage from './boost.png';
-import boostInsetImage from './boost-small.svg';
+import musicIconURL from './music/music.png';
+import musicInsetIconURL from './music/music-small.svg';
 
-import microbitPeripheralImage from './peripheral-connection/microbit/microbit-illustration.svg';
-import microbitMenuImage from './peripheral-connection/microbit/microbit-small.svg';
-import ev3PeripheralImage from './peripheral-connection/ev3/ev3-hub-illustration.svg';
-import ev3MenuImage from './peripheral-connection/ev3/ev3-small.svg';
-import wedoPeripheralImage from './peripheral-connection/wedo/wedo-illustration.svg';
-import wedoMenuImage from './peripheral-connection/wedo/wedo-small.svg';
-import wedoButtonImage from './peripheral-connection/wedo/wedo-button-illustration.svg';
+import penIconURL from './pen/pen.png';
+import penInsetIconURL from './pen/pen-small.svg';
+
+import videoSensingIconURL from './videoSensing/video-sensing.png';
+import videoSensingInsetIconURL from './videoSensing/video-sensing-small.svg';
+
+import text2speechIconURL from './text2speech/text2speech.png';
+import text2speechInsetIconURL from './text2speech/text2speech-small.svg';
+
+import translateIconURL from './translate/translate.png';
+import translateInsetIconURL from './translate/translate-small.png';
+
+import makeymakeyIconURL from './makeymakey/makeymakey.png';
+import makeymakeyInsetIconURL from './makeymakey/makeymakey-small.svg';
+
+import microbitIconURL from './microbit/microbit.png';
+import microbitInsetIconURL from './microbit/microbit-small.svg';
+import microbitConnectionIconURL from './microbit/microbit-illustration.svg';
+import microbitConnectionSmallIconURL from './microbit/microbit-small.svg';
+
+import ev3IconURL from './ev3/ev3.png';
+import ev3InsetIconURL from './ev3/ev3-small.svg';
+import ev3ConnectionIconURL from './ev3/ev3-hub-illustration.svg';
+import ev3ConnectionSmallIconURL from './ev3/ev3-small.svg';
+
+import wedo2IconURL from './wedo2/wedo.png'; // TODO: Rename file names to match variable/prop names?
+import wedo2InsetIconURL from './wedo2/wedo-small.svg';
+import wedo2ConnectionIconURL from './wedo2/wedo-illustration.svg';
+import wedo2ConnectionSmallIconURL from './wedo2/wedo-small.svg';
+import wedo2ConnectionTipIconURL from './wedo2/wedo-button-illustration.svg';
+
+import boostIconURL from './boost/boost.png';
+import boostInsetIconURL from './boost/boost-small.svg';
 
 export default [
     {
@@ -37,8 +48,8 @@ export default [
             />
         ),
         extensionId: 'music',
-        iconURL: musicImage,
-        insetIconURL: musicInsetImage,
+        iconURL: musicIconURL,
+        insetIconURL: musicInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Play instruments and drums."
@@ -57,8 +68,8 @@ export default [
             />
         ),
         extensionId: 'pen',
-        iconURL: penImage,
-        insetIconURL: penInsetImage,
+        iconURL: penIconURL,
+        insetIconURL: penInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Draw with your sprites."
@@ -77,8 +88,8 @@ export default [
             />
         ),
         extensionId: 'videoSensing',
-        iconURL: videoImage,
-        insetIconURL: videoInsetImage,
+        iconURL: videoSensingIconURL,
+        insetIconURL: videoSensingInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Sense motion with the camera."
@@ -98,8 +109,8 @@ export default [
         ),
         extensionId: 'text2speech',
         collaborator: 'Amazon Web Services',
-        iconURL: text2speechImage,
-        insetIconURL: text2speechInsetImage,
+        iconURL: text2speechIconURL,
+        insetIconURL: text2speechInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Make your projects talk."
@@ -120,8 +131,8 @@ export default [
         ),
         extensionId: 'translate',
         collaborator: 'Google',
-        iconURL: translateImage,
-        insetIconURL: translateInsetImage,
+        iconURL: translateIconURL,
+        insetIconURL: translateInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Translate text into many languages."
@@ -136,8 +147,8 @@ export default [
         name: 'Makey Makey',
         extensionId: 'makeymakey',
         collaborator: 'JoyLabz',
-        iconURL: makeymakeyImage,
-        insetIconURL: makeymakeyInsetImage,
+        iconURL: makeymakeyIconURL,
+        insetIconURL: makeymakeyInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Make anything into a key."
@@ -151,8 +162,8 @@ export default [
         name: 'micro:bit',
         extensionId: 'microbit',
         collaborator: 'micro:bit',
-        iconURL: microbitImage,
-        insetIconURL: microbitMenuImage,
+        iconURL: microbitIconURL,
+        insetIconURL: microbitInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Connect your projects with the world."
@@ -166,8 +177,8 @@ export default [
         internetConnectionRequired: true,
         launchPeripheralConnectionFlow: true,
         useAutoScan: false,
-        peripheralImage: microbitPeripheralImage,
-        smallPeripheralImage: microbitMenuImage,
+        connectionIconURL: microbitConnectionIconURL,
+        connectionSmallIconURL: microbitConnectionSmallIconURL,
         connectingMessage: (
             <FormattedMessage
                 defaultMessage="Connecting"
@@ -181,8 +192,8 @@ export default [
         name: 'LEGO MINDSTORMS EV3',
         extensionId: 'ev3',
         collaborator: 'LEGO',
-        iconURL: ev3Image,
-        insetIconURL: ev3MenuImage,
+        iconURL: ev3IconURL,
+        insetIconURL: ev3InsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Build interactive robots and more."
@@ -196,8 +207,8 @@ export default [
         internetConnectionRequired: true,
         launchPeripheralConnectionFlow: true,
         useAutoScan: false,
-        peripheralImage: ev3PeripheralImage,
-        smallPeripheralImage: ev3MenuImage,
+        connectionIconURL: ev3ConnectionIconURL,
+        connectionSmallIconURL: ev3ConnectionSmallIconURL,
         connectingMessage: (
             <FormattedMessage
                 defaultMessage="Connecting. Make sure the pin on your EV3 is set to 1234."
@@ -211,8 +222,8 @@ export default [
         name: 'LEGO Education WeDo 2.0',
         extensionId: 'wedo2',
         collaborator: 'LEGO',
-        iconURL: wedoImage,
-        insetIconURL: wedoMenuImage,
+        iconURL: wedo2IconURL,
+        insetIconURL: wedo2InsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Build with motors and sensors."
@@ -226,9 +237,9 @@ export default [
         internetConnectionRequired: true,
         launchPeripheralConnectionFlow: true,
         useAutoScan: true,
-        peripheralImage: wedoPeripheralImage,
-        smallPeripheralImage: wedoMenuImage,
-        peripheralButtonImage: wedoButtonImage,
+        connectionIconURL: wedo2ConnectionIconURL,
+        connectionSmallIconURL: wedo2ConnectionSmallIconURL,
+        connectionTipIconURL: wedo2ConnectionTipIconURL,
         connectingMessage: (
             <FormattedMessage
                 defaultMessage="Connecting"
@@ -242,8 +253,8 @@ export default [
         name: 'LEGO BOOST',
         extensionId: 'boost',
         collaborator: 'LEGO',
-        iconURL: boostImage,
-        insetIconURL: boostInsetImage,
+        iconURL: boostIconURL,
+        insetIconURL: boostInsetIconURL,
         description: (
             <FormattedMessage
                 defaultMessage="Bring robotic creations to life."

src/reducers/alerts.js

@@ -87,7 +87,7 @@ const reducer = function (state, action) {
                     closeButton: true,
                     extensionId: extensionId,
                     extensionName: extension.name,
-                    iconURL: extension.smallPeripheralImage,
+                    iconURL: extension.connectionSmallIconURL,
                     level: AlertLevels.WARN,
                     showReconnect: true
                 };