feat: Course unit - Rendering xblocks in iframes #201

PKulkoRaccoonGang · 2024-03-04T09:57:23Z

Dependencies

Edx-platform ts-develop branch

Description

This PR demonstrates the xblock content display functionality for the course unit page. The current implementation is a demonstration. Work on refactoring and displaying the Drag and Drop block continues.

The primary features were implemented:

Rendering xblocks inside iframes (Advanced, Discussion, Text, Open Response, Problem, Video).
The work of internal xblock scripts has been partially implemented.

Developer notes

The source for this functionality is frontend-app-library-authoring.
Technically, our goal is to visually display the content of the xblock + configure the work of the internal scripts of the xblock that are rendered inside the iframe (if it does not require a large investment of time).

Testing instructions

Run master devstack.
Start platform make dev.up.lms+cms+frontend-app-course-authoring and make checkout on this branch.
Enable the new Unit page by adding a waffle flag contentstore.new_studio_mfe.use_new_unit_page in the CMS admin panel.
Make sure that the MFE setting ENABLE_UNIT_PAGE=true is enabled.
Сomment out the addition of the Ajax prefix in the edx-platform (temporary solution).
Go to the Course Unit page from the Course Outline page.

Screen.Recording.2024-03-15.at.12.01.47.mov

arbrandes · 2024-03-19T12:04:17Z

Do you mind issuing this PR to the openedx org? That way it's clearer what's being changed in relation to master.

PKulkoRaccoonGang · 2024-03-19T13:14:05Z

@arbrandes I don't mind, thank you

codecov-commenter · 2024-03-20T12:47:07Z

Codecov Report

Attention: Patch coverage is 13.52657% with 179 lines in your changes are missing coverage. Please review.

❗ No coverage uploaded for pull request base (ts-develop@ed4532a). Click here to learn what that means.

Files	Patch %	Lines
...k-content/iframe-wrapper/tools/iframe-connector.js	0.00%	82 Missing and 14 partials ⚠️
...nit/course-xblock/xblock-content/XBlockContent.jsx	2.56%	38 Missing ⚠️
...ck/xblock-content/iframe-wrapper/iframe-wrapper.js	0.00%	27 Missing and 3 partials ⚠️
...block/xblock-content/iframe-wrapper/tools/utils.js	36.36%	3 Missing and 4 partials ⚠️
src/course-unit/data/api.js	57.14%	3 Missing ⚠️
src/course-unit/data/slice.js	0.00%	2 Missing ⚠️
src/course-unit/data/thunk.js	80.00%	2 Missing ⚠️
src/course-unit/course-xblock/CourseXBlock.jsx	83.33%	1 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@              Coverage Diff              @@
##             ts-develop     #201   +/-   ##
=============================================
  Coverage              ?   88.02%           
=============================================
  Files                 ?      647           
  Lines                 ?    10988           
  Branches              ?     2280           
=============================================
  Hits                  ?     9672           
  Misses                ?     1256           
  Partials              ?       60

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

monteri · 2024-03-20T15:35:42Z

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

