I18n manage current locale in luigi

client/luigi-client.d.ts

@@ -115,6 +115,18 @@ export declare interface UxManager {
    * @returns {promise} which is resolved when accepting the confirmation modal and rejected when dismissing it.
    */
   showConfirmationModal: (settings: ConfirmationModalSettings) => Promise<void>;
+
+  /**
+   * Gets the current locale.
+   * @returns {string} current locale
+   */
+  getCurrentLocale: () => string;
+
+  /**
+   * Sets current locale to the specified one.
+   * @param {string} locale locale to be set as the current locale
+   */
+  setCurrentLocale: (locale: string) => void;
 }
 
 export declare interface LinkManager {

client/src/lifecycleManager.js

@@ -27,22 +27,6 @@ class LifecycleManager extends LuigiClientBase {
     this._onInitFns = {};
     this.authData = {};
 
-    /**
-     * Iterates over an object and executes all top-level functions
-     * with a given payload and the Luigi core domain
-     * @private
-     */
-    const _callAllFns = (objWithFns, payload, luigiCoreOrigin) => {
-      for (let id in objWithFns) {
-        if (
-          objWithFns.hasOwnProperty(id) &&
-          helpers.isFunction(objWithFns[id])
-        ) {
-          objWithFns[id](payload, luigiCoreOrigin);
-        }
-      }
-    };
-
     /**
      * Adds event listener for communication with Luigi Core and starts communication
      * @private
@@ -82,7 +66,7 @@ class LifecycleManager extends LuigiClientBase {
         setAuthData(e.data.authData);
         helpers.setLuigiCoreDomain(e.origin);
         this.luigiInitialized = true;
-        _callAllFns(this._onInitFns, this.currentContext.context, e.origin);
+        this._notifyInit(e.origin);
       });
 
       helpers.addEventListener('luigi.auth.tokenIssued', e => {
@@ -95,7 +79,7 @@ class LifecycleManager extends LuigiClientBase {
           window.location.replace(e.data.viewUrl);
         }
         // execute the context change listener if set by the microfrontend
-        _callAllFns(this._onContextUpdatedFns, this.currentContext.context);
+        this._notifyUpdate();
         helpers.sendPostMessageToLuigiCore({ msg: 'luigi.navigate.ok' });
       });
 
@@ -114,6 +98,38 @@ class LifecycleManager extends LuigiClientBase {
     luigiClientInit();
   }
 
+  /**
+   * Iterates over an object and executes all top-level functions
+   * with a given payload.
+   * @private
+   * @memberof Lifecycle
+   */
+  _callAllFns(objWithFns, payload) {
+    for (let id in objWithFns) {
+      if (objWithFns.hasOwnProperty(id) && helpers.isFunction(objWithFns[id])) {
+        objWithFns[id](payload);
+      }
+    }
+  }
+
+  /**
+   * Notifies all context init listeners.
+   * @private
+   * @memberof Lifecycle
+   */
+  _notifyInit(origin) {
+    this._callAllFns(this._onInitFns, this.currentContext.context, origin);
+  }
+
+  /**
+   * Notifies all context update listeners.
+   * @private
+   * @memberof Lifecycle
+   */
+  _notifyUpdate() {
+    this._callAllFns(this._onContextUpdatedFns, this.currentContext.context);
+  }
+
   /**
    * @private
    * @memberof Lifecycle

client/src/uxManager.js

@@ -1,4 +1,5 @@
 import { LuigiClientBase } from './baseClass';
+import { lifecycleManager } from './lifecycleManager';
 import { helpers } from './helpers';
 
 /**
@@ -9,6 +10,13 @@ class UxManager extends LuigiClientBase {
   /** @private */
   constructor() {
     super();
+    helpers.addEventListener('luigi.current-locale-changed', e => {
+      if (e.data.currentLocale && lifecycleManager.currentContext?.internal) {
+        lifecycleManager.currentContext.internal.currentLocale =
+          e.data.currentLocale;
+        lifecycleManager._notifyUpdate();
+      }
+    });
   }
 
   /**
@@ -107,7 +115,7 @@ class UxManager extends LuigiClientBase {
    * @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.
    * @param {number} settings.closeAfter (optional) time in milliseconds that tells Luigi when to close the Alert automatically. If not provided, the Alert will stay on until closed manually. It has to be greater than `100`.
-   * @returns {promise} which is resolved when the alert is dismissed. 
+   * @returns {promise} which is resolved when the alert is dismissed.
    * @example
    * import LuigiClient from '@kyma-project/luigi-client';
    * const settings = {
@@ -171,5 +179,36 @@ class UxManager extends LuigiClientBase {
       this.setPromise('alerts', alerts);
     }
   }
+
+  /**
+   * Gets the current locale.
+   * @returns {string} current locale
+   * @memberof uxManager
+   */
+  getCurrentLocale() {
+    return lifecycleManager.currentContext?.internal?.currentLocale;
+  }
+
+  /**
+   * 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}.)
+   *
+   * @param {string} locale locale to be set as the current locale
+   * @memberof uxManager
+   */
+  setCurrentLocale(locale) {
+    if (locale) {
+      window.parent.postMessage(
+        {
+          msg: 'luigi.ux.set-current-locale',
+          data: {
+            currentLocale: locale
+          }
+        },
+        '*'
+      );
+    }
+  }
 }
 export const uxManager = new UxManager();

core/examples/luigi-sample-angular/e2e/tests/luigi-client-ux-manager-features.spec.js

@@ -321,5 +321,26 @@ describe('Luigi client ux manager features', () => {
         cy.get('[data-cy=luigi-alert]').should('not.exist');
       });
     });
