Ability to update core URL without mf url change

client/public/luigi-client.d.ts

@@ -281,6 +281,17 @@ export declare interface LinkManager {
     path: string,
     splitViewSettings?: SplitViewSettings
   ) => SplitViewInstance;
+
+  /**
+   * Disables the navigation handling for a single navigation request
+   * It prevents Luigi Core from handling url change after `navigate()`.
+   * Used for auto-navigation
+   * @since NEXTRELEASE
+   * @example
+   * LuigiClient.linkManager().withoutSync().navigate('/projects/xy/foobar');
+   * LuigiClient.linkManager().withoutSync().fromClosestContext().navigate('settings');
+   */
+  withoutSync: () => this;
 }
 
 /**

client/src/linkManager.js

@@ -14,7 +14,6 @@ export class linkManager extends LuigiClientBase {
    * @private
    */
   constructor(values) {
-    // @param {object} values TODO: is it necessary at all, where is it used?
     super();
     Object.assign(this, values);
 
@@ -70,7 +69,6 @@ export class linkManager extends LuigiClientBase {
         splitView: splitViewSettings
       })
     };
-
     helpers.sendPostMessageToLuigiCore(navigationOpenMsg);
   }
 
@@ -117,6 +115,7 @@ export class linkManager extends LuigiClientBase {
    */
   fromContext(navigationContext) {
     const navigationContextInParent =
+      this.currentContext.context.parentNavigationContexts &&
       this.currentContext.context.parentNavigationContexts.indexOf(
         navigationContext
       ) !== -1;
@@ -142,6 +141,7 @@ export class linkManager extends LuigiClientBase {
    */
   fromClosestContext() {
     const hasParentNavigationContext =
+      this.currentContext &&
       this.currentContext.context.parentNavigationContexts.length > 0;
     if (hasParentNavigationContext) {
       this.options.fromContext = null;
@@ -251,4 +251,18 @@ export class linkManager extends LuigiClientBase {
       goBackContext: goBackValue && JSON.stringify(goBackValue)
     });
   }
+
+  /**
+   * Disables the navigation handling for a single navigation request
+   * It prevents Luigi Core from handling url change after `navigate()`.
+   * Used for auto-navigation
+   * @since NEXTRELEASE
+   * @example
+   * LuigiClient.linkManager().withoutSync().navigate('/projects/xy/foobar');
+   * LuigiClient.linkManager().withoutSync().fromClosestContext().navigate('settings');
+   */
+  withoutSync() {
+    this.options.withoutSync = true;
+    return this;
+  }
 }

client/src/uxManager.js

@@ -159,9 +159,7 @@ class UxManager extends LuigiClientBase {
     settings.id = helpers.getRandomId();
     if (settings?.closeAfter < 100) {
       console.warn(
-        `Message with id='${
-          settings.id
-        }' has too small 'closeAfter' value. It needs to be at least 100ms.`
+        `Message with id='${settings.id}' has too small 'closeAfter' value. It needs to be at least 100ms.`
       );
       settings.closeAfter = undefined;
     }

core/examples/luigi-sample-angular/src/app/app-routing.module.ts

@@ -19,6 +19,7 @@ import { HideSideNavComponent } from './project/hide-side-nav/hide-side-nav.comp
 import { AnonymousComponent } from './anonymous/anonymous.component';
 import { OnNodeActivationComponent } from './onNodeActivation/onNodeActivation.component';
 import { PreloadComponent } from './preload/preload.component';
+import { NavSyncComponent } from './nav-sync/nav-sync.component';
 
 const routes: Routes = [
   { path: 'preload', component: PreloadComponent },
@@ -71,24 +72,48 @@ const routes: Routes = [
     component: ChildNode2Component
   },
   {
-    path: 'projects/:projectId/dynamic/:dynamicValue',
+    path: 'projects/:projectId/dynamic',
     component: DynamicComponent
   },
   {
-    path: 'create/:dynamicValue',
+    path: 'projects/:projectId/dynamic/:dyn1',
+    component: DynamicComponent
+  },
+  {
+    path: 'projects/:projectId/dynamic/:dyn1/:dyn2',
+    component: DynamicComponent
+  },
+  {
+    path: 'projects/:projectId/dynamic/:dyn1/:dyn2/:dyn3',
+    component: DynamicComponent
+  },
+  {
+    path: 'projects/:projectId/dynamic/:dyn1/:dyn2/:dyn3/:dyn4',
+    component: DynamicComponent
+  },
+  {
+    path: 'projects/:projectId/dynamic/:dyn1/:dyn2/:dyn3/:dyn4/:dyn5',
+    component: DynamicComponent
+  },
+  {
+    path: 'create/:dyn1',
     component: DynamicComponent
   },
   {
     path: 'environments',
     component: DynamicComponent
   },
   {
-    path: 'environments/:dynamicValue',
+    path: 'environments/:dyn1',
     component: DynamicComponent
   },
   {
-    path: 'environments/:ignoredDynamicValue/:dynamicValue',
+    path: 'environments/:dyn1/:dyn2',
     component: DynamicComponent
+  },
+  {
+    path: 'nav-sync-example/:dyn',
+    component: NavSyncComponent
   }
 ];
 

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

@@ -1,3 +1,4 @@
+import { LuigiAutoNavigationService } from './services/luigi-auto-navigation.service';
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   addInitListener,
@@ -18,10 +19,16 @@ import {
 export class AppComponent implements OnInit {
   public title = 'app';
 
-  constructor(private luigiService: LuigiContextService) {}
+  constructor(
+    private luigiService: LuigiContextService,
+    private luigiAutoNav: LuigiAutoNavigationService
+  ) {}
 
   ngOnInit() {
-    addInitListener(context => this.onLuigiContext('init', context));
+    addInitListener(context => {
+      this.onLuigiContext('init', context);
+      this.luigiAutoNav.init();
+    });
     addContextUpdateListener(context => this.onLuigiContext('update', context));
 
     addInactiveListener(() => {

core/examples/luigi-sample-angular/src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { LuigiAutoNavigationService } from './services/luigi-auto-navigation.service';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -27,6 +28,7 @@ import { DynamicComponent } from './project/dynamic/dynamic.component';
 import { HideSideNavComponent } from './project/hide-side-nav/hide-side-nav.component';
 import { AnonymousComponent } from './anonymous/anonymous.component';
 import { OnNodeActivationComponent } from './onNodeActivation/onNodeActivation.component';
+import { NavSyncComponent } from './nav-sync/nav-sync.component';
 
 @NgModule({
   declarations: [
@@ -52,10 +54,11 @@ import { OnNodeActivationComponent } from './onNodeActivation/onNodeActivation.c
     DynamicComponent,
     HideSideNavComponent,
     AnonymousComponent,
-    OnNodeActivationComponent
+    OnNodeActivationComponent,
+    NavSyncComponent
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule],
-  providers: [LuigiContextService],
+  providers: [LuigiContextService, LuigiAutoNavigationService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

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

@@ -0,0 +1,24 @@
+<section class="fd-section">
+  <div class="fd-section__header">
+    <h1 class="fd-section__title">Navigation Synchronization</h1>
+  </div>
+  <div class="fd-panel">
+    <div>
+      This page uses the Angular router to navigate between pages. The Url is
+      updated through a custom Angular service named
+      <code>LuigiAutoNavigation</code> which utilized router events to update
+      the URL on Luigi Core side by using the <code>.withoutSync()</code> method
+      when navigating with <code>LuigiClient.linkManager()</code>.
+    </div>
+    <ul class="fd-list-group">
+      <li class="fd-list-group__item">
+        Current pathsegment: {{ currentSegment }}
+      </li>
+      <li class="fd-list-group__item">
+        Go to:&nbsp;<a [routerLink]="['../' + nextSegment]">{{
+          nextSegment
+        }}</a>
+      </li>
+    </ul>
+  </div>
+</section>

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

@@ -0,0 +1,39 @@
+import { Subscription } from 'rxjs';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * This component is using Angular router to navigate between routes
+ */
+
+@Component({
+  selector: 'app-nav-sync',
+  templateUrl: './nav-sync.component.html',
+  styleUrls: ['./nav-sync.component.css']
+})
+export class NavSyncComponent implements OnInit, OnDestroy {
+  segments: String[] = ['one', 'two', 'three', 'four'];
+  currentSegment: String;
+  nextSegment: String;
+  subs: Subscription = new Subscription();
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.subs.add(
+      this.route.url.subscribe(
+        segments => {
+          this.currentSegment = segments[segments.length - 1].path;
+          const nextIndex = this.segments.indexOf(this.currentSegment) + 1;
+          this.nextSegment = this.segments[nextIndex]
+            ? this.segments[nextIndex]
+            : this.segments[0];
+        },
+        err => {}
+      )
+    );
+  }
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
+}

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

@@ -5,3 +5,6 @@
 .sap-icon--navigation-left-arrow::before {
   font-size: 11px;
 }
+.dynamic-component .fd-panel + .fd-panel {
+  margin-top: 20px;
+}

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

@@ -1,7 +1,8 @@
-<section class="fd-section">
+<section class="fd-section dynamic-component">
   <div class="fd-section__header">
     <h1 class="fd-section__title">{{ nodeLabel }}</h1>
   </div>
+
   <div class="fd-panel" *ngIf="!links">{{ nodeLabel }} content.</div>
   <div class="fd-panel" *ngIf="links">
     <ul class="fd-list-group">

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

@@ -1,12 +1,14 @@
 import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
+
 import {
   getPathParams,
   getNodeParams,
   linkManager,
   PathParams,
   NodeParams
 } from '@kyma-project/luigi-client';
+
 import {
   LuigiContextService,
   IContextMessage
@@ -26,29 +28,35 @@ export class DynamicComponent implements OnInit, OnDestroy {
   public hasBack: boolean;
   public nodeParams: NodeParams = null;
   public callbackValue = 'default value';
-  private lcSubscription: Subscription;
+
+  // routing playground
+  public routeUrl: string;
+  public mfBasePath = '';
+  public showRouting = false;
+
+  private lcSubscription: Subscription = new Subscription();
 
   constructor(
     private luigiService: LuigiContextService,
     private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
-    this.lcSubscription = this.luigiService
-      .getContext()
-      .subscribe((ctx: IContextMessage) => {
+    this.lcSubscription.add(
+      this.luigiService.getContext().subscribe((ctx: IContextMessage) => {
         if (!ctx.context) {
           console.warn(
             `To use this component properly, node configuration requires context.label to be defined.
             context.links can be defined as array of strings to generate links to children`
           );
           return;
         }
-
         const lastPathParam = Object.values(getPathParams() || {}).pop();
 
         // We can directly access our specified context values here
-        this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam);
+        this.nodeLabel = toTitleCase(
+          ctx.context.label || lastPathParam || 'hello'
+        );
         this.links = ctx.context.links;
 
         // preserveView and node params
@@ -59,13 +67,11 @@ export class DynamicComponent implements OnInit, OnDestroy {
         if (!this.cdr['destroyed']) {
           this.cdr.detectChanges();
         }
-      });
+      })
+    );
   }
-
   ngOnDestroy() {
-    if (this.lcSubscription) {
-      this.lcSubscription.unsubscribe();
-    }
+    this.lcSubscription.unsubscribe();
   }
 
   public slugify(str: string): string {

core/examples/luigi-sample-angular/src/app/services/luigi-auto-navigation.service.ts

@@ -0,0 +1,37 @@
+import { Router, NavigationEnd } from '@angular/router';
+import { Injectable, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { linkManager } from '@kyma-project/luigi-client';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LuigiAutoNavigationService implements OnDestroy {
+  private subscriptions: Subscription = new Subscription();
+
+  constructor(private router: Router) {}
+
+  public init(): void {
+    const customLocalPrefix = '/nav-sync-example';
+    this.subscriptions.add(
+      this.router.events
+        .pipe(
+          filter(ev => ev instanceof NavigationEnd),
+          filter(ev => (ev as NavigationEnd).url.startsWith(customLocalPrefix))
+        )
+        .subscribe((ev: NavigationEnd) => {
+          if (ev instanceof NavigationEnd) {
+            linkManager()
+              .withoutSync()
+              .fromClosestContext()
+              .navigate(ev.url.substr(customLocalPrefix.length));
+          }
+        })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+}