@@ -34,12 +42,17 @@ const CourseXBlock = ({
  const courseId = useSelector(getCourseId);
  const canEdit = useSelector(getCanEdit);
  const intl = useIntl();
-  const iframeUrl = getIFrameUrl({ blockId: id });
+  const xblockIframeHtmlAndResources = useSelector(getXBlockIframeHtmlAndResources);
+  const xblockInstanceHtmlAndResources = find(xblockIframeHtmlAndResources, { xblockId: id });


Could explain more in detail how does xblockIframeHtmlAndResources look like?

monteri · 2024-03-20T16:12:19Z

src/course-unit/course-xblock/utils.js

+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const getHandlerUrl = async (blockId) => getXBlockHandlerUrl(blockId, 'handler_name');


These two functions maybe we should move to the api.js?

[question] Do we need to create a wrapper function instead of a single function?

Yes, thanks
It makes sence

monteri · 2024-03-20T16:14:37Z

src/course-unit/course-xblock/xblock-content/XBlockContent.jsx

+ * The IFrame is resized responsively so that it fits the content height.
+ *
+ * We use an IFrame so that the XBlock code, including user-authored HTML,
+ * cannot access things like the user's cookies, nor can it make GET/POST


I think this comment is not relevant. Maybe to reduce the size of it or just remove.

We can use user's cookies using our workaround.

monteri · 2024-03-20T16:15:05Z

src/course-unit/course-xblock/xblock-content/XBlockContent.jsx

-  };
+  const iframeRef = useRef(null);
+  const [html, setHtml] = useState(null);
+  const [iFrameHeight, setIFrameHeight] = useState(0);


Suggested change

const [iFrameHeight, setIFrameHeight] = useState(0);

const [iframeHeight, setIFrameHeight] = useState(0);

monteri · 2024-03-20T16:15:35Z

src/course-unit/course-xblock/xblock-content/XBlockContent.jsx

+  const iframeRef = useRef(null);
+  const [html, setHtml] = useState(null);
+  const [iFrameHeight, setIFrameHeight] = useState(0);
+  const [iframeKey, setIframeKey] = useState(0);


Suggested change

const [iframeKey, setIframeKey] = useState(0);

const [iframeKey, setIFrameKey] = useState(0);

monteri · 2024-03-20T16:27:15Z

src/course-unit/data/api.js

+ * @param {string} itemId - The ID of the XBlock item.
+ * @returns {Promise<Object>} A Promise that resolves with the XBlock iframe data.
+ */
+export async function getXBlockIframeData(itemId) {


Suggested change

export async function getXBlockIframeData(itemId) {

export async function getXBlockIFrameData(itemId) {

monteri · 2024-03-20T16:27:30Z

src/course-unit/data/selectors.js

@@ -14,6 +14,7 @@ export const getSequenceId = (state) => state.courseUnit.sequenceId;
 export const getCourseVerticalChildren = (state) => state.courseUnit.courseVerticalChildren;
 export const getClipboardData = (state) => state.courseUnit.clipboardData;
 const getLoadingStatuses = (state) => state.courseUnit.loadingStatus;
+export const getXBlockIframeHtmlAndResources = (state) => state.courseUnit.xblockIframeHtmlAndResources;


Suggested change

export const getXBlockIframeHtmlAndResources = (state) => state.courseUnit.xblockIframeHtmlAndResources;

export const getXBlockIFrameHtmlAndResources = (state) => state.courseUnit.xblockIframeHtmlAndResources;

monteri · 2024-03-20T16:27:49Z

src/course-unit/data/slice.js

@@ -21,6 +21,7 @@ const slice = createSlice({
    courseVerticalChildren: {},
    clipboardData: null,
    staticFileNotices: {},
+    xblockIframeHtmlAndResources: [],


Suggested change

xblockIframeHtmlAndResources: [],

xblockIFrameHtmlAndResources: [],

monteri · 2024-03-20T16:27:56Z

src/course-unit/data/slice.js

@@ -115,6 +116,9 @@ const slice = createSlice({
      // This avoids the need to copy the array beforehand
      state.courseVerticalChildren.children.sort((a, b) => (indexMap.get(a.id) || 0) - (indexMap.get(b.id) || 0));
    },
+    fetchXBlockIframeResources: (state, { payload }) => {


Suggested change

fetchXBlockIframeResources: (state, { payload }) => {

fetchXBlockIFrameResources: (state, { payload }) => {

monteri · 2024-03-20T16:28:09Z

src/course-unit/data/slice.js

@@ -115,6 +116,9 @@ const slice = createSlice({
      // This avoids the need to copy the array beforehand
      state.courseVerticalChildren.children.sort((a, b) => (indexMap.get(a.id) || 0) - (indexMap.get(b.id) || 0));
    },
+    fetchXBlockIframeResources: (state, { payload }) => {
+      state.xblockIframeHtmlAndResources.push(payload);


Suggested change

state.xblockIframeHtmlAndResources.push(payload);

state.xblockIFrameHtmlAndResources.push(payload);

And in all other cases either iframe or somethingIFrame

ihor-romaniuk · 2024-03-20T18:22:29Z

package.json

@@ -88,7 +88,8 @@
    "regenerator-runtime": "0.13.7",
    "universal-cookie": "^4.0.4",
    "uuid": "^3.4.0",
-    "yup": "0.31.1"
+    "yup": "0.31.1",
+    "querystring": "0.2.1"


[question] Do we need to install this package because I can't find usage of them?

Yes you are right
We don't use this package
Successfully deleted

ihor-romaniuk · 2024-03-20T18:25:53Z

src/course-unit/course-xblock/utils.js

+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const getHandlerUrl = async (blockId) => getXBlockHandlerUrl(blockId, 'handler_name');


[question] Do we need to create a wrapper function instead of a single function?

ihor-romaniuk · 2024-03-20T18:31:54Z

src/course-unit/data/thunk.js

+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.adding));
+
+    try {


Suggested change

dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.adding));

try {

dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.adding));

try {

We have this indentation in all sleds in this file
Do we need to delete it specifically in fetchXBlockIframeHtmlAndResourcesQuery?

ihor-romaniuk · 2024-03-20T18:35:55Z

@PKulkoRaccoonGang [question] Should we cover our feature with unit tests in this PR?

PKulkoRaccoonGang · 2024-03-20T20:12:13Z

@ihor-romaniuk Thank you for your attention 💯 We decided there will be no test coverage for now.

* 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>

fix: [AXIMST-27] Unit page - change iframe pararm for display xblock content (#151) feat: [AXIMST-52] display unit and xblock render errors (#191) * feat: [AXIMST-52] display unit and xblock render errors * fix: after discussion * fix: after review 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> feat: [AXIMST-739] added xblock actions (#218) * feat: [AXIMST-739] added xblock actions * refactor: code refactoring * refactor: refactoring after review fix: after cherru-pick fix: after cherry-pick refactor: removed canEdit mock (#224) fix: [AXIMST-655] fixed position of the view-port after loading the unit page (#217) fix: [AXIMST-719] Course unit - Xblock problems (#213) * fix: [AXIMST-719] fixed xblock problems * fix: added asset and static replacer * feat: added style extractor * refactor: code refactoring * refactor: after review fix: [AXIMST-718] Course unit - Created logic for getting CSRF token (#226) * fix: created logic for getting csrf token * fix: usage of csrfTokenData * refactor: code refactoring --------- Co-authored-by: monteri <lansevermore> fix: [AXIMST-745] added studioBaseUrl for static paths (#228) refactor: [AXIMST-746] Unit page performance refactoring (#229) Co-authored-by: Kyrylo Hudym-Levkovych <[email protected]> fix: [AXIMST-785] fixed discard logic (#232) feat: [AXIMST-800] Course unit - Added Collapse and Expand all buttons for xblocks (#234) * feat: [AXIMST-800] added Collapse and Expand all buttons for xblocks * feat: added tests refactor: code refactoring

* 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>

PKulkoRaccoonGang marked this pull request as draft March 4, 2024 09:57

PKulkoRaccoonGang force-pushed the Peter_Kulko/xblock-iframe-rendering branch from c6da976 to 4595dec Compare March 5, 2024 08:57

vladislavkeblysh force-pushed the ts-develop branch from dd8a0f9 to 509070d Compare March 14, 2024 10:43

PKulkoRaccoonGang force-pushed the Peter_Kulko/xblock-iframe-rendering branch from 9a76daf to 65f02cc Compare March 15, 2024 08:18

PKulkoRaccoonGang changed the title ~~feat: added xblock render engine~~ feat: Course unit - Rendering xblocks in iframes Mar 15, 2024

PKulkoRaccoonGang self-assigned this Mar 15, 2024

PKulkoRaccoonGang added the course-unit label Mar 15, 2024

arbrandes mentioned this pull request Mar 19, 2024

New Unit Page (Studio MFE conversion) openedx/platform-roadmap#321

Open

1 task

PKulkoRaccoonGang force-pushed the Peter_Kulko/xblock-iframe-rendering branch from 88821ab to 839ce39 Compare March 20, 2024 12:37

PKulkoRaccoonGang force-pushed the Peter_Kulko/xblock-iframe-rendering branch from 839ce39 to b12ba83 Compare March 20, 2024 13:28

PKulkoRaccoonGang marked this pull request as ready for review March 20, 2024 13:39

PKulkoRaccoonGang requested review from monteri and ihor-romaniuk March 20, 2024 13:39

monteri requested changes Mar 20, 2024

View reviewed changes

ihor-romaniuk reviewed Mar 20, 2024

View reviewed changes

PKulkoRaccoonGang and others added 11 commits March 20, 2024 22:02

feat: added xblock render engine

f66df4e

feat: connected iframe template

b9d6311

feat: CSS and JS transfering

aae9149

feat: show video xblock

710e9fb

feat: added multiply xblocks

5e8cc61

feat: rendering advanced components

a6ac645

fix: add solution for request from within the iframe

5cb17a9

feat: iframe height

0a2b575

refactor: code refactoring

32c0fef

fix: fixed platform ajax prefix

990d44e

refactor: global refactoring

49e2a07

PKulkoRaccoonGang added 7 commits March 20, 2024 22:02

refactor: show LTI xblock

94daae4

refactor: removed old xblock-content

b3106ed

refactor: code refactoring

3bef40e

refactor: some refactoring

f9e01bd

refactor: refactoring

c2f7f10

refactor: code refactoring

31353ab

refactor: refactoring after review

1f8eafc

PKulkoRaccoonGang force-pushed the Peter_Kulko/xblock-iframe-rendering branch from 23003ab to 1f8eafc Compare March 20, 2024 20:10

PKulkoRaccoonGang requested review from monteri and ihor-romaniuk March 20, 2024 21:28

monteri approved these changes Mar 21, 2024

View reviewed changes

monteri merged commit e08b9e6 into ts-develop Mar 21, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Course unit - Rendering xblocks in iframes #201

feat: Course unit - Rendering xblocks in iframes #201

PKulkoRaccoonGang commented Mar 4, 2024 •

edited

Loading

arbrandes commented Mar 19, 2024

PKulkoRaccoonGang commented Mar 19, 2024

codecov-commenter commented Mar 20, 2024 •

edited

Loading

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

ihor-romaniuk Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

monteri Mar 20, 2024

monteri Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

ihor-romaniuk Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

ihor-romaniuk Mar 20, 2024

ihor-romaniuk Mar 20, 2024

PKulkoRaccoonGang Mar 20, 2024

ihor-romaniuk commented Mar 20, 2024 •

edited

Loading

PKulkoRaccoonGang commented Mar 20, 2024 •

edited

Loading

	const [iFrameHeight, setIFrameHeight] = useState(0);
	const [iframeHeight, setIFrameHeight] = useState(0);

	const [iframeKey, setIframeKey] = useState(0);
	const [iframeKey, setIFrameKey] = useState(0);

	export async function getXBlockIframeData(itemId) {
	export async function getXBlockIFrameData(itemId) {

	export const getXBlockIframeHtmlAndResources = (state) => state.courseUnit.xblockIframeHtmlAndResources;
	export const getXBlockIFrameHtmlAndResources = (state) => state.courseUnit.xblockIframeHtmlAndResources;

	xblockIframeHtmlAndResources: [],
	xblockIFrameHtmlAndResources: [],

	fetchXBlockIframeResources: (state, { payload }) => {
	fetchXBlockIFrameResources: (state, { payload }) => {

	state.xblockIframeHtmlAndResources.push(payload);
	state.xblockIFrameHtmlAndResources.push(payload);

		dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.adding));

		try {

feat: Course unit - Rendering xblocks in iframes #201

feat: Course unit - Rendering xblocks in iframes #201

Conversation

PKulkoRaccoonGang commented Mar 4, 2024 • edited Loading

Dependencies

Description

Developer notes

Testing instructions

arbrandes commented Mar 19, 2024

PKulkoRaccoonGang commented Mar 19, 2024

codecov-commenter commented Mar 20, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ihor-romaniuk commented Mar 20, 2024 • edited Loading

PKulkoRaccoonGang commented Mar 20, 2024 • edited Loading

PKulkoRaccoonGang commented Mar 4, 2024 •

edited

Loading

codecov-commenter commented Mar 20, 2024 •

edited

Loading

ihor-romaniuk commented Mar 20, 2024 •

edited

Loading

PKulkoRaccoonGang commented Mar 20, 2024 •

edited

Loading