From cdd4f4d3b88a52fbe92c9d43c8f5aa38412db15d Mon Sep 17 00:00:00 2001 From: Waldemar Mazurek Date: Tue, 24 Sep 2024 10:37:17 +0200 Subject: [PATCH 1/3] Adds node params to compound container typings (#3934) --- container/typings/LuigiCompoundContainer.svelte.d.ts | 6 ++++++ container/typings/LuigiContainer.svelte.d.ts | 2 +- docs/luigi-compound-container-api.md | 10 ++++++++++ docs/luigi-container-api.md | 2 +- 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/container/typings/LuigiCompoundContainer.svelte.d.ts b/container/typings/LuigiCompoundContainer.svelte.d.ts index 57a509a743..74f4d9e3fc 100644 --- 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 diff --git a/container/typings/LuigiContainer.svelte.d.ts b/container/typings/LuigiContainer.svelte.d.ts index 091254814c..6d763c1238 100644 --- 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; diff --git a/docs/luigi-compound-container-api.md b/docs/luigi-compound-container-api.md index 0adbea9f4e..dd4be93b3a 100644 --- a/docs/luigi-compound-container-api.md +++ b/docs/luigi-compound-container-api.md @@ -49,6 +49,16 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob * **since**: 1.0.0 +### nodeParams + +The parameters to be passed to the compound micro frontend. Will not be passed to the compound children. + +Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) + +**Meta** + +* **since**: 1.0.0 + ### noShadow If set to true, the Luigi compound container webcomponent will not use the shadow DOM for rendering. diff --git a/docs/luigi-container-api.md b/docs/luigi-container-api.md index b3d52fcf2b..1128a99e5e 100644 --- a/docs/luigi-container-api.md +++ b/docs/luigi-container-api.md @@ -133,7 +133,7 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob ### nodeParams -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. Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) From cbef79204abc11b2c06cb4371a0c9c8750845d9e Mon Sep 17 00:00:00 2001 From: Waldemar Mazurek Date: Tue, 24 Sep 2024 10:50:13 +0200 Subject: [PATCH 2/3] Adds theme property for compound container (#3936) --- .../test-app/compound/wc-compound-container.cy.js | 12 ++++++++++++ container/src/LuigiCompoundContainer.svelte | 3 +++ .../test-app/compound/compoundClientAPI.html | 1 + container/test-app/compound/helloWorldWC.js | 15 +++++++++++++++ .../typings/LuigiCompoundContainer.svelte.d.ts | 6 ++++++ docs/luigi-compound-container-api.md | 10 ++++++++++ 6 files changed, 47 insertions(+) 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 index 1cd7582460..4bf9966660 100644 --- 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 - 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 index 84bd01ed5c..2dd289b597 100644 --- a/container/src/LuigiCompoundContainer.svelte +++ b/container/src/LuigiCompoundContainer.svelte @@ -27,6 +27,7 @@ reflect: false, attribute: 'search-params', }, + theme: { type: 'String', reflect: false, attribute: 'theme' }, userSettings: { type: 'Object', reflect: false, @@ -76,6 +77,7 @@ export let nodeParams: any; export let pathParams: any; export let searchParams: any; + export let theme: string; export let userSettings: any; export let viewurl: string; export let webcomponent: any; @@ -99,6 +101,7 @@ nodeParams && pathParams && searchParams && + theme && userSettings ); }; diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 37a6a7495f..d76a17e1ee 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -35,6 +35,7 @@

anchor="testAnchorCompound" defer-init="false" webcomponent="true" + theme="sap_fiori_3" > diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index e4214bfb75..868999db58 100644 --- 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 = ''; + const getThemeBtn = document.createElement('template'); + getThemeBtn.innerHTML = ''; + const setViewGroupDataBtn = document.createElement('template'); setViewGroupDataBtn.innerHTML = ''; @@ -97,6 +100,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(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 +192,7 @@ export default class extends HTMLElement { }); } }); + this.$getAnchorBtn = this._shadowRoot.querySelector('#getAnchor'); this.$getAnchorBtn.addEventListener('click', () => { let getAnchor = this.LuigiClient.getAnchor(); @@ -197,6 +202,16 @@ export default class extends HTMLElement { }); }); + 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 index 74f4d9e3fc..2347c48a1d 100644 --- 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 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/docs/luigi-compound-container-api.md b/docs/luigi-compound-container-api.md index dd4be93b3a..51ca82d095 100644 --- 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 +### theme + +The theme to be passed to the compound microfrontend. + +Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) + +**Meta** + +* **since**: NEXT_RELEASE_CONTAINER + ### updateContext Function that updates the context of the compound microfrontend. From d100202cff260318b1bbbe0953a2fa6dba7b0429 Mon Sep 17 00:00:00 2001 From: Waldemar Mazurek Date: Tue, 24 Sep 2024 11:10:38 +0200 Subject: [PATCH 3/3] Adds activeFeatureToggleList property to LuigiCompoundContainer (#3937) --- .../test-app/compound/wc-compound-container.cy.js | 12 ++++++++++++ container/src/LuigiCompoundContainer.svelte | 3 +++ container/test-app/compound/compoundClientAPI.html | 1 + container/test-app/compound/helloWorldWC.js | 14 ++++++++++++++ .../typings/LuigiCompoundContainer.svelte.d.ts | 6 ++++++ docs/luigi-compound-container-api.md | 10 ++++++++++ 6 files changed, 46 insertions(+) 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 index 4bf9966660..a8f824c24d 100644 --- 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 index 2dd289b597..d3f2abc28d 100644 --- 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 index d76a17e1ee..85eefa9a37 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -26,6 +26,7 @@

{ + 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 index 2347c48a1d..d519a26d71 100644 --- 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 index 51ca82d095..86e7c8f921 100644 --- 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.