Add generic confirmation modal

client/src/luigi-client.js

@@ -10,7 +10,9 @@ var _onContextUpdatedFns = {};
 var _onInitFns = {};
 var authData = {};
 var pathExistsPromises = {};
-
+let promises = {
+  confirmationModal: {}
+};
 /**
  * Creates a random Id
  * @private
@@ -101,6 +103,13 @@ function luigiClientInit() {
       pathExistsPromises[data.correlationId].resolveFn(data.pathExists);
       delete pathExistsPromises[data.correlationId];
     }
+
+    if ('luigi.ux.confirmationModal.hide' === e.data.msg) {
+      const data = e.data.data;
+      const promise = promises.confirmationModal;
+      data.confirmed ? promise.resolveFn() : promise.rejectFn();
+      delete promises.confirmationModal;
+    }
   });
 
   window.parent.postMessage({ msg: 'luigi.get-context' }, '*');
@@ -410,6 +419,30 @@ const LuigiClient = {
           { msg: 'luigi.set-page-dirty', dirty: isDirty },
           '*'
         );
+      },
+      /**
+       * Shows a confirmation modal.
+       * @param {Object} content the content of the confirmation modal
+       * @param {string} content.header text for modal header
+       * @param {string} content.body text for modal body
+       * @param {string} content.buttonConfirm text for modal confirm button
+       * @param {string} content.buttonDismiss text for modal dismiss button
+       * @returns {promise} A promise which is resolved when accepting confirmation modal and rejected when dismissing it.
+       */
+      showConfirmationModal: function showConfirmationModal(content) {
+        window.parent.postMessage(
+          {
+            msg: 'luigi.ux.confirmation-modal-show',
+            data: { content }
+          },
+          '*'
+        );
+        promises.confirmationModal = {};
+        promises.confirmationModal.promise = new Promise((resolve, reject) => {
+          promises.confirmationModal.resolveFn = resolve;
+          promises.confirmationModal.rejectFn = reject;
+        });
+        return promises.confirmationModal.promise;
       }
     };
   }

core/examples/luigi-sample-angular/e2e/support/commands.js

@@ -16,13 +16,23 @@ Cypress.Commands.add('login', (email, password) => {
   cy.expectPathToBe('/overview');
 });
 
