Add automatic loading indicator to show processing

client/luigi-client.js

@@ -63,16 +63,13 @@
     currentContext = rawData;
 
     Luigi.token = currentContext.context.idToken;
-    // Luigi.linkManagerData = currentContext.context.linkManagerData;
-    // Luigi.currentEnvironmentId = currentContext.context.currentEnvironmentId;
-    // Luigi.sessionId = currentContext.context.sessionId;
   }
 
   function hasHash(string) {
     return string.indexOf('#') !== -1;
   }
 
-  window.addEventListener('message', function (e) {
+  window.addEventListener('message', function messageListener(e) {
     if ('luigi.init' === e.data.msg) {
       setContext(e.data);
       Luigi.initialized = true;
@@ -105,7 +102,7 @@
      * Adds a listener that will react once Luigi is initialized.
      * @param {function} initFn - a function that will be called once Luigi is initialized
      */
-    addInitListener: function (initFn) {
+    addInitListener: function addInitListener(initFn) {
       window._init = initFn;
       if (Luigi.initialized && window._init) {
         window._init(currentContext.context);
@@ -115,7 +112,7 @@
      * Use it to get Luigi context changes
      * @param contextUpdatedFn a function that will be called every time Luigi context was changed
      */
-    addContextUpdateListener: function (contextUpdatedFn) {
+    addContextUpdateListener: function addContextUpdateListener(contextUpdatedFn) {
       _contextUpdated = contextUpdatedFn;
       if (Luigi.initialized && _contextUpdated) {
         _contextUpdated(currentContext.context);
@@ -127,26 +124,26 @@
      * sessionId
      * currentEnvironmentId
      */
-    getEventData: function () {
+    getEventData: function getEventData() {
       return currentContext.context;
     },
     /**
      * Fetch node parameters
      */
-    getNodeParams: function () {
+    getNodeParams: function getNodeParams() {
       return currentContext.nodeParams;
     },
     /**
      * Fetch node parameters
      */
-    getPathParams: function () {
+    getPathParams: function getPathParams() {
       return currentContext.pathParams;
     },
     /**
      * Navigate to another route.
      * Lets you navigate to another route.
      */
-    linkManager: function () {
+    linkManager: function linkManager() {
       var options = {
         preserveView: false,
         nodeParams: {}
@@ -158,7 +155,7 @@
        * @param {string} path path to be navigated to
        * @param {string} sessionId  current Luigi sessionId
        */
-      var _navigate = function (sessionId, path) {
+      var _navigate = function _navigate(sessionId, path) {
         var relativePath = path[0] !== '/';
         var navigation = {
           msg: 'luigi.navigation.open',
@@ -179,7 +176,7 @@
          * @param {string} sessionId  current Luigi sessionId
          * @param {boolean} preserveView open route in a new view window to goBack to last state afterwards
          */
-        navigate: function (path, sessionId, preserveView) {
+        navigate: function navigate(path, sessionId, preserveView) {
           if (options.errorSkipNavigation) {
             options.errorSkipNavigation = undefined;
             return;
@@ -193,7 +190,7 @@
          * Usage: linkManager.fromContext("currentTeam").navigate("path")
          * @param {object} navigationContext
          * */
-        fromContext: function (navigationContext) {
+        fromContext: function fromContext(navigationContext) {
           if (!currentContext.context.parentNavigationContexts.includes(navigationContext)) {
             options.errorSkipNavigation = true;
             console.error(
@@ -212,7 +209,7 @@
          * This has to be a parent navigation context, it is not possible to go to child navigation contexts
          * Usage: linkManager.fromClosestContext().navigate("path")
          */
-        fromClosestContext: function () {
+        fromClosestContext: function fromClosestContext() {
           if (currentContext.context.parentNavigationContexts.length === 0) {
             console.error(
               'Navigation not possible, no parent navigationContext found.'
@@ -230,7 +227,7 @@
          * Can be chained with context settings functions like this: linkManager.fromContext("currentTeam").withParams({foo: "bar"}).navigate("path")
          * @param {object} nodeParams
          * */
-        withParams: function (nodeParams) {
+        withParams: function withParams(nodeParams) {
           if (nodeParams) {
             Object.assign(options.nodeParams, nodeParams);
           }
@@ -242,7 +239,7 @@
          * returns truthy. Can be used to show a back button
          * @return boolean
          */
-        hasBack: function () {
+        hasBack: function hasBack() {
           return Boolean(
             currentContext.internal.viewStackSize !== 0
           );
@@ -257,7 +254,7 @@
          * @param {mixed} goBackValue data that is handed over as goBackContext after going back
          * @return void
          */
-        goBack: function (goBackValue) {
+        goBack: function goBack(goBackValue) {
           if (this.hasBack()) {
             window.parent.postMessage(
               {
@@ -273,18 +270,30 @@
     /**
      * Manage UX specific options.
      */
-    uxManager: function () {
+    uxManager: function uxManager() {
       return {
+        /**
+         * Shows a spinner with backdrop to block the micro front-end frame
+         */
+        showLoadingIndicator: function showLoadingIndicator() {
+          window.parent.postMessage({ msg: 'luigi.show-loading-indicator' }, '*');
+        },
+        /**
+         * Hides the spinner
+         */
+        hideLoadingIndicator: function hideLoadingIndicator() {
+          window.parent.postMessage({ msg: 'luigi.hide-loading-indicator' }, '*');
+        },
         /**
          * Adds a backdrop for Core to block the UI
          */
-        addBackdrop: function () {
+        addBackdrop: function addBackdrop() {
           window.parent.postMessage({ msg: 'luigi.add-backdrop' }, '*');
         },
         /**
          * Removes the backdrop
          */
-        removeBackdrop: function () {
+        removeBackdrop: function removeBackdrop() {
           window.parent.postMessage({ msg: 'luigi.remove-backdrop' }, '*');
         }
       };

core/examples/luigi-sample-angular/angular.json

@@ -40,6 +40,11 @@
                 "glob": "**",
                 "input": "node_modules/@kyma-project/luigi-core",
                 "output": "/luigi-core"
+              },
+              {
+                "glob": "luigi-client.js",
+                "input": "node_modules/@kyma-project/luigi-client",
+                "output": "/luigi-client"
               }
             ],
             "styles": ["src/styles.css"],

core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js

@@ -1,13 +1,13 @@
 describe('Luigi client features', () => {
   beforeEach(() => {
     cy.visit('http://localhost:4200');
-  });
-
-  it('linkManager features', () => {
     cy.login('tets', 'tets');
 
     //wait for the iFrame to be loaded
-    cy.wait(3000);
+    cy.wait(1000);
+  });
+
+  it('linkManager features', () => {
     cy.get('iframe').then($iframe => {
       const $iframeBody = $iframe.contents().find('body');
       cy.goToFeaturesPage($iframeBody);
@@ -89,7 +89,7 @@ describe('Luigi client features', () => {
       });
 
       //wait for the second iFrame to be loaded
-      cy.wait(1000);
+      cy.wait(500);
       cy.get('iframe')
         .first()
         .then($preserveViewiFrame => {
@@ -110,30 +110,54 @@ describe('Luigi client features', () => {
     });
   });
 
-  it('uxManager features', () => {
-    cy.login('tets', 'tets');
 
-    //wait for the iFrame to be loaded
-    cy.wait(3000);
-    cy.get('iframe').then($iframe => {
-      const $iframeBody = $iframe.contents().find('body');
-      cy.goToFeaturesPage($iframeBody);
-      cy.wrap($iframeBody).should('not.contain', 'Lorem tipsum dolor sit amet');
-      cy.get('.fd-ui__overlay').should('not.exist');
+  describe('uxManager', () => {
+    it('backdrop', () => {
+      cy.wait(500);
+      cy.get('iframe').then($iframe => {
+        const $iframeBody = $iframe.contents().find('body');
+        cy.goToFeaturesPage($iframeBody);
+        cy.wrap($iframeBody).should('not.contain', 'Lorem tipsum dolor sit amet');
+        cy.get('.fd-ui__overlay').should('not.exist');
 
-      //open modal with backdrop
-      cy.wrap($iframeBody)
-        .contains('Add backdrop')
-        .click();
-      cy.wrap($iframeBody).should('contain', 'Lorem tipsum dolor sit amet');
-      cy.get('.fd-ui__overlay').should('exist');
+        //open modal with backdrop
+        cy.wrap($iframeBody)
+          .contains('Add backdrop')
+          .click();
+        cy.wrap($iframeBody).should('contain', 'Lorem tipsum dolor sit amet');
+        cy.get('.fd-ui__overlay').should('exist');
 
-      //close modal
-      cy.wrap($iframeBody)
-        .contains('Confirm')
+        //close modal
+        cy.wrap($iframeBody)
+          .contains('Confirm')
+          .click();
+        cy.wrap($iframeBody).should('not.contain', 'Lorem tipsum dolor sit amet');
+        cy.get('.fd-ui__overlay').should('not.exist');
+      });
+    });
+
+    it('loading indicator', () => {
+      cy.get('.fd-ui__header')
+        .contains('External Page')
         .click();
-      cy.wrap($iframeBody).should('not.contain', 'Lorem tipsum dolor sit amet');
-      cy.get('.fd-ui__overlay').should('not.exist');
+
+      cy.get('.fd-spinner').should('exist');
+
+      cy.get('.fd-spinner').should('not.exist');
+
+      cy.wait(250);
+      cy.get('iframe').then($iframe => {
+        const $iframeBody = $iframe.contents().find('body');
+
+        // show loading indicator
+        cy.wrap($iframeBody)
+          .contains('Show loading indicator')
+          .click();
+        cy.get('.fd-spinner').should('exist');
+
+        // wait for programmatic hide of loading indicator
+        cy.get('.fd-spinner').should('not.exist');
+      });
     });
   });
 });