feat: handle navigation and resize events from discussions MFE

The discussions MFE sends resize and navigation events via the postMessage API, we can use these events to resize the iframe and make sure that the iframe loads the correct page on refresh.

Co-authored-by: Hamza Khchine <hamza.Khchine@opencraft.com>

lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html

@@ -7,10 +7,33 @@
 <%!
 import json
 from django.utils.translation import ugettext as _
+from openedx.core.djangolib.js_utils import js_escaped_string
 %>
 
+<%block name="js_extra">
+<script>
+    window.addEventListener("load", function () {
+        const mfeUrl = (new URL("${discussions_mfe_url  | n, js_escaped_string}"));
+        const iframe = document.querySelector('#discussions-mfe-tab-embed');
+        iframe.src = mfeUrl.href + window.location.hash.slice(1);
+        window.addEventListener("message", (event) => {
+            const payload = event.data.payload;
+            if (event.origin !== mfeUrl.origin) {
+                return;
+            }
+            if (event.data.type === "discussions.navigate" && payload.path){
+                window.history.pushState(null, "", "#" + payload.path);
+            }
+            if (event.data.type === "plugin.resize") {
+                iframe.height = payload.height;
+            }
+        });
+    });
+</script>
+</%block>
+
 <section class="discussion discussion-board page-content-container" id="discussion-container"
-         data-course-id="${course_key}" >
+         data-course-id="${course_key}">
     <%include file="_switch_experience_fragment.html" />
-    <iframe id='discussions-mfe-tab-embed' src='${discussions_mfe_url}'></iframe>
+    <iframe id='discussions-mfe-tab-embed' src=''></iframe>
 </section>