showAlert promise for webcomponents

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

@@ -168,7 +168,7 @@ describe('Web Container Test', () => {
     });
     it('openAsDrawer webcomponent container', () => {
       cy.on('window:alert', stub);
-      
+
       cy.get(containerSelector)
         .shadow()
         .get('#openAsDrawerBtn')
@@ -179,7 +179,7 @@ describe('Web Container Test', () => {
     });
     it('openAsSplitview webcomponent container', () => {
       cy.on('window:alert', stub);
-      
+
       cy.get(containerSelector)
         .shadow()
         .get('#openAsSplitviewBtn')
@@ -195,7 +195,7 @@ describe('Web Container Test', () => {
       const alertMessages = [
         'UPDATE_TOP_NAVIGATION_REQUEST event received',
         'some goBackValue',
-        'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false',
+        'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false'
       ];
 
       cy.get(containerSelector)
@@ -217,7 +217,53 @@ describe('Web Container Test', () => {
         .get('#showAlert')
         .click()
         .then(() => {
-          expect(stub.getCall(0)).to.be.calledWith("uxManager().showAlert() test");
+          expect(stub.getCall(0)).to.be.calledWith(
+            'This is an alert message {goToHome} with a {relativePath}. You can go to {goToOtherProject}. {neverShowItAgain}'
+          );
+        });
+    });
+
+    it('closeAlert via xButton', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#showAlert')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith(
+            'This is an alert message {goToHome} with a {relativePath}. You can go to {goToOtherProject}. {neverShowItAgain}'
+          );
+        });
+      cy.get('#closeAlert')
+        .click()
+        .then(() => {
+          cy.get(containerSelector)
+            .shadow()
+            .get('#closeAlertResponse')
+            .should('have.text', 'Callback called on wc true');
+        });
+    });
+
+    it('closeAlert via dismissButton', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#showAlert')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith(
+            'This is an alert message {goToHome} with a {relativePath}. You can go to {goToOtherProject}. {neverShowItAgain}'
+          );
+        });
+      cy.get('#dismissAlert')
+        .click()
+        .then(() => {
+          cy.get(containerSelector)
+            .shadow()
+            .get('#closeAlertResponse')
+            .should('have.text', 'Callback called on wc neverShowItAgain from wc');
         });
     });
 

container/src/LuigiContainer.svelte

@@ -146,7 +146,11 @@
       };
 
       thisComponent.closeAlert = (id: string, dismissKey: string) => {
-        ContainerAPI.closeAlert(id, dismissKey, iframeHandle);
+        if(webcomponent){
+          webcomponentService.resolveAlert(id, dismissKey);
+        }else{
+          ContainerAPI.closeAlert(id, dismissKey, iframeHandle);
+        }
       };
 
       containerService.registerContainer(thisComponent);

container/src/services/webcomponents.service.ts

@@ -18,6 +18,8 @@ import type {
 export class WebComponentService {
   containerService: ContainerService;
   thisComponent: ContainerElement;
+  alertResolvers: Record<string, Function> = {};
+  alertIndex = 0;
 
   constructor() {
     this.containerService = new ContainerService();
@@ -233,7 +235,11 @@ export class WebComponentService {
       uxManager: () => {
         return {
           showAlert: (alertSettings) => {
-            this.dispatchLuigiEvent(Events.ALERT_REQUEST, alertSettings);
+            alertSettings.id = this.alertIndex++;
+            return new Promise((resolve) => {
+              this.alertResolvers[alertSettings.id] = resolve;
+              this.dispatchLuigiEvent(Events.ALERT_REQUEST, alertSettings);
+            });
           },
           showConfirmationModal: (settings) => {
             return new Promise((resolve, reject) => {
@@ -698,4 +704,25 @@ export class WebComponentService {
         });
     });
   }
+
+  /**
+   * Resolves an alert by invoking the corresponding resolver function for the given alert ID.
+   * This method attempts to resolve an alert associated with the specified `id` by calling its resolver function,
+   * if one exists in the `alertResolvers` object. If the resolver exists, it is invoked with `dismissKey` as its argument,
+   * and then the resolver is removed from the `alertResolvers` object to avoid future invocations. If no resolver is found
+   * for the provided `id`, a message is logged to the console indicating that no matching promise is in the list.
+   * @param {string} id - The unique identifier for the alert to resolve.
+   * @param {dismissKey} [dismissKey=true] - An optional key or value passed to the resolver. Defaults to `true` if not provided.
+   *
+   * @returns {void}
+   *
+   */
+  resolveAlert(id, dismissKey = true) {
+    if (this.alertResolvers[id]) {
+      this.alertResolvers[id](dismissKey);
+      this.alertResolvers[id] = undefined;
+    } else {
+      console.log('Promise is not in the list.');
+    }
+  }
 }

container/test-app/wc/clientAPI.html

@@ -82,6 +82,44 @@ <h3>
         });
       });
 
