Add changes

SAP · Sep 18, 2024 · ae131b3 · ae131b3
1 parent 77157d3
commit ae131b3
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 37 deletions.
diff --git a/client/src/lifecycleManager.js b/client/src/lifecycleManager.js
@@ -458,6 +458,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * 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 {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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
@@ -97,7 +97,6 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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;
   }
 
- /**
-   * <!-- label-success: Web Component API  -->
+  /**
    * 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 {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * 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 {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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 {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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 {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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
@@ -19,7 +19,6 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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 {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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 {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * Closes the currently opened micro frontend modal.
    * @memberof uxManager
    */
@@ -46,7 +43,6 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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 {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * Removes the backdrop.
    * @memberof uxManager
    */
@@ -64,7 +59,6 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
-   * <!-- label-success: Web Component API  -->
    * 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
@@ -9,6 +9,7 @@ class LuigiNavigationManager {
   constructor() {}
 
   /**
+   * <!-- label-success: Web Component API  -->
    * 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
@@ -307,6 +307,8 @@ Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/G
 
 #### getCoreSearchParams
 
+<!-- label-success: Web Component API  -->
+
 Read search query parameters which are sent from Luigi Core
 
 ##### Examples
@@ -319,8 +321,6 @@ Returns **any** Core search query parameters
 
 #### addCoreSearchParams
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 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
 
+<!-- label-success: Web Component API  -->
+
 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
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 Closes the currently opened micro frontend modal.
 
 #### addBackdrop
 
-<!-- label-success: Web Component API  -->
-
 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
 
-<!-- label-success: Web Component API  -->
-
 Removes the backdrop.
 
 #### setDirtyStatus
 
-<!-- label-success: Web Component API  -->
-
 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
@@ -547,6 +547,8 @@ Use these functions for navigation-related features.
 
 #### updateTopNavigation
 
+<!-- label-success: Web Component API  -->
+
 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
@@ -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.'
+            );
+          }
+        });
+      });
     </script>
   </body>
 </html>