Adds auto routing for modal in test app (#3849)

test/e2e-test-application/cypress/e2e/tests/1-angular/navigation-2.cy.js

@@ -267,5 +267,21 @@ describe('Navigation', () => {
       });
       cy.expectPathToBe('/projects/pr2/nav-sync/dynamic-parameter-stacked/2/child/3');
     });
+
+    it('Auto routing in a modal', () => {
+      cy.get('.fd-app__sidebar')
+        .contains('Auto routing')
+        .click();
+      cy.getIframeBody().then($iframeBody => {
+        cy.wrap($iframeBody)
+          .contains('Test auto routing in a modal')
+          .click();
+      });
+      cy.location().should(location => {
+        const actualPath = location.pathname + location.search;
+        const pathToCheck = '/projects/pr2/nav-sync/auto-routing?modal=%2Fprojects%2Fpr1%2Fsettings';
+        expect(actualPath).to.eq(pathToCheck);
+      });
+    });
   });
 });

test/e2e-test-application/src/app/app-routing.module.ts

@@ -134,6 +134,11 @@ const routes: Routes = [
     path: 'view-group/:vg',
     component: ViewGroupComponent
   },
+  {
+    path: 'auto-routing',
+    component: NavSyncComponent,
+    data: { luigiRoute: '/auto-routing', fromContext: true, updateModalDataPath: true, addHistoryEntry: true }
+  },
   {
     path: 'dynamic-parameter-flat',
     component: NavSyncComponent,

test/e2e-test-application/src/app/nav-sync/nav-sync.component.html

@@ -98,4 +98,18 @@ <h4 class="fd-panel__title">Stacked dynamic parameter</h4>
       </ul>
     </div>
   </div>
+  <div class="fd-layout-panel fd-margin-top--lg">
+    <div class="fd-panel__header">
+      <h4 class="fd-panel__title">Auto routing in a modal</h4>
+    </div>
+    <div class="fd-layout-panel__body">
+      <button
+        class="fd-button"
+        data-testid="open-auto-routing-modal"
+        (click)="linkManager().openAsModal('/projects/pr1/settings')"
+      >
+        Test auto routing in a modal
+      </button>
+    </div>
+  </div>
 </section>

test/e2e-test-application/src/app/nav-sync/nav-sync.component.ts

@@ -1,6 +1,7 @@
-import { Subscription } from 'rxjs';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { linkManager } from '@luigi-project/client';
+import { Subscription } from 'rxjs';
 
 /**
  * This component is using Angular router to navigate between routes
@@ -16,6 +17,7 @@ export class NavSyncComponent implements OnInit, OnDestroy {
   currentSegment: String;
   nextSegment: String;
   subs: Subscription = new Subscription();
+  linkManager = linkManager;
 
   constructor(private route: ActivatedRoute) {}
 
@@ -30,8 +32,19 @@ export class NavSyncComponent implements OnInit, OnDestroy {
         err => {}
       )
     );
+    this.updateLuigiConfig(true);
   }
+
   ngOnDestroy() {
     this.subs.unsubscribe();
+    this.updateLuigiConfig(false);
+  }
+
+  private updateLuigiConfig(value: boolean) {
+    if (!(window.parent as any)?.Luigi) {
+      return;
+    }
+
+    (window.parent as any).Luigi.config.routing.showModalPathInUrl = value;
   }
 }

test/e2e-test-application/src/luigi-config/extended/projectDetailNav.js

@@ -522,6 +522,11 @@ export const projectDetailNavStructure = projectId => [
             ]
           }
         ]
+      },
+      {
+        label: 'Auto routing',
+        pathSegment: 'auto-routing',
+        viewUrl: '/sampleapp.html#/auto-routing'
       }
     ]
   },

test/e2e-test-application/src/luigi-config/extended/routing.js

@@ -17,6 +17,11 @@ class Routing {
    */
   nodeParamPrefix = '~';
   disableBrowserHistory = false;
+  /**
+   * showModalPathInUrl
+   * Default: false. Set to true to show modal paths in the URL.
+   */
+  showModalPathInUrl = false;
 
   /**
    * skipRoutingForUrlPatterns