feat: show project preview (#43967)

* feat: add data for preview to challengeMeta

* feat: allow creation of project preview frames

* feat: make project preview data available for frame

* refactor: simplify reducer

* feat: show project preview for first challenge

* feat: show project preview on MultiFile challenges

* test: check for presence/absence of preview modal

* fix: simplify previewProject saga

* test: uncomment project preview test

* fix: increase modal size + change modal title

* modal-footer

* feat: adjust preview size

* fix: remove margin, padding, and line-height for preview of finished projects

* Revert "fix: remove margin, padding, and line-height for preview of finished projects"

This reverts commit 0db11a0819.

* fix: remove margin on all previews

* refactor: use closeModal('projectPreview') for clarity

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: get started -> start coding!

* fix: update closeModal type

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/templates/Challenges/classic/show.tsx

@@ -28,6 +28,9 @@ import CompletionModal from '../components/completion-modal';
 import HelpModal from '../components/help-modal';
 import Output from '../components/output';
 import Preview from '../components/preview';
+import ProjectPreviewModal, {
+  PreviewConfig
+} from '../components/project-preview-modal';
 import SidePanel from '../components/side-panel';
 import VideoModal from '../components/video-modal';
 import {
@@ -41,7 +44,10 @@ import {
   initConsole,
   initTests,
   isChallengeCompletedSelector,
-  updateChallengeMeta
+  previewMounted,
+  updateChallengeMeta,
+  openModal,
+  setEditorFocusability
 } from '../redux';
 import { getGuideUrl } from '../utils';
 import MultifileEditor from './MultifileEditor';
@@ -68,7 +74,10 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
       updateChallengeMeta,
       challengeMounted,
       executeChallenge,
-      cancelTests
+      cancelTests,
+      previewMounted,
+      openModal,
+      setEditorFocusability
     },
     dispatch
   );
@@ -87,10 +96,13 @@ interface ShowClassicProps {
   output: string[];
   pageContext: {
     challengeMeta: ChallengeMeta;
+    projectPreview: PreviewConfig & { showProjectPreview: boolean };
   };
   t: TFunction;
   tests: Test[];
   updateChallengeMeta: (arg0: ChallengeMeta) => void;
+  openModal: (modal: string) => void;
+  setEditorFocusability: (canFocus: boolean) => void;
 }
 
 interface ShowClassicState {
@@ -231,6 +243,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
       initConsole,
       initTests,
       updateChallengeMeta,
+      openModal,
       data: {
         challengeNode: {
           challengeFiles,
@@ -240,11 +253,15 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
           helpCategory
         }
       },
-      pageContext: { challengeMeta }
+      pageContext: {
+        challengeMeta,
+        projectPreview: { showProjectPreview }
+      }
     } = this.props;
     initConsole('');
     createFiles(challengeFiles ?? []);
     initTests(tests);
+    if (showProjectPreview) openModal('projectPreview');
     updateChallengeMeta({
       ...challengeMeta,
       title,
@@ -358,7 +375,11 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
 
   renderPreview() {
     return (
-      <Preview className='full-height' disableIframe={this.state.resizing} />
+      <Preview
+        className='full-height'
+        disableIframe={this.state.resizing}
+        previewMounted={previewMounted}
+      />
     );
   }
 
@@ -383,7 +404,8 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
     const {
       executeChallenge,
       pageContext: {
-        challengeMeta: { nextChallengePath, prevChallengePath }
+        challengeMeta: { nextChallengePath, prevChallengePath },
+        projectPreview
       },
       challengeFiles,
       t
@@ -443,6 +465,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
           <HelpModal />
           <VideoModal videoUrl={this.getVideoUrl()} />
           <ResetModal />
+          <ProjectPreviewModal previewConfig={projectPreview} />
         </LearnLayout>
       </Hotkeys>
     );
@@ -456,9 +479,6 @@ export default connect(
   mapDispatchToProps
 )(withTranslation()(ShowClassic));
 
-// TODO: handle jsx (not sure why it doesn't get an editableRegion) EDIT:
-// probably because the dummy challenge didn't include it, so Gatsby couldn't
-// infer it.
 export const query = graphql`
   query ClassicChallenge($slug: String!) {
     challengeNode(fields: { slug: { eq: $slug } }) {