Add getPathParams, getCoreSearchParams, getClientPermissions

client/luigi-element.d.ts

@@ -443,4 +443,26 @@ export interface LuigiClient {
    * @memberof LuigiClient
    */
   setAnchor: (anchor: string) => void;
+  /**
+   * Retrieves the search params from the active URL
+   * @returns {Object} containing the search params
+   * @memberof LuigiClient
+   */
+  getCoreSearchParams: () => Object;
+  /**
+   * Returns the dynamic path parameters of the active URL.
+   * Path parameters are defined by navigation nodes with a dynamic **pathSegment** value starting with **:**, such as **productId**.
+   * All path parameters in the current navigation path (as defined by the active URL) are returned.
+   * <!-- add-attribute:class:warning -->
+   * > **NOTE:** some special characters (`<`, `>`, `"`, `'`, `/`) in path parameters are HTML-encoded.
+   * @returns {Object} path parameters, where the object property name is the path parameter name without the prefix, and its value is the actual value of the path parameter. For example ` {productId: 1234, ...}`
+   * @memberof LuigiClient
+   */
+  getPathParams: () => Object;
+  /**
+   * Returns the current client permissions as specified in the navigation node or an empty object. For details, see [Node parameters](navigation-parameters-reference.md).
+   * @returns {Object} client permissions as specified in the navigation node
+   * @memberof LuigiClient
+   */
+  getClientPermissions(): () => Object;
 }

container/cypress/e2e/wc-container.cy.js

@@ -15,5 +15,29 @@ describe('Web Container Test', () => {
         expect(stub.getCall(1)).to.be.calledWith('LuigiClient.getActiveFeatureToggles()=["ft1","ft2"]');
         expect(stub.getCall(2)).to.be.calledWith('LuigiClient.uxManager().getCurrentTheme()=sap_fiori_3');
       });
+
+    cy.get('[data-test-id="luigi-client-api-test-01"]')
+      .shadow()
+      .contains('getCoreSearchParams')
+      .click()
+      .then(() => {
+        expect(stub.getCall(3)).to.be.calledWith('{"test":"searchParam1"}');
+      });
+
+    cy.get('[data-test-id="luigi-client-api-test-01"]')
+      .shadow()
+      .contains('getPathParams')
+      .click()
+      .then(() => {
+        expect(stub.getCall(4)).to.be.calledWith('{"path":"param"}');
+      });
+
+    cy.get('[data-test-id="luigi-client-api-test-01"]')
+      .shadow()
+      .contains('getClientPermissions')
+      .click()
+      .then(() => {
+        expect(stub.getCall(5)).to.be.calledWith('{"permission":"testPermission"}');
+      });
   });
 });

container/package.json

@@ -21,8 +21,8 @@
     "serve": "npm run build && npm run copyLuigiElement && npm run copyBundle && sirv -D test-app --no-clear",
     "bundle:watch": "chokidar \"src/**/*.*\" -c \"npm run build && npm run copyBundle\"",
     "start": "concurrently -k \"npm run serve\" \"npm run bundle:watch\"",
