Undate Angular to the latest version (#15129)

Signed-off-by: AllForNothing <sshijun@vmware.com>
2024-12-23 17:17:46 +01:00 · 2021-06-16 16:39:10 +08:00 · 2021-06-16 16:39:10 +08:00 · 410c5bcd78
commit 410c5bcd78
parent 72f1afe2cc
22 changed files with 44568 additions and 20231 deletions
--- a/.github/workflows/CI.yml
+++ b/.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
--- a/make/photon/portal/Dockerfile
+++ b/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
--- a/src/portal/angular.json
+++ b/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
  }
-}
+}
--- a/src/portal/e2e/tsconfig.json
+++ b/src/portal/e2e/tsconfig.json
@ -4,7 +4,6 @@
        "rootDir": "../",
        "baseUrl": "",
        "declaration": false,
-        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "module": "commonjs",
        "moduleResolution": "node",
--- a/src/portal/karma.conf.js
+++ b/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
+  });
+};
--- a/src/portal/package-lock.json
+++ b/src/portal/package-lock.json
--- a/src/portal/package.json
+++ b/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"
--- a/src/portal/src/app/base/left-side-nav/gc-page/gc/gc.component.spec.ts
+++ b/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', () => {
--- a/src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/project-quotas.component.spec.ts
+++ b/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();
  }));

--- a/src/portal/src/app/base/left-side-nav/registries/endpoint.component.html
+++ b/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">
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts
+++ b/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();
  });

--- a/src/portal/src/app/base/project/tag-feature-integration/immutable-tag/add-rule/add-immutable-rule.component.ts
+++ b/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 {
--- a/src/portal/src/app/base/project/tag-feature-integration/immutable-tag/immutable-tag.component.spec.ts
+++ b/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))
--- a/src/portal/src/app/harbor-routing.module.ts
+++ b/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]
 })
--- a/src/portal/src/app/license/license.component.scss
+++ b/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;
 }

--- a/src/portal/src/app/route-reuse-strategy/harbor-route-reuse-strategy.ts
+++ b/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);
  }

--- a/src/portal/src/app/shared/components/navigator/navigator.component.html
+++ b/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>
--- a/src/portal/src/app/shared/components/navigator/navigator.component.scss
+++ b/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;
 }
--- a/src/portal/src/css/dark-theme.scss
+++ b/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;
--- a/src/portal/src/css/light-theme.scss
+++ b/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;
--- a/src/portal/src/global.scss
+++ b/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;
-}
+}
--- a/src/portal/src/polyfills.ts
+++ b/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.


 /***************************************************************************************************