From 73c7d7166fe3cddef7f38d370b204fd40c7f67ee Mon Sep 17 00:00:00 2001
From: Kshitij Sobti <kshitij@sobti.in>
Date: Mon, 4 Apr 2022 15:17:57 +0530
Subject: [PATCH] feat: handle navigation and resize events from discussions
 MFE (#30164)

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>

Co-authored-by: Hamza Khchine <hamza.Khchine@opencraft.com>
---
 .../discussion/discussion_mfe_embed.html      | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html b/lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html
index 54159e75c1..69dcc60774 100644
--- a/lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html
+++ b/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>