-    "cypress-headless": "cypress run",
-    "cypress-browser": "cypress open --e2e --browser chrome"
+    "cypress-headless": "cypress run -c video=false",
+    "cypress-browser": "cypress open --e2e --browser chrome -c video=false"
   },
   "devDependencies": {
     "@babel/node": "7.22.10",
@@ -52,4 +52,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

container/public/LuigiCompoundContainer.svelte.d.ts

@@ -5,4 +5,19 @@ export default class LuigiCompoundContainer extends HTMLElement {
    * Manually triggers the micro frontend rendering process when using defer-init attribute
    */
   init(): Function;
+
+  /**
+   * The search parameters to be passed to the web-component-based micro frontend.
+   */
+  searchParams: any;
+
+  /**
+   * The path parameters to be passed to the web-component-based micro frontend.
+   */
+  pathParams: any;
+
+  /**
+   * The clientPermissions to be passed to the web-component-based micro frontend.
+   */
+  clientPermissions: any;
 }

container/public/LuigiContainer.svelte.d.ts

@@ -1,6 +1,14 @@
 export declare interface NodeParams {
   [key: string]: string;
 }
+
+export declare interface ClientPermissions {
+  clientPermissions: {
+    changeCurrentLocale: string;
+    urlParameters: Object;
+  };
+}
+
 export default class LuigiContainer extends HTMLElement {
   /**
    * The URL of the microfrontend to be rendered
@@ -42,6 +50,21 @@ export default class LuigiContainer extends HTMLElement {
    */
   nodeParams: NodeParams;
 
+  /**
+   * The search parameters to be passed to the web-component-based micro frontend.
+   */
+  searchParams: any;
+
+  /**
+   * The path parameters to be passed to the web-component-based micro frontend.
+   */
+  pathParams: any;
+
+  /**
+   * The clientPermissions to be passed to the web-component-based micro frontend.
+   */
+  clientPermissions: ClientPermissions;
+
   /**
    * Updates the context of the microfrontend
    * @param contextObj The context object to be updated

container/src/LuigiCompoundContainer.svelte

@@ -1,40 +1,59 @@
-<svelte:options customElement={{
-  tag: null,
-  props: {
-    viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
-    deferInit: { type: 'Boolean', attribute: 'defer-init' },
-    context: { type: 'String', reflect: false, attribute: 'context' },
-    compoundConfig: { type: 'Object', reflect: false, attribute: 'compound-config' },
-    nodeParams: { type: 'Object', reflect: false, attribute: 'node-params' }
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: null,
+    props: {
+      viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
+      deferInit: { type: 'Boolean', attribute: 'defer-init' },
+      context: { type: 'String', reflect: false, attribute: 'context' },
+      compoundConfig: {
+        type: 'Object',
+        reflect: false,
+        attribute: 'compound-config'
+      },
+      nodeParams: { type: 'Object', reflect: false, attribute: 'node-params' },
+      searchParams: {
+        type: 'Object',
+        reflect: false,
+        attribute: 'search-params'
+      },
+      pathParams: { type: 'Object', reflect: false, attribute: 'path-params' },
+      clientPermissions: {
+        type: 'Object',
+        reflect: false,
+        attribute: 'client-permissions'
+      }
+    }
+  }}
+/>
 
-<script lang="ts">  
+<script lang="ts">
   import { onMount } from 'svelte';
   import { ContainerService } from './services/container.service';
   import { WebComponentService } from './services/webcomponents.service';
   import { Events } from './constants/communication';
 
   export let viewurl: string;
   export let context: string;
-  export let deferInit: boolean;  
+  export let deferInit: boolean;
   export let compoundConfig: any;
   export let nodeParams: any;
+  export let searchParams: any;
+  export let pathParams: any;
+  export let clientPermissions: any;
 
   let containerInitialized = false;
   let mainComponent: HTMLElement;
   let eventBusElement: HTMLElement;
 
-
   const containerService = new ContainerService();
   const webcomponentService = new WebComponentService();
 
   // Only needed for get rid of "unused export property" svelte compiler warnings
   export const unwarn = () => {
-    return nodeParams;
-  }
+    return nodeParams && searchParams && pathParams && clientPermissions;
+  };
 
-  const initialize = (thisComponent: any) => {    
+  const initialize = (thisComponent: any) => {
     if (!compoundConfig || containerInitialized) {
       return;
     }
@@ -63,7 +82,7 @@
         }
       });
     containerInitialized = true;
-  }
+  };
 
   onMount(async () => {
     const thisComponent: any = (mainComponent.getRootNode() as ShadowRoot).host;

container/src/LuigiContainer.svelte

@@ -1,21 +1,49 @@
-<svelte:options customElement={{
-  tag: null,
-  props: {
-    viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
-    deferInit: { type: 'Boolean', attribute: 'defer-init' },
-    context: { type: 'String', reflect: false, attribute: 'context' },
-    label: { type: 'String', reflect: false, attribute: 'label' },
-    webcomponent: { type: 'String', reflect: false, attribute: 'webcomponent' },    
-    locale: { type: 'String', reflect: false, attribute: 'locale' },
-    theme: { type: 'String', reflect: false, attribute: 'theme' },
-    activeFeatureToggleList: { type: 'Array', reflect: false, attribute: 'active-feature-toggle-list' },
-    skipInitCheck: { type: 'Boolean', reflect: false, attribute: 'skip-init-check' },
-    nodeParams: { type: 'Object', reflect: false, attribute: 'node-params' }
-  },
-  extend: (customElementConstructor) => {
-      let notInitFn = (name) => {
-          return () => console.warn(name + ' can\'t be called on luigi-container before its micro frontend is attached to the DOM.');
+<svelte:options
+  customElement={{
+    tag: null,
+    props: {
+      viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
+      deferInit: { type: 'Boolean', attribute: 'defer-init' },
+      context: { type: 'String', reflect: false, attribute: 'context' },
+      label: { type: 'String', reflect: false, attribute: 'label' },
+      webcomponent: {
+        type: 'String',
+        reflect: false,
+        attribute: 'webcomponent'
+      },
+      locale: { type: 'String', reflect: false, attribute: 'locale' },
+      theme: { type: 'String', reflect: false, attribute: 'theme' },
+      activeFeatureToggleList: {
+        type: 'Array',
+        reflect: false,
+        attribute: 'active-feature-toggle-list'
+      },
+      skipInitCheck: {
+        type: 'Boolean',
+        reflect: false,
+        attribute: 'skip-init-check'
+      },
+      nodeParams: { type: 'Object', reflect: false, attribute: 'node-params' },
+      searchParams: {
+        type: 'Object',
+        reflect: false,
+        attribute: 'search-params'
+      },
+      pathParams: { type: 'Object', reflect: false, attribute: 'path-params' },
+      clientPermissions: {
+        type: 'Object',
+        reflect: false,
+        attribute: 'client-permissions'
       }
+    },
+    extend: customElementConstructor => {
+      let notInitFn = name => {
+        return () =>
+          console.warn(
+            name +
+              " can't be called on luigi-container before its micro frontend is attached to the DOM."
+          );
+      };
       return class extends customElementConstructor {
         sendCustomMessage = notInitFn('sendCustomMessage');
         updateContext = notInitFn('updateContext');
@@ -26,8 +54,8 @@
         }
       };
     }
-}} />
-
+  }}
+/>
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
@@ -40,12 +68,15 @@
   export let context: string;
   export let label: string;
   export let webcomponent: string;
-  export let deferInit: boolean;  
+  export let deferInit: boolean;
   export let locale: string;
   export let theme: string;
   export let activeFeatureToggleList: string[];
   export let skipInitCheck: boolean;
   export let nodeParams: any;
+  export let searchParams: any;
+  export let pathParams: any;
+  export let clientPermissions: any;
 
   let iframeHandle:
     | {
@@ -60,10 +91,18 @@
 
   // Only needed for get rid of "unused export property" svelte compiler warnings
   export const unwarn = () => {
-    return locale && theme && activeFeatureToggleList && nodeParams;
-  }
+    return (
+      locale &&
+      theme &&
+      activeFeatureToggleList &&
+      nodeParams &&
+      searchParams &&
+      pathParams &&
+      clientPermissions
+    );
+  };
 
-  const initialize = (thisComponent: any) => {    
+  const initialize = (thisComponent: any) => {
     if (!containerInitialized) {
       thisComponent.sendCustomMessage = (id: string, data?: any) => {
         ContainerAPI.sendCustomMessage(

container/src/services/webcomponents.service.ts

@@ -147,6 +147,21 @@ export class WebComponentService {
           return;
         }
         this.dispatchLuigiEvent(Events.SET_ANCHOR_LINK_REQUEST, anchor);
+      },
+      getCoreSearchParams: () => {
+        let result = this.thisComponent.getAttribute('search-params') || {};
+        result = JSON.parse(result);
+        return result;
+      },
+      getPathParams: () => {
+        let result = this.thisComponent.getAttribute('path-params') || {};
+        result = JSON.parse(result);
+        return result;
+      },
+      getClientPermissions: () => {
+        let result = this.thisComponent.getAttribute('client-permissions') || {};
+        result = JSON.parse(result);
+        return result;
       }
     };
   }