diff --git a/client/luigi-client.d.ts b/client/luigi-client.d.ts new file mode 100644 index 0000000000..75a7af3755 --- /dev/null +++ b/client/luigi-client.d.ts @@ -0,0 +1,261 @@ +// Type definitions for Luigi Client + +export as namespace LuigiClient; + +export declare interface AuthData { + accessToken?: string; + accessTokenExpirationDate?: number; + idToken?: string; + [key: string]: any; +} + +export declare interface ConfirmationModalSettings { + header?: string; + body?: string; + buttonConfirm?: string; + buttonDismiss?: string; +} + +export declare interface Context { + authData?: AuthData; + context?: { parentNavigationContext?: string[] }; + internal?: any; + nodeParams?: NodeParams; + pathParams?: PathParams; + [key: string]: any; +} + +export declare interface NodeParams { + [key: string]: string; +} + +export declare interface AlertSettings { + text?: string; + type: 'info' | 'success' | 'warning' | 'error'; + links?: { + [key: string]: { text: string; url: string }; + }; +} + +export declare interface PathParams { + [key: string]: string; +} + +export declare interface UxManager { + /** + * Adds a backdrop to block the top and side navigation. It is based on the Fundamental UI Modal, which you can use in your micro front-end to achieve the same behavior. + */ + addBackdrop: () => void; + + /** + * Removes the backdrop. + */ + removeBackdrop: () => void; + + /** + * Adds a backdrop with a loading indicator for the micro front-end frame. This overrides the {@link navigation-configuration.md#nodes loadingIndicator.enabled} setting. + */ + showLoadingIndicator: () => void; + + /** + * Removes the loading indicator. Use it after calling {@link #showLoadingIndicator showLoadingIndicator()} or to hide the indicator when you use the {@link navigation-configuration.md#nodes loadingIndicator.hideAutomatically: false} node configuration. + */ + hideLoadingIndicator: () => void; + + /** + * This method informs the main application that there are unsaved changes in the current view in the iframe. For example, that can be a view with form fields which were edited but not submitted. + * @param {boolean} isDirty indicates if there are any unsaved changes on the current page or in the component + */ + setDirtyStatus: (isDirty: boolean) => void; + + /** + * Shows an alert. + * @param {Object} settings the settings for the alert + * @param {string} settings.text the content of the alert. To add a link to the content, you have to set up the link in the `links` object. The key(s) in the `links` object must be used in the text to reference the links, wrapped in curly brackets with no spaces. If you don't specify any text, the alert is not displayed. + * @param {('info'|'success'|'warning'|'error')} settings.type sets the type of the alert + * @param {Object} settings.links provides links data + * @param {Object} settings.links.LINK_KEY object containing the data for a particular link. To properly render the link in the alert message refer to the description of the **settings.text** parameter. + * @param {string} settings.links.LINK_KEY.text text which replaces the link identifier in the alert content + * @param {string} settings.links.LINK_KEY.url url to navigate when you click the link. Currently, only internal links are supported in the form of relative or absolute paths. + * @returns {promise} which is resolved when the alert is dismissed + * @example + * import LuigiClient from '@kyma-project/luigi-client'; + * const settings = { + * text: Ut enim ad minim veniam, {goToHome} quis nostrud exercitation ullamco {relativePath} laboris nisi ut aliquip ex ea commodo consequat. + * Duis aute irure dolor {goToOtherProject}, + * type: 'info', + * links: { + * goToHome: { text: 'homepage', url: '/overview' }, + * goToOtherProject: { text: 'other project', url: '/projects/pr2' }, + * relativePath: { text: 'relative hide side nav', url: 'hideSideNav' } + * } + * } + * LuigiClient + * .uxManager() + * .showAlert(settings) + * .then(() => { + * // Logic to execute when the alert is dismissed + * }); + */ + showAlert: (settings: AlertSettings) => Promise; + + /** + * Shows a confirmation modal. + * @param {Object} settings the settings the confirmation modal. If no value is provided for any of the fields, a default value is set for it. + * @param {string} settings.header the content of the modal header + * @param {string} settings.body the content of the modal body + * @param {string} settings.buttonConfirm the label for the modal confirm button + * @param {string} settings.buttonDismiss the label for the modal dismiss button + * @returns {promise} which is resolved when accepting the confirmation modal and rejected when dismissing it. + */ + showConfirmationModal: (settings: ConfirmationModalSettings) => Promise; +} + +export declare interface LinkManager { + /** + * Sets the current navigation context which is then used by the `navigate` function. This has to be a parent navigation context, it is not possible to use the child navigation contexts. + * @returns {linkManager} link manager instance. + * @example + * LuigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders') + */ + fromClosestContext: () => this; + + /** + * Sets the current navigation context to that of a specific parent node which has the {@link navigation-configuration.md navigationContext} field declared in the navigation configuration. This navigation context is then used by the `navigate` function. + * @param {string} navigationContext + * @returns {linkManager} link manager instance. + * @example + * LuigiClient.linkManager().fromContext('project').navigate('/settings') + */ + fromContext: (navigationContext: string) => this; + + /** + * Discards the active view and navigates back to the last visited view (preserved view), if a preserved view was set before. + * @param {any} goBackValue data that is passed in the `goBackContext` field to the last visited view + * @example + * LuigiClient.linkManager().goBack({ foo: 'bar' }); + * LuigiClient.linkManager().goBack(true); + */ + goBack: (goBackValue: any) => void; + + /** + * Checks if there is one or more preserved views. You can use it to show a **back** button. + * @returns {boolean} indicating if there is a preserved view you can return to. + */ + hasBack: () => boolean; + + /** + * Navigates to the given path in the application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation. + * @param {string} path path to be navigated to + * @param {string} sessionId current Luigi **sessionId** + * @param {boolean} preserveView Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as the standard {@link #navigate navigate()} function is used instead of {@link #goBack goBack()}. + * @example + * LuigiClient.linkManager().navigate('/overview') + * LuigiClient.linkManager().navigate('users/groups/stakeholders') + * LuigiClient.linkManager().navigate('/settings', null, true) // preserve view + */ + navigate: (path: string, sessionId?: string, preserveView?: boolean) => void; + + /** + * Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally to display a DOM element like a button. + * @param {string} path path which existence you want to check + * @returns {promise} A promise which resolves to a Boolean variable specifying whether the path exists or not. + * @example + * let pathExists; + * this.luigiClient + * .linkManager() + * .pathExists('projects/pr2') + * .then( + * (pathExists) => { } + * ); + */ + pathExists: (path: string) => Promise; + + /** + * Sends node parameters to the route. The parameters are used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client. + * @param {Object} nodeParams + * @returns {linkManager} link manager instance. + * @example + * LuigiClient.linkManager.withParams({foo: "bar"}).navigate("path") + * + * // Can be chained with context setting functions such as: + * LuigiClient.linkManager.fromContext("currentTeam").withParams({foo: "bar"}).navigate("path") + */ + withParams: (nodeParams: NodeParams) => this; +} + +/** + * Registers a listener called with the context object as soon as Luigi is instantiated. Defer your application bootstrap if you depend on authentication data coming from Luigi. + * @param {function} initFn the function that is called once Luigi is initialized + * @memberof lifecycle + */ +export function addInitListener(initFn: (context: Context) => void): number; + +/** + * Removes an init listener. + * @param {string} id the id that was returned by the `addInitListener` function + * @memberof lifecycle + */ +export function removeInitListener(id: number): boolean; + +/** + * Registers a listener called with the context object upon any navigation change. + * @param {function} contextUpdatedFn the listener function called each time Luigi context changes + * @memberof lifecycle + */ +export function addContextUpdateListener( + contextUpdatedFn: (context: Context) => void +): string; + +/** + * Removes a context update listener. + * @param {string} id the id that was returned by the `addContextUpdateListener` function + * @memberof lifecycle + */ +export function removeContextUpdateListener(id: string): boolean; + +/** + * @returns {string} the authorization token + */ +export function getToken(): AuthData['accessToken']; + +/** + * Returns the context object. Typically it is not required as the {@link #addContextUpdateListener addContextUpdateListener()} receives the same values. + * @returns {Object} current context data. + * @memberof lifecycle + */ +export function getEventData(): Context; + +/** + * Returns the node parameters of the active URL. + * Node parameters are defined like URL query parameters but with a specific prefix allowing Luigi to pass them to the micro front-end view. The default prefix is **~** and you can use it in the following way: `https://my.luigi.app/home/products?~sort=asc~page=3`. + * >**NOTE:** some special characters (`<`, `>`, `"`, `'`, `/`) in node parameters are HTML-encoded. + * @returns {Object} node parameters, where the object property name is the node parameter name without the prefix, and its value is the value of the node parameter. For example `{sort: 'asc', page: 3}`. + * @memberof lifecycle + */ +export function getNodeParams(): NodeParams; + +/** + * Returns the dynamic path parameters of the active URL. + * Path parameters are defined by navigation nodes with a dynamic **pathSegment** value starting with **:**, such as **productId**. + * All path parameters in the current navigation path (as defined by the active URL) are returned. + * >**NOTE:** some special characters (`<`, `>`, `"`, `'`, `/`) in path parameters are HTML-encoded. + * @returns {Object} path parameters, where the object property name is the path parameter name without the prefix, and its value is the actual value of the path parameter. For example ` {productId: 1234, ...}`. + * @memberof lifecycle + */ +export function getPathParams(): PathParams; + +/** + * The Link Manager allows you to navigate to another route. Use it instead of an internal router to: + - Route inside micro front-ends. + - Reflect the route. + - Keep the navigation state in Luigi. +*/ +/** @name linkManager */ +export function linkManager(): LinkManager; + +/** + * Use the UX Manager to manage the appearance features in Luigi. + */ +/** @name uxManager */ +export function uxManager(): UxManager; diff --git a/client/package.json b/client/package.json index 795628fdf1..5a169dc6ab 100644 --- a/client/package.json +++ b/client/package.json @@ -33,5 +33,6 @@ "documentation": "^9.1.1", "webpack": "^4.28.4", "webpack-cli": "^3.2.1" - } + }, + "types": "luigi-client.d.ts" } diff --git a/client/src/luigi-client.js b/client/src/luigi-client.js index 8fad6a5cb1..1efdc80130 100644 --- a/client/src/luigi-client.js +++ b/client/src/luigi-client.js @@ -1,4 +1,3 @@ -// actual Luigi code var luigiInitialized = false; var defaultContextKeys = ['context', 'internal', 'nodeParams', 'pathParams']; var currentContext = defaultContextKeys.reduce(function(acc, key) { @@ -276,7 +275,7 @@ const LuigiClient = { /** * Sets the current navigation context to that of a specific parent node which has the {@link navigation-configuration.md navigationContext} field declared in the navigation configuration. This navigation context is then used by the `navigate` function. - * @param {Object} navigationContext + * @param {string} navigationContext * @returns {linkManager} link manager instance. * @example * LuigiClient.linkManager().fromContext('project').navigate('/settings') diff --git a/core/examples/luigi-sample-angular/package-lock.json b/core/examples/luigi-sample-angular/package-lock.json index 4db985dcb7..f85157616a 100644 --- a/core/examples/luigi-sample-angular/package-lock.json +++ b/core/examples/luigi-sample-angular/package-lock.json @@ -43,7 +43,7 @@ }, "ajv": { "version": "6.4.0", - "resolved": "http://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=", "dev": true, "requires": { @@ -126,7 +126,7 @@ }, "ajv": { "version": "6.4.0", - "resolved": "http://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=", "dev": true, "requires": { @@ -214,7 +214,7 @@ }, "ajv": { "version": "6.4.0", - "resolved": "http://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=", "dev": true, "requires": { @@ -240,7 +240,7 @@ "dependencies": { "ajv": { "version": "6.4.0", - "resolved": "http://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=", "dev": true, "requires": { @@ -1790,7 +1790,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -1872,7 +1872,7 @@ }, "ajv": { "version": "6.4.0", - "resolved": "http://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=", "dev": true, "requires": { @@ -2458,7 +2458,7 @@ }, "ansi-escapes": { "version": "1.4.0", - "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz", "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=", "dev": true }, @@ -2620,7 +2620,7 @@ }, "util": { "version": "0.10.3", - "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=", "dev": true, "requires": { @@ -2642,7 +2642,7 @@ }, "async": { "version": "1.5.2", - "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", "dev": true }, @@ -2715,7 +2715,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -2764,7 +2764,7 @@ }, "babel-helper-is-nodes-equiv": { "version": "0.0.1", - "resolved": "http://registry.npmjs.org/babel-helper-is-nodes-equiv/-/babel-helper-is-nodes-equiv-0.0.1.tgz", + "resolved": "https://registry.npmjs.org/babel-helper-is-nodes-equiv/-/babel-helper-is-nodes-equiv-0.0.1.tgz", "integrity": "sha1-NOmzALFHnd2Y7HfqC76TQt/jloQ=", "dev": true }, @@ -3324,7 +3324,7 @@ }, "browserify-aes": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "dev": true, "requires": { @@ -3361,7 +3361,7 @@ }, "browserify-rsa": { "version": "4.0.1", - "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "dev": true, "requires": { @@ -3405,7 +3405,7 @@ }, "buffer": { "version": "4.9.1", - "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "dev": true, "requires": { @@ -3464,7 +3464,7 @@ }, "cacache": { "version": "10.0.4", - "resolved": "http://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz", "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==", "dev": true, "requires": { @@ -3527,7 +3527,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "optional": true, @@ -4246,7 +4246,7 @@ }, "create-hash": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "dev": true, "requires": { @@ -4259,7 +4259,7 @@ }, "create-hmac": { "version": "1.1.7", - "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "dev": true, "requires": { @@ -4309,7 +4309,7 @@ }, "css-select": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", "dev": true, "requires": { @@ -4704,7 +4704,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -4774,7 +4774,7 @@ }, "diffie-hellman": { "version": "5.0.3", - "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "dev": true, "requires": { @@ -5181,7 +5181,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -5528,7 +5528,7 @@ }, "file-loader": { "version": "1.1.11", - "resolved": "http://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz", "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==", "dev": true, "requires": { @@ -5565,7 +5565,7 @@ }, "finalhandler": { "version": "1.1.1", - "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", "dev": true, "requires": { @@ -6780,7 +6780,7 @@ }, "html-webpack-plugin": { "version": "3.2.0", - "resolved": "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz", + "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz", "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=", "dev": true, "requires": { @@ -6874,7 +6874,7 @@ }, "http-errors": { "version": "1.6.3", - "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "dev": true, "requires": { @@ -7796,7 +7796,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -7869,7 +7869,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -7923,7 +7923,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -7944,7 +7944,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -7957,7 +7957,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -8173,7 +8173,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, @@ -8198,7 +8198,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "optional": true, @@ -8390,7 +8390,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { @@ -8526,7 +8526,7 @@ "dependencies": { "semver": { "version": "5.3.0", - "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", "dev": true, "optional": true @@ -8624,7 +8624,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "optional": true, @@ -8877,7 +8877,7 @@ }, "onetime": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "dev": true }, @@ -8930,7 +8930,7 @@ }, "ora": { "version": "0.2.3", - "resolved": "http://registry.npmjs.org/ora/-/ora-0.2.3.tgz", + "resolved": "https://registry.npmjs.org/ora/-/ora-0.2.3.tgz", "integrity": "sha1-N1J9Igrc1Tw5tzVx11QVbV22V6Q=", "dev": true, "requires": { @@ -8948,7 +8948,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -9314,7 +9314,7 @@ }, "postcss-import": { "version": "11.1.0", - "resolved": "http://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz", "integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==", "dev": true, "requires": { @@ -9590,7 +9590,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -9620,7 +9620,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -9659,7 +9659,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -9981,7 +9981,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "requires": { "ret": "~0.1.10" @@ -10021,7 +10021,7 @@ }, "sax": { "version": "0.5.8", - "resolved": "http://registry.npmjs.org/sax/-/sax-0.5.8.tgz", + "resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz", "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=", "dev": true }, @@ -10198,7 +10198,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "dev": true, "requires": { @@ -10251,7 +10251,7 @@ }, "slice-ansi": { "version": "0.0.4", - "resolved": "http://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "dev": true }, @@ -10751,7 +10751,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" }, "strip-indent": { @@ -10851,7 +10851,7 @@ }, "tar": { "version": "2.2.1", - "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz", + "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true, "optional": true, @@ -11060,7 +11060,7 @@ }, "through": { "version": "2.3.8", - "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", "dev": true }, @@ -11360,7 +11360,7 @@ }, "typescript": { "version": "2.7.2", - "resolved": "http://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz", "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==", "dev": true }, @@ -12608,7 +12608,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "requires": { "string-width": "^1.0.1", diff --git a/core/examples/luigi-sample-angular/src/app/app.component.ts b/core/examples/luigi-sample-angular/src/app/app.component.ts index 1bbfb6f94d..b429229253 100644 --- a/core/examples/luigi-sample-angular/src/app/app.component.ts +++ b/core/examples/luigi-sample-angular/src/app/app.component.ts @@ -1,5 +1,8 @@ import { Component, ViewEncapsulation, OnInit } from '@angular/core'; -import LuigiClient from '@kyma-project/luigi-client'; +import { + addInitListener, + addContextUpdateListener +} from '@kyma-project/luigi-client'; import { LuigiContextService, ILuigiContextTypes @@ -11,18 +14,13 @@ import { encapsulation: ViewEncapsulation.None }) export class AppComponent implements OnInit { - public luigiClient: LuigiClient = LuigiClient; public title: string = 'app'; constructor(private luigiService: LuigiContextService) {} ngOnInit() { - this.luigiClient.addInitListener(context => - this.onLuigiContext('init', context) - ); - this.luigiClient.addContextUpdateListener(context => - this.onLuigiContext('update', context) - ); + addInitListener(context => this.onLuigiContext('init', context)); + addContextUpdateListener(context => this.onLuigiContext('update', context)); } private onLuigiContext(contextType: ILuigiContextTypes, context: any): void { diff --git a/core/examples/luigi-sample-angular/src/app/overview/overview.component.html b/core/examples/luigi-sample-angular/src/app/overview/overview.component.html index 8c03cedb1d..e13f83aba8 100644 --- a/core/examples/luigi-sample-angular/src/app/overview/overview.component.html +++ b/core/examples/luigi-sample-angular/src/app/overview/overview.component.html @@ -18,7 +18,7 @@

