From 4595dec01585be1805bdc2847cd784c741c86366 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Tue, 5 Mar 2024 10:53:55 +0200
Subject: [PATCH] feat: connected iframe template

---
 .env                                          |   2 +-
 package-lock.json                             | 126 +++++++++++++++++-
 package.json                                  |   3 +-
 .../edit-block/LibraryBlock/LibraryBlock.jsx  |   2 +-
 .../edit-block/LibraryBlock/wrap.js           |  64 ++++++---
 src/course-unit/data/api.js                   |   2 +-
 src/index.jsx                                 |   1 +
 webpack.dev.config.js                         |  13 ++
 8 files changed, 191 insertions(+), 22 deletions(-)

diff --git a/.env b/.env
index 5b6206ae20..8bea68af07 100644
--- a/.env
+++ b/.env
@@ -40,4 +40,4 @@ HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
 INVITE_STUDENTS_EMAIL_TO=''
 AI_TRANSLATIONS_BASE_URL=''
-SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=/xblock-bootstrap.html
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=null
diff --git a/package-lock.json b/package-lock.json
index 8771b0a238..1268feda46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,6 +77,7 @@
         "@testing-library/user-event": "^13.2.1",
         "axios": "^0.27.2",
         "axios-mock-adapter": "1.22.0",
+        "copy-webpack-plugin": "^11.0.0",
         "eslint-import-resolver-webpack": "^0.13.8",
         "glob": "7.2.3",
         "husky": "7.0.4",
@@ -10116,6 +10117,126 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/copy-webpack-plugin": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
+      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.1",
+        "globby": "^13.1.1",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/globby": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+      "dev": true,
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.3.0",
+        "ignore": "^5.2.4",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/copy-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.8.1",
       "hasInstallScript": true,