+      var alertSettings = {};
+
+      const showAnAlert = (alertSettings, luigiContainer) => {
+        var popup = document.createElement('div');
+        var text = document.createTextNode(alertSettings.settings.text);
+        popup.appendChild(text);
+
+        var dismissButton = document.createElement('BUTTON');
+        dismissButton.setAttribute('id', 'dismissAlert');
+        var buttonText = document.createTextNode('Dismiss Alert');
+        dismissButton.addEventListener('click', () => {
+          console.log(
+            'Dismiss clicked core side. Sending close message to mf of id =',
+            alertSettings.settings.id,
+          );
+          luigiContainer.closeAlert(
+            alertSettings.settings.id,
+            'neverShowItAgain from wc',
+          );
+          popup.style.display = 'none';
+        });
+        dismissButton.appendChild(buttonText);
+        const closeButton = document.createElement('button');
+        closeButton.innerHTML = 'Close Alert';
+        closeButton.setAttribute('id', 'closeAlert');
+        closeButton.addEventListener('click', () => {
+          luigiContainer.closeAlert(alertSettings.settings.id);
+          popup.style.display = 'none';
+        });
+        popup.appendChild(dismissButton);
+        popup.appendChild(closeButton);
+
+        popup.style.visibility = 'visible';
+        popup.id = 'pop';
+        document.getElementsByTagName('body')[0].appendChild(popup);
+        return dismissButton;
+      };
+
       [...document.querySelectorAll('luigi-container')].forEach((luigiContainer) => {
         luigiContainer.addEventListener(MFEventID.NAVIGATION_REQUEST, (event) => {
           console.log(event.detail);
@@ -90,14 +128,20 @@ <h3>
         luigiContainer.addEventListener(MFEventID.ALERT_REQUEST, (event) => {
           console.log(event.detail);
           alert(event.detail.text);
+          const settings = event.detail;
+          alertSettings.settings = settings;
+          showAnAlert(alertSettings, luigiContainer);
         });
-        luigiContainer.addEventListener(MFEventID.GO_BACK_REQUEST, event => {
-          console.log(event.detail)
+        luigiContainer.addEventListener(MFEventID.GO_BACK_REQUEST, (event) => {
+          console.log(event.detail);
           alert(event.detail.goBackValue);
         });
-        luigiContainer.addEventListener(MFEventID.UPDATE_TOP_NAVIGATION_REQUEST, event => {
-          alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
-        });
+        luigiContainer.addEventListener(
+          MFEventID.UPDATE_TOP_NAVIGATION_REQUEST,
+          (event) => {
+            alert('UPDATE_TOP_NAVIGATION_REQUEST event received');
+          },
+        );
         luigiContainer.addEventListener(
           MFEventID.SHOW_CONFIRMATION_MODAL_REQUEST,
           (event) => {

container/test-app/wc/helloWorldWC.js

@@ -105,6 +105,9 @@ export default class extends HTMLElement {
     const customMessageDiv = document.createElement('template');
     customMessageDiv.innerHTML = '<div id="customMessageDiv">Received Custom Message: </div>';
 
+    const closeAlertResponse = document.createElement('template');
+    closeAlertResponse.innerHTML = '<span id="closeAlertResponse"></span>';
+
     this._shadowRoot = this.attachShadow({
       mode: 'open',
       delegatesFocus: false
@@ -137,13 +140,32 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(confirmationModalBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(customMessageDiv.content.cloneNode(true));
     this._shadowRoot.appendChild(empty.content.cloneNode(true));
+    this._shadowRoot.appendChild(closeAlertResponse.content.cloneNode(true));
 
     this.$showAlert = this._shadowRoot.querySelector('#showAlert');
     this.$showAlert.addEventListener('click', () => {
-      this.LuigiClient.uxManager().showAlert({
-        text: 'uxManager().showAlert() test',
-        type: 'info'
-      });
+      let dt = new Date();
+      let time = dt.getMilliseconds() + '';
+      time = time.substr(time.length - 3);
+      const settings = {
+        text: 'This is an alert message {goToHome} with a {relativePath}. You can go to {goToOtherProject}. {neverShowItAgain}',
+        type: 'info',
+        links: {
+          goToHome: { text: 'homepage', url: '/overview' },
+          goToOtherProject: { text: 'other project', url: '/projects/pr2' },
+          relativePath: { text: 'relative hide side nav', url: 'hideSideNav' },
+          neverShowItAgain: {
+            text: "Don't show this again",
+            dismissKey: 'neverShowItAgain'
+          }
+        },
+        closeAfter: 300000
+      };
+      this.LuigiClient.uxManager()
+        .showAlert(settings)
+        .then((param) => {
+          this._shadowRoot.querySelector('#closeAlertResponse').innerHTML = 'Callback called on wc ' + param;
+        });
     });
 
     this.$paragraph = this._shadowRoot.querySelector('p');