From 28a65876c8992a878654ee12ca6bd6419bd77dc9 Mon Sep 17 00:00:00 2001
From: Michael De Giovanni <m.degiovanni@gmail.com>
Date: Thu, 20 Aug 2020 12:07:05 +0200
Subject: [PATCH 1/8] Add loader to modal. Add event listener to close the
 modal.

---
 core/src/Modal.html | 67 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/core/src/Modal.html b/core/src/Modal.html
index b4eddfe452..254d2ca4dd 100644
--- a/core/src/Modal.html
+++ b/core/src/Modal.html
@@ -22,16 +22,37 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
     <div class="fd-dialog__body">
       <div class="iframeModalCtn"></div>
     </div>
+    {#if showLoadingIndicator}
+    <div
+      in:fade="{{delay: 250, duration: 250}}"
+      out:fade="{{duration: 250}}"
+      class="fd-page spinnerContainer"
+      aria-hidden="false"
+      aria-label="Loading"
+    >
+      <div
+        class="fd-busy-indicator--m"
+        aria-hidden="false"
+        aria-label="Loading"
+        data-testid="luigi-loading-spinner"
+      >
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+      </div>
+    </div>
+    {/if}
   </div>
 </div>
 
 <script>
   import { afterUpdate, createEventDispatcher } from 'svelte';
-
+  import { fade } from 'svelte/transition';
   const dispatch = createEventDispatcher();
 
   import { Navigation } from './navigation/services/navigation';
   import {
+    EventListenerHelpers,
     GenericHelpers,
     IframeHelpers,
     RoutingHelpers
@@ -45,6 +66,8 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
   let pathData;
   let nodeParams;
 
+  let showLoadingIndicator = true;
+
   const prepareNodeData = async path => {
     const pathUrlRaw =
       path && path.length ? GenericHelpers.getPathWithoutHash(path) : '';
@@ -112,6 +135,30 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
     getNode(nodepath);
   });
 
+  EventListenerHelpers.addEventListener('message', async e => {
+    if ('luigi.show-loading-indicator' === e.data.msg) {
+      showLoadingIndicator = true;
+    }
+
+    if ('luigi.hide-loading-indicator' === e.data.msg) {
+      showLoadingIndicator = false;
+    }
+
+    if ('luigi.get-context' === e.data.msg) {
+      const loadingIndicatorAutoHideEnabled =
+        !nodeObject ||
+        !nodeObject.loadingIndicator ||
+        nodeObject.loadingIndicator.hideAutomatically !== false;
+      if (loadingIndicatorAutoHideEnabled) {
+        showLoadingIndicator = false;
+      }
+    }
+
+    if ('luigi.close-modal') {
+      dispatch('close');
+    }
+  });
+
   // [svelte-upgrade suggestion]
   // review these functions and remove unnecessary 'export' keywords
   export function handleKeydown(event) {
@@ -135,7 +182,23 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
     border: 0;
     position: absolute;
   }
-
+  .lui-modal-mf {
+    position: relative;
+  }
+  .spinnerContainer {
+    background: rgba(243, 244, 245, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    min-width: auto;
+    min-height: auto;
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
   .fd-dialog {
     &__content {
       width: 80%;

From 233e01159739b9fb62b410f1e560c968d535684e Mon Sep 17 00:00:00 2001
From: Michael De Giovanni <m.degiovanni@gmail.com>
Date: Thu, 20 Aug 2020 13:20:32 +0200
Subject: [PATCH 2/8] added closeModal in ux client module, removed event
 bubbling in modal, added documentation.

---
 client/src/uxManager.js                       |  9 +++++++++
 core/src/Modal.html                           | 19 ++++++++++++++++---
 .../helpers/event-listener-helpers.js         |  7 +++++++
 docs/luigi-client-api.md                      |  4 ++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/client/src/uxManager.js b/client/src/uxManager.js
index 2d134ce33d..7aa1d5c850 100644
--- a/client/src/uxManager.js
+++ b/client/src/uxManager.js
@@ -34,6 +34,15 @@ class UxManager extends LuigiClientBase {
   hideLoadingIndicator() {
     helpers.sendPostMessageToLuigiCore({ msg: 'luigi.hide-loading-indicator' });
   }
+
+  /**
+   * Closes the modal from being visible.
+   * @memberof uxManager
+   */
+  closeModal() {
+    helpers.sendPostMessageToLuigiCore({ msg: 'luigi.close-modal' });
+  }
+
   /**
    * Adds a backdrop to block the top and side navigation. It is based on the Fundamental UI Modal, which you can use in your micro frontend to achieve the same behavior.
    * @memberof uxManager
diff --git a/core/src/Modal.html b/core/src/Modal.html
index 254d2ca4dd..f23c4d7323 100644
--- a/core/src/Modal.html
+++ b/core/src/Modal.html
@@ -46,7 +46,12 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
 </div>
 
 <script>
-  import { afterUpdate, createEventDispatcher } from 'svelte';
+  import {
+    afterUpdate,
+    createEventDispatcher,
+    onMount,
+    onDestroy
+  } from 'svelte';
   import { fade } from 'svelte/transition';
   const dispatch = createEventDispatcher();
 
@@ -135,7 +140,7 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
     getNode(nodepath);
   });
 
-  EventListenerHelpers.addEventListener('message', async e => {
+  const onMessage = async e => {
     if ('luigi.show-loading-indicator' === e.data.msg) {
       showLoadingIndicator = true;
     }
@@ -154,9 +159,17 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
       }
     }
 
-    if ('luigi.close-modal') {
+    if ('luigi.close-modal' === e.data.msg) {
       dispatch('close');
     }
+  };
+
+  onMount(() => {
+    EventListenerHelpers.addEventListener('message', onMessage);
+  });
+
+  onDestroy(() => {
+    EventListenerHelpers.removeEventListener('message', onMessage);
   });
 
   // [svelte-upgrade suggestion]
diff --git a/core/src/utilities/helpers/event-listener-helpers.js b/core/src/utilities/helpers/event-listener-helpers.js
index db01e5874e..d76877b905 100644
--- a/core/src/utilities/helpers/event-listener-helpers.js
+++ b/core/src/utilities/helpers/event-listener-helpers.js
@@ -9,6 +9,13 @@ class EventListenerHelpersClass {
     window.addEventListener(type, listenerFn);
   }
 
+  removeEventListener(type, listenerFn) {
+    this.listeners = this.listeners.filter(
+      l => !(l.type === type && l.listenerFn === listenerFn)
+    );
+    window.removeEventListener(type, listenerFn);
+  }
+
   removeAllEventListeners() {
     this.listeners.forEach(l => {
       window.removeEventListener(l.type, l.listenerFn);
diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md
index 1e6598bd6b..c88e06ae4d 100644
--- a/docs/luigi-client-api.md
+++ b/docs/luigi-client-api.md
@@ -620,6 +620,10 @@ Adds a backdrop with a loading indicator for the micro frontend frame. This over
 
 Removes the loading indicator. Use it after calling [showLoadingIndicator()](#showLoadingIndicator) or to hide the indicator when you use the [loadingIndicator.hideAutomatically: false](navigation-parameters-reference.md#node-parameters) node configuration.
 
+#### closeModal
+
+Closes the modal from being visible.
+
 #### addBackdrop
 
 Adds a backdrop to block the top and side navigation. It is based on the Fundamental UI Modal, which you can use in your micro frontend to achieve the same behavior.

From 820dd372e14bef0bbd1362c733bc5011679e1e44 Mon Sep 17 00:00:00 2001
From: Michael DeGiovanni <m.degiovanni@gmail.com>
Date: Thu, 20 Aug 2020 15:20:48 +0200
Subject: [PATCH 3/8] Update luigi-client-api.md

---
 docs/luigi-client-api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md
index c88e06ae4d..2a60dce2ce 100644
--- a/docs/luigi-client-api.md
+++ b/docs/luigi-client-api.md
@@ -622,7 +622,7 @@ Removes the loading indicator. Use it after calling [showLoadingIndicator()](#sh
 
 #### closeModal
 
-Closes the modal from being visible.
+Closes the modal, if the Mirco Frontend is in a modal.
 
 #### addBackdrop
 

From 18a8e982eba05f211a2f53a8926c378d2823c9d1 Mon Sep 17 00:00:00 2001
From: Michael De Giovanni <m.degiovanni@gmail.com>
Date: Mon, 24 Aug 2020 15:13:49 +0200
Subject: [PATCH 4/8] added test to closeModal; updated docu

---
 client/src/uxManager.js                       |  2 +-
 docs/luigi-client-api.md                      |  2 +-
 .../tests/1-angular/microfrontends.spec.js    | 21 +++++++++++++++++++
 .../project/settings/settings.component.html  | 16 ++++++++++++++
 .../project/settings/settings.component.ts    |  3 +++
 5 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/client/src/uxManager.js b/client/src/uxManager.js
index 7aa1d5c850..2ccba7f2f9 100644
--- a/client/src/uxManager.js
+++ b/client/src/uxManager.js
@@ -36,7 +36,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
-   * Closes the modal from being visible.
+   * Closes the modal if it is displayed.
    * @memberof uxManager
    */
   closeModal() {
diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md
index c88e06ae4d..b3f9195b67 100644
--- a/docs/luigi-client-api.md
+++ b/docs/luigi-client-api.md
@@ -622,7 +622,7 @@ Removes the loading indicator. Use it after calling [showLoadingIndicator()](#sh
 
 #### closeModal
 
-Closes the modal from being visible.
+Closes the modal if it is displayed.
 
 #### addBackdrop
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/microfrontends.spec.js b/test/e2e-test-application/e2e/tests/1-angular/microfrontends.spec.js
index c8692376c8..cceebf3267 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/microfrontends.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/microfrontends.spec.js
@@ -42,6 +42,27 @@ describe('Modal Microfrontend', () => {
         .should('not.be.visible');
     });
 
+    it(`can be closed by the Luigi client`, () => {
+      cy.wrap($iframeBody)
+        .contains('rendered in a modal')
+        .click();
+
+      cy.wrap($iframeBody)
+        .get('[data-testid=modal-mf]')
+        .should('be.visible');
+
+      cy.get('[data-testid=modal-mf] iframe').then(ifr => {
+        cy.wrap(ifr[0].contentDocument)
+          .its('body')
+          .contains('Close modal')
+          .click();
+
+        cy.wrap($iframeBody)
+          .get('[data-testid=modal-mf]')
+          .should('not.be.visible');
+      });
+    });
+
     it(`sets proper URL inside iframe`, () => {
       cy.wrap($iframeBody)
         .contains('rendered in a modal')
diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
index 2310ab2f52..26cc38a93f 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.html
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -91,5 +91,21 @@ <h3 class="fd-layout-panel__title">
         to go to <i>project two</i>, where you can try out hasBack functionality
       </div>
     </div>
+    <div class="fd-layout-panel">
+      <div class="fd-layout-panel__header">
+        <div class="fd-layout-panel__head">
+          <h3 class="fd-layout-panel__title">
+            LuigiClient Modal
+          </h3>
+        </div>
+      </div>
+      <div class="fd-layout-panel__body">
+        <div *ngIf="isModal">
+          <button class="fd-button" (click)="uxManager().closeModal()">
+            Close modal
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </section>
diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.ts b/test/e2e-test-application/src/app/project/settings/settings.component.ts
index 6c54084275..d05bc7b3db 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.ts
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.ts
@@ -20,9 +20,11 @@ import { Subscription } from 'rxjs';
 })
 export class SettingsComponent implements OnInit {
   public linkManager = linkManager;
+  public uxManager = uxManager;
   projectId: string;
   groupId: string;
   hasBack: boolean;
+  isModal: boolean;
   nodeParams: NodeParams = null;
   callbackValue = 'default value';
   lcSubscription: Subscription;
@@ -42,6 +44,7 @@ export class SettingsComponent implements OnInit {
 
     addInitListener(init => {
       this.hasBack = linkManager().hasBack();
+      this.isModal = uxManager().isModal();
       this.nodeParams =
         Object.keys(getNodeParams()).length > 0 ? getNodeParams() : null;
       if (!this.cdr['destroyed']) {

From facc353d33a669baccd56ef546e4bf408b27a741 Mon Sep 17 00:00:00 2001
From: Michael DeGiovanni <m.degiovanni@gmail.com>
Date: Tue, 25 Aug 2020 16:47:28 +0200
Subject: [PATCH 5/8] Update
 test/e2e-test-application/src/app/project/settings/settings.component.html

Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com>
---
 .../src/app/project/settings/settings.component.html            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
index 26cc38a93f..5ec1e073b4 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.html
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -91,7 +91,7 @@ <h3 class="fd-layout-panel__title">
         to go to <i>project two</i>, where you can try out hasBack functionality
       </div>
     </div>
-    <div class="fd-layout-panel">
+    <div *ngIf="isModal" class="fd-layout-panel">
       <div class="fd-layout-panel__header">
         <div class="fd-layout-panel__head">
           <h3 class="fd-layout-panel__title">

From 410788a5a8942c8d0448bdcde109003c31a32ab2 Mon Sep 17 00:00:00 2001
From: Michael DeGiovanni <m.degiovanni@gmail.com>
Date: Tue, 25 Aug 2020 16:47:47 +0200
Subject: [PATCH 6/8] Update
 test/e2e-test-application/src/app/project/settings/settings.component.html

Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com>
---
 .../src/app/project/settings/settings.component.html            | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
index 5ec1e073b4..588f321f65 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.html
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -100,11 +100,9 @@ <h3 class="fd-layout-panel__title">
         </div>
       </div>
       <div class="fd-layout-panel__body">
-        <div *ngIf="isModal">
           <button class="fd-button" (click)="uxManager().closeModal()">
             Close modal
           </button>
-        </div>
       </div>
     </div>
   </div>

From 6cad6e598dbb210d6d61376cc3ddf280182e74cb Mon Sep 17 00:00:00 2001
From: Michael De Giovanni <m.degiovanni@gmail.com>
Date: Wed, 26 Aug 2020 11:14:09 +0200
Subject: [PATCH 7/8] Modal.html check if iframe exists; Update to settings
 component with proper margins

---
 core/src/Modal.html                           |  6 +++-
 .../project/settings/settings.component.html  | 29 ++++++++++---------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/core/src/Modal.html b/core/src/Modal.html
index f23c4d7323..3d923bc1da 100644
--- a/core/src/Modal.html
+++ b/core/src/Modal.html
@@ -70,7 +70,7 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
   let nodeObject;
   let pathData;
   let nodeParams;
-
+  let iframeCreated = false;
   let showLoadingIndicator = true;
 
   const prepareNodeData = async path => {
@@ -89,6 +89,9 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
   };
 
   const getNode = async path => {
+    if (iframeCreated) {
+      return;
+    }
     if (isDataPrepared) {
       const iframe = createIframeModal(nodeObject.viewUrl, {
         context: pathData.context,
@@ -99,6 +102,7 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
         modalIframe: iframe,
         modalIframeData: { ...pathData, nodeParams }
       });
+      iframeCreated = true;
     } else {
       await prepareNodeData(path);
     }
diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
index 4ea7094a36..e084af9735 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.html
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -58,7 +58,7 @@ <h1 *ngIf="projectId" class="fd-section__title">
     <h1 *ngIf="!projectId" class="fd-section__title">Global Settings</h1>
   </div>
 
-  <div class="fd-layout-panel">
+  <div class="fd-layout-panel fd-has-margin-bottom-small">
     <div class="fd-layout-panel__header">
       <div class="fd-layout-panel__head">
         <h3 class="fd-layout-panel__title">
@@ -91,20 +91,21 @@ <h3 class="fd-layout-panel__title">
         to go to <i>project two</i>, where you can try out hasBack functionality
       </div>
     </div>
-    <div class="fd-layout-panel">
-      <div class="fd-layout-panel__header">
-        <div class="fd-layout-panel__head">
-          <h3 class="fd-layout-panel__title">
-            LuigiClient Modal
-          </h3>
-        </div>
+  </div>
+
+  <div class="fd-layout-panel fd-has-margin-bottom-small">
+    <div class="fd-layout-panel__header">
+      <div class="fd-layout-panel__head">
+        <h3 class="fd-layout-panel__title">
+          LuigiClient Modal
+        </h3>
       </div>
-      <div class="fd-layout-panel__body">
-        <div *ngIf="isModal">
-          <button class="fd-button" (click)="uxManager().closeModal()">
-            Close modal
-          </button>
-        </div>
+    </div>
+    <div class="fd-layout-panel__body">
+      <div *ngIf="isModal">
+        <button class="fd-button" (click)="uxManager().closeModal()">
+          Close modal
+        </button>
       </div>
     </div>
   </div>

From 568a95356be39d66c23f1430bc888fc1f6cfc30d Mon Sep 17 00:00:00 2001
From: Michael De Giovanni <m.degiovanni@gmail.com>
Date: Wed, 26 Aug 2020 11:43:09 +0200
Subject: [PATCH 8/8] refactor closeModal to closeCurrentModal

---
 client/luigi-client.d.ts                                    | 6 ++++++
 client/src/uxManager.js                                     | 4 ++--
 docs/luigi-client-api.md                                    | 4 ++--
 .../src/app/project/settings/settings.component.html        | 2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/luigi-client.d.ts b/client/luigi-client.d.ts
index 4c3f0c1a53..0b1aff5fbd 100644
--- a/client/luigi-client.d.ts
+++ b/client/luigi-client.d.ts
@@ -100,6 +100,12 @@ export declare interface UxManager {
    */
   hideLoadingIndicator: () => void;
 
+  /**
+   * Closes the currently opened micro frontend modal.
+   * @memberof uxManager
+   */
+  closeCurrentModal: () => void;
+
   /**
    * This method informs the main application that there are unsaved changes in the current view in the iframe. For example, that can be a view with form fields which were edited but not submitted.
    * @param {boolean} isDirty indicates if there are any unsaved changes on the current page or in the component
diff --git a/client/src/uxManager.js b/client/src/uxManager.js
index 2ccba7f2f9..30b3e1b3ab 100644
--- a/client/src/uxManager.js
+++ b/client/src/uxManager.js
@@ -36,10 +36,10 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
-   * Closes the modal if it is displayed.
+   * Closes the currently opened micro frontend modal.
    * @memberof uxManager
    */
-  closeModal() {
+  closeCurrentModal() {
     helpers.sendPostMessageToLuigiCore({ msg: 'luigi.close-modal' });
   }
 
diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md
index bbf48ca8bd..6e2ca29606 100644
--- a/docs/luigi-client-api.md
+++ b/docs/luigi-client-api.md
@@ -722,9 +722,9 @@ Adds a backdrop with a loading indicator for the micro frontend frame. This over
 
 Removes the loading indicator. Use it after calling [showLoadingIndicator()](#showLoadingIndicator) or to hide the indicator when you use the [loadingIndicator.hideAutomatically: false](navigation-parameters-reference.md#node-parameters) node configuration.
 
-#### closeModal
+#### closeCurrentModal
 
-Closes the modal if it is displayed.
+Closes the currently opened micro frontend modal.
 
 #### addBackdrop
 
diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
index 2c2f211d1d..42043403fe 100644
--- a/test/e2e-test-application/src/app/project/settings/settings.component.html
+++ b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -102,7 +102,7 @@ <h3 class="fd-layout-panel__title">
       </div>
     </div>
     <div class="fd-layout-panel__body">
-      <button class="fd-button" (click)="uxManager().closeModal()">
+      <button class="fd-button" (click)="uxManager().closeCurrentModal()">
         Close modal
       </button>
     </div>