From 98c394ea7ddc0e8d2c15966c804638fb51984b27 Mon Sep 17 00:00:00 2001 From: Waldemar Mazurek Date: Tue, 6 Aug 2024 10:11:49 +0200 Subject: [PATCH] Improves context updating method (#3831) --- .../compound/wc-compound-container.cy.js | 18 ++++++++++++++++++ container/src/LuigiCompoundContainer.svelte | 18 ++++++++++++++---- container/src/LuigiContainer.svelte | 1 + .../src/services/web-component-helpers.ts | 1 + .../src/services/webcomponents.service.ts | 3 +++ .../test-app/compound/compoundClientAPI.html | 6 ++++++ container/test-app/compound/helloWorldWC.js | 12 ++++++++++++ .../services/webcomponents.service.spec.ts | 6 +++++- 8 files changed, 60 insertions(+), 5 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 index fe39ad1cc5..0514c1b72d 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 @@ -31,6 +31,24 @@ describe('Compound Container Tests', () => { expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getAnchor()="testAnchorCompound"'); }); }); + + it('LuigiClient API updateContext', () => { + cy.on('window:alert', stub); + + cy.wait(500); + cy.get('#luigi-update-context') + .click() + .then(() => { + cy.get(containerSelector) + .shadow() + .contains('updateContext') + .click() + .then(() => { + expect(stub.getCall(0)).to.be.calledWith('compoundWC.ctx={"label":"Dashboard","title":"Some input","instant":true,"newContextData":"some data"}'); + }); + }); + }); + it('defer-init flag for LuigiCompoundContainer', () => { // the initialized webcomponent has id="defer-init-flag" cy.get('#defer-init-flag').should('not.exist'); diff --git a/container/src/LuigiCompoundContainer.svelte b/container/src/LuigiCompoundContainer.svelte index e31fcb17a9..cfbe262d58 100644 --- a/container/src/LuigiCompoundContainer.svelte +++ b/container/src/LuigiCompoundContainer.svelte @@ -108,7 +108,17 @@ return; } thisComponent.updateContext = (contextObj: any, internal?: any) => { - (thisComponent.getNoShadow() ? thisComponent : mainComponent)._luigi_mfe_webcomponent.context = contextObj; + const rootElement = thisComponent.getNoShadow() ? thisComponent : mainComponent; + rootElement._luigi_mfe_webcomponent.context = contextObj; + + const compoundChildrenQueryElement = rootElement._luigi_mfe_webcomponent; + if (compoundChildrenQueryElement) { + const compoundChildren = compoundChildrenQueryElement.querySelectorAll('[lui_web_component]'); + compoundChildren?.forEach((item) => { + const ctx = item.context || {}; + item.context = Object.assign(ctx, contextObj); + }); + } }; const ctx = GenericHelperFunctions.resolveContext(context); deferInit = false; @@ -118,12 +128,12 @@ viewUrl: viewurl, webcomponent: GenericHelperFunctions.checkWebcomponentValue(webcomponent) || true }; // TODO: fill with sth - if(!thisComponent.getNoShadow()){ + if (!thisComponent.getNoShadow()) { mainComponent.innerHTML='' const shadow = thisComponent.attachShadow({ mode: "open"}); shadow.append(mainComponent); - }else{ - //removing mainComponent + } else { + // removing mainComponent thisComponent.innerHTML = ''; } webcomponentService.renderWebComponentCompound(node, thisComponent.getNoShadow() ? thisComponent : mainComponent, ctx).then(compCnt => { diff --git a/container/src/LuigiContainer.svelte b/container/src/LuigiContainer.svelte index 01ccb77b78..625a97f7ea 100644 --- a/container/src/LuigiContainer.svelte +++ b/container/src/LuigiContainer.svelte @@ -109,6 +109,7 @@ clientPermissions && userSettings && anchor && + authData && dirtyStatus && hasBack && documentTitle && diff --git a/container/src/services/web-component-helpers.ts b/container/src/services/web-component-helpers.ts index bfa9fcb7f4..97215662e4 100644 --- a/container/src/services/web-component-helpers.ts +++ b/container/src/services/web-component-helpers.ts @@ -125,6 +125,7 @@ export class GridCompoundRenderer extends DefaultCompoundRenderer { const config = layoutConfig || {}; const compoundItemCnt = document.createElement('div'); compoundItemCnt.setAttribute('style', `grid-row: ${config.row || 'auto'}; grid-column: ${config.column || 'auto'}`); + compoundItemCnt.classList.add('lui-compoundItemCnt'); return compoundItemCnt; } } diff --git a/container/src/services/webcomponents.service.ts b/container/src/services/webcomponents.service.ts index f7c11f743e..73ba84b42c 100644 --- a/container/src/services/webcomponents.service.ts +++ b/container/src/services/webcomponents.service.ts @@ -52,6 +52,7 @@ export class WebComponentService { if (nodeId) { wc.setAttribute('nodeId', nodeId); } + wc.setAttribute('lui_web_component', 'true'); this.initWC(wc, wc_id, wc_container, viewUrl, ctx, nodeId, isCompoundChild); wc_container.replaceChild(wc, wcItemPlaceholder); @@ -572,6 +573,7 @@ export class WebComponentService { if (navNode.webcomponent && navNode.webcomponent.selfRegistered) { this.includeSelfRegisteredWCFromUrl(navNode, renderer.viewUrl, () => { const wc = document.createElement(wc_id); + wc.setAttribute('lui_web_component', true); this.initWC(wc, wc_id, wc, renderer.viewUrl, ctx, '_root'); resolve(wc); }); @@ -579,6 +581,7 @@ export class WebComponentService { this.registerWCFromUrl(renderer.viewUrl, wc_id) .then(() => { const wc = document.createElement(wc_id); + wc.setAttribute('lui_web_component', true); this.initWC(wc, wc_id, wc, renderer.viewUrl, ctx, '_root'); resolve(wc); }) diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 7dc4e6bc55..0fccf01768 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -18,6 +18,8 @@

This page is used to test Compound-Container Luigi CLient API functionalities for web component based microfrontend

+ + Below is a compound container example for testing functionality
@@ -242,6 +244,10 @@

} ] }; + + document.querySelector('#luigi-update-context').addEventListener('click', () => { + compoundContainer.updateContext({ newContextData: 'some data' }); + }); diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index a3352affe8..d2bbfc239c 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -49,6 +49,9 @@ export default class extends HTMLElement { const getDirtyStatusBtn = document.createElement('template'); getDirtyStatusBtn.innerHTML = ''; + const updateContextBtn = document.createElement('template'); + updateContextBtn.innerHTML = ''; + const uxManagerMultipleRequestsBtn = document.createElement('template'); uxManagerMultipleRequestsBtn.innerHTML = `