open microfrontend in modal (#446)

SAP · Apr 2, 2019 · 8c51d8b · 8c51d8b
1 parent f31299d
commit 8c51d8b
Show file tree

Hide file tree

Showing 7 changed files with 422 additions and 94 deletions.
diff --git a/client/luigi-client.d.ts b/client/luigi-client.d.ts
@@ -16,6 +16,11 @@ export declare interface ConfirmationModalSettings {
   buttonDismiss?: string;
 }
 
+export declare interface ModalSettings {
+  title?: string;
+  size?: 'l' | 'm' | 's';
+}
+
 export declare interface Context {
   authData?: AuthData;
   context?: { parentNavigationContext?: string[] };
@@ -149,12 +154,20 @@ export declare interface LinkManager {
    * @param {string} path path to be navigated to
    * @param {string} sessionId current Luigi **sessionId**
    * @param {boolean} preserveView Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as the standard {@link #navigate navigate()} function is used instead of {@link #goBack goBack()}.
+   * @param {Object} modalSettings opens a microfrontend as a modal with possibility to specify a title and size
+   * @param {string} modalSettings.title modal title
+   * @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
    * @example
    * LuigiClient.linkManager().navigate('/overview')
    * LuigiClient.linkManager().navigate('users/groups/stakeholders')
    * LuigiClient.linkManager().navigate('/settings', null, true) // preserve view
    */
-  navigate: (path: string, sessionId?: string, preserveView?: boolean) => void;
+  navigate: (
+    path: string,
+    sessionId?: string,
+    preserveView?: boolean,
+    modalSettings?: ModalSettings
+  ) => void;
 
   /**
    * Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally to display a DOM element like a button.
@@ -182,6 +195,17 @@ export declare interface LinkManager {
    * LuigiClient.linkManager.fromContext("currentTeam").withParams({foo: "bar"}).navigate("path")
    */
   withParams: (nodeParams: NodeParams) => this;
+
+  /**
+   * Opens a microfrontend as a modal
+   * @param {string} path path to be navigated to
+   * @param {Object} modalSettings settings to customize the modal title and size
+   * @param {string} modalSettings.title modal title
+   * @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
+   * @example
+   * LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
+   */
+  openAsModal: (nodepath: string, modalSettings?: ModalSettings) => void;
 }
 
 /**

diff --git a/client/src/luigi-client.js b/client/src/luigi-client.js
@@ -250,12 +250,20 @@ const LuigiClient = {
        * @param {string} path path to be navigated to
        * @param {string} sessionId current Luigi **sessionId**
        * @param {boolean} preserveView Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as the standard {@link #navigate navigate()} function is used instead of {@link #goBack goBack()}.
+       * @param {Object} modalSettings opens a microfrontend as a modal with possibility to specify a title and size
+       * @param {string} modalSettings.title modal title
+       * @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
        * @example
        * LuigiClient.linkManager().navigate('/overview')
        * LuigiClient.linkManager().navigate('users/groups/stakeholders')
        * LuigiClient.linkManager().navigate('/settings', null, true) // preserve view
        */
-      navigate: function navigate(path, sessionId, preserveView) {
+      navigate: function navigate(
+        path,
+        sessionId,
+        preserveView,
+        modalSettings
+      ) {
         if (options.errorSkipNavigation) {
           options.errorSkipNavigation = false;
           return;
@@ -267,12 +275,24 @@ const LuigiClient = {
           sessionId: sessionId,
           params: Object.assign(options, {
             link: path,
-            relative: relativePath
+            relative: relativePath,
+            modal: modalSettings
           })
         };
         window.parent.postMessage(navigationOpenMsg, '*');
       },
-
+      /**
+       * Opens a microfrontend as a modal
+       * @param {string} path path to be navigated to
+       * @param {Object} modalSettings settings to customize the modal title and size
+       * @param {string} modalSettings.title modal title
+       * @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
+       * @example
+       * LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
+       */
+      openAsModal: function(path, modalSettings) {
+        this.navigate(path, 0, true, modalSettings || {});
+      },
       /**
        * Sets the current navigation context to that of a specific parent node which has the {@link navigation-configuration.md navigationContext} field declared in the navigation configuration. This navigation context is then used by the `navigate` function.
        * @param {string} navigationContext
@@ -374,7 +394,10 @@ const LuigiClient = {
        * @returns {boolean} indicating if there is a preserved view you can return to.
        */
       hasBack: function hasBack() {
-        return Boolean(currentContext.internal.viewStackSize !== 0);
+        return (
+          !!currentContext.internal.modal ||
+          currentContext.internal.viewStackSize !== 0
+        );
       },
 
       /**
@@ -487,7 +510,6 @@ const LuigiClient = {
         });
         return promises.confirmationModal.promise;
       },
-
       /**
        * Shows an alert.
        * @param {Object} settings the settings for the alert

diff --git a/core/examples/luigi-sample-angular/package-lock.json b/core/examples/luigi-sample-angular/package-lock.json
diff --git a/core/examples/luigi-sample-angular/src/app/project/project.component.html b/core/examples/luigi-sample-angular/src/app/project/project.component.html
@@ -42,6 +42,7 @@ <h1 class="fd-section__title">LuigiClient uxManager methods</h1>
         Luigi confirmation modal has been {{ confirmationModalResult }}
       </p>
     </div>
+
     <div class="fd-panel fd-has-margin-bottom-small">
       <p><strong>Alert</strong></p>
       <form #luigiAlertForm="ngForm">
@@ -155,7 +156,6 @@ <h1 class="fd-section__title">LuigiClient uxManager methods</h1>
     <div class="fd-section__header">
       <h1 class="fd-section__title">LuigiClient linkManager methods</h1>
     </div>
-
     <ng-container *ngIf="preservedViewCallbackContext">
       <div class="fd-panel fd-has-margin-bottom-small">
         <div class="fd-alert" role="alert">
@@ -165,7 +165,6 @@ <h1 class="fd-section__title">LuigiClient linkManager methods</h1>
         </div>
       </div>
     </ng-container>
-
     <div class="fd-panel fd-has-margin-bottom-small">
       <p><strong>Navigate</strong></p>
       <ul class="fd-list-group">
@@ -202,7 +201,8 @@ <h1 class="fd-section__title">LuigiClient linkManager methods</h1>
           >
           <app-code-snippet
             data="linkManager().fromClosestContext().navigate('/users/groups/stakeholders')"
-          ></app-code-snippet>
+          >
+          </app-code-snippet>
         </li>
         <li class="fd-list-group__item">
           <a
@@ -233,7 +233,8 @@ <h1 class="fd-section__title">LuigiClient linkManager methods</h1>
           >
           <app-code-snippet
             data="linkManager().fromClosestContext().withParams({foo: 'bar'}).navigate('settings')"
-          ></app-code-snippet>
+          >
+          </app-code-snippet>
         </li>
         <li class="fd-list-group__item">
           <a
@@ -276,7 +277,28 @@ <h1 class="fd-section__title">LuigiClient linkManager methods</h1>
           >
           <app-code-snippet
             data="linkManager().withParams({test: true}).navigate('/settings', null, true)"
-          ></app-code-snippet>
+          >
+          </app-code-snippet>
+        </li>
+        <li class="fd-list-group__item">
+          <a
+            href="javascript:void(0)"
+            (click)="
+              linkManager()
+                .withParams({ test: true })
+                .openAsModal('/settings', {
+                  title: 'Preserved View',
+                  size: 'm'
+                })
+            "
+          >
+            extended preserved view example with params rendered in a modal:
+            project to global settings and back</a
+          >
+          <app-code-snippet
+            data="linkManager().withParams({test: true}).openAsModal('/settings', {title:'PreservedView', size:'m'})"
+          >
+          </app-code-snippet>
         </li>
       </ul>
     </div>