Merge branch 'main' into 3880-sync-luigi-client-api-on-luigi-element-…

…ts-declaration

.github/workflows/test.yml

@@ -11,7 +11,7 @@ env:
   CYPRESS_DASHBOARD_RECORD_KEY:  ${{ secrets.CYPRESS_DASHBOARD }}
 
 jobs:
-  prepare: 
+  prepare:
     uses: ./.github/workflows/prepare.yml
     secrets: inherit
     with:
@@ -42,14 +42,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.14.0'    
+          node-version: '20.14.0'
       - uses: actions/cache@v4
         with:
           path: |
             ~/tmp_build
             ~/cypress-binary-cache
           key: buildcache-${{ github.ref }}
-      - run: cp -r ~/tmp_build/* . 
+      - run: cp -r ~/tmp_build/* .
       - run: npm i -g cypress
       - run: npm i -g live-server
       - run: bash ./test/mockengine.sh || exit 1
@@ -62,17 +62,16 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.14.0'    
+          node-version: '20.14.0'
       - uses: actions/cache@v4
         with:
           path: |
             ~/tmp_build
             ~/cypress-binary-cache
           key: buildcache-${{ github.ref }}
-      - run: cp -r ~/tmp_build/* . 
+      - run: cp -r ~/tmp_build/* .
       - run: npm test --prefix container || exit 1
-
-
+
   container_e2e_tests:
     name: Container E2E Tests
     runs-on: ubuntu-latest
@@ -84,22 +83,21 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.14.0'    
+          node-version: '20.14.0'
       - uses: actions/cache@v4
         with:
           path: |
             ~/tmp_build
             ~/cypress-binary-cache
           key: buildcache-${{ github.ref }}
-      - run: cp -r ~/tmp_build/* . 
+      - run: cp -r ~/tmp_build/* .
       - run: bash ./container/run-container-e2e.sh || exit 1
 
-
   e2e:
     name: Integration Tests
     needs: prepare
     runs-on: ubuntu-latest
-    
+
     env:
       USE_CYPRESS_DASHBOARD: true  # enable when trying to debug
     steps:
@@ -115,9 +113,10 @@ jobs:
       - run: cp -r ~/tmp_build/* .
       - run: sudo apt-get install libgconf-2-4 libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
       - run: npm install --prefix test/e2e-test-application @babel/plugin-proposal-class-properties
-      - run: ls test 
+      - run: ls test
       - run: bash ./test/e2e-js.sh || exit 1
       - run: bash ./test/e2e-angular.sh || exit 1
+      - run: bash ./test/e2e-client-api.sh || exit 1
 
   docu_check:
     name: Check Documentation
@@ -126,6 +125,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.14.0'       
+          node-version: '20.14.0'
       - run: cd ./scripts && npm ci
       - run: bash ./scripts/docuCheck.sh

CHANGELOG.md

@@ -25,6 +25,16 @@ The lerna-changelog tool detects changes based on PR labels and maps them to sec
 -->
 
 
+## [v2.19.0] (2024-12-23)
+
+#### :rocket: Added
+* [#4078](https://github.com/SAP/luigi/pull/4078) Mitigation of potential backwards compatibility issue ([@hardl](https://github.com/hardl))
+* [#4077](https://github.com/SAP/luigi/pull/4077) getCurrentRoute in web component client api ([@hardl](https://github.com/hardl))
+
+
+
+
+
 ## [v2.18.3] (2024-12-17)
 
 #### :bug: Fixed
@@ -1925,4 +1935,5 @@ The lerna-changelog tool detects changes based on PR labels and maps them to sec
 [v2.18.0]: https://github.com/SAP/luigi/compare/v2.17.0...v2.18.0
 [v2.18.1]: https://github.com/SAP/luigi/compare/v2.18.0...v2.18.1
 [v2.18.2]: https://github.com/SAP/luigi/compare/v2.18.1...v2.18.2
-[v2.18.3]: https://github.com/SAP/luigi/compare/v2.18.2...v2.18.3
+[v2.18.3]: https://github.com/SAP/luigi/compare/v2.18.2...v2.18.3
+[v2.19.0]: https://github.com/SAP/luigi/compare/v2.18.3...v2.19.0

bootstrap.js

@@ -18,6 +18,7 @@ const folders = [
   'test/e2e-test-application',
   'test/e2e-test-application/externalMf',
   'test/e2e-js-test-application',
+  'test/e2e-client-api-test-app',
   'client-frameworks-support/testing-utilities/test'
 ];
 // Check for verbose flag

client-frameworks-support/client-support-angular/projects/client-support-angular/package.json

@@ -22,5 +22,5 @@
     "@luigi-project/client": "^2.0.0",
     "@luigi-project/testing-utilities": "^2.0.0"
   },
-  "version": "2.18.3"
+  "version": "2.19.0"
 }

client-frameworks-support/testing-utilities/dist/package.json

@@ -19,7 +19,7 @@
     "microfrontends",
     "testing"
   ],
-  "version": "2.18.3",
+  "version": "2.19.0",
   "engines": {
     "node": ">=18.19.1"
   }

client-frameworks-support/testing-utilities/package.json

@@ -29,7 +29,7 @@
     "microfrontends",
     "testing"
   ],
-  "version": "2.18.3",
+  "version": "2.19.0",
   "engines": {
     "node": ">=18.19.1"
   }

client/public/package.json

@@ -17,5 +17,5 @@
     "micro-frontends",
     "microfrontends"
   ],
-  "version": "2.18.3"
+  "version": "2.19.0"
 }

container/cypress/e2e/test-app/compound/wc-compound-container.cy.js

@@ -1,10 +1,18 @@
 describe('Compound Container Tests', () => {
   describe('LuigiClient API - LuigiCompoundContainer', () => {
     const containerSelector = '[data-test-id="luigi-client-api-test-compound-01"]';
+    let consoleLog;
     let stub;
 
     beforeEach(() => {
-      cy.visit('http://localhost:8080/compound/compoundClientAPI.html');
+      cy.visit('http://localhost:8080/compound/compoundClientAPI.html', {
+        onBeforeLoad(win) {
+          // Set up a spy on console.log
+          cy.stub(win.console, 'log', (value) => {
+            consoleLog = value;
+          });
+        }
+      });
       stub = cy.stub();
     });
 
@@ -250,6 +258,7 @@ describe('Compound Container Tests', () => {
           cy.hash().should('eq', '#openAsModal-wc');
         });
     });
+
     it('openAsDrawer webcomponent container', () => {
       cy.on('window:alert', stub);
 
@@ -261,6 +270,7 @@ describe('Compound Container Tests', () => {
           cy.hash().should('eq', '#openAsDrawer-wc');
         });
     });
+
     it('openAsSplitview webcomponent container', () => {
       cy.on('window:alert', stub);
 
@@ -276,22 +286,12 @@ describe('Compound Container Tests', () => {
     it('LuigiClient API publishEvent', () => {
       cy.on('window:alert', stub);
 
-      // Set up a spy on console.log
-      cy.window().then((win) => {
-        cy.spy(win.console, 'log').as('consoleLogSpy');
-      });
+      cy.get(containerSelector).shadow().contains('Publish event').click();
 
-      cy.get(containerSelector)
-        .shadow()
-        .contains('Publish event')
-        .click()
-        .then(() => {
-          expect(stub.getCall(0)).to.be.calledWith('sendInput');
-          cy.get('@consoleLogSpy').should(
-            'be.calledWith',
-            'dataConverter(): Received Custom Message from "input1" MF My own event data'
-          );
-        });
+      cy.should(() => {
+        expect(stub.getCall(0)).to.be.calledWith('custom-message: sendInput');
+        expect(consoleLog).to.equal('dataConverter(): Received Custom Message from "input1" MF My own event data');
+      });
     });
 
     it('LuigiClient API uxManagerChainRequests', () => {

container/test-app/assets/panelHeader.js

@@ -169,10 +169,6 @@ class panelHeader extends LuigiElement {
     });
   }
 
-  afterInit(ctx) {
-    console.debug('after init', ctx);
-  }
-
   render(ctx) {
     return html`
       <style>

container/test-app/compound/compoundClientAPI.html

@@ -201,7 +201,7 @@ <h3>
       );
       compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, (event) => {
         if (event.detail.id !== 'timer') {
-          alert(event.detail.id);
+          alert(MFEventID.CUSTOM_MESSAGE + ': ' + event.detail.id);
         }
       });
 

core/public/package.json

@@ -18,5 +18,5 @@
     "micro-frontends",
     "microfrontends"
   ],
-  "version": "2.18.3"
+  "version": "2.19.0"
 }

core/public_root/package.json

@@ -18,5 +18,5 @@
     "micro-frontends",
     "microfrontends"
   ],
-  "version": "2.18.3"
+  "version": "2.19.0"
 }

core/src/services/web-components.js

@@ -70,9 +70,13 @@ class WebComponentSvcClass {
           get(target, prop) {
             if (prop === target.getCurrentRoute.name) {
               return () => {
-                return new Promise((resolve) => {
+                const pm = new Promise((resolve) => {
                   resolve(target.getCurrentRoute());
                 });
+                pm.toString = () => {
+                  return target.getCurrentRoute();
+                };
+                return pm;
               };
             }
             return target[prop];

docs/general-settings.md

@@ -262,29 +262,36 @@ You can set the following values:
 
 ### theming
 - **description**: a configuration element that allows you to specify a list of themes that are available on the website. The children elements are:
-    * **themes** (mandatory) is an array of available themes, for example `themes: ['light', 'dark']`.
+    * **themes** (mandatory) is an array of available themes, for example `themes: ['light', 'dark', 'sap_horizon']`.
     * **defaultTheme** (mandatory) the default theme used by the application.
     * **nodeViewURLDecorator** (optional) you can add an internal Luigi View URL decorator (an example is below). This object adds a query parameter where you can add a current theme used by the application when micro-frontends are loaded.
     * **useFioriScrollbars** (optional) if set to `true`, Fiori theming variables are applied to all scrollbars in luigi core app.
     * **variables** (optional) can either be a string set to `fiori` to get all CSS variables from the `fiori` theme, or an object with a property called `file` where you can declare your own CSS variables. The variables should be defined in a JSON file which starts with a `root` key. An example of how a CSS variables file should look like can be found [here](https://github.com/SAP/theming-base-content/blob/master/content/Base/baseLib/sap_horizon/variables.json).
 - **example**:
 ```javascript
-theming : {
-    themes: () => [
-      { id: 'light', name: 'Fiori3 Light' },
-      { id: 'dark', name: 'Fiori3 Dark' }
-    ],
-    defaultTheme: 'light'
-    nodeViewURLDecorator: {
-       queryStringParameter: {
-         keyName: 'sap-theme'
-         // optional
-          value: themeId => {
-            return themeId;
-         }
-       }
-     }
+theming: {
+  themes: () => [
+    { id: 'light', name: 'Fiori3 Light' },
+    { id: 'dark', name: 'Fiori3 Dark' },
+    { id: 'sap_horizon', name: 'Morning Horizon' }
+  ],
+  defaultTheme: 'light',
+  nodeViewURLDecorator: {
+    queryStringParameter: {
+      keyName: 'sap-theme',
+      // optional
+      value: themeId => {
+        return themeId;
+      }
+    }
   }
+}
+```
+
+<!-- add-attribute:class:warning -->
+> **NOTE:** The Horizon theme stylesheet needs to be included. In the HEAD section of your application's `index.html` file, add:
+```html
+<link rel="stylesheet" href="<PATH/TO/LUIGI/PACKAGE/luigi_horizon.css" />
 ```
 
 ### webcomponentCreationInterceptor

plugins/auth/public/auth-oauth2/package.json

@@ -16,5 +16,5 @@
     "oauth2",
     "provider"
   ],
-  "version": "2.18.3"
+  "version": "2.19.0"
 }

plugins/auth/public/auth-oidc/package.json

@@ -17,5 +17,5 @@
     "openid connect",
     "provider"
   ],
-  "version": "2.18.3"
+  "version": "2.19.0"
 }