LuigiClient Features

  • {{ item.text }}  – {{ item.description }}
    • @@ -35,7 +35,7 @@

    Luigi Core Features

  • {{ item.text }}  – {{ item.description }}
    • @@ -66,7 +66,7 @@

    Luigi Core Features

    confirmation modal will appear when you navigate somewhere else diff --git a/core/examples/luigi-sample-angular/src/app/overview/overview.component.ts b/core/examples/luigi-sample-angular/src/app/overview/overview.component.ts index 1229bb6773..c46bdf9047 100644 --- a/core/examples/luigi-sample-angular/src/app/overview/overview.component.ts +++ b/core/examples/luigi-sample-angular/src/app/overview/overview.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import LuigiClient from '@kyma-project/luigi-client'; +import { linkManager, uxManager } from '@kyma-project/luigi-client'; @Component({ selector: 'app-overview', @@ -7,7 +7,8 @@ import LuigiClient from '@kyma-project/luigi-client'; styleUrls: ['./overview.component.css'] }) export class OverviewComponent { - public luigiClient: LuigiClient = LuigiClient; + public linkManager = linkManager; + public luigiClientLinks: any[] = [ { link: '/projects/pr1', @@ -60,6 +61,6 @@ export class OverviewComponent { public isDirty = false; public sendDirtyEvent = () => { - LuigiClient.uxManager().setDirtyStatus(this.isDirty); + uxManager().setDirtyStatus(this.isDirty); }; } diff --git a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.html b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.html index 09bdaa3ecd..46accc1af2 100644 --- a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.html +++ b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.html @@ -1,34 +1,41 @@
    -

    {{nodeLabel}}

    -
    -
    - {{nodeLabel}} content. +

    {{ nodeLabel }}

    +
    {{ nodeLabel }} content.
      -
    • -   {{link}} -
      • -
    +
  • +   {{ link }} +
    • +
    -
    -

    LuigiClient hasBack/GoBack:

    +
    +

    LuigiClient hasBack/GoBack:

    - +

    - to go back to your preserved view. + to go + back to your preserved view.

    diff --git a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts index 3bc5bafef6..d6f168e5c6 100644 --- a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts +++ b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts @@ -1,6 +1,12 @@ import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs'; -import LuigiClient from '@kyma-project/luigi-client'; +import { + getPathParams, + getNodeParams, + linkManager, + PathParams, + NodeParams +} from '@kyma-project/luigi-client'; import { LuigiContextService, IContextMessage @@ -13,12 +19,12 @@ import { toTitleCase } from '../../services/helpers'; styleUrls: ['./dynamic.component.css'] }) export class DynamicComponent implements OnInit, OnDestroy { - public luigiClient: LuigiClient = LuigiClient; - public pathParams: { [key: string]: string }; + public linkManager = linkManager; + public pathParams: PathParams; public nodeLabel: string; public links: string[]; public hasBack: boolean; - public nodeParams: any = null; + public nodeParams: NodeParams = null; public callbackValue = 'default value'; private lcSubscription: Subscription; @@ -38,20 +44,16 @@ export class DynamicComponent implements OnInit, OnDestroy { return; } - const lastPathParam = Object.values( - LuigiClient.getPathParams() || {} - ).pop(); + const lastPathParam = Object.values(getPathParams() || {}).pop(); // We can directly access our specified context values here this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam); this.links = ctx.context.links; // preserveView and node params - this.hasBack = LuigiClient.linkManager().hasBack(); + this.hasBack = linkManager().hasBack(); this.nodeParams = - Object.keys(LuigiClient.getNodeParams()).length > 0 - ? LuigiClient.getNodeParams() - : null; + Object.keys(getNodeParams()).length > 0 ? getNodeParams() : null; if (!this.cdr['destroyed']) { this.cdr.detectChanges(); @@ -75,6 +77,6 @@ export class DynamicComponent implements OnInit, OnDestroy { public goBack() { // going back with some sample callback context, // that will be handed over to previous view - this.luigiClient.linkManager().goBack(this.callbackValue); + linkManager().goBack(this.callbackValue); } } diff --git a/core/examples/luigi-sample-angular/src/app/project/modal/modal.component.ts b/core/examples/luigi-sample-angular/src/app/project/modal/modal.component.ts index 0bb56c7f21..9f3788336c 100644 --- a/core/examples/luigi-sample-angular/src/app/project/modal/modal.component.ts +++ b/core/examples/luigi-sample-angular/src/app/project/modal/modal.component.ts @@ -7,7 +7,7 @@ import { SimpleChanges } from '@angular/core'; -import LuigiClient from '@kyma-project/luigi-client'; +import { uxManager } from '@kyma-project/luigi-client'; @Component({ selector: 'app-modal', @@ -17,10 +17,8 @@ import LuigiClient from '@kyma-project/luigi-client'; export class ModalComponent implements OnChanges { @Input() public modalActive: boolean; @Output() private modalClosed: EventEmitter; - private luigiClient: LuigiClient; public constructor() { - this.luigiClient = LuigiClient; this.modalClosed = new EventEmitter(); } @@ -31,11 +29,11 @@ export class ModalComponent implements OnChanges { } private openModal() { - this.luigiClient.uxManager().addBackdrop(); + uxManager().addBackdrop(); } public onCloseModalClick() { this.modalClosed.emit(); - this.luigiClient.uxManager().removeBackdrop(); + uxManager().removeBackdrop(); } } diff --git a/core/examples/luigi-sample-angular/src/app/project/project.component.html b/core/examples/luigi-sample-angular/src/app/project/project.component.html index d2eac8c2fc..46c5180910 100644 --- a/core/examples/luigi-sample-angular/src/app/project/project.component.html +++ b/core/examples/luigi-sample-angular/src/app/project/project.component.html @@ -9,11 +9,9 @@

    LuigiClient uxManager methods

    Add backdrop

    + -

    @@ -28,7 +26,7 @@

    LuigiClient uxManager methods

    LuigiClient uxManager methods

    LuigiClient uxManager methods modal will appear when you navigate somewhere else @@ -174,31 +172,28 @@

    LuigiClient linkManager methods

  • absolute: to overview
  • relative: to stakeholders
  • LuigiClient linkManager methods closest parent: to stakeholders
  • LuigiClient linkManager methods parent by name: project to settings
  • LuigiClient linkManager methods project to settings with params (foo=bar)
  • LuigiClient linkManager methods > (look at the console)
  • with preserved view: project to global settings and back
  • LuigiClient linkManager methods settings and back
    • @@ -295,9 +284,7 @@

    LuigiClient linkManager methods

    Check if path exists

    LuigiClient linkManager methods Partly wrong link
  • Totally wrong link
    • diff --git a/core/examples/luigi-sample-angular/src/app/project/project.component.ts b/core/examples/luigi-sample-angular/src/app/project/project.component.ts index f7a57f617d..98ca187376 100644 --- a/core/examples/luigi-sample-angular/src/app/project/project.component.ts +++ b/core/examples/luigi-sample-angular/src/app/project/project.component.ts @@ -8,7 +8,12 @@ import { import { ActivatedRoute, Params } from '@angular/router'; import { Subscription } from 'rxjs'; -import LuigiClient from '@kyma-project/luigi-client'; +import { + linkManager, + uxManager, + addContextUpdateListener, + removeContextUpdateListener +} from '@kyma-project/luigi-client'; import { IContextMessage, LuigiContextService @@ -22,8 +27,9 @@ import { NgForm } from '@angular/forms'; }) export class ProjectComponent implements OnInit, OnDestroy { @ViewChild('luigiAlertForm') luigiAlertForm: NgForm; + public linkManager = linkManager; + public uxManager = uxManager; public projectId: string; - public luigiClient: LuigiClient; public modalActive = false; public preservedViewCallbackContext: any; private lcSubscription: Subscription; @@ -50,9 +56,7 @@ export class ProjectComponent implements OnInit, OnDestroy { this.lcSubscription.unsubscribe(); } if (this.cudListener) { - const removed = this.luigiClient.removeContextUpdateListener( - this.cudListener - ); + const removed = removeContextUpdateListener(this.cudListener); } } @@ -79,11 +83,9 @@ export class ProjectComponent implements OnInit, OnDestroy { this.projectId = params['projectId']; }); - this.luigiClient = LuigiClient; - // Decentralized approach, using LuigiClient listeners directly // - this.cudListener = LuigiClient.addContextUpdateListener(updatedContext => { + this.cudListener = addContextUpdateListener(updatedContext => { // this.projectId = updatedContext.currentProject; // this.preservedViewCallbackContext = updatedContext.goBackContext; @@ -109,8 +111,8 @@ export class ProjectComponent implements OnInit, OnDestroy { buttonConfirm: 'Confirm', buttonDismiss: 'Cancel' }; - this.luigiClient - .uxManager() + + uxManager() .showConfirmationModal(settings) .then( () => { @@ -150,8 +152,7 @@ export class ProjectComponent implements OnInit, OnDestroy { links: linkData }; - this.luigiClient - .uxManager() + uxManager() .showAlert(settings) .then(() => { this.alertDismissed = true; @@ -159,8 +160,7 @@ export class ProjectComponent implements OnInit, OnDestroy { } checkIfPathExists() { - this.luigiClient - .linkManager() + linkManager() .pathExists(this.pathExists.formValue) .then((pathExists: boolean) => { this.pathExists.result = pathExists; @@ -173,6 +173,6 @@ export class ProjectComponent implements OnInit, OnDestroy { } public sendDirtyEvent = () => { - LuigiClient.uxManager().setDirtyStatus(this.isDirty); + uxManager().setDirtyStatus(this.isDirty); }; } diff --git a/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.html b/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.html index 7e74a68231..670e5f8854 100644 --- a/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.html +++ b/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.html @@ -1,45 +1,66 @@
    Advanced: node Params and preserveView active.
    - Go to /environments/env1 with preserveView + Go to /environments/env1 with preserveView
    -
    - -
    +
    + +
    -

    Settings of {{ projectId }}

    +

    + Settings of {{ projectId }} +

    Global Settings

    - LuigiClient hasBack/GoBack:
    + LuigiClient hasBack/GoBack:

    - +

    - to go back to your preserved view. + to go + back to your preserved view.

    - No go back state available, Click here + No go back state available, + Click here to go to project two, where you can try out hasBack functionality
    diff --git a/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.ts b/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.ts index 10886e8e59..dccb9e7a22 100644 --- a/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.ts +++ b/core/examples/luigi-sample-angular/src/app/project/settings/settings.component.ts @@ -4,7 +4,12 @@ import { } from './../../services/luigi-context.service'; import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; -import LuigiClient from '@kyma-project/luigi-client'; +import { + addInitListener, + linkManager, + getNodeParams, + NodeParams +} from '@kyma-project/luigi-client'; import { Subscription } from 'rxjs'; @Component({ @@ -13,11 +18,11 @@ import { Subscription } from 'rxjs'; styleUrls: ['./settings.component.css'] }) export class SettingsComponent implements OnInit { - luigiClient: LuigiClient; + public linkManager = linkManager; projectId: string; groupId: string; hasBack: boolean; - nodeParams = null; + nodeParams: NodeParams = null; callbackValue = 'default value'; lcSubscription: Subscription; preservedViewCallbackContext: any; @@ -33,13 +38,11 @@ export class SettingsComponent implements OnInit { this.projectId = params['projectId']; this.groupId = params['groupId']; }); - this.luigiClient = LuigiClient; - LuigiClient.addInitListener(init => { - this.hasBack = LuigiClient.linkManager().hasBack(); + + addInitListener(init => { + this.hasBack = linkManager().hasBack(); this.nodeParams = - Object.keys(LuigiClient.getNodeParams()).length > 0 - ? LuigiClient.getNodeParams() - : null; + Object.keys(getNodeParams()).length > 0 ? getNodeParams() : null; if (!this.cdr['destroyed']) { this.cdr.detectChanges(); } @@ -67,6 +70,6 @@ export class SettingsComponent implements OnInit { goBack() { // going back with some sample callback context, // that will be handed over to previous view - this.luigiClient.linkManager().goBack(this.callbackValue); + linkManager().goBack(this.callbackValue); } } diff --git a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.html b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.html index d840ddb35f..5375980fe6 100644 --- a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.html +++ b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.html @@ -1,24 +1,36 @@
    -

    {{groupLabel}}

    +

    {{ groupLabel }}

    -

    This is a dynamic node with value: {{pathParams?.group}}

    - - +

    + This is a dynamic node with value: + {{ pathParams?.group }} +

    + +     Back to Groups
    -

    Navigation node configuration for dynamic node demo:

    - +}" + >
    -
    \ No newline at end of file +
    diff --git a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.ts b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.ts index 177bcdf78f..c528cbd2b8 100644 --- a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.ts +++ b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-details.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs'; -import LuigiClient from '@kyma-project/luigi-client'; +import { getPathParams, linkManager } from '@kyma-project/luigi-client'; import { LuigiContextService, @@ -14,7 +14,7 @@ import { toTitleCase } from '../../../../services/helpers'; styleUrls: ['./group-details.component.css'] }) export class GroupDetailsComponent implements OnInit, OnDestroy { - public luigiClient: LuigiClient = LuigiClient; + public linkManager = linkManager; public pathParams: { [key: string]: string }; public groupLabel: string; private lcSubscription: Subscription; @@ -32,7 +32,7 @@ export class GroupDetailsComponent implements OnInit, OnDestroy { this.groupLabel = toTitleCase(ctx.context.currentGroup); // Default way, if context is not specified in node configuration - this.pathParams = this.luigiClient.getPathParams(); + this.pathParams = getPathParams(); this.groupLabel = this.pathParams && this.pathParams.group && diff --git a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.html b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.html index 42dac90fdc..3ab0f5298f 100644 --- a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.html +++ b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.html @@ -4,10 +4,21 @@

    Group Settings

    -

    This is a child of a dynamic node with value: {{pathParams?.group}}

    - - - Back to {{groupLabel}} +

    + This is a child of a dynamic node with value: + {{ pathParams?.group }} +

    + +     + Back to + {{ groupLabel }}
    diff --git a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.ts b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.ts index eb40c3e34e..160974ae07 100644 --- a/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.ts +++ b/core/examples/luigi-sample-angular/src/app/project/users/groups/group-details/group-settings/group-settings.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; -import LuigiClient from '@kyma-project/luigi-client'; +import { getPathParams, linkManager } from '@kyma-project/luigi-client'; import { LuigiContextService, @@ -14,7 +14,7 @@ import { toTitleCase } from '../../../../../services/helpers'; styleUrls: ['./group-settings.component.css'] }) export class GroupSettingsComponent implements OnInit, OnDestroy { - public luigiClient: LuigiClient = LuigiClient; + public linkManager = linkManager; public pathParams: { [key: string]: string }; public groupLabel: string; private lcSubscription: Subscription; @@ -28,7 +28,7 @@ export class GroupSettingsComponent implements OnInit, OnDestroy { this.lcSubscription = this.luigiService .getContext() .subscribe((ctx: IContextMessage) => { - this.pathParams = this.luigiClient.getPathParams(); + this.pathParams = getPathParams(); this.groupLabel = this.pathParams && this.pathParams.group && diff --git a/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.html b/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.html index 5581f68a18..34bb63d625 100644 --- a/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.html +++ b/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.html @@ -2,27 +2,27 @@

    Groups

    -
    - Groups content. -
    +
    Groups content.
    -

    Go to dynamic child node

    - Dynamic node example: -
    Enter a custom group id and press the arrow button to navigate. -
      -
    • - -   - -
      • -
    + Dynamic node example:
    Enter a custom group id and + press the arrow button to navigate. +
      +
    • +   + +
      • +
    -
    \ No newline at end of file + diff --git a/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.ts b/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.ts index ef36676831..df9fef9590 100644 --- a/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.ts +++ b/core/examples/luigi-sample-angular/src/app/project/users/groups/groups.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import LuigiClient from '@kyma-project/luigi-client'; +import { linkManager } from '@kyma-project/luigi-client'; @Component({ selector: 'app-groups', @@ -7,7 +7,7 @@ import LuigiClient from '@kyma-project/luigi-client'; styleUrls: ['./groups.component.css'] }) export class GroupsComponent { - public luigiClient: LuigiClient = LuigiClient; + public linkManager = linkManager; public customValue: string = 'avengers'; public groupLinks: any[] = [ { diff --git a/core/examples/luigi-sample-angular/src/app/services/luigi-context.service.ts b/core/examples/luigi-sample-angular/src/app/services/luigi-context.service.ts index 11e4dae5c3..b190ac6103 100644 --- a/core/examples/luigi-sample-angular/src/app/services/luigi-context.service.ts +++ b/core/examples/luigi-sample-angular/src/app/services/luigi-context.service.ts @@ -1,10 +1,11 @@ import { Injectable } from '@angular/core'; import { Observable, ReplaySubject } from 'rxjs'; +import { Context } from '@kyma-project/luigi-client'; export type ILuigiContextTypes = 'init' | 'update'; export interface IContextMessage { contextType: ILuigiContextTypes; // will be init or update - context: any; + context: Context; } @Injectable() diff --git a/core/examples/luigi-sample-angular/tsconfig.json b/core/examples/luigi-sample-angular/tsconfig.json index cc533cb416..d00bb002b3 100644 --- a/core/examples/luigi-sample-angular/tsconfig.json +++ b/core/examples/luigi-sample-angular/tsconfig.json @@ -11,6 +11,7 @@ "typeRoots": ["node_modules/@types"], "lib": ["es2017", "dom"], "module": "es2015", - "baseUrl": "./" + "baseUrl": "./", + "allowSyntheticDefaultImports": true } } diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md index 5d20d77768..64dde6997a 100644 --- a/docs/luigi-client-api.md +++ b/docs/luigi-client-api.md @@ -103,7 +103,7 @@ Sets the current navigation context to that of a specific parent node which has #### Parameters -- `navigationContext` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** +- `navigationContext` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** #### Examples