bug(REPORT-480045): resolved the localization issue

src/common/index.js

@@ -30,6 +30,7 @@ import {
 let header,sidebar;
 let reportViewer = 'report-viewer';
 let reportDesigner = 'report-designer';
+let loadedScripts = new Set();
 
 
 document.addEventListener('DOMContentLoaded', onDOMContentLoaded, false);
@@ -73,15 +74,51 @@ export function updateData(sampleData, isReportViewer) {
     updateMetaData(sampleData);
     setReportsHeight();
 }
+
 export async function updataSample(sampleData, isReportViewer) {
     let dirName = isReportViewer ? reportViewer : reportDesigner;
     let demo = document.getElementsByTagName("ej-sample")[0];
-    let html = await fetchFile(`src/controls/${dirName}/${sampleData.routerPath}/index.html`);
-    let js = await fetchFile(`src/controls/${dirName}/${sampleData.routerPath}/index.js`);
-    demo.innerHTML = html;
+    let [html, js] = await Promise.all([
+        fetchFile(`src/controls/${dirName}/${sampleData.routerPath}/index.html`),
+        fetchFile(`src/controls/${dirName}/${sampleData.routerPath}/index.js`)
+    ]);
+    demo.replaceChildren();
+    await appendDOM(demo, html);
     eval(js);
 }
 
+async function appendDOM(target, html) {
+    let doc = document.implementation.createHTMLDocument('');
+    let wrapper = doc.createElement('div');
+    wrapper.innerHTML = html;
+    let nodes = Array.from(wrapper.childNodes);
+    nodes.forEach(node => {
+        if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') return;
+        target.appendChild(document.importNode(node, true));
+    });
+    await appendScripts(target, wrapper);
+}
+
+async function appendScripts(target, wrapper) {
+    let scripts = wrapper.querySelectorAll('script');
+    for (let oldScript of scripts) {
+        let newScript = document.createElement('script');
+        for (let attr of oldScript.attributes) newScript.setAttribute(attr.name, attr.value);
+        if (oldScript.src && !loadedScripts.has(oldScript.src)) {
+            loadedScripts.add(oldScript.src);
+            await new Promise((resolve, reject) => {
+                newScript.addEventListener('load', resolve, { once: true });
+                newScript.addEventListener('error', reject, { once: true });
+                target.appendChild(newScript);
+            });
+        } else {
+            if (!newScript.hasAttribute('type')) newScript.type = 'text/javascript';
+            newScript.text = oldScript.textContent || '';
+            target.appendChild(newScript);
+        }
+    }
+}
+
 function onResize() {
     setReportsHeight();
     updateOverlay();

src/controls/report-designer/server-integration/index.html

@@ -1 +1,4 @@
-<div id="designer"></div>
+<div id="designer"></div>
+<div id="server_info_msg" style="display: none; height: 100%; align-items: center; justify-content: center;">
+    <span style="width: 60%; text-align: center;"></span>
+</div>

src/controls/report-designer/server-integration/index.js

@@ -1,4 +1,5 @@
 var isSubmit = true;
+var domainName = '';
 
 function formSubmit(args) {
     isSubmit = false;
@@ -15,32 +16,40 @@ function windowUnload(args) {
 $(function () {
     $(document.body).bind('submit', $.proxy(formSubmit, this));
     $(window).bind('beforeunload', $.proxy(windowUnload, this));
-    var dataValue = "";
-    var apiRequest = new Object({
-        password: "demo",
-        userid: "guest@boldreports.com"
-        });
+    var apiRequest = new Object({ password: "", userid: "" });
 
-    $.ajax({
-        type: "POST",
-        url: "https://on-premise-demo.boldreports.com/reporting/api/site/site1/get-user-key",
-        data: apiRequest,
-        success: function (data) {
-            dataValue = data.Token;
-            var token = JSON.parse(dataValue);
+    if (domainName) {
+        $.ajax({
+            type: "POST",
+            url: "https://" + domainName + "/reporting/api/site/site1/get-user-key",
+            data: apiRequest,
+            success: function (data) {
+                var token = data && data.Token ? JSON.parse(data.Token) : null;
+                if (!token || !token.token_type || !token.access_token) return showInfoMessage();
 
-            $("#designer").boldReportDesigner(
-                {
-                    serviceUrl: "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Designer",
-                    serviceAuthorizationToken: token.token_type + " " + token.access_token,
-                    ajaxBeforeLoad: "onAjaxRequest"
-                });
-        }
-    });
+                $("#designer").boldReportDesigner(
+                    {
+                        serviceUrl: "https://" + domainName + "/reporting/reportservice/api/Designer",
+                        reportServerUrl: "https://" + domainName + "/reporting/api/site/site1",
+                        serviceAuthorizationToken: token.token_type + " " + token.access_token
+                    });
+            },
+            error: function () {
+                showInfoMessage();
+            }
+        });
+    } else {
+        showInfoMessage();
+    }
 });
 
-function onAjaxRequest(args) {
-    args.headers.push({
-        Key: 'serverurl', Value: 'https://on-premise-demo.boldreports.com/reporting/api/site/site1'
-    });
+function showInfoMessage() {
+    let designerTag = document.getElementById('designer');
+    let container = document.getElementById('server_info_msg');
+    let textNode = container.querySelector('span');
+    if (designerTag) designerTag.style.display = 'none';
+    if (container && textNode) {
+        container.style.display = 'flex';
+        textNode.innerHTML = 'This sample uses placeholder credentials. To run it, configure your </br><b>on-premises domain</b> using the global variable <b>"domainName"</b> for concatenation</br> and provide <b>valid credentials (username and password)</b> to obtain the service authorization token.';
+    }
 }