From ae131b39299bbf839675163af38846ca2e395019 Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Wed, 18 Sep 2024 18:35:21 +0200 Subject: [PATCH 1/4] Add changes --- client/src/lifecycleManager.js | 2 +- client/src/linkManager.js | 8 ++------ client/src/uxManager.js | 6 ------ core/src/core-api/navigation.js | 1 + docs/luigi-client-api.md | 28 ++++------------------------ docs/luigi-core-api.md | 2 ++ website/docs/src/app.html | 19 +++++++++++++++++++ 7 files changed, 29 insertions(+), 37 deletions(-) diff --git a/client/src/lifecycleManager.js b/client/src/lifecycleManager.js index ed62c0e1cd..b5fab27275 100644 --- a/client/src/lifecycleManager.js +++ b/client/src/lifecycleManager.js @@ -458,6 +458,7 @@ class LifecycleManager extends LuigiClientBase { } /** + * * Read search query parameters which are sent from Luigi Core * @memberof Lifecycle * @returns Core search query parameters @@ -469,7 +470,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Sends search query parameters to Luigi Core. The search parameters will be added to the URL if they are first allowed on a node level using {@link navigation-parameters-reference.md#clientpermissionsurlparameters clientPermissions.urlParameters}. * @param {Object} searchParams diff --git a/client/src/linkManager.js b/client/src/linkManager.js index 89f84b2f57..225240a72e 100644 --- a/client/src/linkManager.js +++ b/client/src/linkManager.js @@ -97,7 +97,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Updates path of the modalPathParam when internal navigation occurs. * @memberof linkManager * @param {string} path @@ -195,8 +194,7 @@ export class linkManager extends LuigiClientBase { return modalPromise.promise; } - /** - * + /** * Updates the current title and size of a modal. If `routing.showModalPathInUrl` is set to `true`, the URL will be updated with the modal settings data. * In addition, you can specify if a new history entry will be created with the updated URL. * @memberof linkManager @@ -280,6 +278,7 @@ export class linkManager extends LuigiClientBase { } /** + * * 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. * @memberof linkManager * @returns {linkManager} link manager instance @@ -347,7 +346,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Sets options to customise route changing behaviour. 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. * @memberof linkManager * @param {Object} options navigation options @@ -458,7 +456,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Disables the navigation handling for a single navigation request. * It prevents Luigi Core from handling the URL change after `navigate()`. * Used for auto-navigation. @@ -484,7 +481,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Keeps the URL's query parameters for a navigation request. * @param {boolean} preserve By default, it is set to `false`. If it is set to `true`, the URL's query parameters will be kept after navigation. * @since 1.19.0 diff --git a/client/src/uxManager.js b/client/src/uxManager.js index e4bb677745..562637935b 100644 --- a/client/src/uxManager.js +++ b/client/src/uxManager.js @@ -19,7 +19,6 @@ class UxManager extends LuigiClientBase { } /** - * * Adds a backdrop with a loading indicator for the micro frontend frame. This overrides the {@link navigation-parameters-reference.md#node-parameters loadingIndicator.enabled} setting. * @memberof uxManager */ @@ -28,7 +27,6 @@ class UxManager extends LuigiClientBase { } /** - * * Removes the loading indicator. Use it after calling {@link #showLoadingIndicator showLoadingIndicator()} or to hide the indicator when you use the {@link navigation-parameters-reference.md#node-parameters loadingIndicator.hideAutomatically: false} node configuration. * @memberof uxManager */ @@ -37,7 +35,6 @@ class UxManager extends LuigiClientBase { } /** - * * Closes the currently opened micro frontend modal. * @memberof uxManager */ @@ -46,7 +43,6 @@ class UxManager extends LuigiClientBase { } /** - * * 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 frontend to achieve the same behavior. * @memberof uxManager */ @@ -55,7 +51,6 @@ class UxManager extends LuigiClientBase { } /** - * * Removes the backdrop. * @memberof uxManager */ @@ -64,7 +59,6 @@ class UxManager extends LuigiClientBase { } /** - * * This method informs the main application that there are unsaved changes in the current view in the iframe. It can be used to prevent navigation away from the current view, for example with form fields which were edited but not submitted. However, this functionality is not restricted to forms. If you use `withoutSync()` together with `setDirtyStatus()`, this is a special case in which the dirty state logic needs to be handled by the micro frontend. For example, if the user navigates with an Angular router, which would trigger `withoutSync()`, Angular needs to take care about dirty state, prevent the navigation and ask for permission to navigate away, through `uxManager().showConfirmationModal(settings)`. * @param {boolean} isDirty indicates if there are any unsaved changes on the current page or in the component * @memberof uxManager diff --git a/core/src/core-api/navigation.js b/core/src/core-api/navigation.js index 23b7e75952..c9aaabb126 100644 --- a/core/src/core-api/navigation.js +++ b/core/src/core-api/navigation.js @@ -9,6 +9,7 @@ class LuigiNavigationManager { constructor() {} /** + * * Refreshes top navigation badge counters by rendering the navigation again. * @memberof LuigiNavigation diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md index 0b337fd393..e8939c8941 100644 --- a/docs/luigi-client-api.md +++ b/docs/luigi-client-api.md @@ -307,6 +307,8 @@ Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/G #### getCoreSearchParams + + Read search query parameters which are sent from Luigi Core ##### Examples @@ -319,8 +321,6 @@ Returns **any** Core search query parameters #### addCoreSearchParams - - Sends search query parameters to Luigi Core. The search parameters will be added to the URL if they are first allowed on a node level using [clientPermissions.urlParameters](navigation-parameters-reference.md#clientpermissionsurlparameters). ##### Parameters @@ -524,8 +524,6 @@ LuigiClient.linkManager().navigateToIntent('Sales-settings') #### withoutSync - - Disables the navigation handling for a single navigation request. It prevents Luigi Core from handling the URL change after `navigate()`. Used for auto-navigation. @@ -557,8 +555,6 @@ LuigiClient.linkManager().newTab().navigate('/projects/xy/foobar'); #### preserveQueryParams - - Keeps the URL's query parameters for a navigation request. ##### Parameters @@ -637,8 +633,6 @@ LuigiClient.linkManager().navigate('#?Intent=Sales-order?id=13') // intent navig #### updateModalPathInternalNavigation - - Updates path of the modalPathParam when internal navigation occurs. ##### Parameters @@ -688,8 +682,6 @@ Returns **[promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/ #### updateModalSettings - - Updates the current title and size of a modal. If `routing.showModalPathInUrl` is set to `true`, the URL will be updated with the modal settings data. In addition, you can specify if a new history entry will be created with the updated URL. @@ -785,6 +777,8 @@ Returns **[linkManager](#linkmanager)** link manager instance #### fromClosestContext + + 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. ##### Examples @@ -854,8 +848,6 @@ Returns **[linkManager](#linkmanager)** link manager instance #### withOptions - - Sets options to customise route changing behaviour. 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. ##### Parameters @@ -1113,38 +1105,26 @@ Use the UX Manager to manage the appearance features in Luigi. #### showLoadingIndicator - - Adds a backdrop with a loading indicator for the micro frontend frame. This overrides the [loadingIndicator.enabled](navigation-parameters-reference.md#node-parameters) setting. #### hideLoadingIndicator - - Removes the loading indicator. Use it after calling [showLoadingIndicator()](#showLoadingIndicator) or to hide the indicator when you use the [loadingIndicator.hideAutomatically: false](navigation-parameters-reference.md#node-parameters) node configuration. #### closeCurrentModal - - Closes the currently opened micro frontend modal. #### addBackdrop - - 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 frontend to achieve the same behavior. #### removeBackdrop - - Removes the backdrop. #### setDirtyStatus - - This method informs the main application that there are unsaved changes in the current view in the iframe. It can be used to prevent navigation away from the current view, for example with form fields which were edited but not submitted. However, this functionality is not restricted to forms. If you use `withoutSync()` together with `setDirtyStatus()`, this is a special case in which the dirty state logic needs to be handled by the micro frontend. For example, if the user navigates with an Angular router, which would trigger `withoutSync()`, Angular needs to take care about dirty state, prevent the navigation and ask for permission to navigate away, through `uxManager().showConfirmationModal(settings)`. ##### Parameters diff --git a/docs/luigi-core-api.md b/docs/luigi-core-api.md index facdbae0ad..d91dd27a76 100644 --- a/docs/luigi-core-api.md +++ b/docs/luigi-core-api.md @@ -547,6 +547,8 @@ Use these functions for navigation-related features. #### updateTopNavigation + + Refreshes top navigation badge counters by rendering the navigation again. ##### Examples diff --git a/website/docs/src/app.html b/website/docs/src/app.html index a33ec15689..7a878ac444 100644 --- a/website/docs/src/app.html +++ b/website/docs/src/app.html @@ -23,6 +23,25 @@ document.body.classList.add( 'page-' + location.pathname.substring(location.pathname.lastIndexOf('/') + 1) ); + + // Modify WC API docu labels manually for added clarity thorugh title attribute + document.addEventListener('DOMContentLoaded', function() { + var allLabels = document.querySelectorAll('.label-success'); + + allLabels.forEach(label => { + if (label.innerHTML === 'Web Component API') { + label.setAttribute( + 'title', + 'This API function is available for Web Component based Microfrontend also.' + ); + } else if (label.innerHTML === 'Web Component API ONLY') { + label.setAttribute( + 'title', + 'This API function is ONLY available for Web Component based Microfrontend.' + ); + } + }); + }); From f11a4caa6d0720dd2f8c6fc0b6174d546140525a Mon Sep 17 00:00:00 2001 From: Ndricim Rrapi Date: Wed, 18 Sep 2024 18:50:21 +0200 Subject: [PATCH 2/4] Add negative labels --- client/src/lifecycleManager.js | 13 ++--- client/src/linkManager.js | 19 ++------ client/src/uxManager.js | 15 +++--- core/src/core-api/navigation.js | 1 - docs/luigi-client-api.md | 84 +++++++++------------------------ docs/luigi-core-api.md | 2 - website/docs/src/app.html | 4 +- 7 files changed, 39 insertions(+), 99 deletions(-) diff --git a/client/src/lifecycleManager.js b/client/src/lifecycleManager.js index b5fab27275..3f6f0c2329 100644 --- a/client/src/lifecycleManager.js +++ b/client/src/lifecycleManager.js @@ -391,7 +391,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Returns a list of active feature toggles * @returns {Array} a list of feature toggle names * @memberof Lifecycle @@ -404,7 +403,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Sets node parameters in Luigi Core. The parameters will be added to the URL. * @param {Object} params * @param {boolean} keepBrowserHistory @@ -423,7 +421,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * 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 frontend view. The default prefix is **~** and you can use it in the following way: `https://my.luigi.app/home/products?~sort=asc&~page=3`. * @@ -442,7 +439,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * 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. @@ -458,7 +454,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Read search query parameters which are sent from Luigi Core * @memberof Lifecycle * @returns Core search query parameters @@ -470,6 +465,7 @@ class LifecycleManager extends LuigiClientBase { } /** + * * Sends search query parameters to Luigi Core. The search parameters will be added to the URL if they are first allowed on a node level using {@link navigation-parameters-reference.md#clientpermissionsurlparameters clientPermissions.urlParameters}. * @param {Object} searchParams @@ -489,7 +485,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Returns the current client permissions as specified in the navigation node or an empty object. For details, see [Node parameters](navigation-parameters-reference.md). * @returns {Object} client permissions as specified in the navigation node * @memberof Lifecycle @@ -501,6 +496,7 @@ class LifecycleManager extends LuigiClientBase { } /** + * * When the micro frontend is not embedded in the Luigi Core application and there is no init handshake you can set the target origin that is used in postMessage function calls by Luigi Client. Typically used only in custom micro-frontend frameworks that are compatible with LuigiClient API. * @param {string} origin target origin * @memberof Lifecycle @@ -513,6 +509,7 @@ class LifecycleManager extends LuigiClientBase { } /** + * * Sends a custom message to the Luigi Core application. * @param {Object} message an object containing data to be sent to the Luigi Core to process it further. This object is set as an input parameter of the custom message listener on the Luigi Core side * @param {string} message.id a string containing the message id @@ -529,7 +526,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Returns the current user settings based on the selected node. * @returns {Object} current user settings * @since 1.7.1 @@ -542,7 +538,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Returns the current anchor based on active URL. * @memberof Lifecycle * @since 1.21.0 @@ -555,7 +550,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * Sends anchor to Luigi Core. The anchor will be added to the URL. * @param {string} anchor * @since 1.21.0 @@ -571,7 +565,6 @@ class LifecycleManager extends LuigiClientBase { } /** - * * This function allows you to change node labels within the same {@link navigation-advanced.md#view-groups view group}, e.g. in your node config: `label: 'my Node {viewGroupData.vg1}'`. * @since 2.2.0 * @param {Object} data a data object containing the view group name and desired label diff --git a/client/src/linkManager.js b/client/src/linkManager.js index 225240a72e..7c6ddcbc4d 100644 --- a/client/src/linkManager.js +++ b/client/src/linkManager.js @@ -36,7 +36,6 @@ export class linkManager extends LuigiClientBase { } /** - * * 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. * @memberof linkManager * @param {string} path path to be navigated to @@ -124,7 +123,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Offers an alternative way of navigating with intents. This involves specifying a semanticSlug and an object containing * parameters. * This method internally generates a URL of the form `#?intent=-?=` through the given @@ -157,7 +155,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the modal is `l`, which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions. * @memberof linkManager * @param {string} path navigation path @@ -195,6 +192,7 @@ export class linkManager extends LuigiClientBase { } /** + * * Updates the current title and size of a modal. If `routing.showModalPathInUrl` is set to `true`, the URL will be updated with the modal settings data. * In addition, you can specify if a new history entry will be created with the updated URL. * @memberof linkManager @@ -217,7 +215,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Opens a view in a split view. You can specify the split view's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the split view is `40`, which means 40% height of the split view. * @memberof linkManager * @param {string} path navigation path @@ -237,7 +234,6 @@ 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 @@ -256,7 +252,6 @@ export class linkManager extends LuigiClientBase { } /** - * * 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. * @memberof linkManager * @param {string} navigationContext @@ -278,7 +273,6 @@ export class linkManager extends LuigiClientBase { } /** - * * 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. * @memberof linkManager * @returns {linkManager} link manager instance @@ -297,7 +291,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Sets the current navigation base to the parent node that is defined as virtualTree. This method works only when the currently active micro frontend is inside a virtualTree. * @memberof linkManager * @returns {linkManager} link manager instance @@ -313,7 +306,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Enables navigating to sibling nodes without knowing the absolute path. * @memberof linkManager * @returns {linkManager} link manager instance @@ -327,7 +319,6 @@ export class linkManager extends LuigiClientBase { } /** - * * 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. * @memberof linkManager * @param {Object} nodeParams @@ -346,6 +337,7 @@ export class linkManager extends LuigiClientBase { } /** + * * Sets options to customise route changing behaviour. 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. * @memberof linkManager * @param {Object} options navigation options @@ -374,7 +366,6 @@ export class linkManager extends LuigiClientBase { /** @lends linkManager */ /** - * * 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. * @memberof linkManager * @param {string} path path which existence you want to check @@ -430,7 +421,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Checks if there is one or more preserved views. You can use it to show a **back** button. * @memberof linkManager * @returns {boolean} indicating if there is a preserved view you can return to @@ -440,7 +430,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Discards the active view and navigates back to the last visited view. Works with preserved views, and also acts as the substitute of the browser **back** button. **goBackContext** is only available when using preserved views. * @memberof linkManager * @param {any} goBackValue data that is passed in the **goBackContext** field to the last visited view when using preserved views @@ -456,6 +445,7 @@ export class linkManager extends LuigiClientBase { } /** + * * Disables the navigation handling for a single navigation request. * It prevents Luigi Core from handling the URL change after `navigate()`. * Used for auto-navigation. @@ -470,6 +460,7 @@ export class linkManager extends LuigiClientBase { } /** + * * Enables navigating to a new tab. * @since 1.16.0 * @example @@ -481,6 +472,7 @@ export class linkManager extends LuigiClientBase { } /** + * * Keeps the URL's query parameters for a navigation request. * @param {boolean} preserve By default, it is set to `false`. If it is set to `true`, the URL's query parameters will be kept after navigation. * @since 1.19.0 @@ -494,7 +486,6 @@ export class linkManager extends LuigiClientBase { } /** - * * Gets the luigi route associated with the current micro frontend. * @returns {promise} a promise which resolves to a String value specifying the current luigi route * @since 1.23.0 diff --git a/client/src/uxManager.js b/client/src/uxManager.js index 562637935b..47d12f85c5 100644 --- a/client/src/uxManager.js +++ b/client/src/uxManager.js @@ -71,7 +71,6 @@ class UxManager extends LuigiClientBase { } /** - * * Shows a confirmation modal. * @memberof uxManager * @param {Object} settings the settings of the confirmation modal. If you don't provide any value for any of the fields, a default value is used @@ -130,7 +129,6 @@ class UxManager extends LuigiClientBase { } /** - * * Shows an alert. * @memberof uxManager * @param {Object} settings the settings for the alert @@ -209,7 +207,6 @@ class UxManager extends LuigiClientBase { } /** - * * Gets the current locale. * @returns {string} current locale * @memberof uxManager @@ -219,7 +216,7 @@ class UxManager extends LuigiClientBase { } /** - * + * * Sets current locale to the specified one. * * **NOTE:** this must be explicitly allowed on the navigation node level by setting `clientPermissions.changeCurrentLocale` to `true`. (See {@link navigation-parameters-reference.md Node parameters}.) @@ -239,7 +236,7 @@ class UxManager extends LuigiClientBase { } /** - * + * * Checks if the current micro frontend is displayed inside a split view * @returns {boolean} indicating if it is loaded inside a split view * @memberof uxManager @@ -250,6 +247,7 @@ class UxManager extends LuigiClientBase { } /** + * * Checks if the current micro frontend is displayed inside a modal * @returns {boolean} indicating if it is loaded inside a modal * @memberof uxManager @@ -260,7 +258,7 @@ class UxManager extends LuigiClientBase { } /** - * + * * Checks if the current micro frontend is displayed inside a drawer * @returns {boolean} indicating if it is loaded inside a drawer * @memberof uxManager @@ -271,7 +269,6 @@ class UxManager extends LuigiClientBase { } /** - * * Gets the current theme. * @returns {*} current themeObj * @memberof uxManager @@ -281,7 +278,7 @@ class UxManager extends LuigiClientBase { } /** - * + * * Gets the CSS variables from Luigi Core with their key and value. * @returns {Object} CSS variables with their key and value. * @memberof uxManager @@ -293,7 +290,7 @@ class UxManager extends LuigiClientBase { } /** - * + * * Adds the CSS variables from Luigi Core in a