Feature: Support internationalization (#1500)

.gitignore

@@ -8,3 +8,7 @@ release/
 .awcache
 coverage/
 *.stackdump
+
+# Ignore the english compiled file
+i18n/resources.en.json
+i18n/xliff/

.vscode/settings.json

@@ -4,7 +4,7 @@
   "editor.tabSize": 4,
   // When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
   "editor.detectIndentation": false,
-  "typescript.tsdk": "node_modules/typescript/lib",
+"typescript.tsdk": "node_modules/typescript/lib",
   "search.exclude": {
     "**/node_modules": true,
     "**/bower_components": true,

app/app.module.ts

@@ -32,7 +32,7 @@ import { BatchExplorerErrorHandler } from "app/error-handler";
 
 // services
 import { HttpModule } from "@angular/http";
-import { MaterialModule } from "@batch-flask/core";
+import { MaterialModule, TranslationsLoaderService } from "@batch-flask/core";
 import { CommonModule } from "app/components/common";
 import { LayoutModule } from "app/components/layout";
 import { MiscModule } from "app/components/misc";
@@ -48,6 +48,7 @@ import {
     AdalService,
     AppInsightsApiService,
     AppInsightsQueryService,
+    AppTranslationsLoaderService,
     ApplicationService,
     ArmHttpService,
     AuthorizationHttpService,
@@ -126,6 +127,7 @@ const graphApiServices = [AADApplicationService, AADGraphHttpService, MsGraphHtt
     ],
     providers: [
         { provide: LocationStrategy, useClass: HashLocationStrategy },
+        { provide: TranslationsLoaderService, useClass: AppTranslationsLoaderService },
         AccountService,
         AdalService,
         AppInsightsApiService,

app/app.ts

@@ -1,5 +1,5 @@
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-import { ipcRenderer } from "electron";
+import { ipcRenderer, remote } from "electron";
 
 import "@batch-flask/extensions";
 
@@ -21,16 +21,20 @@ import "./styles/main.scss";
 
 ipcRenderer.send("initializing");
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-    .then(() => {
-        // console.timeEnd("Bootstrap");
-        // console.time("Render");
-        // console.profile("Render profile");
-    })
-    .catch(error => {
-        log.error("Bootstrapping failed :: ", error);
-        handleCoreError(error);
-    });
+Promise.resolve().then(() => {
+    if (process.env.NODE_ENV !== "production") {
+        return (remote.getCurrentWindow() as any).translationsLoader.load();
+    }
+}).then(() => {
+    return platformBrowserDynamic().bootstrapModule(AppModule);
+}).then(() => {
+    // console.timeEnd("Bootstrap");
+    // console.time("Render");
+    // console.profile("Render profile");
+}).catch(error => {
+    log.error("Bootstrapping failed :: ", error);
+    handleCoreError(error);
+});
 
 document.addEventListener("dragover", (event) => {
     event.dataTransfer.dropEffect = "none";

app/components/file/browse/file-explorer/file-tree-view/file-tree-view.component.ts

@@ -325,7 +325,7 @@ export class FileTreeViewComponent implements OnChanges, OnDestroy {
 
     private _getTreeRowsForNode(node: FileTreeNode, indent = 0): TreeRow[] {
         const rows = [];
-        for (const [_, child] of node.children) {
+        for (const [, child] of node.children) {
             if (this.autoExpand && !(child.path in this.expandedDirs)) {
                 this.expandedDirs.add(child.path);
             }

app/components/layout/main-navigation/main-navigation.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from "@angular/core";
+import { I18nService } from "@batch-flask/core";
 import { AccountService } from "app/services";
-
 import { Subscription } from "rxjs";
 import "./main-navigation.scss";
 
@@ -16,7 +16,7 @@ export class MainNavigationComponent implements OnDestroy {
 
     private _accountSub: Subscription;
 
-    constructor(accountService: AccountService, private changeDetector: ChangeDetectorRef) {
+    constructor(accountService: AccountService, private changeDetector: ChangeDetectorRef, i18n: I18nService) {
         this._accountSub = accountService.currentAccountId.subscribe((accountId) => {
             this.selectedId = accountId;
             this.changeDetector.markForCheck();

app/components/layout/main-navigation/main-navigation.html

@@ -1,27 +1,27 @@
 <ul class="top">
     <bl-clickable routerLink="/accounts" routerLinkActive="active" title="Dashboard">
-        <i class="fa fa-th fa-lg"></i><div class="label">Dash</div>
+        <i class="fa fa-th fa-lg"></i><div class="label">{{'main-navigation.dashboard' | i18n}}</div>
     </bl-clickable>
     <bl-clickable *blHiddenIfNoAccount routerLink="/jobs" routerLinkActive="active">
-        <i class="fa fa-tasks fa-lg"></i><div class="label">Jobs</div>
+        <i class="fa fa-tasks fa-lg"></i><div class="label">{{'main-navigation.jobs' | i18n}}</div>
     </bl-clickable>
     <bl-clickable *blHiddenIfNoAccount routerLink="/jobschedules" routerLinkActive="active" title="Job schedules">
-        <i class="fa fa-calendar fa-lg"></i><div class="label">Schedules</div>
+        <i class="fa fa-calendar fa-lg"></i><div class="label">{{'main-navigation.jobschedules' | i18n}}</div>
     </bl-clickable>
     <bl-clickable *blHiddenIfNoAccount routerLink="/pools" routerLinkActive="active">
-        <i class="fa fa-database fa-lg"></i><div class="label">Pools</div>
+        <i class="fa fa-database fa-lg"></i><div class="label">{{'main-navigation.pools' | i18n}}</div>
     </bl-clickable>
     <bl-clickable *blHiddenIfNoAccount routerLink="/applications" routerLinkActive="active" title="Application packages">
-        <i class="fa fa-file-archive-o fa-lg"></i><div class="label">Packages</div>
+        <i class="fa fa-file-archive-o fa-lg"></i><div class="label">{{'main-navigation.packages' | i18n}}</div>
     </bl-clickable>
     <bl-clickable *blHiddenIfNoAccount routerLink="/certificates" routerLinkActive="active" title="Certificates">
-        <i class="fa fa-certificate fa-lg"></i><div class="label">Certificate</div>
+        <i class="fa fa-certificate fa-lg"></i><div class="label">{{'main-navigation.certificates' | i18n}}</div>
     </bl-clickable>
     <bl-clickable *blHiddenIfNoAccount routerLink="/data" routerLinkActive="active" title="File groups">
-        <i class="fa fa-cloud-upload fa-lg"></i><div class="label">Data</div>
+        <i class="fa fa-cloud-upload fa-lg"></i><div class="label">{{'main-navigation.data' | i18n}}</div>
     </bl-clickable>
     <bl-clickable *blHiddenIfNoAccount href="#" routerLink="market" routerLinkActive="active" title="Gallery">
-        <i class="fa fa-cubes" aria-hidden="true"></i><div class="label">Gallery</div>
+        <i class="fa fa-cubes" aria-hidden="true"></i><div class="label">{{'main-navigation.gallery' | i18n}}</div>
     </bl-clickable>
 </ul>
 <div class="flex-separator"></div>

app/components/layout/main-navigation/main-navigation.i18n.yml

@@ -0,0 +1,10 @@
+main-navigation:
+  dashboard: Dash
+  jobs: Jobs
+  jobschedules: Job schedules
+  pools: Pools
+  packages: Packages
+  certificates: Certificates
+  data: Data
+  gallery: Gallery
+  profile: Profile

test/app/components/node/connect/node-user-credentials-form.component.spec.ts → app/components/node/connect/node-user-credentials-form.component.spec.ts

@@ -3,12 +3,13 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { MaterialModule } from "@batch-flask/core";
-import { SelectModule } from "@batch-flask/ui";
+import { I18nUIModule, SelectModule } from "@batch-flask/ui";
 import { PermissionService } from "@batch-flask/ui/permission";
 import * as moment from "moment";
 import { of } from "rxjs";
 
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { I18nTestingModule } from "@batch-flask/core/testing";
 import { DialogService } from "@batch-flask/ui/dialogs";
 import { DurationPickerComponent } from "@batch-flask/ui/duration-picker";
 import { NodeUserCredentialsFormComponent } from "app/components/node/connect";
@@ -46,7 +47,10 @@ describe("NodeUserCredentialsForm", () => {
             keys: of([]),
         };
         TestBed.configureTestingModule({
-            imports: [FormsModule, ReactiveFormsModule, MaterialModule, NoopAnimationsModule, SelectModule],
+            imports: [
+                FormsModule, ReactiveFormsModule, MaterialModule,
+                NoopAnimationsModule, SelectModule, I18nTestingModule, I18nUIModule,
+            ],
             declarations: [
                 NodeUserCredentialsFormComponent, TestComponent, SimpleFormMockComponent,
                 SSHKeyPickerComponent, DurationPickerComponent,

app/services/app-translation-loader.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from "@angular/core";
+import { TranslationsLoaderService } from "@batch-flask/core";
+import { remote } from "electron";
+
+@Injectable()
+export class AppTranslationsLoaderService extends TranslationsLoaderService {
+    public translations = new Map<string, string>();
+
+    constructor() {
+        super();
+        const translationsLoader = (remote.getCurrentWindow() as any).translationsLoader;
+        this.translations = new Map(JSON.parse(translationsLoader.serializedTranslations));
+    }
+}

app/services/batch-labs.service.ts

@@ -35,7 +35,8 @@ export class BatchExplorerService {
     constructor(private remote: ElectronRemote) {
         this._app = remote.getCurrentWindow().batchExplorerApp;
         this._app.azureEnvironmentObs.subscribe((x) => {
-            this._azureEnvironment = x;
+            // Clone the environement to prevent calling the electron ipc sync for every key
+            this._azureEnvironment = new AzureEnvironment(x);
         });
         this.autoUpdater = this._app.autoUpdater;
         this.aadService = this._app.aadService;

app/services/index.ts

@@ -1,5 +1,6 @@
 export * from "./azure-batch";
 export * from "./account.service";
+export * from "./app-translation-loader.service";
 export * from "./authorization-http";
 export * from "./application.service";
 export * from "./app-insights";

app/services/storage/models/index.ts

@@ -1,3 +1,3 @@
-export * from "./blobStorageResult";
-export * from "./sharedAccessPolicy";
-export * from "./storageRequestOptions";
+export * from "./blob-storage-result";
+export * from "./shared-access-policy";
+export * from "./storage-request-options";

app/services/themes/theme.service.ts

@@ -37,6 +37,7 @@ export class ThemeService implements OnDestroy {
         (window as any).setTheme = (val) => {
             this.setTheme(val);
         };
+
         this.currentTheme = this._currentTheme.filter(x => x !== null);
         this._subs.push(this.currentTheme.subscribe((theme) => {
             this._applyTheme(theme);
@@ -55,7 +56,6 @@ export class ThemeService implements OnDestroy {
 
     public async init() {
         this._baseThemeDefinition = await this._loadTheme(this.baseTheme);
-        await this.setTheme(this.defaultTheme);
     }
 
     public ngOnDestroy() {

config/webpack.config.base.js

@@ -23,7 +23,7 @@ const baseConfig = {
 
     resolve: {
         extensions: [".ts", ".js", ".json", ".scss", ".css", ".html"],
-        modules: [helpers.root(), helpers.root("src"), helpers.root("node_modules")],
+        modules: [helpers.root(), helpers.root("src"), "node_modules"],
     },
 
     module: {

docs/localization.md

@@ -0,0 +1,32 @@
+# Localization in Batch Explorer
+
+To make component localizable you can use one of the following
+* `i18n` pipe
+* `I18nService`
+
+## Define key and language
+The translations will be automatically read from files with the `i18n.yml` extension. e.g. `[filename].i18n.yml`
+You'll need to restart the app if you add a new file. Just refreshing the page will update the translations.
+Create a file with the name `[my-component].i18n.yml` next to the `[my-component].component.ts` and other files.
+
+## Usage
+### `i18n` Pipe
+```html
+<div>
+    {{'my-key.my-sub-key' | i18n}}
+</div>
+```
+
+
+### I18nService
+```ts
+class MyComponent {
+    constructor(private i18n: I18nService){
+
+    }
+
+    public get title() {
+        return this.i18n.t("my-key.sub.key", {param: "value"});
+    }
+}
+```

docs/readme.md

@@ -14,6 +14,7 @@
 * [Open a dialog](dialog.md)
 * [Store user data/Cache data](store-user-data.md)
 * [Use virtual scroll](virtual-scroll.md)
+* [Localize](Localization.md)
 
 
 # Repo management

electron-builder.yml

@@ -17,6 +17,7 @@ extraResources:
       - "**/*"
   - "ThirdPartyNotices.txt"
   - "data"
+  - "i18n"
   - "node_modules/jschardet/"
 
 protocols:

i18n/resources.fr.json

@@ -0,0 +1,5 @@
+{
+  "main-navigation.jobs": "Travaux",
+  "main-navigation.pools": "Pools",
+  "main-navigation.jobschedules": "Planifications"
+}