+    describe('Luigi Client Localization', () => {
+      it('set localization in client', () => {
+        cy.goToUxManagerMethods($iframeBody);
+
+        cy.wrap($iframeBody)
+          .find('[data-cy=luigi-current-locale]')
+          .should('contain', "'en'");
+
+        cy.wrap($iframeBody)
+          .find('[data-cy=luigi-input-locale]')
+          .type('pl_PL');
+
+        cy.wrap($iframeBody)
+          .find('[data-cy=set-current-locale]')
+          .click();
+
+        cy.wrap($iframeBody)
+          .find('[data-cy=luigi-current-locale]')
+          .should('contain', "'pl_PL'");
+      });
+    });
   });
 });

core/examples/luigi-sample-angular/src/app/project/project.component.html

@@ -120,6 +120,51 @@ <h1 class="fd-section__title">LuigiClient uxManager methods</h1>
         Luigi alert has been dismissed
       </p>
     </div>
+
+    <div class="fd-panel fd-has-margin-bottom-small">
+      <p><strong>Localization</strong></p>
+      <div
+        class="fd-has-color-status-4 fd-has-type-1 fd-has-margin-bottom-base"
+        data-cy="luigi-current-locale"
+      >
+        Current locale is: '{{ currentLocale }}'
+      </div>
+      <p class="fd-has-margin-bottom-s">
+        <app-code-snippet
+          data="uxManager().getCurrentLocale()"
+        ></app-code-snippet>
+      </p>
+      <div class="fd-container ">
+        <form #luigiLocalizationForm="ngForm" class="fd-col--3">
+          <div class="fd-form__set">
+            <div class="fd-form__item">
+              <label class="fd-form__label" for="locale">Locale </label>
+              <input
+                [ngModel]=""
+                class="fd-form__control"
+                type="text"
+                name="locale"
+                placeholder=""
+                data-cy="luigi-input-locale"
+              />
+            </div>
+          </div>
+        </form>
+      </div>
+      <button
+        class="fd-button"
+        data-cy="set-current-locale"
+        (click)="setCurrentLocale()"
+      >
+        Set Current Locale
+      </button>
+      <p>
+        <app-code-snippet
+          data="uxManager().setCurrentLocale(locale)"
+        ></app-code-snippet>
+      </p>
+    </div>
+
     <div class="fd-panel fd-has-margin-bottom-small">
       <p>
         <strong

