Move IDEOverlays into a separate component

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -96,7 +96,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             href="/login"
           >
             <button
-              class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+              class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
               display="inline"
               focusable="false"
               kind="primary"
@@ -112,7 +112,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         </div>
         <div>
           <button
-            class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+            class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
             display="inline"
             focusable="false"
             kind="primary"
@@ -507,7 +507,7 @@ exports[`Nav renders editor version for mobile 1`] = `
             href="/login"
           >
             <button
-              class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+              class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
               display="inline"
               focusable="false"
               kind="primary"
@@ -523,7 +523,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         </div>
         <div>
           <button
-            class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+            class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
             display="inline"
             focusable="false"
             kind="primary"

client/modules/IDE/components/IDEOverlays.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation, useParams } from 'react-router-dom';
+import Overlay from '../../App/components/Overlay';
+import {
+  closeKeyboardShortcutModal,
+  closePreferences,
+  closeShareModal,
+  hideErrorModal
+} from '../actions/ide';
+import About from './About';
+import AddToCollectionList from './AddToCollectionList';
+import ErrorModal from './ErrorModal';
+import Feedback from './Feedback';
+import KeyboardShortcutModal from './KeyboardShortcutModal';
+import NewFileModal from './NewFileModal';
+import NewFolderModal from './NewFolderModal';
+import Preferences from './Preferences';
+import { CollectionSearchbar } from './Searchbar';
+import ShareModal from './ShareModal';
+import UploadFileModal from './UploadFileModal';
+
+export default function IDEOverlays() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const params = useParams();
+
+  const {
+    modalIsVisible,
+    newFolderModalVisible,
+    uploadFileModalVisible,
+    preferencesIsVisible,
+    keyboardShortcutVisible,
+    shareModalVisible,
+    shareModalProjectId,
+    shareModalProjectName,
+    shareModalProjectUsername,
+    errorType,
+    previousPath
+  } = useSelector((state) => state.ide);
+
+  return (
+    <>
+      {preferencesIsVisible && (
+        <Overlay
+          title={t('Preferences.Settings')}
+          ariaLabel={t('Preferences.Settings')}
+          closeOverlay={() => dispatch(closePreferences())}
+        >
+          <Preferences />
+        </Overlay>
+      )}
+      {location.pathname === '/about' && (
+        <Overlay
+          title={t('About.Title')}
+          previousPath={previousPath}
+          ariaLabel={t('About.Title')}
+        >
+          <About />
+        </Overlay>
+      )}
+      {location.pathname === '/feedback' && (
+        <Overlay
+          title={t('IDEView.SubmitFeedback')}
+          previousPath={previousPath}
+          ariaLabel={t('IDEView.SubmitFeedbackARIA')}
+        >
+          <Feedback />
+        </Overlay>
+      )}
+      {location.pathname.match(/add-to-collection$/) && (
+        <Overlay
+          ariaLabel={t('IDEView.AddCollectionARIA')}
+          title={t('IDEView.AddCollectionTitle')}
+          previousPath={previousPath}
+          actions={<CollectionSearchbar />}
+          isFixedHeight
+        >
+          <AddToCollectionList
+            projectId={params.project_id}
+            username={params.username}
+          />
+        </Overlay>
+      )}
+      {shareModalVisible && (
+        <Overlay
+          title={t('IDEView.ShareTitle')}
+          ariaLabel={t('IDEView.ShareARIA')}
+          closeOverlay={() => dispatch(closeShareModal())}
+        >
+          <ShareModal
+            projectId={shareModalProjectId}
+            projectName={shareModalProjectName}
+            ownerUsername={shareModalProjectUsername}
+          />
+        </Overlay>
+      )}
+      {keyboardShortcutVisible && (
+        <Overlay
+          title={t('KeyboardShortcuts.Title')}
+          ariaLabel={t('KeyboardShortcuts.Title')}
+          closeOverlay={() => dispatch(closeKeyboardShortcutModal())}
+        >
+          <KeyboardShortcutModal />
+        </Overlay>
+      )}
+      {errorType && (
+        <Overlay
+          title={t('Common.Error')}
+          ariaLabel={t('Common.ErrorARIA')}
+          closeOverlay={() => dispatch(hideErrorModal())}
+        >
+          <ErrorModal
+            type={errorType}
+            closeModal={() => dispatch(hideErrorModal())}
+          />
+        </Overlay>
+      )}
+      {modalIsVisible && <NewFileModal />}
+      {newFolderModalVisible && <NewFolderModal />}
+      {uploadFileModalVisible && <UploadFileModal />}
+    </>
+  );
+}

client/modules/IDE/pages/IDEView.jsx

@@ -7,16 +7,10 @@ import { useTranslation, withTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 import SplitPane from 'react-split-pane';
 import Editor from '../components/Editor';
+import IDEOverlays from '../components/IDEOverlays';
 import IDEKeyHandlers from '../components/IDEKeyHandlers';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
-import Preferences from '../components/Preferences/index';
-import NewFileModal from '../components/NewFileModal';
-import NewFolderModal from '../components/NewFolderModal';
-import UploadFileModal from '../components/UploadFileModal';
-import ShareModal from '../components/ShareModal';
-import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
-import ErrorModal from '../components/ErrorModal';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
 import * as FileActions from '../actions/files';
@@ -27,11 +21,6 @@ import * as PreferencesActions from '../actions/preferences';
 import * as UserActions from '../../User/actions';
 import * as ConsoleActions from '../actions/console';
 import { getHTMLFile } from '../reducers/files';
-import Overlay from '../../App/components/Overlay';
-import About from '../components/About';
-import AddToCollectionList from '../components/AddToCollectionList';
-import Feedback from '../components/Feedback';
-import { CollectionSearchbar } from '../components/Searchbar';
 import { selectActiveFile } from '../selectors/files';
 import { getIsUserOwner } from '../selectors/users';
 import RootPage from '../../../components/RootPage';
@@ -184,15 +173,6 @@ class IDEView extends React.Component {
             key={this.props.project.id}
           />
         </CmControllerContext.Provider>
-        {this.props.ide.preferencesIsVisible && (
-          <Overlay
-            title={this.props.t('Preferences.Settings')}
-            ariaLabel={this.props.t('Preferences.Settings')}
-            closeOverlay={this.props.closePreferences}
-          >
-            <Preferences />
-          </Overlay>
-        )}
         <main className="editor-preview-container">
           <SplitPane
             split="vertical"
@@ -262,76 +242,7 @@ class IDEView extends React.Component {
             </SplitPane>
           </SplitPane>
         </main>
-        {this.props.ide.modalIsVisible && <NewFileModal />}
-        {this.props.ide.newFolderModalVisible && <NewFolderModal />}
-        {this.props.ide.uploadFileModalVisible && <UploadFileModal />}
-        {this.props.location.pathname === '/about' && (
-          <Overlay
-            title={this.props.t('About.Title')}
-            previousPath={this.props.ide.previousPath}
-            ariaLabel={this.props.t('About.Title')}
-          >
-            <About previousPath={this.props.ide.previousPath} />
-          </Overlay>
-        )}
-        {this.props.location.pathname === '/feedback' && (
-          <Overlay
-            title={this.props.t('IDEView.SubmitFeedback')}
-            previousPath={this.props.ide.previousPath}
-            ariaLabel={this.props.t('IDEView.SubmitFeedbackARIA')}
-          >
-            <Feedback />
-          </Overlay>
-        )}
-        {this.props.location.pathname.match(/add-to-collection$/) && (
-          <Overlay
-            ariaLabel={this.props.t('IDEView.AddCollectionARIA')}
-            title={this.props.t('IDEView.AddCollectionTitle')}
-            previousPath={this.props.ide.previousPath}
-            actions={<CollectionSearchbar />}
-            isFixedHeight
-          >
-            <AddToCollectionList
-              projectId={this.props.params.project_id}
-              username={this.props.params.username}
-              user={this.props.user}
-            />
-          </Overlay>
-        )}
-        {this.props.ide.shareModalVisible && (
-          <Overlay
-            title={this.props.t('IDEView.ShareTitle')}
-            ariaLabel={this.props.t('IDEView.ShareARIA')}
-            closeOverlay={this.props.closeShareModal}
-          >
-            <ShareModal
-              projectId={this.props.ide.shareModalProjectId}
-              projectName={this.props.ide.shareModalProjectName}
-              ownerUsername={this.props.ide.shareModalProjectUsername}
-            />
-          </Overlay>
-        )}
-        {this.props.ide.keyboardShortcutVisible && (
-          <Overlay
-            title={this.props.t('KeyboardShortcuts.Title')}
-            ariaLabel={this.props.t('KeyboardShortcuts.Title')}
-            closeOverlay={this.props.closeKeyboardShortcutModal}
-          >
-            <KeyboardShortcutModal />
-          </Overlay>
-        )}
-        {this.props.ide.errorType && (
-          <Overlay
-            title={this.props.t('Common.Error')}
-            ariaLabel={this.props.t('Common.ErrorARIA')}
-            closeOverlay={this.props.hideErrorModal}
-          >
-            <ErrorModal
-              type={this.props.ide.errorType}
-              closeModal={this.props.hideErrorModal}
-            />
-          </Overlay>
-        )}
+        <IDEOverlays />
       </RootPage>
     );
   }
@@ -397,7 +308,6 @@ IDEView.propTypes = {
     autocloseBracketsQuotes: PropTypes.bool.isRequired,
     autocompleteHinter: PropTypes.bool.isRequired
   }).isRequired,
-  closePreferences: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
@@ -409,11 +319,8 @@ IDEView.propTypes = {
     content: PropTypes.string.isRequired
   }).isRequired,
   updateFileContent: PropTypes.func.isRequired,
-  closeShareModal: PropTypes.func.isRequired,
-  closeKeyboardShortcutModal: PropTypes.func.isRequired,
   autosaveProject: PropTypes.func.isRequired,
   setPreviousPath: PropTypes.func.isRequired,
-  hideErrorModal: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   isUserOwner: PropTypes.bool.isRequired