feat: Course unit - Rendering xblocks in iframes (#201)

* feat: added xblock render engine

* feat: connected iframe template

* feat: CSS and JS transfering

* feat: show video xblock

* feat: added multiply xblocks

* feat: rendering advanced components

* fix: add solution for request from within the iframe

* feat: iframe height

* refactor: code refactoring

* fix: fixed platform ajax prefix

* refactor: global refactoring

* refactor: show LTI xblock

* refactor: removed old xblock-content

* refactor: code refactoring

* refactor: some refactoring

* refactor: refactoring

* refactor: code refactoring

* refactor: refactoring after review

---------

Co-authored-by: monteri <lansevermore>

.env

@@ -42,3 +42,4 @@ INVITE_STUDENTS_EMAIL_TO=''
 AI_TRANSLATIONS_BASE_URL=''
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=''
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=null

.env.development

@@ -45,3 +45,4 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=true
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=/xblock-bootstrap.html

.env.test

@@ -36,3 +36,4 @@ BBB_LEARN_MORE_URL=''
 INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=/xblock-bootstrap.html

package.json

@@ -109,6 +109,7 @@
     "@testing-library/user-event": "^13.2.1",
     "axios": "^0.28.0",
     "axios-mock-adapter": "1.22.0",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "fetch-mock-jest": "^1.5.1",
     "glob": "7.2.3",

src/course-unit/CourseUnit.test.jsx

@@ -542,7 +542,7 @@ describe('<CourseUnit />', () => {
     await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
 
     await waitFor(() => {
-      const unpublishedAlert = queryByRole('alert', { class: 'course-unit-unpublished-alert' });
+      const unpublishedAlert = queryByRole('alert', { name: messages.alertUnpublishedVersion });
       expect(unpublishedAlert).toBeNull();
     });
   });

src/course-unit/course-xblock/CourseXBlock.jsx

@@ -8,19 +8,27 @@ import {
 import { EditOutline as EditIcon, MoreVert as MoveVertIcon } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { find } from 'lodash';
 
-import { getCanEdit, getCourseId } from 'CourseAuthoring/course-unit/data/selectors';
 import DeleteModal from '../../generic/delete-modal/DeleteModal';
 import ConfigureModal from '../../generic/configure-modal/ConfigureModal';
 import SortableItem from '../../generic/drag-helper/SortableItem';
 import { scrollToElement } from '../../course-outline/utils';
 import { COURSE_BLOCK_NAMES } from '../../constants';
-import { copyToClipboard } from '../../generic/data/thunks';
+import {
+  getCanEdit,
+  getCourseId,
+  getXBlockIFrameHtmlAndResources,
+} from '../data/selectors';
+import {
+  copyToClipboard,
+} from '../../generic/data/thunks';
+import { getHandlerUrl } from '../data/api';
+import { fetchXBlockIFrameHtmlAndResourcesQuery } from '../data/thunk';
 import { COMPONENT_TYPES } from '../constants';
 import XBlockMessages from './xblock-messages/XBlockMessages';
 import RenderErrorAlert from './render-error-alert';
-import ContentIFrame from './ContentIFrame';
-import { getIFrameUrl } from './urls';
+import { XBlockContent } from './xblock-content';
 import messages from './messages';
 
 const CourseXBlock = ({
@@ -35,7 +43,8 @@ const CourseXBlock = ({
   const canEdit = useSelector(getCanEdit);
   const courseId = useSelector(getCourseId);
   const intl = useIntl();
-  const iframeUrl = getIFrameUrl({ blockId: id });
+  const xblockIFrameHtmlAndResources = useSelector(getXBlockIFrameHtmlAndResources);
+  const xblockInstanceHtmlAndResources = find(xblockIFrameHtmlAndResources, { xblockId: id });
 
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
@@ -45,6 +54,10 @@ const CourseXBlock = ({
     ? intl.formatMessage(messages.visibilityMessage, { selectedGroupsLabel: userPartitionInfo.selectedGroupsLabel })
     : null;
 
+  useEffect(() => {
+    dispatch(fetchXBlockIFrameHtmlAndResourcesQuery(id));
+  }, []);
+
   const currentItemData = {
     category: COURSE_BLOCK_NAMES.component.id,
     displayName: title,
@@ -152,7 +165,13 @@ const CourseXBlock = ({
           {renderError ? <RenderErrorAlert errorMessage={renderError} /> : (
             <>
               <XBlockMessages validationMessages={validationMessages} />
-              <ContentIFrame id={id} title={title} elementId={id} iframeUrl={iframeUrl} />
+              {xblockInstanceHtmlAndResources && (
+                <XBlockContent
+                  getHandlerUrl={getHandlerUrl}
+                  view={xblockInstanceHtmlAndResources}
+                  type={type}
+                />
+              )}
             </>
           )}
         </Card.Section>

src/course-unit/course-xblock/CourseXBlock.scss

@@ -1,3 +1,5 @@
+@import "xblock-content/XBlockContent";
+
 .course-unit {
   .course-unit__xblocks {
     .course-unit__xblock:not(:first-child) {