Merged PR 43673: In playground, Allow modifying embed URL after bootstrap

In playground, Allow modifying embed URL after bootstrap

Author: ali-hamud

demo/code-demo/scripts/session_utils.js

@@ -6,7 +6,8 @@ const SessionKeys = {
     EmbedId : "embedId",
     GroupId : "groupId",
     IsSampleReport: "isSampleReport",
-    QnaQuestion: "qnaQuestion"
+    QnaQuestion: "qnaQuestion",
+    EntityIsAlreadyEmbedded: "EntityIsAlreadyEmbedded",
 };
 
 function GetParameterByName(name, url) {
@@ -45,7 +46,7 @@ function SetTextBoxesFromSessionOrUrlParam(accessTokenSelector, embedUrlSelector
     {
         accessToken = GetSession(SessionKeys.AccessToken);
     }
-    
+
     var embedUrl = GetParameterByName(SessionKeys.EmbedUrl);
     if (!embedUrl)
     {

demo/v2-demo/scripts/report.js

@@ -620,13 +620,16 @@ function EmbedAreaMobileView() {
 
     // Check if run button was clicked in the other mode and wasn't clicked on the new mode
     if ($(classPrefix + "Container iframe").length && !$(classPrefix + "MobileContainer iframe").length) {
+      // It's not enough to check the number of iframes because of the bootstrap feature.
+      if (GetSession(SessionKeys.EntityIsAlreadyEmbedded)) {
         let runFunc = getEmbedCode(mode, entityType);
         if ($('#interact-tab').hasClass(active_tabs_li)) {
             runFunc = updateRunFuncSessionParameters(runFunc);
             eval(runFunc);
         } else {
             runFunc();
         }
+      }
     }
 }
 

demo/v2-demo/scripts/utils.js

@@ -59,6 +59,9 @@ function SetCode(func) {
             let oldFunc = runFunc;
             runFunc = function() {
                 oldFunc();
+
+                SetSession(SessionKeys.EntityIsAlreadyEmbedded, true);
+
                 $('#interact-tab').addClass('enableTransition');
                 setTimeout(function() {
                     $('#interact-tab').addClass('changeColor');
@@ -69,6 +72,7 @@ function SetCode(func) {
         $('#btnRunCode').off('click');
         $('#btnRunCode').click(function() {
             showEmbedContainer();
+            removeIframeIfUrlIsChanged();
             elementClicked('#btnRunCode');
             runFunc();
         });
@@ -169,6 +173,21 @@ function showEmbedContainer() {
     $(activeContainer).css({"visibility":"visible"});
 }
 
+function removeIframeIfUrlIsChanged() {
+    const activeContainer = getActiveEmbedContainer();
+    if (!activeContainer || !activeContainer.powerBiEmbed || !activeContainer.powerBiEmbed.iframe) {
+      return;
+    }
+
+    let existingIframeUrl = removeUidFromUrl(activeContainer.powerBiEmbed.iframe.src);
+    let embedUrl = GetSession(SessionKeys.EmbedUrl);
+
+    if (embedUrl !== existingIframeUrl) {
+        // textbox has changed, delete the iframe and avoid the bootstrap.
+        powerbi.reset(activeContainer);
+    }
+}
+
 function SetAuthoringPageActive(report) {
     return new Promise(function(resolve, reject) {
 
@@ -196,3 +215,14 @@ function SetAuthoringPageActive(report) {
         });
     });
 }
+
+function removeUidFromUrl(url) {
+    const uidRegEx = /uid="?([^&]+)"?/
+    const uidMatch = url.match(uidRegEx);
+
+    if (uidMatch) {
+        return url.replace("&" + uidMatch[0], "");
+    }
+
+    return url;
+}