core/examples/luigi-sample-angular/src/app/project/project.component.ts

@@ -26,6 +26,7 @@ import { NgForm } from '@angular/forms';
 })
 export class ProjectComponent implements OnInit, OnDestroy {
   @ViewChild('luigiAlertForm') luigiAlertForm: NgForm;
+  @ViewChild('luigiLocalizationForm') luigiLocalizationForm: NgForm;
   public linkManager = linkManager;
   public uxManager = uxManager;
   public projectId: string;
@@ -38,6 +39,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
   public alertDismissed;
   public alertTypes = ['success', 'info', 'warning', 'error'];
   public isDirty = false;
+  public currentLocale = '';
 
   public constructor(
     private activatedRoute: ActivatedRoute,
@@ -81,6 +83,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
         if (ctx.contextType === 'init' || ctx.contextType === 'update') {
           this.projectId = ctx.context.currentProject;
           this.preservedViewCallbackContext = ctx.context.goBackContext;
+          this.currentLocale = uxManager().getCurrentLocale();
           // Since Luigi runs outside of Zone.js, changes need
           // to be updated manually
           // Be sure to check for destroyed ChangeDetectorRef,
@@ -100,7 +103,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
     this.cudListener = addContextUpdateListener(updatedContext => {
       // this.projectId = updatedContext.currentProject;
       // this.preservedViewCallbackContext = updatedContext.goBackContext;
-
+      this.currentLocale = uxManager().getCurrentLocale();
       // Be sure to check for destroyed ChangeDetectorRef,
       // else you get runtime Errors
       if (!this.cdr['destroyed']) {
@@ -171,6 +174,10 @@ export class ProjectComponent implements OnInit, OnDestroy {
       });
   }
 
+  setCurrentLocale() {
+    uxManager().setCurrentLocale(this.luigiLocalizationForm.value.locale);
+  }
+
   checkIfPathExists() {
     linkManager()
       .pathExists(this.pathExists.formValue)

core/examples/luigi-sample-angular/src/luigi-config/extended/helpers.js

@@ -129,6 +129,9 @@ export const projectsNavProviderFn = context =>
             currentProject: project.id
           },
           icon: 'folder-blank',
+          clientPermissions: {
+            changeCurrentLocale: true
+          },
           children: projectDetailNavProviderFn
         });
       });

core/package.json

@@ -52,12 +52,13 @@
     "test": "babel-node ./node_modules/nyc/bin/nyc.js mocha -- --recursive test",
     "test:watch": "npm run test -- --watch",
     "bundlesize": "npm run bundle && bundlesize",
-    "docu": "npm run docu:validate && npm run docu:generate:config && npm run docu:generate:dom-elements && npm run docu:generate:auth && npm run docu:generate:navigation",
-    "docu:validate": "documentation lint --shallow src/core-api/config.js src/core-api/elements.js src/core-api/auth.js src/core-api/navigation.js",
+    "docu": "npm run docu:validate && npm run docu:generate:config && npm run docu:generate:dom-elements && npm run docu:generate:auth && npm run docu:generate:navigation && npm run docu:generate:i18n",
+    "docu:validate": "documentation lint --shallow src/core-api/config.js src/core-api/elements.js src/core-api/auth.js src/core-api/navigation.js src/core-api/i18n.j",
     "docu:generate:config": "documentation readme src/core-api/config.js --shallow -f md --section='Luigi Config' --readme-file=../docs/luigi-core-api.md --markdown-toc=false --github false --quiet",
     "docu:generate:dom-elements": "documentation readme src/core-api/dom-elements.js --shallow -f md --section='Luigi.elements()' --readme-file=../docs/luigi-core-api.md --markdown-toc=false --github false --quiet",
     "docu:generate:auth": "documentation readme src/core-api/auth.js --shallow -f md --section='Luigi.auth()' --readme-file=../docs/luigi-core-api.md --markdown-toc=false --github false --quiet",
