Merge pull request ceph#34696 from tspmelo/wip-locl

mgr/dashboard: Use $localize and locl for TS translations Reviewed-by: Ernesto Puertat <[email protected]> Reviewed-by: Kiefer Chang <[email protected]> Reviewed-by: Sebastian Krah <[email protected]>
zmc · Jul 17, 2020 · 8cd0490 · 8cd0490
2 parents e7a102f + d3436f0
commit 8cd0490
Show file tree

Hide file tree

Showing 251 changed files with 1,579 additions and 2,639 deletions.
diff --git a/src/pybind/mgr/dashboard/frontend/angular.json b/src/pybind/mgr/dashboard/frontend/angular.json
@@ -54,9 +54,7 @@
               "node_modules/ngx-toastr/toastr.css",
               "src/styles.scss"
             ],
-            "scripts": [
-              "node_modules/chart.js/dist/Chart.bundle.js"
-            ],
+            "scripts": ["node_modules/chart.js/dist/Chart.bundle.js"],
             "stylePreprocessorOptions": {
               "includePaths": [
                 "src"

diff --git a/src/pybind/mgr/dashboard/frontend/ngcc.config.js b/src/pybind/mgr/dashboard/frontend/ngcc.config.js
@@ -1,9 +1,10 @@
 module.exports = {
   packages: {
     'simplebar-angular': {
-      ignorableDeepImportMatchers: [
-        /simplebar-core\.esm/,
-      ]
+      ignorableDeepImportMatchers: [/simplebar-core\.esm/]
     },
-  },
+    '@locl/cli': {
+      ignorableDeepImportMatchers: [/@angular\/localize/]
+    }
+  }
 };
diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
@@ -13,7 +13,7 @@
     "postbuild:localize": "node cd --res",
     "env_build": "node cd --env",
     "i18n": "npm run i18n:extract && npm run i18n:push && npm run i18n:pull && npm run i18n:merge",
-    "i18n:extract": "ng xi18n --output-path locale --progress=false && ngx-extractor -i 'src/**/*.ts' -f xlf -o src/locale/messages.xlf -l en-US",
+    "i18n:extract": "ng build --localize=false && locl extract -s=dist/*.js -f=xlf -o=src/locale/messages.xlf",
     "i18n:push": "npx i18ntool push -c i18n.config.json",
     "i18n:pull": "npx i18ntool pull -c i18n.config.json",
     "i18n:merge": "npx i18ntool merge -c i18n.config.json",
@@ -78,7 +78,6 @@
     "@angular/router": "9.1.11",
     "@auth0/angular-jwt": "4.2.0",
     "@ng-bootstrap/ng-bootstrap": "6.1.0",
-    "@ngx-translate/i18n-polyfill": "1.0.0",
     "@swimlane/ngx-datatable": "17.0.0",
     "@types/file-saver": "2.0.1",
     "angular-tree-component": "8.5.6",
@@ -107,6 +106,7 @@
     "@angular/compiler-cli": "9.1.11",
     "@angular/language-service": "9.1.11",
     "@compodoc/compodoc": "1.1.11",
+    "@locl/cli": "0.0.1-beta.9",
     "@types/jest": "26.0.3",
     "@types/lodash": "4.14.157",
     "@types/node": "12.12.47",
@@ -135,7 +135,6 @@
     "typescript": "3.8.3"
   },
   "resolutions": {
-    "mem": "4.3.0",
     "fsevents": "2.1.2",
     "lodash": "4.17.19"
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.module.ts
@@ -1,20 +1,12 @@
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import {
-  ErrorHandler,
-  LOCALE_ID,
-  NgModule,
-  TRANSLATIONS,
-  TRANSLATIONS_FORMAT
-} from '@angular/core';
+import { ErrorHandler, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { JwtModule } from '@auth0/angular-jwt';
-import { I18n } from '@ngx-translate/i18n-polyfill';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { ToastrModule } from 'ngx-toastr';
 
-import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CephModule } from './ceph/ceph.module';
@@ -59,21 +51,7 @@ export function jwtTokenGetter() {
       provide: HTTP_INTERCEPTORS,
       useClass: ApiInterceptorService,
       multi: true
-    },
-    {
-      provide: TRANSLATIONS,
-      useFactory: (locale: string) => {
-        locale = locale || environment.default_lang;
-        try {
-          return require(`raw-loader!locale/messages.${locale}.xlf`).default;
-        } catch (error) {
-          return [];
-        }
-      },
-      deps: [LOCALE_ID]
-    },
-    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
-    I18n
+    }
   ],
   bootstrap: [AppComponent]
 })

