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 loadedScriptSrcs = new Set();
 
 
 document.addEventListener('DOMContentLoaded', onDOMContentLoaded, false);
@@ -73,15 +74,55 @@ 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();
+    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;
+        demo.appendChild(document.importNode(node, true));
+    });
+    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 && !loadedScriptSrcs.has(oldScript.src)) {
+            loadedScriptSrcs.add(oldScript.src);
+            await new Promise((resolve, reject) => {
+                newScript.addEventListener('load', resolve, { once: true });
+                newScript.addEventListener('error', reject, { once: true });
+                demo.appendChild(newScript);
+            });
+        } else {
+            if (!newScript.hasAttribute('type')) newScript.type = 'text/javascript';
+            newScript.text = oldScript.textContent || '';
+            demo.appendChild(newScript);
+        }
+    }
+    renderErrorMsg(demo);
     eval(js);
 }
 
+function renderErrorMsg(demo) {
+    let errorMsg = document.createElement('div');
+    errorMsg.style.display = 'none';
+    errorMsg.id = 'sample_error_msg';
+    errorMsg.style.height = '100%';
+    errorMsg.style.alignItems = 'center';
+    errorMsg.style.justifyContent = 'center';
+    demo.append(errorMsg);
+}
+
 function onResize() {
     setReportsHeight();
     updateOverlay();

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

@@ -1,4 +1,5 @@
 var isSubmit = true;
+var reportServerUrl = '';
 
 function formSubmit(args) {
     isSubmit = false;
@@ -16,31 +17,50 @@ $(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 (reportServerUrl !== '' && reportServerUrl.length > 0) {
+        $.ajax({
+            type: "POST",
+            url: "https://" + reportServerUrl + "/reporting/api/site/site1/get-user-key",
+            data: apiRequest,
+            success: function (data) {
+                dataValue = data.Token;
+                var token = data && data.Token ? JSON.parse(dataValue) : null;
+                if (!token || !token.token_type || !token.access_token) return renderMessage();
 
-            $("#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://" + reportServerUrl + "/reporting/reportservice/api/Designer",
+                        reportServerUrl: "https://" + reportServerUrl + "/reporting/api/site/site1",
+                        serviceAuthorizationToken: token.token_type + " " + token.access_token,
+                        ajaxBeforeLoad: "onAjaxRequest"
+                    });
+            },
+            error: function () {
+                renderMessage();
+            }
+        });
+    } else {
+        renderMessage();
+    }
 });
 
+function renderMessage() {
+    let designerTag = document.getElementById('designer');
+    let container = document.getElementById('sample_error_msg');
+    if (designerTag) designerTag.style.display = 'none';
+    if (container) {
+        container.style.display = 'flex';
+        let textNode = document.createElement('span');
+        textNode.style.width = '60%';
+        textNode.textContent = 'This sample uses placeholder credentials. To run it, configure your on-premises server URL, service URL, and valid username, password to obtain the service authorization token.';
+        container.append(textNode);
+    }
+}
+
 function onAjaxRequest(args) {
     args.headers.push({
-        Key: 'serverurl', Value: 'https://on-premise-demo.boldreports.com/reporting/api/site/site1'
+        Key: 'serverurl', Value: 'https://' + reportServerUrl + '/reporting/api/site/site1'
     });
 }