namecheap · nightnei · Nov 22, 2021 · Nov 22, 2021 · Nov 22, 2021 · Nov 22, 2021
diff --git a/ilc/client/ilcConfig.js b/ilc/client/ilcConfig.js
@@ -1,3 +1,5 @@
+import { decodeHtmlEntities } from '../common/utils';
+
 let registryConf = null;
 
 export default function () {
@@ -12,6 +14,11 @@ export default function () {
 
     registryConf = JSON.parse(confScript.innerHTML);
 
+    const customHTML = registryConf.settings?.globalSpinner.customHTML;
+    if (customHTML) {
+        registryConf.settings.globalSpinner.customHTML = decodeHtmlEntities(customHTML);
+    }
+
     document.head.appendChild(getSystemjsImportmap(registryConf.apps, registryConf.sharedLibs));
 
     return registryConf;

diff --git a/ilc/common/utils.js b/ilc/common/utils.js
@@ -27,9 +27,14 @@ function cloneDeep(source) {
 
 const uniqueArray = array => [...new Set(array)];
 
+const encodeHtmlEntities = value => value.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const decodeHtmlEntities = value => value.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');
+
 module.exports = {
     appIdToNameAndSlot,
     makeAppId,
     cloneDeep,
     uniqueArray,
+    encodeHtmlEntities,
+    decodeHtmlEntities,
 }
diff --git a/ilc/server/tailor/configs-injector.js b/ilc/server/tailor/configs-injector.js
@@ -1,6 +1,6 @@
 const _ = require('lodash');
 const urljoin = require('url-join');
-const { uniqueArray } = require('../../common/utils');
+const { uniqueArray, encodeHtmlEntities } = require('../../common/utils');
 
 module.exports = class ConfigsInjector {
     #newrelic;
@@ -159,11 +159,25 @@ module.exports = class ConfigsInjector {
             registryConfig.apps,
             v => _.pick(v, ['spaBundle', 'cssBundle', 'dependencies', 'props', 'kind', 'wrappedWith'])
         );
-        const spaConfig = JSON.stringify({
+
+        let settings = registryConfig.settings;
+        const customHTML = registryConfig.settings?.globalSpinner?.customHTML;
+
+        if (customHTML) {
+            settings = {
+                ...registryConfig.settings,
+                globalSpinner: {
+                    ...registryConfig.settings.globalSpinner,
+                    customHTML: encodeHtmlEntities(customHTML),
+                }
+            };
+        }
+
+        let spaConfig = JSON.stringify({
             apps,
             routes: registryConfig.routes.map(v => _.omit(v, ['routeId'])),
             specialRoutes: _.mapValues(registryConfig.specialRoutes, v => _.omit(v, ['routeId'])),
-            settings: registryConfig.settings,
+            settings,
             sharedLibs: registryConfig.sharedLibs,
         });
 

diff --git a/ilc/server/tailor/configs-injector.spec.js b/ilc/server/tailor/configs-injector.spec.js
@@ -183,6 +183,24 @@ describe('configs injector', () => {
             },
             routes: [],
             specialRoutes: {},
+            settings: {
+                globalSpinner: {
+                    customHTML:
+                        '<div class="customSpinnerHTML">I am spinner</div>' +
+                        '<style>' +
+                            '.customSpinnerHTML {' +
+                                'position: fixed;' +
+                                'left: 50%;' +
+                                'top: 50%;' +
+                                'z-index: 1000;' +
+                            '}' +
+                        '</style>' +
+                        '<script type="text/javascript">' +
+                            'console.log("Custom spinner JS")' +
+                        '</script>'
+                    ,
+                }
+            }
         };
 
         registryConfig.apps['thirdApp'] = {
@@ -215,6 +233,23 @@ describe('configs injector', () => {
                 },
                 routes: [],
                 specialRoutes: {},
+                settings: {
+                    globalSpinner: {
+                        customHTML:
+                            '&lt;div class=&quot;customSpinnerHTML&quot;&gt;I am spinner&lt;/div&gt;'+
+                            '&lt;style&gt;' +
+                            '.customSpinnerHTML {' +
+                                'position: fixed;' +
+                                'left: 50%;' +
+                                'top: 50%;' +
+                                'z-index: 1000;' +
+                            '}' +
+                            '&lt;/style&gt;' +
+                            '&lt;script type=&quot;text/javascript&quot;&gt;' +
+                                'console.log(&quot;Custom spinner JS&quot;)' +
+                            '&lt;/script&gt;'
+                    }
+                }
             });
         };
 

diff --git a/registry/client/src/settings/Edit.js b/registry/client/src/settings/Edit.js
@@ -48,7 +48,7 @@ const Input = (props) => {
             );
         }
         default: {
-            return (<TextInput source="value" fullWidth={true} />);
+            return (<TextInput multiline source="value" fullWidth={true} />);
         }
     }
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,7 @@ const Input = (props) => { @@
                 );
             }
             default: {
-                return (<TextInput source="value" fullWidth={true} />);
+                return (<TextInput multiline source="value" fullWidth={true} />);
             }
         }
     };
@@ Expand Down @@