-    "docu:generate:navigation": "documentation readme src/core-api/navigation.js --shallow -f md --section='Luigi.navigation()' --readme-file=../docs/luigi-core-api.md --markdown-toc=false --github false --quiet"
+    "docu:generate:navigation": "documentation readme src/core-api/navigation.js --shallow -f md --section='Luigi.navigation()' --readme-file=../docs/luigi-core-api.md --markdown-toc=false --github false --quiet",
+    "docu:generate:i18n": "documentation readme src/core-api/i18n.js --shallow -f md --section='Luigi.i18n()' --readme-file=../docs/luigi-core-api.md --markdown-toc=false --github false --quiet"
   },
   "bundlesize": [
     {

core/src/App.html

@@ -57,6 +57,7 @@
   import Alerts from './Alerts.html';
   import Modal from './Modal.html';
   import { LuigiConfig } from './core-api';
+  import { LuigiI18N } from './core-api';
   import { Routing } from './services/routing';
   import { Navigation } from './navigation/services/navigation';
   import { Iframe } from './services/iframe';
@@ -299,6 +300,14 @@
           isolateAllViews
         };
 
+        LuigiI18N.addCurrentLocaleChangeListener(locale => {
+           const message = {
+            msg: 'luigi.current-locale-changed',
+            currentLocale: locale
+          };
+          IframeHelpers.broadcastMessageToAllIframes(message);
+        });
+
         window.addEventListener('popstate', async e => {
           const alertQueue = this.get().alerts;
           if (!alertQueue || !alertQueue.length) return;
@@ -334,6 +343,8 @@
           if ('luigi.navigate.ok' === e.data.msg) {
             iframe.luigi.viewUrl = iframe.luigi.nextViewUrl;
             iframe.luigi.nextViewUrl = '';
+            iframe.luigi.clientPermissions = iframe.luigi.nextClientPermissions;
+            delete iframe.luigi.nextClientPermissions;
             config.navigateOk = true;
 
             ViewGroupPreloading.preload();
@@ -521,6 +532,17 @@
               /* keep it to avoid runtime errors in browser console */
             });
           }
+
+          if ('luigi.ux.set-current-locale' === e.data.msg) {
+            if (iframe.luigi.clientPermissions && iframe.luigi.clientPermissions.changeCurrentLocale) {
+              const { currentLocale } = e.data.data;
+              if (currentLocale) {
+                LuigiI18N.setCurrentLocale(currentLocale);
+              }
+            } else {
+              console.error('Current local change from client declined because client permission changeCurrentLocale is not set for this view.');
+            }
+          }
         });
 
         // listeners are not automatically removed — cancel
@@ -533,7 +555,7 @@
     methods: {
       getValidMessageSource(e) {
         const allMessagesSources = [
-          ...Iframe.getAllIframes(this.get().modalIframe),
+          ...IframeHelpers.getAllIframes(this.get().modalIframe),
           { contentWindow: window, luigi: { viewUrl: window.location.href } }
         ];
         const iframe = allMessagesSources.find(iframe =>
@@ -569,7 +591,8 @@
         return {
           isNavigateBack: this.get().isNavigateBack,
           viewStackSize: this.get().preservedViews.length,
-          modal: modal
+          modal: modal,
+          currentLocale: LuigiI18N.getCurrentLocale()
         };
       },
       closeLeftNav() {

core/src/Modal.html

@@ -85,7 +85,8 @@ <h1 class="fd-modal__title">{modalSettings.title}</h1>
     if (viewUrl) {
       viewUrl = RoutingHelpers.substituteViewUrl(viewUrl, componentData);
     }
-    const iframe = IframeHelpers.createIframe(viewUrl);
+
+    const iframe = IframeHelpers.createIframe(viewUrl, undefined, component.get().lastNode.clientPermissions);
     const iframeCtn = document.querySelector('.iframeModalCtn');
     iframeCtn.appendChild(iframe);
     return iframe;