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/utils/build.js

@@ -9,7 +9,8 @@ import { getTransformers } from '../rechallenge/transformers';
 import {
   createTestFramer,
   runTestInTestFrame,
-  createMainFramer
+  createMainPreviewFramer,
+  createProjectPreviewFramer
 } from './frame';
 import createWorker from './worker-executor';
 
@@ -138,7 +139,7 @@ function getJSTestRunner({ build, sources }, { proxyLogger, removeComments }) {
 
 async function getDOMTestRunner(buildData, { proxyLogger }, document) {
   await new Promise(resolve =>
-    createTestFramer(document, resolve, proxyLogger)(buildData)
+    createTestFramer(document, proxyLogger, resolve)(buildData)
   );
   return (testString, testTimeout) =>
     runTestInTestFrame(document, testString, testTimeout);
@@ -197,15 +198,23 @@ export function buildBackendChallenge({ url }) {
   };
 }
 
-export async function updatePreview(buildData, document, proxyLogger) {
-  const { challengeType } = buildData;
-
-  if (challengeType === challengeTypes.html) {
-    await new Promise(resolve =>
-      createMainFramer(document, resolve, proxyLogger)(buildData)
-    );
+export function updatePreview(buildData, document, proxyLogger) {
+  if (buildData.challengeType === challengeTypes.html) {
+    createMainPreviewFramer(document, proxyLogger)(buildData);
   } else {
-    throw new Error(`Cannot show preview for challenge type ${challengeType}`);
+    throw new Error(
+      `Cannot show preview for challenge type ${buildData.challengeType}`
+    );
+  }
+}
+
+export function updateProjectPreview(buildData, document) {
+  if (buildData.challengeType === challengeTypes.html) {
+    createProjectPreviewFramer(document)(buildData);
+  } else {
+    throw new Error(
+      `Cannot show preview for challenge type ${buildData.challengeType}`
+    );
   }
 }