Get current route for wc client api(#3780)

SAP · Jun 25, 2024 · 5f4e776 · 5f4e776
1 parent 7948985
commit 5f4e776
Show file tree

Hide file tree

Showing 12 changed files with 399 additions and 2 deletions.
diff --git a/container/cypress/e2e/test-app/wc/wc-container.cy.js b/container/cypress/e2e/test-app/wc/wc-container.cy.js
@@ -84,5 +84,16 @@ describe('Web Container Test', () => {
           expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getAnchor()="testanchor"');
         });
     });
+    it('LuigiClient API getCurrentRoute for LuigiContainer', () => {
+      const stub = cy.stub();
+      cy.on('window:alert', stub);
+      cy.get('[data-test-id="luigi-client-api-test-01"]')
+        .shadow()
+        .contains('getCurrentRoute')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith('current route: /wc/clientAPI.html');
+        });
+    });
   });
 });
diff --git a/container/src/services/webcomponents.service.ts b/container/src/services/webcomponents.service.ts
@@ -92,11 +92,12 @@ export class WebComponentService {
         let fromContext = null;
         let fromClosestContext = false;
         let fromVirtualTreeRoot = false;
+        let fromParent = false;
         let nodeParams = {};
 
         const linkManagerInstance = {
           navigate: (route , settings = {})=> {
-            const options = { fromContext, fromClosestContext, fromVirtualTreeRoot, nodeParams, ...settings };
+            const options = { fromContext, fromClosestContext, fromVirtualTreeRoot, fromParent, nodeParams, ...settings };
             this.dispatchLuigiEvent(Events.NAVIGATION_REQUEST, { link: route , ...options});
           },
           fromClosestContext: () => {
@@ -111,6 +112,22 @@ export class WebComponentService {
             fromVirtualTreeRoot = true;
             return linkManagerInstance;
           },
+          fromParent:()=>{
+            fromParent = true;
+            return linkManagerInstance;
+          },
+          getCurrentRoute:()=>{
+            const options = { fromContext, fromClosestContext, fromVirtualTreeRoot, fromParent, nodeParams };
+            return new Promise((resolve, reject) => {
+              this.containerService.dispatch(Events.GET_CURRENT_ROUTE_REQUEST, this.thisComponent,{ ...options }, (route)=>{
+                if(route){
+                  resolve(route);
+                }else{
+                  reject('No current route received.');
+                }
+              }, 'callback');
+            });
+          },
           withParams: (params) => {
             nodeParams = params;
             return linkManagerInstance;

diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html
@@ -119,6 +119,10 @@ <h3>
         luigiContainer.addEventListener(MFEventID.SET_VIEW_GROUP_DATA_REQUEST, event => {
           console.log('Set View Group Data Request received', event.detail, event);
         });
+
+        luigiContainer.addEventListener(MFEventID.GET_CURRENT_ROUTE_REQUEST, event => {
+          event.callback(window.location.pathname);
+        });
       });
     </script>
   </body>

diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js
@@ -46,6 +46,9 @@ export default class extends HTMLElement {
     const getDirtyStatusBtn = document.createElement('template');
     getDirtyStatusBtn.innerHTML = '<button id="getDirtyStatus">getDirtyStatus</button>';
 
+    const getCurrentRouteBtn = document.createElement('template');
+    getCurrentRouteBtn.innerHTML = '<button id="getCurrentRoute">getCurrentRoute</button>';
+
     const uxManagerMultipleRequestsBtn = document.createElement('template');
     uxManagerMultipleRequestsBtn.innerHTML = `<button id="uxManagerManyRequests">uxManager().closeUserSettings,
     openUserSettings,
@@ -97,6 +100,7 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(linkManagerOpenAsRequestsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(linkManagerUpdateTopPathExistsBackBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(setViewGroupDataBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(getCurrentRouteBtn.content.cloneNode(true));
 
     this._shadowRoot.appendChild(empty.content.cloneNode(true));
 
@@ -260,6 +264,16 @@ export default class extends HTMLElement {
     this.$setViewGroupData.addEventListener('click', () => {
       this.LuigiClient.setViewGroupData({ vg: 'some data' });
     });
+
+    this.$getCurrentRoute = this._shadowRoot.querySelector('#getCurrentRoute');
+    this.$getCurrentRoute.addEventListener('click', () => {
+      this.LuigiClient.linkManager()
+        .getCurrentRoute()
+        .then(result => {
+          console.log(result);
+          alert('current route: ' + result);
+        });
+    });
   }
 
   set context(ctx) {

diff --git a/container/test/services/webcomponents.service.spec.ts b/container/test/services/webcomponents.service.spec.ts
@@ -154,6 +154,7 @@ describe('createClientAPI', () => {
       // assert
       const expectedPayload = { 
         fromClosestContext: false,
+        fromParent: false,
         fromContext: null,
         fromVirtualTreeRoot: false,
         link: "/test/route",
@@ -176,6 +177,7 @@ describe('createClientAPI', () => {
       // assert
       const expectedPayload = { 
         fromClosestContext: false,
+        fromParent: false,
         fromContext: null,
         fromVirtualTreeRoot: false,
         link: "/test/route",
@@ -201,6 +203,7 @@ describe('createClientAPI', () => {
       // assert
       const expectedPayload = { 
         fromClosestContext: false,
+        fromParent: false,
         fromContext: null,
         fromVirtualTreeRoot: false,
         link: "/test/route",
@@ -227,6 +230,7 @@ describe('createClientAPI', () => {
       // assert
       const expectedPayload = { 
         fromClosestContext: false,
+        fromParent: false,
         fromContext: null,
         fromVirtualTreeRoot: false,
         link: "/test/route",
@@ -254,6 +258,7 @@ describe('createClientAPI', () => {
       // assert
       const expectedPayload = { 
         fromClosestContext: true,
+        fromParent: false,
         fromContext: null,
         fromVirtualTreeRoot: false,
         link: "/test/route",
@@ -276,6 +281,7 @@ describe('createClientAPI', () => {
       // assert
       const expectedPayload = { 
         fromClosestContext: false,
+        fromParent: false,
         fromContext: {test: 'data'},
         fromVirtualTreeRoot: false,
         link: "/test/route",
@@ -298,13 +304,76 @@ describe('createClientAPI', () => {
       // assert
       const expectedPayload = { 
         fromClosestContext: false,
+        fromParent: false,
         fromContext: null,
         fromVirtualTreeRoot: true,
         link: "/test/route",
         nodeParams: {}  
       };
       expect(dispatchEventSpy).toHaveBeenCalledWith(Events.NAVIGATION_REQUEST, expectedPayload);
     });
+
+    it('test linkManager currentRoute', () => {
+
+     // Mock and spy on functions
+     service.containerService.dispatch = jest.fn((event, component, options, callback) => {
+      callback('/current/route');
+    });
+
+      // act
+      const clientAPI = service.createClientAPI(undefined, 'nodeId', 'wc_id', 'component');
+      const currentRoutePromise = clientAPI.linkManager().getCurrentRoute();
+
+      // assert
+      const expectedPayload = { 
+        fromClosestContext: false,
+        fromParent: false,
+        fromContext: null,
+        fromVirtualTreeRoot: false,
+        nodeParams: {}  
+      };
+      return currentRoutePromise.then(result => {
+        expect(service.containerService.dispatch).toHaveBeenCalledWith(
+          Events.GET_CURRENT_ROUTE_REQUEST,
+          service.thisComponent,
+          expectedPayload,
+          expect.any(Function),
+          'callback'
+        );
+        expect(result).toBe('/current/route');
+      });
+    });
+
+    it('test linkManager currentRoute from parent', () => {
+
+      // Mock and spy on functions
+      service.containerService.dispatch = jest.fn((event, component, options, callback) => {
+       callback('/route');
+     });
+
+       // act
+       const clientAPI = service.createClientAPI(undefined, 'nodeId', 'wc_id', 'component');
+       const currentRoutePromise = clientAPI.linkManager().fromParent().getCurrentRoute();
+
+       // assert
+       const expectedPayload = { 
+         fromClosestContext: false,
+         fromParent: true,
+         fromContext: null,
+         fromVirtualTreeRoot: false,
+         nodeParams: {}  
+       };
+       return currentRoutePromise.then(result => {
+         expect(service.containerService.dispatch).toHaveBeenCalledWith(
+           Events.GET_CURRENT_ROUTE_REQUEST,
+           service.thisComponent,
+           expectedPayload,
+           expect.any(Function),
+           'callback'
+         );
+         expect(result).toBe('/route');
+       });
+     });
 
     it('test linkManager withParams', () => {
       const route = '/test/route'
@@ -321,6 +390,7 @@ describe('createClientAPI', () => {
       const expectedPayload = { 
         fromClosestContext: false,
         fromContext: null,
+        fromParent: false,
         fromVirtualTreeRoot: false,
         link: "/test/route",
         nodeParams: {params: 'some params'}  

diff --git a/core/src/App.svelte b/core/src/App.svelte
@@ -1103,7 +1103,7 @@
    * @param params {Object} navigation options
    * @returns {string} the path built
    */
-  const buildPathForGetCurrentRoute = params => {
+  export const buildPathForGetCurrentRoute = params => {
     let localNavPath = navigationPath;
     if (currentNode) {
       let parent = currentNode.parent;

diff --git a/core/src/core-api/_internalLinkManager.js b/core/src/core-api/_internalLinkManager.js
@@ -15,6 +15,7 @@ export class linkManager extends LuigiCoreAPIBase {
       nodeParams: {},
       errorSkipNavigation: false,
       fromContext: null,
+      fromParent: false,
       fromClosestContext: false,
       relative: false,
       link: ''
@@ -87,13 +88,23 @@ export class linkManager extends LuigiCoreAPIBase {
   fromClosestContext() {
     this.options.fromContext = null;
     this.options.fromClosestContext = true;
+    this.options.fromParent = false;
     return this;
   }
 
   fromVirtualTreeRoot() {
     this.options.fromContext = null;
     this.options.fromClosestContext = false;
     this.options.fromVirtualTreeRoot = true;
+    this.options.fromParent = false;
+    return this;
+  }
+
+  fromParent() {
+    this.options.fromContext = null;
+    this.options.fromClosestContext = false;
+    this.options.fromVirtualTreeRoot = false;
+    this.options.fromParent = true;
     return this;
   }
 
@@ -125,6 +136,14 @@ export class linkManager extends LuigiCoreAPIBase {
     });
   }
 
+  /**
+   * Retrieves the current route.
+   * @returns The current route by invoking the buildPathForGetCurrentRoute method from App.svelte, which is assigned to the _app property of the Luigi object.
+   */
+  getCurrentRoute() {
+    return Luigi._app.ctx[Luigi._app.props.buildPathForGetCurrentRoute](this.options);
+  }
+
   sendPostMessageToLuigiCore(msg) {
     window.postMessage(msg, '*');
   }

diff --git a/core/src/core-api/navigation.js b/core/src/core-api/navigation.js
@@ -142,6 +142,32 @@ class LuigiNavigationManager {
     return new linkManager().fromVirtualTreeRoot();
   }
 
+  /**
+   * Enables navigating to sibling nodes without knowing the absolute path.
+   * @memberof LuigiNavigation
+   * @returns {linkManager} link manager instance
+   * @since NEXTRELEASE
+   * @example
+   * Luigi.navigation().fromParent().navigate('/sibling')
+   */
+  fromParent() {
+    return new linkManager().fromParent();
+  }
+
+  /**
+   * Gets the Luigi route associated with the current micro frontend.
+   * @memberof LuigiNavigation
+   * @returns a String value specifying the current Luigi route
+   * @since NEXTRELEASE
+   * @example
+   * Luigi.navigation().getCurrentRoute();
+   * Luigi.navigation().fromContext('project').getCurrentRoute();
+   * Luigi.navigation().fromVirtualTreeRoot().getCurrentRoute();
+   */
+  getCurrentRoute() {
+    return new linkManager().getCurrentRoute();
+  }
+
   /**
    * Sends node parameters to the route. The parameters are used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
    * @memberof LuigiNavigation

diff --git a/core/src/main.js b/core/src/main.js
@@ -125,6 +125,8 @@ const configReadyCallback = () => {
           return app.getDirtyStatus();
         };
 
+        //adding App.svelte to a internal Luigi variable
+        Luigi._app = app.$$;
         resolve();
       });
     });

diff --git a/docs/luigi-core-api.md b/docs/luigi-core-api.md
@@ -702,6 +702,40 @@ Returns **linkManager** link manager instance
 
 -   **since**: 1.0.1
 
+#### fromParent
+
+Enables navigating to sibling nodes without knowing the absolute path.
+
+##### Examples
+
+```javascript
+Luigi.navigation().fromParent().navigate('/sibling')
+```
+
+Returns **linkManager** link manager instance
+
+**Meta**
+
+-   **since**: NEXTRELEASE
+
+#### getCurrentRoute
+
+Gets the Luigi route associated with the current micro frontend.
+
+##### Examples
+
+```javascript
+Luigi.navigation().getCurrentRoute();
+Luigi.navigation().fromContext('project').getCurrentRoute();
+Luigi.navigation().fromVirtualTreeRoot().getCurrentRoute();
+```
+
+Returns **any** a String value specifying the current Luigi route
+
+**Meta**
+
+-   **since**: NEXTRELEASE
+
 #### withParams
 
 Sends node parameters to the route. The parameters are used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.