Undate Angular to the latest version (#15129)

Signed-off-by: AllForNothing <sshijun@vmware.com>

.github/workflows/CI.yml

@@ -332,7 +332,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v1
         with:
-          node-version: '10.16.2'
+          node-version: '15.14.0'
       - uses: actions/checkout@v2
         with:
           path: src/github.com/goharbor/harbor

make/photon/portal/Dockerfile

@@ -21,7 +21,7 @@ COPY src/portal /build_dir
 ENV NPM_CONFIG_REGISTRY=${npm_registry}
 RUN npm install --unsafe-perm
 RUN npm run generate-build-timestamp
-RUN node --max_old_space_size=2048 'node_modules/@angular/cli/bin/ng' build --prod
+RUN node --max_old_space_size=2048 'node_modules/@angular/cli/bin/ng' build --configuration production
 RUN python -c 'import sys, yaml, json; y=yaml.load(sys.stdin.read()); print json.dumps(y)' < swagger.yaml > dist/swagger.json
 RUN python -c 'import sys, yaml, json; y=yaml.load(sys.stdin.read()); print json.dumps(y)' < swagger2.yaml > dist/swagger2.json
 RUN python -c 'import sys, yaml, json; y=yaml.load(sys.stdin.read()); print json.dumps(y)' < swagger3.yaml > dist/swagger3.json

src/portal/angular.json

@@ -13,6 +13,7 @@
           "options": {
             "allowedCommonJsDependencies": [
               "swagger-ui",
+              "buffer",
               "js-yaml"
             ],
             "outputPath": "dist",
@@ -20,7 +21,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "extractCss": true,
             "assets": [
               "src/images",
               "src/favicon.ico",
@@ -47,22 +47,28 @@
             "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/@clr/icons/clr-icons.min.js",
-              "node_modules/web-animations-js/web-animations.min.js",
               "node_modules/marked/lib/marked.js",
               "node_modules/prismjs/prism.js",
-              "node_modules/prismjs/components/prism-yaml.min.js",
-              "node_modules/popper.js/dist/umd/popper.js"
-            ]
+              "node_modules/prismjs/components/prism-yaml.min.js"
+            ],
+            "aot": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
-              "optimization": true,
+              "optimization": {
+                "styles": {
+                  "inlineCritical": false
+                }
+              },
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -75,7 +81,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -102,14 +109,9 @@
             "polyfills": "src/polyfills.ts",
             "karmaConfig": "karma.conf.js",
             "scripts": [
-              "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",
-              "node_modules/prismjs/prism.js",
-              "node_modules/prismjs/components/prism-yaml.min.js"
+              "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
+              "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
+              "node_modules/@clr/icons/clr-icons.min.js"
             ],
             "styles": [
               "node_modules/@clr/icons/clr-icons.min.css",
@@ -151,8 +153,7 @@
   "defaultProject": "harbor-portal",
   "schematics": {
     "@schematics/angular:component": {
-      "prefix": "app",
-      "styleext": "scss"
+      "prefix": "app"
     },
     "@schematics/angular:directive": {
       "prefix": "app"
@@ -161,4 +162,4 @@
   "cli": {
     "analytics": false
   }
-}
+}

src/portal/e2e/tsconfig.json

@@ -4,7 +4,6 @@
         "rootDir": "../",
         "baseUrl": "",
         "declaration": false,
-        "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "module": "commonjs",
         "moduleResolution": "node",

src/portal/karma.conf.js

@@ -1,87 +1,70 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-const path = require('path');
 module.exports = function (config) {
-    config.set({
-      basePath: '',
-      frameworks: ['jasmine', '@angular-devkit/build-angular'],
-      plugins: [
-        require('karma-jasmine'),
-        require('karma-chrome-launcher'),
-        require('karma-mocha-reporter'),
-        require('karma-coverage-istanbul-reporter'),
-        require('@angular-devkit/build-angular/plugins/karma')
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage'),
+      subdir: '.',
+      reporters: [
+        { type: 'lcov' },
+        { type: 'text-summary' }
       ],
-      client: {
-        clearContext: false // leave Jasmine Spec Runner output visible in browser
-      },
-      coverageIstanbulReporter: {
-        // reports can be any that are listed here: https://github.com/istanbuljs/istanbuljs/tree/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib
-        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'),
-   
-        // Combines coverage information from multiple browsers into one report rather than outputting a report
-        // for each browser.
-        combineBrowserReports: true,
-   
-        // if using webpack and pre-loaders, work around webpack breaking the source path
-        fixWebpackSourcePaths: true,
-   
-        // Omit files with no statements, no functions and no branches from the report
-        skipFilesWithNoCoverage: false,
-   
-        // Most reporters accept additional config options. You can pass these through the `report-config` option
-        'report-config': {
-          // all options available at: https://github.com/istanbuljs/istanbuljs/blob/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib/html/index.js#L135-L137
-          html: {
-            // outputs the report in ./coverage/html
-            subdir: 'html'
-          }
+      check: {
+        emitWarning: true, // set to `true` to not fail the test command when thresholds are not met
+        // thresholds for all files
+        global: {
+          statements: 40,
+          branches: 13,
+          functions: 26,
+          lines: 41
         },
-   
-        // enforce percentage thresholds
-        // anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
-        thresholds: {
-          emitWarning: true, // set to `true` to not fail the test command when thresholds are not met
-          // thresholds for all files
-          global: {
-            statements: 40,
-            branches: 13,
-            functions: 26,
-            lines: 41
-          },
-          // thresholds per file
-          each: {
-            statements: 0,
-            lines: 0,
-            branches: 0,
-            functions: 0
-          }
+        // thresholds per file
+        each: {
+          statements: 0,
+          lines: 0,
+          branches: 0,
+          functions: 0
         }
-
-      },
-      reporters: ['progress', 'mocha','coverage-istanbul'],
-      mochaReporter: {
-        output: 'minimal'
-      },
-      reportSlowerThan: 100,
-      port: 9876,
-      colors: true,
-      logLevel: config.LOG_INFO,
-      autoWatch: true,
-      singleRun: true,
-      browsers: ['ChromeHeadlessNoSandbox'],
-      browserDisconnectTolerance: 2,
-      browserNoActivityTimeout: 50000,
-      customLaunchers: {
-        ChromeHeadlessNoSandbox: {
-          base: 'ChromeHeadless',
-          flags: ['--no-sandbox']
-        }
-      },
-      restartOnFileChange: true
-    });
-  };
+      }
+    },
+    reporters: ['progress', 'kjhtml'],
+    reportSlowerThan: 100,
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    singleRun: true,
+    browsers: ['ChromeHeadlessNoSandbox'],
+    browserDisconnectTolerance: 2,
+    browserNoActivityTimeout: 50000,
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+    restartOnFileChange: true
+  });
+};

src/portal/package.json

@@ -5,7 +5,7 @@
   "angular-cli": {},
   "scripts": {
     "postinstall": "node scripts/convert-yaml-to-json.js && ng-swagger-gen -i ng-swagger-gen/swagger.json -o ng-swagger-gen && node scripts/delete-swagger-json.js",
-    "start": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json",
+    "start": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0 --proxy-config proxy.config.json",
     "lint": "tslint \"src/**/*.ts\"",
     "lint_fix": "tslint --fix \"src/**/*.ts\"",
     "test": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng test --code-coverage",
@@ -17,88 +17,83 @@
     "pree2e": "webdriver-manager update",
     "e2e": "protractor",
     "build": "ng build --aot",
-    "release": "ng build --prod",
+    "release": "ng build --configuration production",
     "build-mock-api-server": "tsc -p server",
     "mock-api-server": "npm run build-mock-api-server && node server/dist/server/src/mock-api.js",
     "generate-build-timestamp": "node scripts/generate-build-timestamp.js"
   },
   "private": true,
   "dependencies": {
-    "@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": "^7.0.0",
+    "@angular/animations": "^12.0.3",
+    "@angular/common": "^12.0.3",
+    "@angular/compiler": "^12.0.3",
+    "@angular/core": "^12.0.3",
+    "@angular/forms": "^12.0.3",
+    "@angular/localize": "^12.0.3",
+    "@angular/platform-browser": "^12.0.3",
+    "@angular/platform-browser-dynamic": "^12.0.3",
+    "@angular/router": "^12.0.3",
+    "@cds/core": "^5.3.0",
+    "@clr/angular": "^5.3.0",
+    "@clr/icons": "^5.3.0",
+    "@clr/ui": "^5.3.0",
+    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@ng-bootstrap/ng-bootstrap": "~9.1.2",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
-    "@types/jquery": "^2.0.41",
-    "@webcomponents/custom-elements": "^1.0.0",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "buffer": "^5.2.1",
-    "core-js": "^2.5.4",
+    "@types/jquery": "^2.0.56",
+    "@webcomponents/custom-elements": "^1.4.3",
+    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "buffer": "^5.7.1",
+    "core-js": "^2.6.12",
     "cron-validator": "^1.2.1",
     "intl": "^1.2.5",
-    "jasmine-core": "^3.3.0",
-    "mutationobserver-shim": "^0.3.2",
-    "ng-packagr": "^10.1.2",
-    "ngx-clipboard": "^12.0.0",
+    "mutationobserver-shim": "^0.3.7",
+    "ng-packagr": "^12.0.4",
+    "ngx-clipboard": "^12.3.1",
     "ngx-cookie": "^1.0.0",
-    "ngx-markdown": "^10.1.1",
-    "popper.js": "^1.14.3",
-    "rxjs": "^6.6.3",
+    "ngx-markdown": "~12.0.1",
+    "popper.js": "^1.16.1",
+    "rxjs": "^6.6.7",
     "stream": "^0.0.2",
-    "swagger-ui": "^3.24.0",
+    "swagger-ui": "^3.50.0",
     "ts-helpers": "^1.1.1",
-    "tslib": "^2.0.1",
+    "tslib": "^2.2.0",
     "types": "^0.1.1",
     "web-animations-js": "^2.3.2",
-    "zone.js": "^0.10.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@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",
+    "@angular-devkit/build-angular": "^12.0.3",
+    "@angular/cli": "^12.0.3",
+    "@angular/compiler-cli": "^12.0.3",
+    "@angular/language-service": "^12.0.3",
     "@types/core-js": "^0.9.41",
-    "@types/express": "^4.17.2",
-    "@types/jasmine": "^3.3.1",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^14.11.2",
-    "codelyzer": "^6.0.0",
+    "@types/express": "^4.17.12",
+    "@types/jasmine": "~3.6.0",
+    "@types/jasminewd2": "^2.0.9",
+    "@types/node": "^14.17.3",
+    "codelyzer": "^6.0.2",
     "enhanced-resolve": "^3.0.0",
     "express": "^4.17.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "js-yaml": "^3.13.1",
-    "karma": "^5.2.2",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-cli": "^1.0.1",
+    "jasmine-core": "^3.7.1",
+    "jasmine-spec-reporter": "~5.0.0",
+    "js-yaml": "^3.14.1",
+    "karma": "^6.3.3",
+    "karma-chrome-launcher": "~3.1.0",
     "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",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "ng-swagger-gen": "^1.8.1",
     "protractor": "^7.0.0",
-    "rollup": "^2.22.0",
+    "rollup": "^2.51.1",
     "rollup-plugin-commonjs": "^8.0.2",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-uglify": "^1.0.1",
     "ts-node": "~5.0.1",
-    "tsickle": "^0.39.1",
-    "tslint": "~5.9.1",
-    "typescript": "^3.9.7",
+    "tsickle": "~0.40.0",
+    "tslint": "~6.1.3",
+    "typescript": "~4.2.3",
     "typings": "^2.1.1",
     "uglify-js": "3.3.18",
     "webdriver-manager": "10.2.5"

src/portal/src/app/base/left-side-nav/gc-page/gc/gc.component.spec.ts

@@ -41,8 +41,8 @@ describe('GcComponent', () => {
     component = fixture.componentInstance;
 
     gcRepoService = fixture.debugElement.injector.get(GcService);
-    spySchedule = spyOn(gcRepoService, "getGCSchedule").and.returnValues(of(mockSchedule));
-    spyGcNow = spyOn(gcRepoService, "createGCSchedule").and.returnValues(of(true));
+    spySchedule = spyOn(gcRepoService, "getGCSchedule").and.returnValues(of(mockSchedule as any));
+    spyGcNow = spyOn(gcRepoService, "createGCSchedule").and.returnValues(of(null));
     fixture.detectChanges();
   });
   it('should create', () => {

src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/project-quotas.component.spec.ts

@@ -5,13 +5,16 @@ import {
   Quota, RequestQueryParams
 } from '../../../../shared/services';
 import { ErrorHandler } from '../../../../shared/units/error-handler';
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { APP_BASE_HREF } from '@angular/common';
 import { SharedTestingModule } from "../../../../shared/shared.module";
 import { EditProjectQuotasComponent } from "./edit-project-quotas/edit-project-quotas.component";
 import { QuotaService } from "../../../../../../ng-swagger-gen/services/quota.service";
 import { ProjectService } from "../../../../../../ng-swagger-gen/services/project.service";
+import { StrictHttpResponse } from "../../../../../../ng-swagger-gen/strict-http-response";
+import { HttpHeaders, HttpResponse } from "@angular/common/http";
+import { Registry } from "../../../../../../ng-swagger-gen/models/registry";
 
 
 describe('ProjectQuotasComponent', () => {
@@ -58,7 +61,7 @@ describe('ProjectQuotasComponent', () => {
     listProjects() {
       return of([]);
     }
-  }
+  };
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -89,17 +92,15 @@ describe('ProjectQuotasComponent', () => {
     component.loading = true;
     quotaService = fixture.debugElement.injector.get(QuotaService);
     spy = spyOn(quotaService, 'listQuotasResponse')
-      .and.callFake(function (params: RequestQueryParams) {
-        let header = new Map();
-        header.set("X-Total-Count", 123);
-        const httpRes = {
-          headers: header,
+      .and.callFake(function (params: QuotaService.ListQuotasParams): Observable<HttpResponse<Quota[]>> {
+        const response: HttpResponse<Array<Quota>> = new HttpResponse<Array<Quota>>({
+          headers: new HttpHeaders({'x-total-count': '123'}),
           body: mockQuotaList
-        };
-        return of(httpRes).pipe(delay(0));
+        });
+        return of(response).pipe(delay(0));
       });
     spyUpdate = spyOn(quotaService, 'updateQuota').and.returnValue(of(null));
-    spyRoute = spyOn(fixture.debugElement.injector.get(Router), 'navigate').and.returnValue(of(null));
+    spyRoute = spyOn(fixture.debugElement.injector.get(Router), 'navigate').and.returnValue(Promise.resolve(true));
     fixture.detectChanges();
   }));
 

src/portal/src/app/base/left-side-nav/registries/endpoint.component.html

@@ -1,6 +1,6 @@
 <h2 class="custom-h2">{{'SIDE_NAV.SYSTEM_MGMT.REGISTRY' | translate}}</h2>
 <div class="content-top">
-    <div class="row"  class="endpoint-view">
+    <div class="row endpoint-view">
         <div>
             <div class="row flex-items-xs-between rightPos">
                 <div class="flex-items-xs-middle option-right">

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts

@@ -352,7 +352,7 @@ describe("ArtifactListTabComponent (inline template)", () => {
     spyLabels = spyOn(labelService, "ListLabelsResponse").and.returnValues(
      of(response).pipe(delay(0))
     );
-    spyLabels1 = spyOn(labelService, "ListLabels").withArgs(comp.projectId).and.returnValues(of(mockLabels1).pipe(delay(0)));
+    spyLabels1 = spyOn(labelService, "ListLabels").withArgs({projectId: comp.projectId}).and.returnValues(of(mockLabels1).pipe(delay(0)));
     fixture.detectChanges();
   });
 

src/portal/src/app/base/project/tag-feature-integration/immutable-tag/add-rule/add-immutable-rule.component.ts

@@ -23,13 +23,13 @@ export class AddImmutableRuleComponent implements OnInit, OnDestroy {
     @Input() rules: ImmutableRetentionRule[];
     @Input() projectId: number;
     metadata: RuleMetadate = new RuleMetadate();
-    rule: ImmutableRetentionRule = new ImmutableRetentionRule(this.projectId);
+    rule: ImmutableRetentionRule;
     isAdd: boolean = true;
     editRuleOrigin: ImmutableRetentionRule;
     onGoing: boolean = false;
     @ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;
     constructor(private immutableTagService: ImmutableTagService) {
-
+        this.rule = new ImmutableRetentionRule(this.projectId);
     }
 
     ngOnInit(): void {

src/portal/src/app/base/project/tag-feature-integration/immutable-tag/immutable-tag.component.spec.ts

@@ -9,6 +9,7 @@ import { clone } from "../../../../shared/units/utils";
 import { InlineAlertComponent } from "../../../../shared/components/inline-alert/inline-alert.component";
 import { AddImmutableRuleComponent } from "./add-rule/add-immutable-rule.component";
 import { SharedTestingModule } from "../../../../shared/shared.module";
+import { RuleMetadate } from "../tag-retention/retention";
 
 describe('ImmutableTagComponent', () => {
   let component: ImmutableTagComponent;
@@ -17,7 +18,7 @@ describe('ImmutableTagComponent', () => {
   let errorHandler: ErrorHandler;
   let fixture: ComponentFixture<ImmutableTagComponent>;
   let fixtureAddrule: ComponentFixture<AddImmutableRuleComponent>;
-  let mockMetadata = {
+  let mockMetadata: RuleMetadate = {
     "templates": [
       {
         "rule_template": "latestPushedK",
@@ -250,7 +251,7 @@ describe('ImmutableTagComponent', () => {
     immutableTagService = fixture.debugElement.injector.get(ImmutableTagService);
     errorHandler = fixture.debugElement.injector.get(ErrorHandler);
     spyOn(immutableTagService, "getRetentionMetadata")
-      .and.returnValue(of(mockMetadata, throwError('error')));
+      .and.returnValue(of(mockMetadata));
     spyOn(immutableTagService, "getRules")
       .withArgs(component.projectId)
       .and.returnValue(of(mockRules))

src/portal/src/app/harbor-routing.module.ts

@@ -54,9 +54,10 @@ const harborRoutes: Routes = [
   ],
   imports: [
     RouterModule.forRoot(harborRoutes, {
-      onSameUrlNavigation: 'reload',
-      preloadingStrategy: PreloadAllModules
-    })
+    onSameUrlNavigation: 'reload',
+    preloadingStrategy: PreloadAllModules,
+    relativeLinkResolution: 'legacy'
+})
   ],
   exports: [RouterModule]
 })

src/portal/src/app/license/license.component.scss

@@ -3,7 +3,7 @@
   font-family: monospace;
   word-wrap: break-word;
   white-space: pre-wrap;
-  margin: 1em 0px;
+  padding: 1em 0;
   font-size: 1rem;
 }
 

src/portal/src/app/route-reuse-strategy/harbor-route-reuse-strategy.ts

@@ -32,13 +32,13 @@ export class HarborRouteReuseStrategy implements RouteReuseStrategy {
   private shouldKeepCache(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
     if (future.routeConfig && curr.routeConfig && future.routeConfig.data && curr.routeConfig.data) {
       // action 1: from replication tasks list page to TotalReplicationPageComponent page
-      if (future.routeConfig.data.routeConfigId === RouteConfigId.REPLICATION_TASKS_PAGE
-        && curr.routeConfig.data.routeConfigId === RouteConfigId.REPLICATION_PAGE) {
+      if (curr.routeConfig.data.routeConfigId === RouteConfigId.REPLICATION_TASKS_PAGE
+        && future.routeConfig.data.routeConfigId === RouteConfigId.REPLICATION_PAGE) {
         this.shouldDeleteCache = false;
       }
       // action 2: from preheat tasks list page to PolicyComponent page
-      if (future.routeConfig.data.routeConfigId === RouteConfigId.P2P_TASKS_PAGE
-        && curr.routeConfig.data.routeConfigId === RouteConfigId.P2P_POLICIES_PAGE) {
+      if (curr.routeConfig.data.routeConfigId === RouteConfigId.P2P_TASKS_PAGE
+        && future.routeConfig.data.routeConfigId === RouteConfigId.P2P_POLICIES_PAGE) {
         this.shouldDeleteCache = false;
       }
     }
@@ -59,10 +59,12 @@ export class HarborRouteReuseStrategy implements RouteReuseStrategy {
   shouldAttach(route: ActivatedRouteSnapshot): boolean {
     if (this.isReuseRoute(route)) {
       if (this.shouldDeleteCache) {
-        this.clearAllCache();
+         this.clearAllCache();
       }
     }
-    this.shouldDeleteCache = true;
+    setTimeout(() => {
+      this.shouldDeleteCache = true;
+    }, 0);
     return this._cache[this.getFullUrl(route)] && this.isReuseRoute(route);
   }
 

src/portal/src/app/shared/components/navigator/navigator.component.html

@@ -17,7 +17,7 @@
             <button class="nav-icon nav-icon-width" clrDropdownToggle>
                 <clr-icon shape="world" class="icon-left"></clr-icon>
                 <span class="currentLang">{{currentLang}}</span>
-                <clr-icon shape="caret down"></clr-icon>
+                <clr-icon size="10" shape="caret down"></clr-icon>
             </button>
             <clr-dropdown-menu *clrIfOpen>
                 <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en-us")' [class.lang-selected]='matchLang("en-us")'>English</a>
@@ -35,7 +35,7 @@
             <button class="nav-text" clrDropdownToggle>
                 <clr-icon shape="user" class="is-inverse user-icon" size="24"></clr-icon>
                 <span>{{accountName}}</span>
-                <clr-icon shape="caret down"></clr-icon>
+                <clr-icon class="user-down" size="10" shape="caret down"></clr-icon>
             </button>
             <clr-dropdown-menu [clrPosition]="'bottom-right'" *clrIfOpen>
                 <a href="javascript:void(0)" clrDropdownItem (click)="openAccountSettingsModal()">{{'ACCOUNT_SETTINGS.PROFILE' | translate}}</a>

src/portal/src/app/shared/components/navigator/navigator.component.scss

@@ -49,7 +49,7 @@
         left: -8px;
     }
     .currentLang {
-        padding-right: 30px;
+        padding-right: 40px;
     }
 }
 
@@ -66,5 +66,8 @@
     outline: none;
 }
 .dropdown-lang {
-    padding-right: 1.3rem;
+    padding-right: 0.5rem;
+}
+.user-down {
+    right: 1rem !important;
 }

src/portal/src/css/dark-theme.scss

@@ -21,9 +21,9 @@ $right-status-fill-color: white;
 $light-color-green: #4cd400;
 
 $color-ddd: #21333b;
-$color-f2: none;
-$color-657b83: none;
-$color-fdf6e3:  none;
+$color-f2: transparent;
+$color-657b83: unset;
+$color-fdf6e3:  transparent;
 $header-color: hsl(198, 100%, 15%)!important;
 $color-yaml:  #253c46;
 $filter-divider-bg-color: #495865;

src/portal/src/css/light-theme.scss

@@ -27,7 +27,7 @@ $color-f2: #f2f2f2;
 $color-657b83: #657b83;
 $color-fdf6e3:  #fdf6e3;
 $header-color: rgb(0, 74, 112);
-$color-yaml:  none;
+$color-yaml:  #fdf6e3;
 $filter-divider-bg-color: #ccc;
 $selectBox-option-hover-bg-color-start: #f5f5f5;
 $selectBox-option-hover-bg-color-end: #e8e8e8;

src/portal/src/global.scss

@@ -3,12 +3,12 @@ body {
 }
 
 .app-loading {
-  position: absolute;
+  position: absolute !important;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  margin: auto;
+  margin: auto !important;
   width: 108px !important;
   height: 108px !important;
 }
@@ -463,4 +463,4 @@ button:focus {
 .datagrid-expandable-caret.datagrid-fixed-column.datagrid-cell.ng-star-inserted {
   align-items: center;
   display: flex;
-}
+}

src/portal/src/polyfills.ts

@@ -74,7 +74,7 @@ import '@angular/localize/init';
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************