Merge branch 'main' into leftnav-in-btplayout

SAP · Sep 24, 2024 · 6db9fbe · 6db9fbe
2 parents 825ce28 + d100202
commit 6db9fbe
Show file tree

Hide file tree

Showing 10 changed files with 259 additions and 128 deletions.
diff --git a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js
@@ -105,6 +105,30 @@ describe('Compound Container Tests', () => {
         });
     });
 
+    it('LuigiClient API - getActiveFeatureToggles', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .contains('getFeatureToggleList')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getActiveFeatureToggles()=["ft1","ft2"]');
+        });
+    });
+
+    it('LuigiClient API - getCurrentTheme', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .contains('getTheme')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getCurrentTheme()="sap_fiori_3"');
+        });
+    });
+
     it('LuigiClient API updateContext', () => {
       cy.on('window:alert', stub);
 

diff --git a/container/src/LuigiCompoundContainer.svelte b/container/src/LuigiCompoundContainer.svelte
@@ -3,36 +3,38 @@
     tag: null,
     shadow: 'none',
     props: {
-      viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
-      deferInit: { type: 'Boolean', attribute: 'defer-init' },
-      context: { type: 'String', reflect: false, attribute: 'context' },
-      noShadow: { type: 'Boolean', attribute: 'no-shadow', reflect: false },
-      compoundConfig: {
+      activeFeatureToggleList: { type: 'Array', reflect: false, attribute: 'active-feature-toggle-list' },
+      anchor: { type: 'String', reflect: false, attribute: 'anchor' },
+      clientPermissions: {
         type: 'Object',
         reflect: false,
-        attribute: 'compound-config',
+        attribute: 'client-permissions',
       },
-      nodeParams: { type: 'Object', reflect: false, attribute: 'node-params' },
-      userSettings: {
+      compoundConfig: {
         type: 'Object',
         reflect: false,
-        attribute: 'user-settings',
+        attribute: 'compound-config',
       },
-      anchor: { type: 'String', reflect: false, attribute: 'anchor' },
+      context: { type: 'String', reflect: false, attribute: 'context' },
+      deferInit: { type: 'Boolean', attribute: 'defer-init' },
+      dirtyStatus: { type: 'Boolean', reflect: false, attribute: 'dirty-status'},
+      documentTitle: {type: 'String', reflect: false, attribute: 'document-title'},
+      hasBack: { type: 'Boolean', reflect: false, attribute: 'has-back'},
+      noShadow: { type: 'Boolean', attribute: 'no-shadow', reflect: false },
+      nodeParams: { type: 'Object', reflect: false, attribute: 'node-params' },
+      pathParams: { type: 'Object', reflect: false, attribute: 'path-params' },
       searchParams: {
         type: 'Object',
         reflect: false,
         attribute: 'search-params',
       },
-      pathParams: { type: 'Object', reflect: false, attribute: 'path-params' },
-      clientPermissions: {
+      theme: { type: 'String', reflect: false, attribute: 'theme' },
+      userSettings: {
         type: 'Object',
         reflect: false,
-        attribute: 'client-permissions',
+        attribute: 'user-settings',
       },
-      dirtyStatus: { type: 'Boolean', reflect: false, attribute: 'dirty-status'},
-      hasBack: { type: 'Boolean', reflect: false, attribute: 'has-back'},
-      documentTitle: {type: 'String', reflect: false, attribute: 'document-title'},
+      viewurl: { type: 'String', reflect: false, attribute: 'viewurl' }
     },
     extend: (customElementConstructor) => {
       let notInitFn = (name) => {
@@ -64,21 +66,23 @@
   import { Events } from './constants/communication';
   import { GenericHelperFunctions } from './utilities/helpers';
 
-  export let viewurl: string;
-  export let webcomponent: any;
+  export let activeFeatureToggleList: string[];
+  export let anchor: string;
+  export let clientPermissions: any;
+  export let compoundConfig: any;
   export let context: string;
   export let deferInit: boolean;
+  export let dirtyStatus: boolean;
+  export let documentTitle: string;
+  export let hasBack: boolean;
   export let noShadow: boolean;
-  export let compoundConfig: any;
   export let nodeParams: any;
-  export let searchParams: any;
   export let pathParams: any;
-  export let clientPermissions: any;
+  export let searchParams: any;
+  export let theme: string;
   export let userSettings: any;
-  export let anchor: string;
-  export let dirtyStatus: boolean;
-  export let hasBack: boolean;
-  export let documentTitle: string;
+  export let viewurl: string;
+  export let webcomponent: any;
 
   let containerInitialized = false;
   let mainComponent: HTMLElement;
@@ -90,16 +94,18 @@
   // Only needed for get rid of "unused export property" svelte compiler warnings
   export const unwarn = () => {
     return (
-      nodeParams &&
-      searchParams &&
-      pathParams &&
-      clientPermissions &&
-      userSettings &&
+      activeFeatureToggleList &&
       anchor &&
+      clientPermissions &&
       dirtyStatus &&
-      hasBack &&
       documentTitle &&
-      noShadow
+      hasBack &&
+      noShadow &&
+      nodeParams &&
+      pathParams &&
+      searchParams &&
+      theme &&
+      userSettings
     );
   };
 
@@ -175,4 +181,4 @@
     height: 100%;
     border: none;
   }
-</style>
+</style>
diff --git a/container/src/LuigiContainer.svelte b/container/src/LuigiContainer.svelte
@@ -3,28 +3,28 @@
     tag: null,
     shadow: 'none',
     props: {
-      viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
-      deferInit: { type: 'Boolean', attribute: 'defer-init' },
-      noShadow: { type: 'Boolean', attribute: 'no-shadow' },
-      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' },
-      userSettings: { type: 'Object', reflect: false, attribute: 'user-settings' },
+      allowRules: { type: 'Array', reflect: false, attribute: 'allow-rules' },
       anchor: { type: 'String', reflect: false, attribute: 'anchor' },
-      searchParams: { type: 'Object', reflect: false, attribute: 'search-params' },
-      pathParams: { type: 'Object', reflect: false, attribute: 'path-params' },
+      authData: { type: 'Object', reflect: false, attribute: 'auth-data' },
       clientPermissions: { type: 'Object', reflect: false, attribute: 'client-permissions' },
+      context: { type: 'String', reflect: false, attribute: 'context' },
+      deferInit: { type: 'Boolean', attribute: 'defer-init' },
       dirtyStatus: { type: 'Boolean', reflect: false, attribute: 'dirty-status' },
-      hasBack: { type: 'Boolean', reflect: false, attribute: 'has-back' },
       documentTitle: { type: 'String', reflect: false, attribute: 'document-title' },
-      allowRules: { type: 'Array', reflect: false, attribute: 'allow-rules' },
+      hasBack: { type: 'Boolean', reflect: false, attribute: 'has-back' },
+      label: { type: 'String', reflect: false, attribute: 'label' },
+      locale: { type: 'String', reflect: false, attribute: 'locale' },
+      noShadow: { type: 'Boolean', attribute: 'no-shadow' },
+      nodeParams: { type: 'Object', reflect: false, attribute: 'node-params' },
+      pathParams: { type: 'Object', reflect: false, attribute: 'path-params' },
       sandboxRules: { type: 'Array', reflect: false, attribute: 'sandbox-rules' },
-      authData: { type: 'Object', reflect: false, attribute: 'auth-data' }
+      searchParams: { type: 'Object', reflect: false, attribute: 'search-params' },
+      skipInitCheck: { type: 'Boolean', reflect: false, attribute: 'skip-init-check' },
+      theme: { type: 'String', reflect: false, attribute: 'theme' },
+      userSettings: { type: 'Object', reflect: false, attribute: 'user-settings' },
+      viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
+      webcomponent: { type: 'String', reflect: false, attribute: 'webcomponent' }
     },
     extend: customElementConstructor => {
       let notInitFn = name => {
@@ -62,29 +62,28 @@
   import { GenericHelperFunctions } from './utilities/helpers';
   import { getAllowRules } from './services/iframe-helpers';
 
-  export let viewurl: string;
+  export let activeFeatureToggleList: string[];
+  export let allowRules: string[];
+  export let anchor: string;
+  export let authData: any;
+  export let clientPermissions: any;
   export let context: string;
-  export let label: string;
-  export let webcomponent: any;
   export let deferInit: boolean;
-  export let noShadow: Boolean;
+  export let dirtyStatus: boolean;
+  export let documentTitle: string;
+  export let hasBack: boolean;
+  export let label: string;
   export let locale: string;
-  export let theme: string;
-  export let activeFeatureToggleList: string[];
-  export let skipInitCheck: boolean;
+  export let noShadow: Boolean;
   export let nodeParams: any;
-  export let searchParams: any;
   export let pathParams: any;
-  export let clientPermissions: any;
-  export let dirtyStatus: boolean;
-  export let hasBack: boolean;
-  export let documentTitle: string;
-  export let allowRules: string[];
   export let sandboxRules: string[];
-
+  export let searchParams: any;
+  export let skipInitCheck: boolean;
+  export let theme: string;
   export let userSettings: any;
-  export let anchor: string;
-  export let authData: any;
+  export let viewurl: string;
+  export let webcomponent: any;
 
   const iframeHandle:
     | {
@@ -100,22 +99,23 @@
   // Only needed for get rid of "unused export property" svelte compiler warnings
   export const unwarn = () => {
     return (
-      locale &&
-      theme &&
       activeFeatureToggleList &&
-      nodeParams &&
-      searchParams &&
-      pathParams &&
-      clientPermissions &&
-      userSettings &&
+      allowRules &&
       anchor &&
       authData &&
+      clientPermissions &&
       dirtyStatus &&
-      hasBack &&
       documentTitle &&
-      allowRules &&
+      hasBack &&
+      locale &&
+      noShadow &&
+      nodeParams &&
+      pathParams &&
       sandboxRules &&
-      noShadow
+      searchParams &&
+      skipInitCheck &&
+      theme &&
+      userSettings
     );
   };
 
@@ -213,7 +213,7 @@
         height: 100%;
         border: none;
       }
-    
+
       main.lui-isolated {
         line-height: 0;
       }

diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html
@@ -26,6 +26,7 @@ <h3>
       <luigi-compound-container
         data-test-id="luigi-client-api-test-compound-01"
         id="dashboard"
+        active-feature-toggle-list='["ft1", "ft2"]'
         context='{"label": "Dashboard"}'
         node-params='{"Luigi":"rocks"}'
         search-params='{"test":"searchParam1"}'
@@ -35,6 +36,7 @@ <h3>
         anchor="testAnchorCompound"
         defer-init="false"
         webcomponent="true"
+        theme="sap_fiori_3"
       ></luigi-compound-container>
     </div>
 

diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js
@@ -43,6 +43,12 @@ export default class extends HTMLElement {
     const getAnchorBtn = document.createElement('template');
     getAnchorBtn.innerHTML = '<button id="getAnchor">getAnchor</button>';
 
+    const getFeatureToggleListBtn = document.createElement('template');
+    getFeatureToggleListBtn.innerHTML = '<button id="getFeatureToggleList">getFeatureToggleList</button>';
+
+    const getThemeBtn = document.createElement('template');
+    getThemeBtn.innerHTML = '<button id="getTheme">getTheme</button>';
+
     const setViewGroupDataBtn = document.createElement('template');
     setViewGroupDataBtn.innerHTML = '<button id="setViewGroupData">setViewGroupData</button>';
 
@@ -97,6 +103,8 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(getClientPermissionsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getUserSettingsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getAnchorBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(getFeatureToggleListBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(getThemeBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getDirtyStatusBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(retrieveContextValueBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(uxManagerMultipleRequestsBtn.content.cloneNode(true));
@@ -188,6 +196,7 @@ export default class extends HTMLElement {
         });
       }
     });
+
     this.$getAnchorBtn = this._shadowRoot.querySelector('#getAnchor');
     this.$getAnchorBtn.addEventListener('click', () => {
       let getAnchor = this.LuigiClient.getAnchor();
@@ -197,6 +206,26 @@ export default class extends HTMLElement {
       });
     });
 
+    this.$getFeatureToggleListBtn = this._shadowRoot.querySelector('#getFeatureToggleList');
+    this.$getFeatureToggleListBtn.addEventListener('click', () => {
+      const activeFeatureToggleList = this.LuigiClient.getActiveFeatureToggles();
+
+      this.LuigiClient.uxManager().showAlert({
+        text: 'LuigiClient.getActiveFeatureToggles()=' + JSON.stringify(activeFeatureToggleList),
+        type: 'info'
+      });
+    });
+
+    this.$getThemeBtn = this._shadowRoot.querySelector('#getTheme');
+    this.$getThemeBtn.addEventListener('click', () => {
+      const currentTheme = this.LuigiClient.uxManager().getCurrentTheme();
+
+      this.LuigiClient.uxManager().showAlert({
+        text: 'LuigiClient.getCurrentTheme()=' + JSON.stringify(currentTheme),
+        type: 'info'
+      });
+    });
+
     this.$getDirtyStatusBtn = this._shadowRoot.querySelector('#getDirtyStatus');
     this.$getDirtyStatusBtn.addEventListener('click', () => {
       let dirtyStatus = this.LuigiClient.uxManager().getDirtyStatus();

diff --git a/container/typings/LuigiCompoundContainer.svelte.d.ts b/container/typings/LuigiCompoundContainer.svelte.d.ts
@@ -24,6 +24,12 @@ export default class LuigiCompoundContainer extends HTMLElement {
    */
   deferInit: boolean;
 
+  /**
+   * The parameters to be passed to the compound micro frontend. Will not be passed to the compound children.
+   * @since 1.0.0
+   */
+  nodeParams: Object;
+
   /**
    * If set to true, the Luigi compound container webcomponent will not use the shadow DOM for rendering.
    * @since 1.2.0
@@ -97,6 +103,18 @@ export default class LuigiCompoundContainer extends HTMLElement {
    */
   webcomponent: boolean | WebComponentSettings | string;
 
+  /**
+   * The list of active feature toggles to be passed to the compound microfrontend.
+   * @since NEXT_RELEASE_CONTAINER
+   */
+  activeFeatureToggleList: string[];
+
+  /**
+   * The theme to be passed to the compound microfrontend.
+   * @since NEXT_RELEASE_CONTAINER
+   */
+  theme: string;
+
   /**
    * Function that updates the context of the compound microfrontend.
    * @param contextObj The context data

diff --git a/container/typings/LuigiContainer.svelte.d.ts b/container/typings/LuigiContainer.svelte.d.ts
@@ -78,7 +78,7 @@ export default class LuigiContainer extends HTMLElement {
   skipInitCheck: boolean;
 
   /**
-   * The parameters to be passed to the web-component-based micro frontend. Will not be passed to the compound children.
+   * The parameters to be passed to the web-component-based micro frontend.
    * @since 1.0.0
    */
   nodeParams: Object;