Merge branch 'feature-user-settings' into core-api-user-settings

* feature-user-settings:
  add blog post (SAP#1731)
  Release v1.6.0 (SAP#1729)
  cm fix (SAP#1727)
  Profile setting dialog (SAP#1710)
  Added state info to replacestate (SAP#1725)
  Simple storage api for micro frontends#1696 (SAP#1707)
  Fix broken angular link (SAP#1717)
  Fix css issue for Iframe (SAP#1716)

# Conflicts:
#	test/e2e-test-application/src/luigi-config/extended/settings.js

CHANGELOG.md

@@ -25,6 +25,22 @@ The lerna-changelog tool detects changes based on PR labels and maps them to sec
 -->
 
 
+## [v1.6.0] (2020-11-25)
+
+#### :rocket: Added
+* [#1707](https://github.com/SAP/luigi/pull/1707) Simple storage api for micro frontends ([@legteodav](https://github.com/legteodav))
+* [#1704](https://github.com/SAP/luigi/pull/1704) Add openNodeInModal attribute to Profile section of the documentation ([@UlianaMunich](https://github.com/UlianaMunich))
+* [#1659](https://github.com/SAP/luigi/pull/1659) Add drawer component ([@JohannesDoberer](https://github.com/JohannesDoberer))
+
+#### :bug: Fixed
+* [#1716](https://github.com/SAP/luigi/pull/1716) Remove default outline for iframeContainer ([@legteodav](https://github.com/legteodav))
+* [#1689](https://github.com/SAP/luigi/pull/1689) Safari bug with shellbar dropdowns blue outlie ([@UlianaMunich](https://github.com/UlianaMunich))
+
+
+
+
+
+
 ## [v1.5.0] (2020-10-28)
 
 #### :rocket: Added
@@ -874,4 +890,5 @@ The lerna-changelog tool detects changes based on PR labels and maps them to sec
 
 [v1.3.1]: https://github.com/SAP/luigi/compare/v1.3.0...v1.3.1
 [v1.4.0]: https://github.com/SAP/luigi/compare/v1.3.1...v1.4.0
-[v1.5.0]: https://github.com/SAP/luigi/compare/v1.4.0...v1.5.0
+[v1.5.0]: https://github.com/SAP/luigi/compare/v1.4.0...v1.5.0
+[v1.6.0]: https://github.com/SAP/luigi/compare/v1.5.0...v1.6.0

blog/2020-11-25-release-notes.md

@@ -0,0 +1,22 @@
+---
+title: Luigi v1.6.0
+seoMetaDescription: Release notes for Luigi v1.6.0
+author:
+  - Aleksandra Simeonova
+layout: blog
+---
+
+Luigi 1.6.0 is our latest release offering new features related to the Luigi APIs. New functions for local storage can help developers create more efficient applications. A new drawer component was also added. To learn more, read the release notes below.
+<!-- Excerpt -->
+
+#### Storage API for micro frontends
+
+In Luigi 1.6.0, we implemented a few API functions that will enable the use of local storage with Luigi Core and Luigi Client. The Client can send storage messages which are received by the Core. This means different micro frontends can now share or persist items using the browser's local storage. To learn more, read the [documentation](https://docs.luigi-project.io/docs/luigi-client-api/?section=storagemanager).
+
+#### Drawer component
+
+It is now possible to open a micro frontend in a drawer. This feature can be implemented using the Luigi APIs. The drawer size, backdrop, and header can be configured by the developer using simple parameters. You can find the corresponding functions in our documentation for the [Luigi Core](https://docs.luigi-project.io/docs/luigi-core-api/?section=openasdrawer) and [Luigi Client](https://docs.luigi-project.io/docs/luigi-client-api/?section=openasdrawer).
+
+#### Bugfixes
+
+For a full list of bugfixes in this release, see our [changelog](https://github.com/SAP/luigi/blob/master/CHANGELOG.md).

client/.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": ["@babel/preset-env"],
   "plugins": [
-    "@babel/plugin-proposal-optional-chaining"
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-transform-runtime"
   ]
 }

client/luigi-client.d.ts

@@ -48,7 +48,7 @@ export declare interface SplitViewInstance {
 export declare interface DrawerSettings {
   header?: any;
   size?: 'l' | 'm' | 's' | 'xs';
-  backdrop?: boolean
+  backdrop?: boolean;
 }
 
 export declare interface Context {
@@ -371,7 +371,7 @@ export declare interface LinkManager {
    * @param {any} drawerSettings.header By default, the header is visible. Title is node label and 'x' is displayed to close the drawer view. The header could also be an object with a `title` attribute to specify an own title for the drawer component.
    * @param {boolean} drawerSettings.backdrop By default, it is set to `false`. If it is set to `true` the rest of the screen has a backdrop.
    * @param {('l'|'m'|'s'|'xs')} [drawerSettings.size="s"] size of the drawer
-   * @since NEXTRELEASE
+   * @since 1.6.0
    * @example
    * LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:true, backdrop:true, size:'s'});
    * LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:{title:'My drawer component'}, backdrop:true, size:'xs'});
@@ -390,6 +390,73 @@ export declare interface LinkManager {
   withoutSync: () => this;
 }
 
+export declare interface StorageManager {
+  /**
+   * Store an item for a specific key.
+   * @memberof storageManager
+   * @param {string} key: used to identify the item
+   * @param {Object} value: item to be stored; object must be stringifyable
+   * @returns {Promise<void>} resolves an empty value when storage operation is over; it will launch an error if storage is no supported, value cannot be stringify or you are using a luigi reserved key
+   * @example
+   * LuigiClient.storageManager().setItem('keyExample','valueExample').then(() => console.log('Value stored'))
+   * @since 1.6.0
+   */
+  setItem: (key: string, value: Object) => Promise<void>;
+
+  /**
+   * Retrieve an item for a specific key.
+   * @memberof storageManager
+   * @param {string} key: used to identify the item
+   * @returns {Promise<Object>} resolves item retrieved from storage; it will launch an error if storage is no supported
+   * @since 1.6.0
+   * @example
+   * LuigiClient.storageManager().getItem('keyExample').then((value) => console.log);
+   */
+  getItem: (key: string) => Promise<Object>;
+
+  /**
+   * Remove an item for a specific key.
+   * @memberof storageManager
+   * @param {string} key: used to identify the item
+   * @returns {Promise<Object>} resolves item just removed from storage; it will launch an error if storage is no supported or you are using a luigi reserved key
+   * @since 1.6.0
+   * @example
+   * LuigiClient.storageManager().removeItem('keyExample').then((value) => console.log(value + ' just removed')
+   */
+  removeItem: (key: string) => Promise<Object>;
+
+  /**
+   * Clear all the storage key/values
+   * @memberof storageManager
+   * @returns {Promise<void>} resolves when storage clear is over
+   * @since 1.6.0
+   * @example
+   * LuigiClient.storageManager().clear().then(() => console.log('storage cleared'))
+   */
+  clear: () => Promise<void>;
+
+  /**
+   * Check if a key is present in storage
+   * @memberof storageManager
+   * @param {string} key: used to identify the item
+   * @returns {Promise<boolean>} true if key is present, false if is not
+   * @since 1.6.0
+   * @example
+   * LuigiClient.storageManager().has(key).then((present) => console.log('element is present: '+present));
+   */
+  has: (key: string) => boolean;
+
+  /**
+   * Retrieve all the keys used in the storage
+   * @memberof storageManager
+   * @returns {Promise<string[]>} keys currently present in the storage
+   * @since 1.6.0
+   * @example
+   * LuigiClient.storageManager().getAllKeys().then((keys) => console.log('keys are : '+keys));
+   */
+  getAllKeys: () => Array<String>;
+}
+
 /**
  * Registers a listener called with the context object and the Luigi Core domain as soon as Luigi is instantiated. Defer your application bootstrap if you depend on authentication data coming from Luigi.
  * @param {Lifecycle~initListenerCallback} initFn the function that is called once Luigi is initialized, receives current context and origin as parameters
@@ -591,3 +658,11 @@ export type linkManager = () => LinkManager;
  */
 export function uxManager(): UxManager;
 export type uxManager = () => UxManager;
+
+/**
+ * Use the StorageManager to store/load/remove items from/to local storage.
+ * @name storageManager
+ * @since 1.6.0
+ */
+export function storageManager(): StorageManager;
+export type storageManager = () => StorageManager;

client/package.json

@@ -33,8 +33,10 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-optional-chaining": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.2.3",
     "@babel/runtime": "^7.8.7",
+    "@babel/polyfill": "^7.2.3",
     "acorn": "^6.4.1",
     "babel-loader": "^8.0.5",
     "bundlesize": "^0.18.0",

client/public-ie11/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigi-project/client-ie11",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Javascript library supporting consumers of the Luigi framework",
   "license": "Apache-2.0",
   "main": "luigi-client-ie11.js",

client/public/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigi-project/client",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Javascript library supporting consumers of the Luigi framework",
   "license": "Apache-2.0",
   "main": "luigi-client.js",

client/src/helpers.js

@@ -35,6 +35,13 @@ class Helpers {
     };
   }
 
+  convertStorageMessageToInternal(message) {
+    return {
+      msg: 'storage',
+      data: message
+    };
+  }
+
   /**
    * Registers a post message listener
    * Don't forget to remove the event listener at the end of

client/src/lifecycleManager.js

@@ -82,7 +82,7 @@ class LifecycleManager extends LuigiClientBase {
       helpers.addEventListener('luigi.navigate', e => {
         setContext(e.data);
         if (!this.currentContext.internal.isNavigateBack) {
-          history.replaceState(null, '', e.data.viewUrl);
+          history.replaceState({ luigiInduced: true }, '', e.data.viewUrl);
           window.dispatchEvent(
             new PopStateEvent('popstate', { state: 'luiginavigation' })
           );

client/src/linkManager.js

@@ -53,7 +53,14 @@ export class linkManager extends LuigiClientBase {
    * LuigiClient.linkManager().navigate('/settings', null, true) // preserve view
    * LuigiClient.linkManager().navigate('#?Intent=Sales-order?id=13') // intent navigation
    */
-  navigate(path, sessionId, preserveView, modalSettings, splitViewSettings, drawerSettings) {
+  navigate(
+    path,
+    sessionId,
+    preserveView,
+    modalSettings,
+    splitViewSettings,
+    drawerSettings
+  ) {
     if (this.options.errorSkipNavigation) {
       this.options.errorSkipNavigation = false;
       return;
@@ -116,18 +123,18 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
-     * Opens a view in a drawer. You can specify the size of the drawer, whether the drawer has a header, and whether a backdrop is active in the background. By default, the header is shown. The backdrop is not visible and has to be activated. The size of the drawer is set to `s` by default, which means 25% of the micro frontend size. You can also use `l`(75%), `m`(50%) or `xs`(15.5%). Optionally, use it in combination with any of the navigation functions.
-     * @memberof linkManager
-     * @param {string} path navigation path
-     * @param {Object} drawerSettings opens a view in a drawer. Use these settings to configure if the drawer has a header, backdrop and size.
-     * @param {any} drawerSettings.header By default, the header is visible. The default title is the node label, but the header could also be an object with a `title` attribute allowing you to specify your own title.  An 'x' icon is displayed to close the drawer view.
-     * @param {boolean} drawerSettings.backdrop By default, it is set to `false`. If it is set to `true` the rest of the screen has a backdrop.
-     * @param {('l'|'m'|'s'|'xs')} [drawerSettings.size="s"] size of the drawer
-     * @since NEXTRELEASE
-     * @example
-     * LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:true, backdrop:true, size:'s'});
-     * LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:{title:'My drawer component'}, backdrop:true, size:'xs'});
-     */
+   * Opens a view in a drawer. You can specify the size of the drawer, whether the drawer has a header, and whether a backdrop is active in the background. By default, the header is shown. The backdrop is not visible and has to be activated. The size of the drawer is set to `s` by default, which means 25% of the micro frontend size. You can also use `l`(75%), `m`(50%) or `xs`(15.5%). Optionally, use it in combination with any of the navigation functions.
+   * @memberof linkManager
+   * @param {string} path navigation path
+   * @param {Object} drawerSettings opens a view in a drawer. Use these settings to configure if the drawer has a header, backdrop and size.
+   * @param {any} drawerSettings.header By default, the header is visible. The default title is the node label, but the header could also be an object with a `title` attribute allowing you to specify your own title.  An 'x' icon is displayed to close the drawer view.
+   * @param {boolean} drawerSettings.backdrop By default, it is set to `false`. If it is set to `true` the rest of the screen has a backdrop.
+   * @param {('l'|'m'|'s'|'xs')} [drawerSettings.size="s"] size of the drawer
+   * @since 1.6.0
+   * @example
+   * LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:true, backdrop:true, size:'s'});
+   * LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:{title:'My drawer component'}, backdrop:true, size:'xs'});
+   */
   openAsDrawer(path, drawerSettings = {}) {
     this.navigate(path, 0, true, undefined, undefined, drawerSettings);
   }
@@ -152,8 +159,8 @@ export class linkManager extends LuigiClientBase {
       this.options.errorSkipNavigation = true;
       console.error(
         'Navigation not possible, navigationContext ' +
-        navigationContext +
-        ' not found.'
+          navigationContext +
+          ' not found.'
       );
     }
     return this;
@@ -245,8 +252,8 @@ export class linkManager extends LuigiClientBase {
     const currentId = Date.now();
     const pathExistsPromises = this.getPromise('pathExistsPromises') || {};
     pathExistsPromises[currentId] = {
-      resolveFn: function () { },
-      then: function (resolveFn) {
+      resolveFn: function() {},
+      then: function(resolveFn) {
         this.resolveFn = resolveFn;
       }
     };
@@ -255,7 +262,7 @@ export class linkManager extends LuigiClientBase {
     // register event listener, which will be cleaned up after this usage
     helpers.addEventListener(
       'luigi.navigation.pathExists.answer',
-      function (e, listenerId) {
+      function(e, listenerId) {
         const data = e.data.data;
         const pathExistsPromises = this.getPromise('pathExistsPromises') || {};
         if (pathExistsPromises[data.correlationId]) {