preserveView should allow viewUrls with query params (SAP#250)

core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.html

@@ -14,3 +14,21 @@ <h1 class="fd-section__title">{{nodeLabel}}</h1>
   </div>
 </section>
 
+<section class="fd-section" *ngIf="nodeParams && hasBack">
+  <div class="fd-panel">
+    <div class="fd-alert" role="alert">
+      <span class="fd-status-label fd-status-label--available"></span> Called with params:<br />
+      <pre>{{ nodeParams | json }}</pre>
+    </div>
+  </div>
+	<div class="fd-panel">
+		<p><strong>LuigiClient hasBack/GoBack:</strong></p>
+    <p>
+      <label>Modify goBackContext value, that you receive then via LuigiClient.addContextUpdateListener(): <br />
+      <input type="text" [(ngModel)]="callbackValue" /></label>
+    </p>
+    <p>
+    <button class="fd-button" (click)="goBack()">Click here</button> to go back to your preserved view.
+    </p>
+  </div>
+</section>

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

@@ -17,6 +17,9 @@ export class DynamicComponent implements OnInit, OnDestroy {
   public pathParams: { [key: string]: string };
   public nodeLabel: string;
   public links: string[];
+  public hasBack: boolean;
+  public nodeParams: any = null;
+  public callbackValue = 'default value';
   private lcSubscription: Subscription;
 
   constructor(
@@ -42,6 +45,14 @@ export class DynamicComponent implements OnInit, OnDestroy {
         // We can directly access our specified context values here
         this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam);
         this.links = ctx.context.links;
+
+        // preserveView and node params
+        this.hasBack = LuigiClient.linkManager().hasBack();
+        this.nodeParams =
+          Object.keys(LuigiClient.getNodeParams()).length > 0
+            ? LuigiClient.getNodeParams()
+            : null;
+
         if (!this.cdr['destroyed']) {
           this.cdr.detectChanges();
         }
@@ -60,4 +71,10 @@ export class DynamicComponent implements OnInit, OnDestroy {
       .split(' ')
       .join('-');
   }
+
+  public goBack() {
+    // going back with some sample callback context,
+    // that will be handed over to previous view
+    this.luigiClient.linkManager().goBack(this.callbackValue);
+  }
 }

core/examples/luigi-sample-angular/src/app/project/project.component.html

@@ -49,15 +49,20 @@ <h1 class="fd-section__title">Project {{ projectId }}</h1>
 				<app-code-snippet data="luigiClient.linkManager().fromClosestContext().withParams({foo: 'bar'}).navigate('settings')"></app-code-snippet>
 			</li>
 			<li class="fd-list-group__item">
-				<a href="javascript:void(0)" (click)="luigiClient.linkManager().fromContext('FOOMARK').navigate('/settings')">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().fromContext('NONEXISTING').navigate('/settings')">
 					parent by name: with nonexisting context</a> (look at the console)
-				<app-code-snippet data="luigiClient.linkManager().fromContext('FOOMARK').navigate('/settings')"></app-code-snippet>
+				<app-code-snippet data="luigiClient.linkManager().fromContext('NONEXISTING').navigate('/settings')"></app-code-snippet>
 			</li>
 			<li class="fd-list-group__item">
 				<a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/settings', null, true)">
 					with preserved view: project to global settings and back</a>
 				<app-code-snippet data="luigiClient.linkManager().navigate('/settings', null, true)"></app-code-snippet>
 			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().withParams({test: true}).navigate('/settings', null, true)">
+					extended preserved view example with params: project to global settings and back</a>
+				<app-code-snippet data="luigiClient.linkManager().withParams({test: true}).navigate('/settings', null, true)"></app-code-snippet>
+			</li>
 			<li class="fd-list-group__item check-path">
 				<span>Check if path exists</span>
 				<app-code-snippet data="luigiClient.linkManager().pathExists('{{pathExists.formValue}}')"></app-code-snippet>

core/examples/luigi-sample-angular/src/app/project/settings/settings.component.html

@@ -5,6 +5,19 @@
       <pre>{{ nodeParams | json }}</pre>
     </div>
   </div>
+  <div class="fd-panel" *ngIf="hasBack">
+    Advanced: node Params and preserveView active. <br />
+    <a href="javascript:void(0)" (click)="luigiClient.linkManager().withParams({foo: 'bar'}).navigate('/environments/env1', null, true)">Go to /environments/env1 with preserveView</a>
+  </div>
+</section>
+
+<section class="fd-section" *ngIf="preservedViewCallbackContext">
+	<div class="fd-panel">
+		<div class="fd-alert" role="alert">
+			<span class="fd-status-label fd-status-label--available"></span> Context received from linkManager().goBack():<br />
+			<pre>{{ preservedViewCallbackContext | json }}</pre>
+		</div>
+	</div>
 </section>
 
 <section class="fd-section">
@@ -29,5 +42,5 @@ <h1 *ngIf="!projectId" class="fd-section__title">Global Settings</h1>
       No go back state available, <a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/projects/pr2')">Click here</a>
       to go to <i>project two</i>, where you can try out hasBack functionality
     </div>
-</div>
+  </div>
 </section>

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

@@ -1,6 +1,11 @@
+import {
+  LuigiContextService,
+  IContextMessage
+} from './../../services/luigi-context.service';
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import LuigiClient from '@kyma-project/luigi-client';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-settings',
@@ -14,10 +19,13 @@ export class SettingsComponent implements OnInit {
   hasBack: boolean;
   nodeParams = null;
   callbackValue = 'default value';
+  lcSubscription: Subscription;
+  preservedViewCallbackContext: any;
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private luigiService: LuigiContextService
   ) {}
 
   ngOnInit() {
@@ -36,6 +44,24 @@ export class SettingsComponent implements OnInit {
         this.cdr.detectChanges();
       }
     });
+
+    // We suggest to use a centralized approach of LuigiClient.addContextUpdateListener
+    // Take a look at ngOnInit in this component and app.component.ts where we set the listeners.
+    this.lcSubscription = this.luigiService
+      .getContext()
+      .subscribe((ctx: IContextMessage) => {
+        if (ctx.contextType === 'init' || ctx.contextType === 'update') {
+          this.preservedViewCallbackContext = ctx.context.goBackContext;
+
+          // Since Luigi runs outside of Zone.js, changes need
+          // to be updated manually
+          // Be sure to check for destroyed ChangeDetectorRef,
+          // else you get runtime Errors
+          if (!this.cdr['destroyed']) {
+            this.cdr.detectChanges();
+          }
+        }
+      });
   }
 
   goBack() {

core/src/App.html

@@ -30,16 +30,18 @@
   import { getConfigValueFromObject } from './utilities/helpers.js';
   import { getStoredAuthData } from './utilities/auth-helpers';
 
+  const removeQueryParams = (str) => str.split('?')[0];
+
   const isValidBackRoute = (preservedViews, routeHash) => {
     if (preservedViews.length === 0) {
       return false;
     }
     // we're only checking the previous goBack state and
     // compare it with the new route
     const routePath = routeHash.startsWith('/') ? routeHash : `/${routeHash}`;
-    const firstPreservedView = preservedViews[0];
-    const paths = [firstPreservedView.path, firstPreservedView.nextPath];
-    return paths.includes(routePath);
+    const lastPreservedView = [...preservedViews].pop();
+    const paths = [removeQueryParams(lastPreservedView.path), removeQueryParams(lastPreservedView.nextPath)];
+    return paths.includes(removeQueryParams(routePath));
   };
 
   const enableRouting = (component, node, config) => {