Adds notification for closed confirmation modal

container/cypress/e2e/test-app/compound/wc-compound-container.cy.js

@@ -226,7 +226,7 @@ describe('Compound Container Tests', () => {
           cy.on('window:confirm', (str) => {
             expect(str).to.equal('Are you sure you want to do this?');
           });
-          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.uxManager().showConfirmationModal()');
+          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.uxManager().showConfirmationModal() - confirmed');
         });
     });
 

container/cypress/e2e/test-app/wc/wc-container.cy.js

@@ -301,7 +301,7 @@ describe('Web Container Test', () => {
           cy.on('window:confirm', (str) => {
             expect(str).to.equal('Are you sure you want to do this?');
           });
-          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.uxManager().showConfirmationModal()');
+          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.uxManager().showConfirmationModal() - confirmed');
         });
     });
 

container/public/dist/custom-elements.json

@@ -297,6 +297,13 @@
                 "text": "Event"
               }
             },
+            {
+              "name": "close-confirmation-modal-request",
+              "description": "Event passed to the micro frontend when confirmation modal is closed.",
+              "type": {
+                "text": "Event"
+              }
+            },
             {
               "name": "show-loading-indicator-request",
               "description": "Event fired when the micro frontend requests to show a loading indicator.",
@@ -721,6 +728,13 @@
                 "text": "Event"
               }
             },
