Adds activeFeatureToggleList property to LuigiCompoundContainer (#3937)

SAP · Sep 24, 2024 · d100202 · d100202
1 parent cbef792
commit d100202
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 0 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,18 @@ 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);
 

diff --git a/container/src/LuigiCompoundContainer.svelte b/container/src/LuigiCompoundContainer.svelte
@@ -3,6 +3,7 @@
     tag: null,
     shadow: 'none',
     props: {
+      activeFeatureToggleList: { type: 'Array', reflect: false, attribute: 'active-feature-toggle-list' },
       anchor: { type: 'String', reflect: false, attribute: 'anchor' },
       clientPermissions: {
         type: 'Object',
@@ -65,6 +66,7 @@
   import { Events } from './constants/communication';
   import { GenericHelperFunctions } from './utilities/helpers';
 
+  export let activeFeatureToggleList: string[];
   export let anchor: string;
   export let clientPermissions: any;
   export let compoundConfig: any;
@@ -92,6 +94,7 @@
   // Only needed for get rid of "unused export property" svelte compiler warnings
   export const unwarn = () => {
     return (
+      activeFeatureToggleList &&
       anchor &&
       clientPermissions &&
       dirtyStatus &&

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"}'

diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js
@@ -43,6 +43,9 @@ 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>';
 
@@ -100,6 +103,7 @@ 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));
@@ -202,6 +206,16 @@ 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();

diff --git a/container/typings/LuigiCompoundContainer.svelte.d.ts b/container/typings/LuigiCompoundContainer.svelte.d.ts
@@ -103,6 +103,12 @@ 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

diff --git a/docs/luigi-compound-container-api.md b/docs/luigi-compound-container-api.md
@@ -180,6 +180,16 @@ Type: ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glo
 
 *   **since**: 1.0.0
 
+### activeFeatureToggleList
+
+The list of active feature toggles to be passed to the compound microfrontend.
+
+Type: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>
+
+**Meta**
+
+*   **since**: NEXT_RELEASE_CONTAINER
+
 ### theme
 
 The theme to be passed to the compound microfrontend.