diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts index 5ef882d06..fe38b5a9d 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts @@ -1,6 +1,6 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `

{{modalTitle}}

- +
diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts index 5e5b5e9c7..8cc94307d 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts @@ -1,7 +1,7 @@ export const CREATE_EDIT_RULE_TEMPLATE: string = `

{{modalTitle}}

- +
diff --git a/src/ui_ng/lib/src/i18n/translate-init.service.ts b/src/ui_ng/lib/src/i18n/translate-init.service.ts index f756812fe..63f02455e 100644 --- a/src/ui_ng/lib/src/i18n/translate-init.service.ts +++ b/src/ui_ng/lib/src/i18n/translate-init.service.ts @@ -13,8 +13,9 @@ export class TranslateServiceInitializer { public init(config: i18nConfig = {}): void { let selectedLang: string = config.defaultLang ? config.defaultLang : DEFAULT_LANG; + let supportedLangs: string[] = config.supportedLangs ? config.supportedLangs : DEFAULT_SUPPORTING_LANGS; - this.translateService.addLangs(config.supportedLangs ? config.supportedLangs : DEFAULT_SUPPORTING_LANGS); + this.translateService.addLangs(supportedLangs); this.translateService.setDefaultLang(selectedLang); if (config.enablei18Support) { @@ -25,9 +26,11 @@ export class TranslateServiceInitializer { langSetting = this.translateService.getBrowserCultureLang().toLowerCase(); } - if (config.supportedLangs && config.supportedLangs.length > 0) { - if (config.supportedLangs.find(lang => lang === langSetting)) { - selectedLang = langSetting; + if (langSetting && langSetting.trim() !== "") { + if (supportedLangs && supportedLangs.length > 0) { + if (supportedLangs.find(lang => lang === langSetting)) { + selectedLang = langSetting; + } } } } diff --git a/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts b/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts index db0378d31..dc62f41fe 100644 --- a/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts +++ b/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts @@ -22,7 +22,7 @@ import { INLINE_ALERT_STYLE } from './inline-alert.component.css'; import { INLINE_ALERT_TEMPLATE } from './inline-alert.component.html'; @Component({ - selector: 'inline-alert', + selector: 'hbr-inline-alert', template: INLINE_ALERT_TEMPLATE, styles: [ INLINE_ALERT_STYLE ] }) diff --git a/src/ui_ng/lib/src/push-image/push-image.html.ts b/src/ui_ng/lib/src/push-image/push-image.html.ts index e75112f62..7fe84ed1e 100644 --- a/src/ui_ng/lib/src/push-image/push-image.html.ts +++ b/src/ui_ng/lib/src/push-image/push-image.html.ts @@ -17,7 +17,7 @@ export const PUSH_IMAGE_HTML: string = `
- +
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 92453d5d0..e6df24cad 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -1,71 +1,73 @@ { - "name": "harbor", - "version": "1.1.0", - "description": "Harbor UI with Clarity", - "angular-cli": {}, - "scripts": { - "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", - "lint": "tslint \"src/**/*.ts\"", - "test": "ng test --single-run", - "pree2e": "webdriver-manager update", - "e2e": "protractor", - "build": "ngc -p tsconfig-aot.json" - }, - "private": true, - "dependencies": { - "@angular/animations": "^4.0.1", - "@angular/common": "^4.0.1", - "@angular/compiler": "^4.0.1", - "@angular/compiler-cli": "^4.0.2", - "@angular/core": "^4.0.1", - "@angular/forms": "^4.0.1", - "@angular/http": "^4.0.1", - "@angular/platform-browser": "^4.0.1", - "@angular/platform-browser-dynamic": "^4.0.1", - "@angular/platform-server": "^4.0.2", - "@angular/router": "^4.0.1", - "@ngx-translate/core": "^6.0.0", - "@ngx-translate/http-loader": "0.0.3", - "@types/jquery": "^2.0.41", - "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.0", - "clarity-icons": "^0.9.0", - "clarity-ui": "^0.9.0", - "core-js": "^2.4.1", - "intl": "^1.2.5", - "mutationobserver-shim": "^0.3.2", - "ngx-cookie": "^1.0.0", - "rxjs": "^5.0.1", - "ts-helpers": "^1.1.1", - "web-animations-js": "^2.2.1", - "zone.js": "^0.8.4" - }, - "devDependencies": { - "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.1", - "@types/core-js": "^0.9.34", - "@types/jasmine": "~2.2.30", - "@types/node": "^6.0.42", - "bootstrap": "4.0.0-alpha.5", - "codelyzer": "~2.0.0-beta.4", - "enhanced-resolve": "^3.0.0", - "jasmine-core": "2.4.1", - "jasmine-spec-reporter": "2.5.0", - "karma": "1.2.0", - "karma-cli": "^1.0.1", - "karma-jasmine": "^1.0.2", - "karma-mocha-reporter": "^2.2.1", - "karma-phantomjs-launcher": "^1.0.0", - "karma-remap-istanbul": "^0.2.1", - "protractor": "4.0.9", - "rollup": "^0.41.6", - "rollup-plugin-commonjs": "^8.0.2", - "rollup-plugin-node-resolve": "^3.0.0", - "rollup-plugin-uglify": "^1.0.1", - "ts-node": "1.2.1", - "tslint": "^4.1.1", - "typescript": "~2.2.0", - "typings": "^1.4.0", - "webdriver-manager": "10.2.5" - } -} + "name": "harbor", + "version": "1.1.0", + "description": "Harbor UI with Clarity", + "angular-cli": {}, + "scripts": { + "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", + "lint": "tslint \"src/**/*.ts\"", + "test": "ng test --single-run", + "pree2e": "webdriver-manager update", + "e2e": "protractor", + "build": "ngc -p tsconfig-aot.json" + }, + "private": true, + "dependencies": { + "@angular/animations": "^4.0.1", + "@angular/common": "^4.0.1", + "@angular/compiler": "^4.0.1", + "@angular/compiler-cli": "^4.0.2", + "@angular/core": "^4.0.1", + "@angular/forms": "^4.0.1", + "@angular/http": "^4.0.1", + "@angular/platform-browser": "^4.0.1", + "@angular/platform-browser-dynamic": "^4.0.1", + "@angular/platform-server": "^4.0.2", + "@angular/router": "^4.0.1", + "@ngx-translate/core": "^6.0.0", + "@ngx-translate/http-loader": "0.0.3", + "@types/jquery": "^2.0.41", + "@webcomponents/custom-elements": "1.0.0-alpha.3", + "clarity-angular": "^0.9.0", + "clarity-icons": "^0.9.0", + "clarity-ui": "^0.9.0", + "core-js": "^2.4.1", + "harbor-ui": "^0.1.67", + "intl": "^1.2.5", + "mutationobserver-shim": "^0.3.2", + "ngx-clipboard": "^8.0.2", + "ngx-cookie": "^1.0.0", + "rxjs": "^5.0.1", + "ts-helpers": "^1.1.1", + "web-animations-js": "^2.2.1", + "zone.js": "^0.8.4" + }, + "devDependencies": { + "@angular/cli": "^1.0.0", + "@angular/compiler-cli": "^4.0.1", + "@types/core-js": "^0.9.34", + "@types/jasmine": "~2.2.30", + "@types/node": "^6.0.42", + "bootstrap": "4.0.0-alpha.5", + "codelyzer": "~2.0.0-beta.4", + "enhanced-resolve": "^3.0.0", + "jasmine-core": "2.4.1", + "jasmine-spec-reporter": "2.5.0", + "karma": "1.2.0", + "karma-cli": "^1.0.1", + "karma-jasmine": "^1.0.2", + "karma-mocha-reporter": "^2.2.1", + "karma-phantomjs-launcher": "^1.0.0", + "karma-remap-istanbul": "^0.2.1", + "protractor": "4.0.9", + "rollup": "^0.41.6", + "rollup-plugin-commonjs": "^8.0.2", + "rollup-plugin-node-resolve": "^3.0.0", + "rollup-plugin-uglify": "^1.0.1", + "ts-node": "1.2.1", + "tslint": "^4.1.1", + "typescript": "~2.2.0", + "typings": "^1.4.0", + "webdriver-manager": "10.2.5" + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/app.component.ts b/src/ui_ng/src/app/app.component.ts index 966e97db4..5c4de2279 100644 --- a/src/ui_ng/src/app/app.component.ts +++ b/src/ui_ng/src/app/app.component.ts @@ -31,20 +31,6 @@ export class AppComponent { private session: SessionService, private appConfigService: AppConfigService, private titleService: Title) { - - translate.addLangs(supportedLangs); - translate.setDefaultLang(enLang); - - //If user has selected lang, then directly use it - let langSetting = this.cookie.get("harbor-lang"); - if (!langSetting || langSetting.trim() === "") { - //Use browser lang - langSetting = translate.getBrowserCultureLang().toLowerCase(); - } - - let selectedLang = this.isLangMatch(langSetting, supportedLangs) ? langSetting : enLang; - translate.use(selectedLang); - //Override page title let key: string = "APP_TITLE.HARBOR"; if (this.appConfigService.isIntegrationMode()) { @@ -55,10 +41,4 @@ export class AppComponent { this.titleService.setTitle(res); }); } - - isLangMatch(browserLang: string, supportedLangs: string[]) { - if (supportedLangs && supportedLangs.length > 0) { - return supportedLangs.find(lang => lang === browserLang); - } - } } diff --git a/src/ui_ng/src/app/app.module.ts b/src/ui_ng/src/app/app.module.ts index caa9e47c7..79e14f046 100644 --- a/src/ui_ng/src/app/app.module.ts +++ b/src/ui_ng/src/app/app.module.ts @@ -13,9 +13,6 @@ // limitations under the License. import { BrowserModule } from '@angular/platform-browser'; import { NgModule, APP_INITIALIZER, LOCALE_ID } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; -import { ClarityModule } from 'clarity-angular'; import { AppComponent } from './app.component'; import { BaseModule } from './base/base.module'; @@ -24,17 +21,9 @@ import { SharedModule } from './shared/shared.module'; import { AccountModule } from './account/account.module'; import { ConfigurationModule } from './config/config.module'; -import { TranslateModule, TranslateLoader, TranslateService, MissingTranslationHandler } from "@ngx-translate/core"; -import { MyMissingTranslationHandler } from './i18n/missing-trans.handler'; -import { TranslateHttpLoader } from '@ngx-translate/http-loader'; -import { Http } from '@angular/http'; - +import { TranslateService } from "@ngx-translate/core"; import { AppConfigService } from './app-config.service'; -export function HttpLoaderFactory(http: Http) { - return new TranslateHttpLoader(http, 'i18n/lang/', '-lang.json'); -} - export function initConfig(configService: AppConfigService) { return () => configService.load(); } @@ -52,18 +41,7 @@ export function getCurrentLanguage(translateService: TranslateService) { BaseModule, AccountModule, HarborRoutingModule, - ConfigurationModule, - TranslateModule.forRoot({ - loader: { - provide: TranslateLoader, - useFactory: (HttpLoaderFactory), - deps: [Http] - }, - missingTranslationHandler: { - provide: MissingTranslationHandler, - useClass: MyMissingTranslationHandler - } - }) + ConfigurationModule ], providers: [ AppConfigService, diff --git a/src/ui_ng/src/app/core/core.module.ts b/src/ui_ng/src/app/core/core.module.ts index 04794a393..790ade9dc 100644 --- a/src/ui_ng/src/app/core/core.module.ts +++ b/src/ui_ng/src/app/core/core.module.ts @@ -19,22 +19,40 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ClarityModule } from 'clarity-angular'; import { CookieModule } from 'ngx-cookie'; +import { + IServiceConfig, + SERVICE_CONFIG, + HarborLibraryModule +} from 'harbor-ui'; + +const uiLibConfig: IServiceConfig = { + enablei18Support: true, + langCookieKey: "harbor-lang", + langMessageLoader: "http", + langMessagePathForHttpLoader: "src/i18n/lang/", + langMessageFileSuffixForHttpLoader: "-lang.json", +}; + @NgModule({ - imports: [ - BrowserModule, - FormsModule, - HttpModule, - ClarityModule.forRoot(), - CookieModule.forRoot(), - BrowserAnimationsModule - ], - exports: [ - BrowserModule, - FormsModule, - HttpModule, - ClarityModule, - BrowserAnimationsModule - ] + imports: [ + BrowserModule, + FormsModule, + HttpModule, + ClarityModule.forRoot(), + CookieModule.forRoot(), + BrowserAnimationsModule, + HarborLibraryModule.forRoot({ + config: { provide: SERVICE_CONFIG, useValue: uiLibConfig } + }) + ], + exports: [ + BrowserModule, + FormsModule, + HttpModule, + ClarityModule, + BrowserAnimationsModule, + HarborLibraryModule + ] }) export class CoreModule { } diff --git a/src/ui_ng/src/app/i18n/missing-trans.handler.ts b/src/ui_ng/src/app/i18n/missing-trans.handler.ts deleted file mode 100644 index 73552efa9..000000000 --- a/src/ui_ng/src/app/i18n/missing-trans.handler.ts +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core'; - -export class MyMissingTranslationHandler implements MissingTranslationHandler { - handle(params: MissingTranslationHandlerParams) { - const missingText = "{Miss Harbor Text}"; - return params.key || missingText; - } -} \ No newline at end of file