@@ -13534,8 +13655,9 @@
       "license": "MIT"
     },
     "node_modules/fast-glob": {
-      "version": "3.2.12",
-      "license": "MIT",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
diff --git a/package.json b/package.json
index 9b207ac175..c0c2ee214d 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,8 @@
     "jest-expect-message": "^1.1.3",
     "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
-    "ts-loader": "^9.5.0"
+    "ts-loader": "^9.5.0",
+    "copy-webpack-plugin": "^11.0.0"
   },
   "peerDependencies": {
     "decode-uri-component": ">=0.2.2"
diff --git a/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/LibraryBlock.jsx b/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/LibraryBlock.jsx
index ca3ce24387..41aebfe57c 100644
--- a/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/LibraryBlock.jsx
+++ b/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/LibraryBlock.jsx
@@ -90,7 +90,7 @@ class LibraryBlock extends React.Component {
       const html = wrapBlockHtmlForIFrame(
         view.html,
         view.resources,
-        getConfig().LMS_BASE_URL,
+        getConfig().STUDIO_BASE_URL,
       );
 
       // Load the XBlock HTML into the IFrame:
diff --git a/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/wrap.js b/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/wrap.js
index 907180a9a4..4248844929 100644
--- a/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/wrap.js
+++ b/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/wrap.js
@@ -214,7 +214,7 @@ function blockFrameJS() {
  *                   Only required for legacy XBlocks that don't declare their
  *                   JS and CSS dependencies properly.
  */
-export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl) {
+export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBaseUrl) {
   const resources = sourceResources.map(([id, obj]) => ({ id, ...obj }));
   /* Separate resources by kind. */
   const urlResources = resources.filter((r) => r.kind === 'url');
@@ -223,13 +223,13 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl
   /* Extract CSS resources. */
   const cssUrls = urlResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
   const sheets = textResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
-  let cssTags = cssUrls.map((url) => `<link rel="stylesheet" href="${url}">`).join('\n');
+  let cssTags = cssUrls.map((url) => `<link rel="stylesheet" href="${studioBaseUrl}${url}">`).join('\n');
   cssTags += sheets.map((sheet) => `<style>${sheet}</style>`).join('\n');
 
   /* Extract JS resources. */
   const jsUrls = urlResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
   const scripts = textResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
-  let jsTags = jsUrls.map((url) => `<script src="${url}"></script>`).join('\n');
+  let jsTags = jsUrls.map((url) => `<script src="${studioBaseUrl}${url}"></script>`).join('\n');
   jsTags += scripts.map((script) => `<script>${script}</script>`).join('\n');
 
   // Most older XModules/XBlocks have a ton of undeclared dependencies on various JavaScript in the global scope.
@@ -240,14 +240,15 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl
   // Otherwise, if the XBlock uses 'student_view', 'author_view', or 'studio_view', include known required globals:
   let legacyIncludes = '';
   if (
-    html.indexOf('xblock-v1-student_view') !== -1
+    html.indexOf('wrapper-xblock-message') !== -1
+    || html.indexOf('xblock-v1-student_view') !== -1
     || html.indexOf('xblock-v1-public_view') !== -1
     || html.indexOf('xblock-v1-studio_view') !== -1
     || html.indexOf('xblock-v1-author_view') !== -1
   ) {
     legacyIncludes += `
       <!-- gettext & XBlock JS i18n code -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/js/i18n/en/djangojs.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/i18n/en/djangojs.js"></script>
       <!-- Most XBlocks require jQuery: -->
       <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
       <!-- The Video XBlock requires "ajaxWithPrefix" -->
@@ -259,21 +260,21 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl
       <!-- The Video XBlock requires "Slider" from jQuery-UI: -->
       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
       <!-- The video XBlock depends on Underscore.JS -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/common/js/vendor/underscore.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/underscore.js"></script>
       <!-- The video XBlock depends on jquery-cookie -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/js/vendor/jquery.cookie.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/jquery.cookie.js"></script>
       <!--The Video XBlock has an undeclared dependency on 'Logger' -->
       <script>
           window.Logger = { log: function() { } };
       </script>
       <!-- Builtin XBlock types depend on RequireJS -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/common/js/vendor/require.js"></script>
-      <script type="text/javascript" src="${lmsBaseUrl}/static/js/RequireJS-namespace-undefine.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/require.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/RequireJS-namespace-undefine.js"></script>
       <script>
           // The minimal RequireJS configuration required for common LMS building XBlock types to work:
           (function (require, define) {
               require.config({
-                  baseUrl: "${lmsBaseUrl}/static/",
+                  baseUrl: "${studioBaseUrl}/static/studio/",
                   paths: {
                       accessibility: 'js/src/accessibility_tools',
                       draggabilly: 'js/vendor/draggabilly',
@@ -289,7 +290,24 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl
           }).call(this, require || RequireJS.require, define || RequireJS.define);
       </script>
       <!-- edX HTML Utils requires GlobalLoader -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/edx-ui-toolkit/js/utils/global-loader.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/edx-ui-toolkit/js/utils/global-loader.js"></script>
+      <!-- CMS -->
+      <script type="text/javascript" src="https://static.hotjar.com/c/hotjar-0.js?sv=6"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/models/xblock_info.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/xblock.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/utils/xblock_utils.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/utils/view_utils.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/module.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback_notification.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback_prompt.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/baseview.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/handle_iframe_binding.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/templates.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/requirejs/text.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/SequenceBlockDisplay.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/url.min.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/URI.min.js"></script>
       <script>
       // The video XBlock has an undeclared dependency on edX HTML Utils
       RequireJS.require(['HtmlUtils'], function (HtmlUtils) {
@@ -307,7 +325,7 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl
           files (defined in webpack.common.config.js) to get that entry point and all
           of its dependencies.
       -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/bundles/commons.js"></script>
+      <script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/commons.js"></script>
       <!-- The video XBlock (and perhaps others?) expect this global: -->
       <script>
       window.onTouchBasedDevice = function() { return navigator.userAgent.match(/iPhone|iPod|iPad|Android/i); };
@@ -316,9 +334,13 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl
       <link rel="stylesheet"
           href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <!-- Capa Problem Editing requires CodeMirror -->
-      <link rel="stylesheet" href="${lmsBaseUrl}/static/js/vendor/CodeMirror/codemirror.css">
+      <link rel="stylesheet" href="${studioBaseUrl}/static/studio/js/vendor/CodeMirror/codemirror.css">
       <!-- Built-in XBlocks (and some plugins) depends on LMS CSS -->
-      <link rel="stylesheet" href="${lmsBaseUrl}/static/css/lms-course.css">
+      <!--<link rel="stylesheet" href="${studioBaseUrl}/static/css/lms-course.css"> -->
+      <!-- Built-in XBlocks (and some plugins) depends on CMS CSS -->
+      <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/studio-main-v1.css">
+      <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/vendor/normalize.css">
+      <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/vendor/html5-input-polyfills/number-polyfill.css">
       <!-- Configure and load MathJax -->
       <script type="text/x-mathjax-config">
         MathJax.Hub.Config({
@@ -379,8 +401,18 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, lmsBaseUrl
     <!-- A Studio-served stylesheet will set the body min-height to 100% (a common strategy to allow for background
     images to fill the viewport), but this has the undesireable side-effect of causing an infinite loop via the
     onResize event listeners in certain situations.  Resetting it to the default "auto" skirts the problem. -->
-    <body style="min-height: auto; background-color: white">
-      ${html}
+    <body class="wrapper-xblock level-page studio-xblock-wrapper" style="min-height: auto; background-color: white">
+        <article class="xblock-render">
+            <div class="xblock xblock-author_view xblock-author_view-vertical xblock-initialized">
+                <div class="reorderable-container ui-sortable">
+                    <div class="studio-xblock-wrapper is-draggable">
+                        <section class="wrapper-xblock is-collapsible level-element">
+                            ${html}         
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </article> 
       ${jsTags}
       <script>
         window.addEventListener('load', (${blockFrameJS.toString()}));
diff --git a/src/course-unit/data/api.js b/src/course-unit/data/api.js
index 8e5e624aa9..f56f993fbb 100644
--- a/src/course-unit/data/api.js
+++ b/src/course-unit/data/api.js
@@ -191,6 +191,6 @@ export async function setXBlockOrderList(blockId, children) {
 export async function getXBlockEditIframeData(itemId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getXBlockContainerPreview(itemId));
-  // console.log({ data });
+  console.log({ data });
   return camelCaseObject(data);
 }
diff --git a/src/index.jsx b/src/index.jsx
index 39c682cb66..af696febc3 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -119,6 +119,7 @@ initialize({
         ENABLE_UNIT_PAGE: process.env.ENABLE_UNIT_PAGE || 'false',
         ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN: process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN || 'false',
         ENABLE_TAGGING_TAXONOMY_PAGES: process.env.ENABLE_TAGGING_TAXONOMY_PAGES || 'false',
+        SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL: process.env.SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL,
       }, 'CourseAuthoringConfig');
     },
   },
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 57ee9080e0..f1cd7453eb 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const config = createConfig('webpack-dev', {
   resolve: {
@@ -14,4 +15,16 @@ const config = createConfig('webpack-dev', {
   },
 });
 
+/**
+ * Allow serving xblock-bootstrap.html from the MFE itself.
+ */
+config.plugins.push(
+  new CopyPlugin({
+    patterns: [{
+      context: path.resolve(__dirname, 'src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock'),
+      from: 'xblock-bootstrap.html',
+    }],
+  }),
+);
+
 module.exports = config;