+            {
+              "name": "close-confirmation-modal-request",
+              "description": "Event passed to the micro frontend when confirmation modal is closed.",
+              "type": {
+                "text": "Event"
+              }
+            },
             {
               "name": "show-loading-indicator-request",
               "description": "Event fired when the micro frontend requests to show a loading indicator.",

container/src/LuigiContainer.svelte

@@ -39,6 +39,7 @@
         updateViewUrl = notInitFn('updateViewUrl');
         closeAlert = notInitFn('closeAlert');
         notifyAlertClosed = notInitFn('notifyAlertClosed');
+        notifyConfirmationModalClosed = notInitFn('notifyConfirmationModalClosed');
         attributeChangedCallback(name, oldValue, newValue) {
           if (this.containerInitialized) {
             if (name === 'context') {
@@ -147,7 +148,7 @@
       };
 
       thisComponent.closeAlert = (id: string, dismissKey?: string) => {
-        thisComponent.notifyAlertClosed(id, dismissKey);        
+        thisComponent.notifyAlertClosed(id, dismissKey);
       };
 
       thisComponent.notifyAlertClosed = (id: string, dismissKey?: string) => {
@@ -161,6 +162,17 @@
         }
       }
 
+      thisComponent.notifyConfirmationModalClosed = (result) => {
+        // check if thisComponent is in dom
+        if (thisComponent.isConnected) {
+          if (webcomponent) {
+            webcomponentService.notifyConfirmationModalClosed(!!result);
+          } else {
+            ContainerAPI.notifyConfirmationModalClosed(!!result, iframeHandle);
+          }
+        }
+      }
+
       containerService.registerContainer(thisComponent);
       webcomponentService.thisComponent = thisComponent;
 

container/src/api/container-api.ts

@@ -102,6 +102,16 @@ export class ContainerAPIFunctions {
     const message = dismissKey ? { id, dismissKey } : { id };
     containerService.sendCustomMessageToIframe(iframeHandle, message, LuigiInternalMessageID.ALERT_CLOSED);
   }
+
+  /**
+   * Send a message to the microfrontend notifying the modal has been closed
+   * @param modalResult the result of the modal being closed
+   * @param iframeHandle the handle of the iframe to send the message to (optional)
+   */
+  notifyConfirmationModalClosed = (modalResult: boolean, iframeHandle?: IframeHandle) => {
+    const message = { data: { confirmed: modalResult } };
+    containerService.sendCustomMessageToIframe(iframeHandle, message, LuigiInternalMessageID.CONFIRMATION_MODAL_CLOSED);
+  };
 }
 
 export const ContainerAPI = new ContainerAPIFunctions();

container/src/constants/communication.ts

@@ -44,6 +44,11 @@ export namespace Events {
    */
   export const SHOW_CONFIRMATION_MODAL_REQUEST = 'show-confirmation-modal-request';
 
+  /**
+   * Event passed to the micro frontend when confirmation modal is closed.
+   */
+  export const CONFIRMATION_MODAL_CLOSED = 'close-confirmation-modal-request';
+
   /**
    * Event fired when the micro frontend requests to show a loading indicator.
    */

container/src/constants/internal-communication.ts

@@ -44,6 +44,10 @@ export namespace LuigiInternalMessageID {
    * A message emmitted from the Microfrontend when a request to show an confirmation modal is sent
    */
   export const SHOW_CONFIRMATION_MODAL_REQUEST = 'luigi.ux.confirmationModal.show';
+  /**
+   * A message sent to the microfrontend to notify closing of a particular confirmation modal
+   */
+  export const CONFIRMATION_MODAL_CLOSED = 'luigi.ux.confirmationModal.hide';
   /**
    * A message emmitted from the Microfrontend when a request to show loading indicator is sent
    */

container/src/services/container.service.ts

@@ -156,6 +156,9 @@ export class ContainerService {
               case LuigiInternalMessageID.SHOW_CONFIRMATION_MODAL_REQUEST:
                 this.dispatch(Events.SHOW_CONFIRMATION_MODAL_REQUEST, targetCnt, event.data.data);
                 break;
+              case LuigiInternalMessageID.CONFIRMATION_MODAL_CLOSED:
+                this.dispatch(Events.CONFIRMATION_MODAL_CLOSED, targetCnt, event.data.data);
+                break;
               case LuigiInternalMessageID.SHOW_LOADING_INDICATOR_REQUEST:
                 this.dispatch(Events.SHOW_LOADING_INDICATOR_REQUEST, targetCnt, event);
                 break;

container/src/services/webcomponents.service.ts

@@ -18,7 +18,7 @@ import type {
 export class WebComponentService {
   containerService: ContainerService;
   thisComponent: ContainerElement;
-  alertResolvers: Record<string, Function> = {};
+  alertResolvers: Record<string, (value: unknown) => void> = {};
   alertIndex = 0;
 
   constructor() {
@@ -725,4 +725,16 @@ export class WebComponentService {
       console.log('Promise is not in the list.');
     }
   }
+
+  /**
+   * Responsible for notifying the microfrontend when modal has been closed
+   *
+   * @param {boolean} confirmed the result of the modal being closed
+   *
+   * @returns {void}
+   *
+   */
+  notifyConfirmationModalClosed(confirmed = true) {
+    this.dispatchLuigiEvent(Events.CONFIRMATION_MODAL_CLOSED, { confirmed });
+  }
 }

container/test-app/compound/compoundClientAPI.html

@@ -205,6 +205,9 @@ <h3>
           }
         },
       );
+      compoundContainer.addEventListener(MFEventID.CONFIRMATION_MODAL_CLOSED, (event) => {
+        console.log(MFEventID.CONFIRMATION_MODAL_CLOSED, event);
+      });
       compoundContainer.addEventListener(
         MFEventID.RUNTIME_ERROR_HANDLING_REQUEST,
         (event) => {

container/test-app/compound/helloWorldWC.js

@@ -381,9 +381,15 @@ export default class extends HTMLElement {
         .showConfirmationModal(settings)
         .then(() => {
           this.LuigiClient.uxManager().showAlert({
-            text: 'LuigiClient.uxManager().showConfirmationModal()',
+            text: 'LuigiClient.uxManager().showConfirmationModal() - confirmed',
             type: 'info'
           });
+        })
+        .catch(() => {
+          this.LuigiClient.uxManager().showAlert({
+            text: 'LuigiClient.uxManager().showConfirmationModal() - dissmissed',
+            type: 'warning'
+          });
         });
     });
   }

container/test-app/iframe/iframeContainer.html

@@ -144,9 +144,14 @@ <h3>
 
       luigiContainer.addEventListener(Events.SHOW_CONFIRMATION_MODAL_REQUEST, (event) => {
         console.log(Events.SHOW_CONFIRMATION_MODAL_REQUEST, event);
-        alert(
-          'show-confirmation-modal message received: ' + JSON.stringify(event.detail),
-        );
+        const data = event.detail;
+        const val = confirm(data.body);
+        alert('show-confirmation-modal message received: ' + JSON.stringify(data));
+        luigiContainer.notifyConfirmationModalClosed(val);
+      });
+
+      luigiContainer.addEventListener(Events.CONFIRMATION_MODAL_CLOSED, (event) => {
+        console.log(Events.CONFIRMATION_MODAL_CLOSED, event);
       });
 
       luigiContainer.addEventListener(Events.SHOW_LOADING_INDICATOR_REQUEST, (event) => {

container/test-app/iframe/microfrontend.html

@@ -132,7 +132,11 @@ <h1 id="title">Multi purpose demo page</h1>
           buttonConfirm: 'Yes',
           buttonDismiss: 'No',
         };
-        LuigiClient.uxManager().showConfirmationModal(settings);
+
+        LuigiClient.uxManager()
+          .showConfirmationModal(settings)
+          .then(() => console.log('Modal confirmed'))
+          .catch(() => console.log('Modal dissmissed'));
       }
 
       function testShowLoadingIndicator() {

container/test-app/wc/clientAPI.html

@@ -161,8 +161,12 @@ <h3>
             if (event.callback) {
               event.callback(val);
             }
+            luigiContainer.notifyConfirmationModalClosed(val);
           },
         );
+        luigiContainer.addEventListener(MFEventID.CONFIRMATION_MODAL_CLOSED, (event) => {
+          console.log(MFEventID.CONFIRMATION_MODAL_CLOSED, event);
+        });
         luigiContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, (event) => {
           if (event.detail.id !== 'timer') {
             alert(event.detail.data);

container/test-app/wc/helloWorldWC.js

@@ -413,9 +413,15 @@ export default class extends HTMLElement {
         .showConfirmationModal(settings)
         .then(() => {
           this.LuigiClient.uxManager().showAlert({
-            text: 'LuigiClient.uxManager().showConfirmationModal()',
+            text: 'LuigiClient.uxManager().showConfirmationModal() - confirmed',
             type: 'info'
           });
+        })
+        .catch(() => {
+          this.LuigiClient.uxManager().showAlert({
+            text: 'LuigiClient.uxManager().showConfirmationModal() - dissmissed',
+            type: 'warning'
+          });
         });
     });
   }

container/test/api/container-api.spec.ts

@@ -204,7 +204,7 @@ describe('Container Service', () => {
   describe('closeAlert', () => {
     const containerAPI = new ContainerAPIFunctions();
 
-    it('internal method properly called', () => {
+    it('notifyAlertClosed method properly called', () => {
       // mock and spy
       const id = 'some-id';
       const dismissKey = 'key';
@@ -219,7 +219,7 @@ describe('Container Service', () => {
       expect(spy).toHaveBeenCalledWith(iframeHandle, { id, dismissKey }, LuigiInternalMessageID.ALERT_CLOSED);
     });
 
-    it('internal method properly called if no dismisskey', () => {
+    it('notifyAlertClosed method properly called if no dismisskey', () => {
       // mock and spy
       const id = 'some-id';
       const iframeHandle = {
@@ -234,6 +234,23 @@ describe('Container Service', () => {
     });
   });
 
+  describe('notifyConfirmationModalClosed', () => {
+    const containerAPI = new ContainerAPIFunctions();
+
+    it.each([true, false])('notifyConfirmationModalClosed method properly called', (result) => {
+      // mock and spy
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+
+      containerAPI.notifyConfirmationModalClosed(result, iframeHandle);
+
+      expect(spy).toHaveBeenCalledWith(iframeHandle, { data: { confirmed: result } }, LuigiInternalMessageID.CONFIRMATION_MODAL_CLOSED);
+    });
+  });
+
   describe('sendCustomMessage', () => {
     const containerAPI = new ContainerAPIFunctions();
 

container/test/services/webcomponents.service.spec.ts

@@ -1800,3 +1800,19 @@ describe('resolveAlert', () => {
     consoleSpy.mockRestore();
   });
 });
+
+describe('notifyConfirmationModalClosed', () => {
+  it.each([true, false])('should dispatch LuigiEvent with modal result', (confirmed) => {
+    const service = new WebComponentService();
+
+    // mock and spy on functions
+    service.containerService.dispatch = jest.fn();
+    const dispatchEventSpy = jest.spyOn(service, 'dispatchLuigiEvent');
+
+    // act
+    service.notifyConfirmationModalClosed(confirmed);
+
+    // assert
+    expect(dispatchEventSpy).toHaveBeenCalledWith(Events.CONFIRMATION_MODAL_CLOSED, { confirmed });
+  });
+});

container/typings/constants/events.d.ts

@@ -44,6 +44,11 @@ export namespace Events {
    */
   export const SHOW_CONFIRMATION_MODAL_REQUEST = 'show-confirmation-modal-request';
 
+  /**
+   * Event passed to the micro frontend when confirmation modal is closed.
+   */
+  export const CONFIRMATION_MODAL_CLOSED = 'close-confirmation-modal-request';
+
   /**
    * Event fired when the micro frontend requests to show a loading indicator.
    */