fix #429

client/modules/App/components/Overlay.jsx

@@ -57,14 +57,15 @@ Overlay.propTypes = {
   closeOverlay: PropTypes.func,
   title: PropTypes.string,
   ariaLabel: PropTypes.string,
-  previousPath: PropTypes.string.isRequired
+  previousPath: PropTypes.string
 };
 
 Overlay.defaultProps = {
   children: null,
   title: 'Modal',
   closeOverlay: null,
-  ariaLabel: 'modal'
+  ariaLabel: 'modal',
+  previousPath: '/'
 };
 
 export default Overlay;

client/modules/IDE/components/HTTPSModal.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function HTTPSModal() {
+  return (
+    <section className="help-modal">
+      <div className="help-modal__section">
+        <div>
+          <p>Use the checkbox to choose whether this sketch should be loaded using HTTPS or HTTP.</p>
+          <p>You should choose HTTPS if you need to:</p>
+          <ul>
+            <li>access a webcam or microphone</li>
+            <li>access an API served over HTTPS</li>
+          </ul>
+          <p>Choose HTTP if you need to:</p>
+          <ul>
+            <li>access an API served over HTTP</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default HTTPSModal;

client/modules/IDE/components/HelpModal.jsx

@@ -1,61 +0,0 @@
-import React, { PropTypes } from 'react';
-import InlineSVG from 'react-inlinesvg';
-
-const exitUrl = require('../../../images/exit.svg');
-
-const helpContent = {
-  serveSecure: {
-    title: 'Serve over HTTPS',
-    body: (
-      <div>
-        <p>Use the checkbox to choose whether this sketch should be loaded using HTTPS or HTTP.</p>
-        <p>You should choose HTTPS if you need to:</p>
-        <ul>
-          <li>access a webcam or microphone</li>
-          <li>access an API served over HTTPS</li>
-        </ul>
-        <p>Choose HTTP if you need to:</p>
-        <ul>
-          <li>access an API served over HTTP</li>
-        </ul>
-      </div>
-    )
-  }
-};
-
-const fallbackContent = {
-  title: 'No content for this topic',
-  body: null,
-};
-
-class HelpModal extends React.Component {
-  componentDidMount() {
-    this.shareModal.focus();
-  }
-  render() {
-    const content = helpContent[this.props.type] == null ?
-      fallbackContent :
-      helpContent[this.props.type];
-
-    return (
-      <section className="help-modal" ref={(element) => { this.shareModal = element; }} tabIndex="0">
-        <header className="help-modal__header">
-          <h2>{content.title}</h2>
-          <button className="about__exit-button" onClick={this.props.closeModal}>
-            <InlineSVG src={exitUrl} alt="Close Help Overlay" />
-          </button>
-        </header>
-        <div className="help-modal__section">
-          {content.body}
-        </div>
-      </section>
-    );
-  }
-}
-
-HelpModal.propTypes = {
-  type: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired,
-};
-
-export default HelpModal;

client/modules/IDE/pages/IDEView.jsx

@@ -15,7 +15,7 @@ import NewFolderModal from '../components/NewFolderModal';
 import ShareModal from '../components/ShareModal';
 import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
 import ErrorModal from '../components/ErrorModal';
-import HelpModal from '../components/HelpModal';
+import HTTPSModal from '../components/HTTPSModal';
 import Nav from '../../../components/Nav';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
@@ -516,11 +516,11 @@ class IDEView extends React.Component {
         {(() => { // eslint-disable-line
           if (this.props.ide.helpType) {
             return (
-              <Overlay>
+              <Overlay
-                <HelpModal
+                title="Serve over HTTPS"
-                  type={this.props.ide.helpType}
+                closeOverlay={this.props.hideHelpModal}
-                  closeModal={this.props.hideHelpModal}
+              >
-                />
+                <HTTPSModal />
               </Overlay>
             );
           }