Merge branch 'main' into 3399-set-anchor-for-wc-mf-in-modal

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');

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 => {

container/src/LuigiContainer.svelte

@@ -109,6 +109,7 @@
       clientPermissions &&
       userSettings &&
       anchor &&
+      authData &&
       dirtyStatus &&
       hasBack &&
       documentTitle &&

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;
   }
 }

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,13 +573,15 @@ 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);
             });
           } else {
             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);
               })

container/test-app/compound/compoundClientAPI.html

@@ -18,6 +18,8 @@ <h3>
       This page is used to test Compound-Container Luigi CLient API functionalities for
       web component based microfrontend
     </h3>
+    <button id="luigi-update-context" type="button">Update context</button>
+
     <!-- base scenario compound container-->
     <span>Below is a compound container example for testing functionality</span>
     <div style="border:solid 1px blue">
@@ -242,6 +244,10 @@ <h3>
           }
         ]
       };
+
+      document.querySelector('#luigi-update-context').addEventListener('click', () => {
+        compoundContainer.updateContext({ newContextData: 'some data' });
+      });
     </script>
   </body>
 </html>

container/test-app/compound/helloWorldWC.js

@@ -49,6 +49,9 @@ export default class extends HTMLElement {
     const getDirtyStatusBtn = document.createElement('template');
     getDirtyStatusBtn.innerHTML = '<button id="getDirtyStatus">getDirtyStatus</button>';
 
+    const updateContextBtn = document.createElement('template');
+    updateContextBtn.innerHTML = '<button id="updateContext">updateContext</button>';
+
     const uxManagerMultipleRequestsBtn = document.createElement('template');
     uxManagerMultipleRequestsBtn.innerHTML = `<button id="uxManagerManyRequests">uxManager().closeUserSettings,
     openUserSettings,
@@ -95,6 +98,7 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(getUserSettingsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getAnchorBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getDirtyStatusBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(updateContextBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(uxManagerMultipleRequestsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(linkManagerChainedFunctionsRequestsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(linkManagerOpenAsRequestsBtn.content.cloneNode(true));
@@ -203,6 +207,14 @@ export default class extends HTMLElement {
       });
     });
 
+    this.$updateContextBtn = this._shadowRoot.querySelector('#updateContext');
+    this.$updateContextBtn.addEventListener('click', () => {
+      this.LuigiClient.uxManager().showAlert({
+        text: `compoundWC.ctx=${JSON.stringify(this.ctx)}`,
+        type: 'info'
+      });
+    });
+
     this.$uxManagerManyRequests = this._shadowRoot.querySelector('#uxManagerManyRequests');
     this.$uxManagerManyRequests.addEventListener('click', () => {
       this.LuigiClient.uxManager().closeUserSettings();

container/test/services/webcomponents.service.spec.ts

@@ -42,6 +42,7 @@ describe('attachWC', () => {
   it('wc_container contains wcItemPlaceholder and nodeId is provided', () => {
     const innerWCElement = document.createElement(wc_id);
     innerWCElement.setAttribute('nodeId', nodeId);
+    innerWCElement.setAttribute('lui_web_component', 'true');
 
     // Mock methods to spy on them
     const dispatchEventSpy = jest.spyOn(wc_container, 'dispatchEvent');
@@ -78,6 +79,7 @@ describe('attachWC', () => {
 
   it('nodeId not provided', () => {
     const innerWCElement = document.createElement(wc_id);
+    innerWCElement.setAttribute('lui_web_component', 'true');
 
     // Mock methods to spy on them
     const dispatchEventSpy = jest.spyOn(wc_container, 'dispatchEvent');
@@ -93,6 +95,7 @@ describe('attachWC', () => {
 
   it('_luigi_node provided', () => {
     const innerWCElement = document.createElement(wc_id);
+    innerWCElement.setAttribute('lui_web_component', 'true');
 
     // Mock methods to spy on them
     const dispatchEventSpy = jest.spyOn(wc_container, 'dispatchEvent');
@@ -167,7 +170,7 @@ describe('createClientAPI', () => {
       { slug: 'Sales-settings', params: null },
       { slug: null, params: { project: 'pr2', user: 'john' } },
       { slug: 'Sales-settings', params: { project: 'pr2', user: 'john' } }
-    ])('test linkManager navigateToIntent', (data) => {
+    ])('test linkManager navigateToIntent', data => {
       let payloadLink = `#?intent=${data.slug}`;
 
       if (data.params && Object.keys(data.params)?.length) {
@@ -1381,6 +1384,7 @@ describe('createCompoundContainerAsync', () => {
     const ctx = {};
     const mockGeneratedWCId = 'mocked-wc-id';
     const mockWebComponent = document.createElement(mockGeneratedWCId);
+    mockWebComponent.setAttribute('lui_web_component', 'true');
     const navNode = {};
 
     service.initWC = jest.fn();

core/src/Alerts.svelte

@@ -141,7 +141,6 @@
     z-index: 1100;
     flex-direction: column;
     left: 50%;
-    -webkit-transform: translate(-50%);
     transform: translate(-50%);
     margin-top: calc(var(--luigi__shellbar--height) - 0.625rem);
     .fd-message-strip:not(:first-child) {
@@ -154,7 +153,6 @@
       line-height: 1.42857;
       color: #0a6ed1;
       color: var(--sapLinkColor, #0a6ed1);
-      -webkit-transition: all 125ms ease-in;
       transition: all 125ms ease-in;
       text-decoration: none;
 

core/src/SplitView.svelte

@@ -367,9 +367,7 @@
     border-radius: 4px;
     cursor: pointer;
     &:focus {
-      -webkit-box-shadow: 0 0 0 1px #fafafa;
       box-shadow: 0 0 0 1px #fafafa;
-      -webkit-box-shadow: 0 0 0 1px var(--fd-color-action-focus);
       box-shadow: 0 0 0 1px var(--fd-color-action-focus);
     }
     &:hover {

core/src/navigation/LeftNav.svelte

@@ -1293,7 +1293,6 @@
     cursor: pointer;
     outline-offset: -1px;
     user-select: none;
-    -moz-user-select: none;
     -webkit-user-select: none;
   }
 
@@ -1669,15 +1668,6 @@
         background: var(--sapList_Background, #fff);
       }
 
-      @-webkit-keyframes flyoutAnimation {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-
       @keyframes flyoutAnimation {
         0% {
           opacity: 0;

core/src/navigation/LeftNavGroup.svelte

@@ -59,7 +59,6 @@
 <style lang="scss">
   .fd-navigation__link {
     -webkit-user-select: none;
-    -moz-user-select: none;
     user-select: none;
   }
 

core/src/styles/_mixins.scss

@@ -1,20 +1,13 @@
 @mixin transition($args...) {
-  -webkit-transition: $args;
-  -moz-transition: $args;
-  -o-transition: $args;
   transition: $args;
 }
 
 @mixin box-shadow($shadow...) {
-  -webkit-box-shadow: $shadow;
-  -moz-box-shadow: $shadow;
   box-shadow: $shadow;
 }
 
 @mixin border-radius($radius) {
   border-radius: $radius;
-  -webkit-border-radius: $radius;
-  -moz-border-radius: $radius;
 }
 
 @mixin luigi-menu__link--border-radius($position) {

website/docs/src/styles/app.scss

@@ -457,8 +457,6 @@ body {
 
         select {
             color: #3c4553;
-            -moz-appearance: none;
-            -webkit-appearance: none;
             appearance: none;
             background: #edf2f7;
             border: 1px solid #d0d8e2;

website/docs/static/public/docsearch.css

@@ -35,8 +35,6 @@
     vertical-align: middle;
     white-space: normal;
     font-size: 12px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none
 }
 
@@ -80,7 +78,6 @@
     text-align: center;
     font-size: inherit;
     -webkit-user-select: none;
-    -moz-user-select: none;
     user-select: none;
     right: inherit;
     left: 0
@@ -122,7 +119,6 @@
     padding: 0;
     font-size: inherit;
     -webkit-user-select: none;
-    -moz-user-select: none;
     user-select: none;
     fill: rgba(0, 0, 0, .5)
 }
@@ -144,35 +140,17 @@
 
 .searchbox__input:valid~.searchbox__reset {
     display: block;
-    -webkit-animation-name: sbx-reset-in;
     animation-name: sbx-reset-in;
-    -webkit-animation-duration: .15s;
     animation-duration: .15s
 }
 
-@-webkit-keyframes sbx-reset-in {
-    0% {
-        -webkit-transform: translate3d(-20%, 0, 0);
-        transform: translate3d(-20%, 0, 0);
-        opacity: 0
-    }
-
-    to {
-        -webkit-transform: none;
-        transform: none;
-        opacity: 1
-    }
-}
-
 @keyframes sbx-reset-in {
     0% {
-        -webkit-transform: translate3d(-20%, 0, 0);
         transform: translate3d(-20%, 0, 0);
         opacity: 0
     }
 
     to {
-        -webkit-transform: none;
         transform: none;
         opacity: 1
     }
@@ -223,7 +201,6 @@
     top: -7px;
     border-top: 1px solid #d9d9d9;
     border-right: 1px solid #d9d9d9;
-    -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
     border-radius: 2px
 }

website/fiddle/src/App.svelte

@@ -413,15 +413,13 @@
     display: inline-block;
     border: 2px solid #2deb8a;
     border-radius: 8px;
-    -webkit-box-shadow: 0 8px 24px -17px #000101;
     box-shadow: 0 8px 24px -17px #000101;
     background-color: #2deb8a;
     font-size: 12px;
     font-weight: 600;
     font-family: 'Open Sans', sans-serif;
     color: #29303a;
     cursor: pointer;
-    -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
   }