diff --git a/...d/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.spec.ts b/...d/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.spec.ts
@@ -4,7 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TreeModel, TreeModule } from 'angular-tree-component';
 import * as _ from 'lodash';
 
-import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../shared/shared.module';
 import { IscsiTargetDetailsComponent } from './iscsi-target-details.component';
 
@@ -14,8 +14,7 @@ describe('IscsiTargetDetailsComponent', () => {
 
   configureTestBed({
     declarations: [IscsiTargetDetailsComponent],
-    imports: [BrowserAnimationsModule, TreeModule.forRoot(), SharedModule],
-    providers: [i18nProviders]
+    imports: [BrowserAnimationsModule, TreeModule.forRoot(), SharedModule]
   });
 
   beforeEach(() => {

diff --git a/...hboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts b/...hboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
-import { I18n } from '@ngx-translate/i18n-polyfill';
 import {
   ITreeOptions,
   TreeComponent,
@@ -61,7 +60,6 @@ export class IscsiTargetDetailsComponent implements OnChanges, OnInit {
   };
 
   constructor(
-    private i18n: I18n,
     private iscsiBackstorePipe: IscsiBackstorePipe,
     private booleanTextPipe: BooleanTextPipe
   ) {}
@@ -70,19 +68,19 @@ export class IscsiTargetDetailsComponent implements OnChanges, OnInit {
     this.columns = [
       {
         prop: 'displayName',
-        name: this.i18n('Name'),
+        name: $localize`Name`,
         flexGrow: 1,
         cellTemplate: this.highlightTpl
       },
       {
         prop: 'current',
-        name: this.i18n('Current'),
+        name: $localize`Current`,
         flexGrow: 1,
         cellTemplate: this.highlightTpl
       },
       {
         prop: 'default',
-        name: this.i18n('Default'),
+        name: $localize`Default`,
         flexGrow: 1,
         cellTemplate: this.highlightTpl
       }

diff --git a/...pp/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts b/...pp/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts
@@ -11,12 +11,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrModule } from 'ngx-toastr';
 
-import {
-  configureTestBed,
-  FormHelper,
-  i18nProviders,
-  IscsiHelper
-} from '../../../../testing/unit-test-helper';
+import { configureTestBed, FormHelper, IscsiHelper } from '../../../../testing/unit-test-helper';
 import { Permission } from '../../../shared/models/permissions';
 import { SharedModule } from '../../../shared/shared.module';
 import { IscsiTargetDiscoveryModalComponent } from './iscsi-target-discovery-modal.component';
@@ -39,7 +34,7 @@ describe('IscsiTargetDiscoveryModalComponent', () => {
       ToastrModule.forRoot(),
       RouterTestingModule
     ],
-    providers: [i18nProviders, NgbActiveModal]
+    providers: [NgbActiveModal]
   });
 
   beforeEach(() => {

diff --git a/...src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.ts b/...src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.ts
@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { I18n } from '@ngx-translate/i18n-polyfill';
 
 import { IscsiService } from '../../../shared/api/iscsi.service';
 import { NotificationType } from '../../../shared/enum/notification-type.enum';
@@ -29,8 +28,7 @@ export class IscsiTargetDiscoveryModalComponent implements OnInit {
     private authStorageService: AuthStorageService,
     public activeModal: NgbActiveModal,
     private iscsiService: IscsiService,
-    private notificationService: NotificationService,
-    private i18n: I18n
+    private notificationService: NotificationService
   ) {
     this.permission = this.authStorageService.getPermissions().iscsi;
   }
@@ -111,7 +109,7 @@ export class IscsiTargetDiscoveryModalComponent implements OnInit {
       () => {
         this.notificationService.show(
           NotificationType.success,
-          this.i18n('Updated discovery authentication')
+          $localize`Updated discovery authentication`
         );
         this.activeModal.close();
       },

diff --git a/...shboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.spec.ts b/...shboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.spec.ts
@@ -7,12 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ToastrModule } from 'ngx-toastr';
 
 import { ActivatedRouteStub } from '../../../../testing/activated-route-stub';
-import {
-  configureTestBed,
-  FormHelper,
-  i18nProviders,
-  IscsiHelper
-} from '../../../../testing/unit-test-helper';
+import { configureTestBed, FormHelper, IscsiHelper } from '../../../../testing/unit-test-helper';
 import { LoadingPanelComponent } from '../../../shared/components/loading-panel/loading-panel.component';
 import { CdFormGroup } from '../../../shared/forms/cd-form-group';
 import { SharedModule } from '../../../shared/shared.module';
@@ -153,7 +148,6 @@ describe('IscsiTargetFormComponent', () => {
         ToastrModule.forRoot()
       ],
       providers: [
-        i18nProviders,
         {
           provide: ActivatedRoute,
           useValue: new ActivatedRouteStub({ target_iqn: undefined })

diff --git a/...gr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.ts b/...gr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.ts
@@ -3,7 +3,6 @@ import { FormArray, FormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { I18n } from '@ngx-translate/i18n-polyfill';
 import * as _ from 'lodash';
 import { forkJoin } from 'rxjs';
 
@@ -57,30 +56,14 @@ export class IscsiTargetFormComponent extends CdForm implements OnInit {
 
   imagesSettings: any = {};
   messages = {
-    portals: new SelectMessages(
-      { noOptions: this.i18n('There are no portals available.') },
-      this.i18n
-    ),
-    images: new SelectMessages(
-      { noOptions: this.i18n('There are no images available.') },
-      this.i18n
-    ),
-    initiatorImage: new SelectMessages(
-      {
-        noOptions: this.i18n(
-          'There are no images available. Please make sure you add an image to the target.'
-        )
-      },
-      this.i18n
-    ),
-    groupInitiator: new SelectMessages(
-      {
-        noOptions: this.i18n(
-          'There are no initiators available. Please make sure you add an initiator to the target.'
-        )
-      },
-      this.i18n
-    )
+    portals: new SelectMessages({ noOptions: $localize`There are no portals available.` }),
+    images: new SelectMessages({ noOptions: $localize`There are no images available.` }),
+    initiatorImage: new SelectMessages({
+      noOptions: $localize`There are no images available. Please make sure you add an image to the target.`
+    }),
+    groupInitiator: new SelectMessages({
+      noOptions: $localize`There are no initiators available. Please make sure you add an initiator to the target.`
+    })
   };
 
   IQN_REGEX = /^iqn\.(19|20)\d\d-(0[1-9]|1[0-2])\.\D{2,3}(\.[A-Za-z0-9-]+)+(:[A-Za-z0-9-\.]+)*$/;
@@ -95,12 +78,11 @@ export class IscsiTargetFormComponent extends CdForm implements OnInit {
     private rbdService: RbdService,
     private router: Router,
     private route: ActivatedRoute,
-    private i18n: I18n,
     private taskWrapper: TaskWrapperService,
     public actionLabels: ActionLabelsI18n
   ) {
     super();
-    this.resource = this.i18n('target');
+    this.resource = $localize`target`;
   }
 
   ngOnInit() {

diff --git a/...ock/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.spec.ts b/...ock/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.spec.ts
@@ -5,7 +5,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
-import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../shared/shared.module';
 import { IscsiSettingComponent } from '../iscsi-setting/iscsi-setting.component';
 import { IscsiTargetImageSettingsModalComponent } from './iscsi-target-image-settings-modal.component';
@@ -17,7 +17,7 @@ describe('IscsiTargetImageSettingsModalComponent', () => {
   configureTestBed({
     declarations: [IscsiTargetImageSettingsModalComponent, IscsiSettingComponent],
     imports: [SharedModule, ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule],
-    providers: [NgbActiveModal, i18nProviders]
+    providers: [NgbActiveModal]
   });
 
   beforeEach(() => {

diff --git a/...h/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.spec.ts b/...h/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.spec.ts
@@ -5,7 +5,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
-import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../shared/shared.module';
 import { IscsiSettingComponent } from '../iscsi-setting/iscsi-setting.component';
 import { IscsiTargetIqnSettingsModalComponent } from './iscsi-target-iqn-settings-modal.component';
@@ -17,7 +17,7 @@ describe('IscsiTargetIqnSettingsModalComponent', () => {
   configureTestBed({
     declarations: [IscsiTargetIqnSettingsModalComponent, IscsiSettingComponent],
     imports: [SharedModule, ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule],
-    providers: [NgbActiveModal, i18nProviders]
+    providers: [NgbActiveModal]
   });
 
   beforeEach(() => {

diff --git a/...shboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.spec.ts b/...shboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.spec.ts
@@ -11,7 +11,6 @@ import { BehaviorSubject, of } from 'rxjs';
 import {
   configureTestBed,
   expectItemTasks,
-  i18nProviders,
   PermissionHelper
 } from '../../../../testing/unit-test-helper';
 import { IscsiService } from '../../../shared/api/iscsi.service';
@@ -46,7 +45,7 @@ describe('IscsiTargetListComponent', () => {
       NgbNavModule
     ],
     declarations: [IscsiTargetListComponent, IscsiTabsComponent, IscsiTargetDetailsComponent],
-    providers: [TaskListService, i18nProviders]
+    providers: [TaskListService]
   });
 
   beforeEach(() => {