Add generic alert

client/src/luigi-client.js

@@ -110,6 +110,11 @@ function luigiClientInit() {
       data.confirmed ? promise.resolveFn() : promise.rejectFn();
       delete promises.confirmationModal;
     }
+
+    if ('luigi.ux.alert.hide' === e.data.msg) {
+      promises.alert.resolveFn();
+      delete promises.alert;
+    }
   });
 
   window.parent.postMessage({ msg: 'luigi.get-context' }, '*');
@@ -422,18 +427,18 @@ const LuigiClient = {
       },
       /**
        * Shows a confirmation modal.
-       * @param {Object} content the content of the confirmation modal. If no value is provided for any of the fields, a default value is set for it.
-       * @param {string} content.header the content of the modal header
-       * @param {string} content.body the content of the modal body
-       * @param {string} content.buttonConfirm the label for the modal confirm button
-       * @param {string} content.buttonDismiss the label for the modal dismiss button
+       * @param {Object} settings the settings the confirmation modal. If no value is provided for any of the fields, a default value is set for it.
+       * @param {string} settings.header the content of the modal header
+       * @param {string} settings.body the content of the modal body
+       * @param {string} settings.buttonConfirm the label for the modal confirm button
+       * @param {string} settings.buttonDismiss the label for the modal dismiss button
        * @returns {promise} which is resolved when accepting the confirmation modal and rejected when dismissing it.
        */
-      showConfirmationModal: function showConfirmationModal(content) {
+      showConfirmationModal: function showConfirmationModal(settings) {
         window.parent.postMessage(
           {
-            msg: 'luigi.ux.confirmation-modal-show',
-            data: { content }
+            msg: 'luigi.ux.confirmationModal.show',
+            data: { settings }
           },
           '*'
         );
@@ -443,6 +448,51 @@ const LuigiClient = {
           promises.confirmationModal.rejectFn = reject;
         });
         return promises.confirmationModal.promise;
+      },
+
+      /**
+       * Shows an alert.
+       * @param {Object} settings the settings for the alert
+       * @param {string} settings.text the content of the alert. To add a link to the content, you have to set up the link in the `links` object. The key(s) in the `links` object must be used in the text to reference the links, wrapped in curly brackets with no spaces. If you don't specify any text, the alert is not displayed.
+       * @param {('info'|'success'|'warning'|'error')} settings.type sets the type of the alert
+       * @param {Object} settings.links provides links data
+       * @param {Object} settings.links.LINK_KEY object containing the data for a particular link. To properly render the link in the alert message refer to the description of the **settings.text** parameter.
+       * @param {string} settings.links.LINK_KEY.text text which replaces the link identifier in the alert content
+       * @param {string} settings.links.LINK_KEY.url url to navigate when you click the link. Currently, only internal links are supported in the form of relative or absolute paths.
+       * @returns {promise} which is resolved when the alert is dismissed
+       * @example
+       * import LuigiClient from '@kyma-project/luigi-client';
+       * const settings = {
+       *  text: Ut enim ad minim veniam, {goToHome} quis nostrud exercitation ullamco {relativePath} laboris nisi ut aliquip ex ea commodo consequat.
+       *    Duis aute irure dolor {goToOtherProject},
+       *  type: 'info',
+       *  links: {
+       *    goToHome: { text: 'homepage', url: '/overview' },
+       *    goToOtherProject: { text: 'other project', url: '/projects/pr2' },
+       *    relativePath: { text: 'relative hide side nav', url: 'hideSideNav' }
+       *  }
+       * }
+       * LuigiClient
+       *  .uxManager()
+       *  .showAlert(settings)
+       *  .then(() => {
+       *     // Logic to execute when the alert is dismissed
+       * });
+
+       */
+      showAlert: function showAlert(settings) {
+        window.parent.postMessage(
+          {
+            msg: 'luigi.ux.alert.show',
+            data: { settings }
+          },
+          '*'
+        );
+        promises.alert = {};
+        promises.alert.promise = new Promise(resolve => {
+          promises.alert.resolveFn = resolve;
+        });
+        return promises.alert.promise;
       }
     };
   }

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

@@ -23,17 +23,17 @@ Cypress.Commands.add('goToUxManagerMethods', iframe => {
 
   cy.expectPathToBe('/projects/pr1');
 
-  cy.wrap(iframe).should('contain', 'LuigiClient uxManager methods:');
+  cy.wrap(iframe).should('contain', 'LuigiClient uxManager methods');
 });
 
 Cypress.Commands.add('goToLinkManagerMethods', iframe => {
+  cy.wait(0);
   cy.wrap(iframe)
     .contains('linkManager()')
     .click();
 
   cy.expectPathToBe('/projects/pr2');
-
-  cy.wrap(iframe).should('contain', 'LuigiClient linkManager methods:');
+  cy.wrap(iframe).should('contain', 'LuigiClient linkManager methods');
 });
 
 Cypress.Commands.add('goToOverviewPage', () => {
@@ -42,7 +42,7 @@ Cypress.Commands.add('goToOverviewPage', () => {
     .click();
 });
 
-export const isHashRoutingOn = () => {
+const isHashRoutingOn = () => {
   const appWindow = cy.state('window');
   const { useHashRouting } =
     appWindow && appWindow.Luigi && appWindow.Luigi.config

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

@@ -1,4 +1,3 @@
-import { isHashRoutingOn } from '../support/commands';
 describe('Luigi client features', () => {
   beforeEach(() => {
     cy.visit('/');
@@ -178,143 +177,4 @@ describe('Luigi client features', () => {
       cy.get('.fd-alert').should('not.exist');
     });
   });
-
-  describe('uxManager', () => {
-    it('backdrop', () => {
-      cy.wait(500);
-      cy.get('iframe').then($iframe => {
-        const $iframeBody = $iframe.contents().find('body');
-        cy.goToUxManagerMethods($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');
-        //close modal
-        cy.wrap($iframeBody)
-          .find('.fd-modal__footer')
-          .contains('Confirm')
-          .click();
-
-        cy.wrap($iframeBody).should(
-          'not.contain',
-          'Lorem tipsum dolor sit amet'
-        );
-        cy.get('.fd-ui__overlay').should('not.exist');
-      });
-    });
-
-    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')
-        .click();
-
-      cy.get('.spinnerContainer .fd-spinner').should('exist');
-
-      cy.get('.spinnerContainer .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('.spinnerContainer .fd-spinner').should('exist');
-
-        // wait for programmatic hide of loading indicator
-        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');
-
-        cy.wrap($iframeBody)
-          .find('[data-cy=toggle-dirty-state]')
-          .check();
-
-        cy.get('button')
-          .contains('Projects')
-          .click();
-
-        cy.get('[data-cy=luigi-confirmation-modal]').should('be.visible');
-
-        cy.expectPathToBe('/overview'); //the location is unchanged
-
-        cy.get('[data-cy=luigi-modal-dismiss]').click();
-
-        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');
-
-        cy.wrap($iframeBody)
-          .find('[data-cy=toggle-dirty-state]')
-          .check();
-
-        cy.get('button')
-          .contains('Projects')
-          .click();
-
-        cy.get('[data-cy=luigi-confirmation-modal]').should('be.visible');
-
-        cy.expectPathToBe('/overview'); //the location is unchanged
-
-        cy.get('[data-cy=luigi-modal-confirm]').click();
-
-        cy.get('[data-cy=luigi-confirmation-modal]').should('not.be.visible');
-
-        cy.expectPathToBe('/projects'); //the location is changed after "Yes" clicked
-      });
-    });
-  });
 });