-Cypress.Commands.add('goToFeaturesPage', iframe => {
+Cypress.Commands.add('goToUxManagerMethods', iframe => {
+  cy.wrap(iframe)
+    .contains('uxManager()')
+    .click();
+
+  cy.expectPathToBe('/projects/pr1');
+
+  cy.wrap(iframe).should('contain', 'LuigiClient uxManager methods:');
+});
+
+Cypress.Commands.add('goToLinkManagerMethods', iframe => {
   cy.wrap(iframe)
     .contains('linkManager()')
     .click();
+
   cy.expectPathToBe('/projects/pr2');
 
-  cy.wrap(iframe).should('contain', 'LuigiClient uxManager methods:');
   cy.wrap(iframe).should('contain', 'LuigiClient linkManager methods:');
 });
 

core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js

@@ -1,6 +1,6 @@
 describe('Context switcher', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:4200');
+    cy.visit('/');
     cy.login('tets@email.com', 'tets');
   });
 

core/examples/luigi-sample-angular/e2e/tests/login-flow.spec.js

@@ -1,6 +1,6 @@
 describe('Login Flow', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:4200');
+    cy.visit('/');
   });
 
   it('Login', () => {

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

@@ -11,15 +11,15 @@ describe('Luigi client features', () => {
   it('linkManager features', () => {
     cy.get('iframe').then($iframe => {
       const $iframeBody = $iframe.contents().find('body');
-      cy.goToFeaturesPage($iframeBody);
+      cy.goToLinkManagerMethods($iframeBody);
 
       //navigate using absolute path
       cy.wrap($iframeBody)
         .contains('absolute: to overview')
         .click();
       cy.expectPathToBe('/overview');
 
-      cy.goToFeaturesPage($iframeBody);
+      cy.goToLinkManagerMethods($iframeBody);
 
       //navigate using relative path
       cy.wrap($iframeBody)
@@ -28,7 +28,7 @@ describe('Luigi client features', () => {
       cy.expectPathToBe('/projects/pr2/users/groups/stakeholders');
 
       cy.goToOverviewPage();
-      cy.goToFeaturesPage($iframeBody);
+      cy.goToLinkManagerMethods($iframeBody);
 
       //navigate using closest context
       cy.wrap($iframeBody)
@@ -37,7 +37,7 @@ describe('Luigi client features', () => {
       cy.expectPathToBe('/projects/pr2/users/groups/stakeholders');
 
       cy.goToOverviewPage();
-      cy.goToFeaturesPage($iframeBody);
+      cy.goToLinkManagerMethods($iframeBody);
 
       //navigate using context
       cy.wrap($iframeBody)
@@ -96,7 +96,7 @@ describe('Luigi client features', () => {
         });
 
       // check if path exists
-      cy.goToFeaturesPage($iframeBody);
+      cy.goToLinkManagerMethods($iframeBody);
       [
         // non-existent relative path
         { path: 'projects/pr2/', successExpected: false },
@@ -137,7 +137,7 @@ describe('Luigi client features', () => {
     beforeEach(() => {
       cy.get('iframe').then($iframe => {
         $iframeBody = $iframe.contents().find('body');
-        cy.goToFeaturesPage($iframeBody);
+        cy.goToLinkManagerMethods($iframeBody);
       });
     });
     it('navigate to a partly wrong link', () => {
@@ -184,7 +184,7 @@ describe('Luigi client features', () => {
       cy.wait(500);
       cy.get('iframe').then($iframe => {
         const $iframeBody = $iframe.contents().find('body');
-        cy.goToFeaturesPage($iframeBody);
+        cy.goToUxManagerMethods($iframeBody);
         cy.wrap($iframeBody).should(
           'not.contain',
           'Lorem tipsum dolor sit amet'
@@ -195,13 +195,15 @@ describe('Luigi client features', () => {
         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)
+          .find('.fd-modal__footer')
           .contains('Confirm')
           .click();
+
         cy.wrap($iframeBody).should(
           'not.contain',
           'Lorem tipsum dolor sit amet'
@@ -210,6 +212,38 @@ describe('Luigi client features', () => {
       });
     });
 
+    it('confirmation modal', () => {
+      cy.get('iframe').then($iframe => {
+        const $iframeBody = $iframe.contents().find('body');
+
+        cy.goToUxManagerMethods($iframeBody);
+
+        cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
+
+        cy.wrap($iframeBody)
+          .find('[data-cy=show-luigi-confirmation-modal]')
+          .click();
+        cy.get('[data-cy=luigi-confirmation-modal]').should('be.visible');
+
+        cy.get('[data-cy=luigi-modal-dismiss]').click();
+        cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
+        cy.wrap($iframeBody)
+          .find('[data-cy=luigi-confirmation-modal-result]')
+          .contains('Confirmation modal has been dismissed');
+
+        cy.wrap($iframeBody)
+          .find('[data-cy=show-luigi-confirmation-modal]')
+          .click();
+        cy.get('[data-cy=luigi-confirmation-modal]').should('be.visible');
+
+        cy.get('[data-cy=luigi-modal-confirm]').click();
+        cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
+        cy.wrap($iframeBody)
+          .find('[data-cy=luigi-confirmation-modal-result]')
+          .contains('Confirmation modal has been confirmed');
+      });
+    });
+
     it('loading indicator', () => {
       cy.get('.fd-shellbar')
         .contains('External Page')
@@ -234,6 +268,7 @@ describe('Luigi client features', () => {
         cy.get('.spinnerContainer .fd-spinner').should('not.exist');
       });
     });
+
     it("Unsaved changes - shouldn't proceed when 'No' was pressed in modal", () => {
       cy.get('iframe').then($iframe => {
         const $iframeBody = $iframe.contents().find('body');
@@ -246,17 +281,18 @@ describe('Luigi client features', () => {
           .contains('Projects')
           .click();
 
-        cy.get('[data-cy=confirmation-modal]').should('be.visible');
+        cy.get('[data-cy=luigi-confirmation-modal]').should('be.visible');
 
         cy.expectPathToBe('/overview'); //the location is unchanged
 
-        cy.get('[data-cy=modal-no]').click();
+        cy.get('[data-cy=luigi-modal-dismiss]').click();
 
-        cy.get('[data-cy=confirmation-modal]').should('not.be.visible');
+        cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
 
         cy.expectPathToBe('/overview'); //the location is still unchanged after "No" clicked
       });
     });
+
     it("Unsaved changes - should proceed when 'Yes' was pressed in modal", () => {
       cy.get('iframe').then($iframe => {
         const $iframeBody = $iframe.contents().find('body');
@@ -269,13 +305,13 @@ describe('Luigi client features', () => {
           .contains('Projects')
           .click();
 
-        cy.get('[data-cy=confirmation-modal]').should('be.visible');
+        cy.get('[data-cy=luigi-confirmation-modal]').should('be.visible');
 
         cy.expectPathToBe('/overview'); //the location is unchanged
 
-        cy.get('[data-cy=modal-yes]').click();
+        cy.get('[data-cy=luigi-modal-confirm]').click();
 
-        cy.get('[data-cy=confirmation-modal]').should('not.be.visible');
+        cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
 
         cy.expectPathToBe('/projects'); //the location is changed after "Yes" clicked
       });

core/examples/luigi-sample-angular/e2e/tests/product-switcher.spec.js

@@ -1,6 +1,6 @@
 describe('ProductSwitcher', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:4200');
+    cy.visit('/');
     cy.login('tets@email.com', 'tets');
   });
 
@@ -15,8 +15,6 @@ describe('ProductSwitcher', () => {
       .contains('Project 1')
       .click();
 
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/projects/pr1');
-    });
+    cy.expectPathToBe('/projects/pr1');
   });
 });

core/examples/luigi-sample-angular/src/app/overview/overview.component.ts

@@ -10,10 +10,15 @@ export class OverviewComponent {
   public luigiClient: LuigiClient = LuigiClient;
   public luigiClientLinks: any[] = [
     {
-      link: '/projects/pr2',
+      link: '/projects/pr1',
       text: 'uxManager()',
       description: 'backdrop methods'
     },
+    {
+      link: '/projects/pr1',
+      text: 'uxManager()',
+      description: 'confirmation modal methods'
+    },
     {
       link: '/ext',
       text: 'uxManager()',