Merge pull request #13141 from AllForNothing/update

Update UI package to latest version

src/portal/angular.json

@@ -40,9 +40,10 @@
               }
             ],
             "scripts": [
+              "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
+              "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
               "node_modules/core-js/client/shim.min.js",
               "node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
-              "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
               "node_modules/@clr/icons/clr-icons.min.js",
               "node_modules/web-animations-js/web-animations.min.js",
               "node_modules/marked/lib/marked.js",
@@ -150,5 +151,8 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
\ No newline at end of file

src/portal/karma.conf.js

@@ -18,7 +18,7 @@ module.exports = function (config) {
       },
       coverageIstanbulReporter: {
         // reports can be any that are listed here: https://github.com/istanbuljs/istanbuljs/tree/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib
-        reports: ['html', 'lcovonly', 'text-summary'],
+        reports: ['json', 'lcovonly', 'text-summary'],
    
         // base output directory. If you include %browser% in the path it will be replaced with the karma browser name
         dir: path.join(__dirname, 'coverage'),

src/portal/package.json

 {
   "name": "harbor",
-  "version": "1.10.0",
+  "version": "2.2.0",
   "description": "Harbor UI with Clarity",
   "angular-cli": {},
   "scripts": {
@@ -8,7 +8,7 @@
     "start": "ng serve --ssl true --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json",
     "lint": "tslint \"src/**/*.ts\"",
     "lint_fix": "tslint --fix \"src/**/*.ts\"",
-    "test": "ng test --code-coverage",
+    "test": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng test --code-coverage",
     "test:watch": "ng test --code-coverage --watch",
     "test:debug": "ng test --code-coverage --source-map false",
     "test:chrome": "ng test --code-coverage --browsers Chrome",
@@ -24,77 +24,80 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.0",
-    "@angular/common": "^8.2.0",
-    "@angular/compiler": "^8.2.0",
-    "@angular/core": "^8.2.0",
-    "@angular/forms": "^8.2.0",
-    "@angular/platform-browser": "^8.2.0",
-    "@angular/platform-browser-dynamic": "^8.2.0",
-    "@angular/router": "^8.2.0",
-    "@clr/angular": "^2.3.8",
-    "@clr/icons": "^2.3.8",
-    "@clr/ui": "^2.3.8",
+    "@angular/animations": "^10.1.2",
+    "@angular/common": "^10.1.2",
+    "@angular/compiler": "^10.1.2",
+    "@angular/core": "^10.1.2",
+    "@angular/forms": "^10.1.2",
+    "@angular/localize": "^10.1.2",
+    "@angular/platform-browser": "^10.1.2",
+    "@angular/platform-browser-dynamic": "^10.1.2",
+    "@angular/router": "^10.1.2",
+    "@clr/angular": "^4.0.2",
+    "@clr/core": "^4.0.2",
+    "@clr/icons": "^4.0.2",
+    "@clr/ui": "^4.0.2",
     "@fortawesome/fontawesome-free": "^5.1.0-4",
-    "@ng-bootstrap/ng-bootstrap": "^5.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@ngx-translate/core": "^10.0.2",
     "@ngx-translate/http-loader": "^3.0.1",
     "@types/jquery": "^2.0.41",
-    "@webcomponents/custom-elements": "^1.2.4",
+    "@webcomponents/custom-elements": "^1.0.0",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
     "buffer": "^5.2.1",
     "core-js": "^2.5.4",
     "intl": "^1.2.5",
     "jasmine-core": "^3.3.0",
     "mutationobserver-shim": "^0.3.2",
-    "ng-packagr": "^5.3.0",
+    "ng-packagr": "^10.1.0",
     "ngx-clipboard": "^12.0.0",
     "ngx-cookie": "^1.0.0",
-    "ngx-markdown": "^8.1.0",
+    "ngx-markdown": "^10.1.1",
     "popper.js": "^1.14.3",
-    "rxjs": "^6.5.2",
+    "rxjs": "^6.6.3",
     "stream": "^0.0.2",
     "swagger-ui": "^3.24.0",
     "ts-helpers": "^1.1.1",
-    "tslib": "^1.9.0",
+    "tslib": "^2.0.1",
     "types": "^0.1.1",
     "web-animations-js": "^2.3.2",
-    "zone.js": "^0.9.1"
+    "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.802.0",
-    "@angular-devkit/build-ng-packagr": "~0.802.0",
-    "@angular/cli": "^8.2.0",
-    "@angular/compiler-cli": "^8.2.0",
-    "@angular/language-service": "^8.2.0",
+    "@angular-devkit/build-angular": "^0.1001.2",
+    "@angular-devkit/build-ng-packagr": "~0.1001.2",
+    "@angular/cli": "^10.1.2",
+    "@angular/compiler-cli": "^10.1.2",
+    "@angular/language-service": "^10.1.2",
     "@types/core-js": "^0.9.41",
     "@types/express": "^4.17.2",
     "@types/jasmine": "^3.3.1",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~5.0.0",
+    "@types/node": "^14.11.2",
+    "codelyzer": "^6.0.0",
     "enhanced-resolve": "^3.0.0",
     "express": "^4.17.1",
     "jasmine-spec-reporter": "~4.2.1",
     "js-yaml": "^3.13.1",
-    "karma": "^4.4.1",
+    "karma": "^5.2.2",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "^1.0.1",
-    "karma-coverage": "^2.0.1",
+    "karma-coverage": "^2.0.3",
     "karma-coverage-istanbul-reporter": "~2.0.0",
     "karma-jasmine": "^2.0.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-mocha-reporter": "^2.2.4",
     "karma-remap-istanbul": "^0.6.0",
     "ng-swagger-gen": "^1.8.1",
-    "protractor": "^5.4.2",
-    "rollup": "^0.41.6",
+    "protractor": "^7.0.0",
+    "rollup": "^2.22.0",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "ts-node": "~5.0.1",
-    "tsickle": "^0.36.0",
+    "tsickle": "^0.39.1",
     "tslint": "~5.9.1",
-    "typescript": "^3.5.3",
+    "typescript": "^3.9.7",
     "typings": "^2.1.1",
     "uglify-js": "3.3.18",
     "webdriver-manager": "10.2.5"

src/portal/src/app/account/account-settings/account-settings-modal.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AccountSettingsModalComponent } from './account-settings-modal.component';
 import { SessionService } from "../../shared/session.service";
@@ -66,7 +66,7 @@ describe('AccountSettingsModalComponent', () => {
         navigate: () => { }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AccountSettingsModalComponent, InlineAlertComponent, ConfirmationDialogComponent],
             imports: [
@@ -108,7 +108,7 @@ describe('AccountSettingsModalComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
-    it('should input right email', async(async () => {
+    it('should input right email', waitForAsync(async () => {
         await fixture.whenStable();
         // Update the title input
         userExisting = true;

src/portal/src/app/account/account-settings/account-settings-modal.component.ts

@@ -55,14 +55,14 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
   showSecretDetail = false;
   resetForms = new ResetSecret();
   showGenerateCli: boolean = false;
-  @ViewChild("confirmationDialog", {static: false})
+  @ViewChild("confirmationDialog")
   confirmationDialogComponent: ConfirmationDialogComponent;
 
   accountFormRef: NgForm;
   @ViewChild("accountSettingsFrom", {static: true}) accountForm: NgForm;
   @ViewChild("resetSecretFrom", {static: true}) resetSecretFrom: NgForm;
-  @ViewChild(InlineAlertComponent, {static: false}) inlineAlert: InlineAlertComponent;
-  @ViewChild("copyInput", {static: false}) copyInput: CopyInputComponent;
+  @ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;
+  @ViewChild("copyInput") copyInput: CopyInputComponent;
 
   constructor(
     private session: SessionService,

src/portal/src/app/account/password-setting/forgot-password/forgot-password.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { ForgotPasswordComponent } from './forgot-password.component';
 import { ClarityModule } from "@clr/angular";
@@ -17,7 +17,7 @@ describe('ForgotPasswordComponent', () => {
         sendResetPasswordMail: () => of(null)
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ForgotPasswordComponent, InlineAlertComponent],
             imports: [

src/portal/src/app/account/password-setting/forgot-password/forgot-password.component.ts

@@ -30,7 +30,7 @@ export class ForgotPasswordComponent {
     isSuccess: boolean = false;
 
     @ViewChild("forgotPasswordFrom", {static: true}) forgotPwdForm: NgForm;
-    @ViewChild(InlineAlertComponent, {static: false})
+    @ViewChild(InlineAlertComponent)
     inlineAlert: InlineAlertComponent;
 
     constructor(private pwdService: PasswordSettingService) { }

src/portal/src/app/account/password-setting/password-setting.component.spec.ts

-import { async, ComponentFixture, TestBed, flush } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { PasswordSettingService } from './password-setting.service';
 import { SessionService } from '../../shared/session.service';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
@@ -25,7 +25,7 @@ describe('PasswordSettingComponent', () => {
         showSuccess: () => { }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 ClarityModule,

src/portal/src/app/account/password-setting/reset-password/reset-password.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ResetPasswordComponent } from './reset-password.component';
@@ -17,7 +17,7 @@ describe('ResetPasswordComponent', () => {
     let fakePasswordSettingService = null;
     let fakeMessageHandlerService = null;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),

src/portal/src/app/account/password-setting/reset-password/reset-password.component.ts

@@ -38,7 +38,7 @@ export class ResetPasswordComponent implements OnInit {
     confirmPwd: string = "";
 
     @ViewChild("resetPwdForm", {static: true}) resetPwdForm: NgForm;
-    @ViewChild(InlineAlertComponent, {static: false})
+    @ViewChild(InlineAlertComponent)
     inlineAlert: InlineAlertComponent;
 
     constructor(

src/portal/src/app/account/sign-up/sign-up-page.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { UserService } from '../../user/user.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -15,7 +15,7 @@ describe('SignUpPageComponent', () => {
     let fakeUserService = null;
     let fakeSessionService = null;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [SignUpPageComponent, NewUserFormComponent],
             imports: [

src/portal/src/app/account/sign-up/sign-up-page.component.ts

@@ -35,7 +35,7 @@ export class SignUpPageComponent implements OnInit {
         private msgService: MessageService,
         private router: Router) { }
 
-    @ViewChild(NewUserFormComponent, {static: false})
+    @ViewChild(NewUserFormComponent)
     newUserForm: NewUserFormComponent;
 
     getNewUser(): User {

src/portal/src/app/account/sign-up/sign-up.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClarityModule } from "@clr/angular";
 import { SignUpComponent } from './sign-up.component';
 import { SessionService } from '../../shared/session.service';
@@ -36,7 +36,7 @@ describe('SignUpComponent', () => {
         creation_time: 'string',
         update_time: 'string',
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [SignUpComponent, NewUserFormComponent, InlineAlertComponent],
             imports: [

src/portal/src/app/account/sign-up/sign-up.component.ts

@@ -42,10 +42,10 @@ export class SignUpComponent {
     @ViewChild(NewUserFormComponent, {static: true})
     newUserForm: NewUserFormComponent;
 
-    @ViewChild(InlineAlertComponent, {static: false})
+    @ViewChild(InlineAlertComponent)
     inlineAlert: InlineAlertComponent;
 
-    @ViewChild(Modal, {static: false})
+    @ViewChild(Modal)
     modal: Modal;
 
     getNewUser(): User {

src/portal/src/app/app.component.spec.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 /* tslint:disable:no-unused-variable */
 
-import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { Title } from '@angular/platform-browser';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CookieService } from 'ngx-cookie';
@@ -74,7 +74,7 @@ describe('AppComponent', () => {
         fixture.destroy();
     });
 
-    it('should create the app', async(() => {
+    it('should create the app', waitForAsync(() => {
         expect(compiled).toBeTruthy();
     }));
 

src/portal/src/app/base/footer/footer.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FooterComponent } from './footer.component';
 
@@ -6,7 +6,7 @@ describe('FooterComponent', () => {
     let component: FooterComponent;
     let fixture: ComponentFixture<FooterComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [FooterComponent]
         })

src/portal/src/app/base/global-search/global-search.component.spec.ts

-import { async, ComponentFixture, fakeAsync, getTestBed, TestBed, tick } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, fakeAsync, getTestBed, TestBed, tick } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { GlobalSearchComponent } from './global-search.component';
 import { SearchTriggerService } from './search-trigger.service';
@@ -6,7 +6,6 @@ import { FormsModule } from '@angular/forms';
 import { AppConfigService } from '../../services/app-config.service';
 import { SkinableConfig } from "../../services/skinable-config.service";
 import { RouterTestingModule } from '@angular/router/testing';
-import { of } from 'rxjs';
 
 describe('GlobalSearchComponent', () => {
     let component: GlobalSearchComponent;
@@ -33,7 +32,7 @@ describe('GlobalSearchComponent', () => {
         }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),

src/portal/src/app/base/global-search/search-result.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { GlobalSearchService } from './global-search.service';
 import { SearchResults } from './search-results';
 import { SearchTriggerService } from './search-trigger.service';
@@ -59,7 +59,7 @@ describe('SearchResultComponent', () => {
         searchCloseChan$: of(null),
         clear: () => null
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),

src/portal/src/app/base/harbor-shell/harbor-shell.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SessionService } from '../../shared/session.service';
@@ -66,7 +66,7 @@ describe('HarborShellComponent', () => {
             return of(true);
         }
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 RouterTestingModule,