Align Luigi Container wc clientAPI with core (#3643)

container/rollup.config.js

@@ -35,7 +35,7 @@ function serve() {
 
 export default [
   {
-    input: 'src/main.js',
+    input: 'src/main.ts',
     output: {
       sourcemap: true,
       name: 'app',

container/src/LuigiCompoundContainer.svelte

@@ -28,6 +28,9 @@
         reflect: false,
         attribute: 'client-permissions',
       },
+      dirtyStatus: { type: 'Boolean', reflect: false, attribute: 'dirty-status'},
+      hasBack: { type: 'Boolean', reflect: false, attribute: 'has-back'},
+      documentTitle: {type: 'String', reflect: false, attribute: 'document-title'},
     },
     extend: (customElementConstructor) => {
       let notInitFn = (name) => {
@@ -67,6 +70,9 @@
   export let clientPermissions: any;
   export let userSettings: any;
   export let anchor: string;
+  export let dirtyStatus: boolean;
+  export let hasBack: boolean;
+  export let documentTitle: string;
 
   let containerInitialized = false;
   let mainComponent: HTMLElement;
@@ -83,7 +89,10 @@
       pathParams &&
       clientPermissions &&
       userSettings &&
-      anchor
+      anchor && 
+      dirtyStatus &&
+      hasBack &&
+      documentTitle
     );
   };
 

container/src/LuigiContainer.svelte

@@ -41,6 +41,9 @@
         reflect: false,
         attribute: 'client-permissions',
       },
+      dirtyStatus: { type: 'Boolean', reflect: false, attribute: 'dirty-status'},
+      hasBack: { type: 'Boolean', reflect: false, attribute: 'has-back'},
+      documentTitle: {type: 'String', reflect: false, attribute: 'document-title'},
       allowRules: {
         type: 'Array',
         reflect: false,
@@ -50,7 +53,7 @@
         type: 'Array',
         reflect: false,
         attribute: 'sandbox-rules',
-      },
+      }
     },
     extend: (customElementConstructor) => {
       let notInitFn = (name) => {
@@ -96,9 +99,13 @@
   export let searchParams: any;
   export let pathParams: any;
   export let clientPermissions: any;
+  export let dirtyStatus: boolean;
+  export let hasBack: boolean;
+  export let documentTitle: string;
   export let allowRules: string[];
   export let sandboxRules: string[];
 
+
   export let userSettings: any;
   export let anchor: string;
 
@@ -125,6 +132,9 @@
       clientPermissions &&
       userSettings &&
       anchor &&
+      dirtyStatus &&
+      hasBack &&
+      documentTitle &&
       allowRules &&
       sandboxRules
     );

container/src/constants/communication.ts

@@ -99,5 +99,53 @@ export namespace Events {
    */
   export const SET_DIRTY_STATUS_REQUEST = 'set-dirty-status-request';
 
-  // TODO: ignore auth
+ /**
+   * A message emitted from the micro frontend when a request to set the view group data
+   */
+ export const SET_VIEW_GROUP_DATA_REQUEST = 'set-viewgroup-data-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to set the document title
+   */
+  export const SET_DOCUMENT_TITLE_REQUEST = 'set-document-title-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to open user settings 
+   */
+  export const OPEN_USER_SETTINGS_REQUEST = 'open-user-settings-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to close user settings 
+   */
+  export const CLOSE_USER_SETTINGS_REQUEST = 'close-user-settings-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to collapse left side navigation
+   */
+  export const COLLAPSE_LEFT_NAV_REQUEST = 'collapse-leftnav-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to remove the backdrop
+   */
+  export const UPDATE_TOP_NAVIGATION_REQUEST = 'update-top-navigation-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to remove the backdrop
+   */
+  export const PATH_EXISTS_REQUEST = 'path-exists-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to remove the backdrop
+   */
+  export const GO_BACK_REQUEST = 'go-back-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to remove the backdrop
+   */
+  export const HAS_BACK_REQUEST = 'has-back-request';
+
+  /**
+   * A message emitted from the micro frontend when a request to remove the backdrop
+   */
+  export const REMOVE_BACKDROP_REQUEST = 'remove-backdrop-request';
 }

container/src/constants/event-type.ts

@@ -1,2 +1,17 @@
 // TODO: Add and extend event to inclide custom typings/interface to make it easier to use on the listener parameter
 export interface ParamsEvent extends Event {}
+
+/**
+ * PathExistsEvent interface is used to make it easier to use the linkManager().pathExists() promise based function
+ * on the core application side.
+ * It enforces the use of the callback function, since the latter is hardcoded to be 'callback'. 
+ * This allows to send back the boolean value if the path exists or not.
+ * Example Usage: 
+ * addEventListener('my-event-id' event: PathExistsEvent => {
+ *      event.callback(true);
+ *   }
+ * };
+ */
+export interface PathExistsEvent extends Event {
+    callback: (value: boolean) => void; 
+}

container/src/global.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+// This file is needed to avoid Typescript warnings about Svele Components being imported to main.ts

container/src/main.js → container/src/main.ts

@@ -3,12 +3,14 @@ import LuigiCompoundContainer from './LuigiCompoundContainer.svelte';
 import { Events } from './constants/communication';
 export { default as LuigiContainer } from './LuigiContainer.svelte';
 export { default as LuigiCompoundContainer } from './LuigiCompoundContainer.svelte';
+export type { PathExistsEvent } from './constants/event-type';
+
 export default Events;
 
 if (!customElements.get('luigi-container')) {
-  customElements.define('luigi-container', LuigiContainer.element);
+  customElements.define('luigi-container', (LuigiContainer as any).element);
 }
 
 if (!customElements.get('luigi-compound-container')) {
-  customElements.define('luigi-compound-container', LuigiCompoundContainer.element);
+  customElements.define('luigi-compound-container', (LuigiCompoundContainer as any).element);
 }

container/src/services/webcomponents.service.ts

@@ -77,6 +77,8 @@ export class WebComponentService {
    * This function is used to create the Luigi Client API for the web-component-based micro frontend.
    * As the function expands with more functionality, it might be moved to a separate class.
    * 
+   * The client API here should be a reflection of the Core WC Client api from core/src/services/web-components.js
+   * 
    * @param eventBusElement the event bus to be used for cross web component communication, i.e.: for compound micro frontends container scenario
    * @param nodeId refers to an attribute of the web component to be identified from the rest
    * @param wc_id a tagname that is used when creating the web component element
@@ -87,11 +89,63 @@ export class WebComponentService {
   createClientAPI(eventBusElement, nodeId: string, wc_id: string, component: HTMLElement, isCompoundChild?: boolean) {
     return {
       linkManager: () => {
-        return {
-          navigate: route => {
-            this.dispatchLuigiEvent(Events.NAVIGATION_REQUEST, { link: route });
-          }
+        let fromContext = null;
+        let fromClosestContext = false;
+        let fromVirtualTreeRoot = false;
+        let nodeParams = {};
+
+        const linkManagerInstance = {
+          navigate: (route , settings = {})=> {
+            const options = { fromContext, fromClosestContext, fromVirtualTreeRoot, nodeParams, ...settings };
+            this.dispatchLuigiEvent(Events.NAVIGATION_REQUEST, { link: route , ...options});
+          },
+          fromClosestContext: () => {
+            fromClosestContext = true;
+            return linkManagerInstance;
+          },
+          fromContext: (navigationContext) => {
+            fromContext = navigationContext;
+            return linkManagerInstance;
+          },
+          fromVirtualTreeRoot: () => {
+            fromVirtualTreeRoot = true;
+            return linkManagerInstance;
+          },         
+          withParams: (params) => {
+            nodeParams = params;
+            return linkManagerInstance;
+          },
+          updateTopNavigation: (): void => {
+            this.dispatchLuigiEvent(Events.UPDATE_TOP_NAVIGATION_REQUEST, {});
+          },
+          pathExists: () => {
+            return new Promise((resolve, reject) => {
+              this.containerService.dispatch(Events.PATH_EXISTS_REQUEST, this.thisComponent, {}, (exists)=>{
+              if (exists) {
+                  resolve(true)
+                }  else {
+                  reject(false);
+                }
+              }, 'callback');
+            })
+          },          
+          openAsDrawer: (route, drawerSettings = {}) => {
+            linkManagerInstance.navigate(route, {drawer: drawerSettings})
+          },
+          openAsModal: (route, modalSettings = {}) => {
+            linkManagerInstance.navigate(route, {modal: modalSettings})
+          },
+          openAsSplitView: (route, splitViewSettings = {}) => {
+            linkManagerInstance.navigate(route, {splitView: splitViewSettings})
+          },          
+          goBack: (goBackContext) => {
+            this.dispatchLuigiEvent(Events.GO_BACK_REQUEST, goBackContext);
+          },
+          hasBack: () => {
+            return false;
+          }, 
         };
+        return linkManagerInstance;
       },
       uxManager: () => {
         return {
@@ -111,7 +165,31 @@ export class WebComponentService {
           },
           getCurrentTheme: () : string | undefined  => {
             return this.thisComponent.theme;
-          }
+          },
+          closeUserSettings: () => {
+            this.dispatchLuigiEvent(Events.CLOSE_USER_SETTINGS_REQUEST, this.thisComponent.userSettings);
+          },          
+          openUserSettings: () => {
+            this.dispatchLuigiEvent(Events.OPEN_USER_SETTINGS_REQUEST, this.thisComponent.userSettings);
+          },
+          collapseLeftSideNav:() => {
+            this.dispatchLuigiEvent(Events.COLLAPSE_LEFT_NAV_REQUEST, {});
+          },
+          getDirtyStatus: () => {
+            return this.thisComponent.dirtyStatus || false;
+          },
+          getDocumentTitle: () => {
+            return this.thisComponent.documentTitle;
+          },
+          setDocumentTitle: (title) => {
+            this.dispatchLuigiEvent(Events.SET_DOCUMENT_TITLE_REQUEST, title);
+          },
+          removeBackdrop:() => {
+            this.dispatchLuigiEvent(Events.REMOVE_BACKDROP_REQUEST, {});
+          },
+          hideAppLoadingIndicator:() => {
+            this.dispatchLuigiEvent(Events.HIDE_LOADING_INDICATOR_REQUEST, {});
+          },
         };
       },
       getCurrentLocale: () : string | undefined =>  {
@@ -173,6 +251,9 @@ export class WebComponentService {
       },
       getUserSettings: (): Object => {
         return this.thisComponent.userSettings || {};
+      },
+      setViewGroupData: (data) => {
+        this.dispatchLuigiEvent(Events.SET_VIEW_GROUP_DATA_REQUEST, data);
       }
     };
   }