Upgrade Angular and Clarity to the latest version (#18709)

1.Upgrade Angular to 16.0.2 2.Upgrade Clarity to 15.4.0 Signed-off-by: AllForNothing <sshijun@vmware.com>
2024-06-24 13:55:05 +02:00 · 2023-05-23 15:59:31 +08:00 · 2023-05-23 15:59:31 +08:00 · 43c6586af4
commit 43c6586af4
parent 9d042ad585
19 changed files with 2831 additions and 1323 deletions
--- a/src/portal/PACKAGE.md
+++ b/src/portal/PACKAGE.md
@ -1,7 +1,7 @@
 ```text
 {
  "name": "harbor",
-  "version": "2.8.0",
+  "version": "2.9.0",
  "description": "Harbor UI with Clarity",
  "angular-cli": {},
  "scripts": {
@ -27,8 +27,7 @@
    "test:chrome-debug": "ng test --code-coverage --browsers Chrome --watch",

     // E2e related. Currently not used
-    "pree2e": "webdriver-manager update",
-    "e2e": "protractor",
+    "e2e": "ng e2e",

    "build": "ng build --aot",
    "release": "ng build --configuration production",
@ -47,28 +46,28 @@
  "private": true,
  "dependencies": {
     // Angular framework. Required
-    "@angular/animations": "^15.2.1",
-    "@angular/common": "^15.2.1",
-    "@angular/compiler": "^15.2.1,
-    "@angular/core": "^15.2.1",
-    "@angular/forms": "^15.2.1",
-    "@angular/localize": "^15.2.1",
-    "@angular/platform-browser": "^15.2.1",
-    "@angular/platform-browser-dynamic": "^15.2.1",
-    "@angular/router": "^15.2.1",
+    "@angular/animations": "^16.0.2",
+    "@angular/common": "^16.0.2",
+    "@angular/compiler": "^16.0.2,
+    "@angular/core": "^16.0.2",
+    "@angular/forms": "^16.0.2",
+    "@angular/localize": "^16.0.2",
+    "@angular/platform-browser": "^16.0.2",
+    "@angular/platform-browser-dynamic": "^16.0.2",
+    "@angular/router": "^16.0.2",
    "rxjs": "^7.4.0",
    "tslib": "^2.2.0",
-    "zone.js": "~0.11.4",
+    "zone.js": "~0.13.0",

    // Clarity UI. Required
-    "@clr/angular": "15.0.1",
-    "@cds/core": "6.2.3",
+    "@cds/core": "6.4.2",
+    "@clr/angular": "15.4.0",
    "@clr/icons": "13.0.2",
-    "@clr/ui": "15.0.1",
+    "@clr/ui": "15.4.0",

    // For Harbor i18n functionality. Required
-    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
+    "@ngx-translate/core": "15.0.0",
+    "@ngx-translate/http-loader": "8.0.0",

    // For cron string checking. Required
    "cron-validator": "^1.2.1",
@ -80,24 +79,24 @@
    "ngx-cookie": "^5.0.2",

    // To render markdown data. Required
-    "ngx-markdown": "~15.1.1",
+    "ngx-markdown": "16.0.0",

    // To convert yaml to json. Required
    "js-yaml": "^4.1.0"
  },
  "devDependencies": {
    // Angular framework. Required
-    "@angular-devkit/build-angular": "^15.2.1",
-    "@angular/cli": "^15.2.1",
-    "@angular/compiler-cli": "^15.2.1",
+    "@angular-devkit/build-angular": "^16.0.2",
+    "@angular/cli": "^16.0.2",
+    "@angular/compiler-cli": "^16.0.2",
    "@types/jasmine": "~4.3.0",
    "@types/node": "^16.11.6",
-    "typescript": "~4.8.2",
+    "typescript": "~5.0.4",

    // For unit test. Required
    "jasmine-core": "~4.5.0",
    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "^6.3.17",
+    "karma": "^6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "^2.2.0",
    "karma-jasmine": "~4.0.1",
@ -112,7 +111,7 @@
    "ng-swagger-gen": "^1.8.1",

    // For e2e test. Required
-    "cypress": "latest"
+    "cypress": "12.12.0"

    // For code grammar checking. Optional
    "eslint": "^8.12.0",
--- a/src/portal/package-lock.json
+++ b/src/portal/package-lock.json
--- a/src/portal/package.json
+++ b/src/portal/package.json
@ -18,7 +18,6 @@
    "test:chrome": "ng test --code-coverage --browsers Chrome",
    "test:headless": "ng test --watch=false --no-progress --code-coverage --browsers=ChromeNoSandboxHeadless",
    "test:chrome-debug": "ng test --code-coverage --browsers Chrome --watch",
-    "pree2e": "webdriver-manager update",
    "e2e": "ng e2e",
    "build": "ng build --aot",
    "release": "ng build --configuration production",
@ -28,53 +27,53 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^15.2.1",
-    "@angular/common": "^15.2.1",
-    "@angular/compiler": "^15.2.1",
-    "@angular/core": "^15.2.1",
-    "@angular/forms": "^15.2.1",
-    "@angular/localize": "^15.2.1",
-    "@angular/platform-browser": "^15.2.1",
-    "@angular/platform-browser-dynamic": "^15.2.1",
-    "@angular/router": "^15.2.1",
-    "@cds/core": "6.2.3",
-    "@clr/angular": "15.0.3",
+    "@angular/animations": "^16.0.2",
+    "@angular/common": "^16.0.2",
+    "@angular/compiler": "^16.0.2",
+    "@angular/core": "^16.0.2",
+    "@angular/forms": "^16.0.2",
+    "@angular/localize": "^16.0.2",
+    "@angular/platform-browser": "^16.0.2",
+    "@angular/platform-browser-dynamic": "^16.0.2",
+    "@angular/router": "^16.0.2",
+    "@cds/core": "6.4.2",
+    "@clr/angular": "15.4.0",
    "@clr/icons": "13.0.2",
-    "@clr/ui": "15.0.3",
-    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
+    "@clr/ui": "15.4.0",
+    "@ngx-translate/core": "15.0.0",
+    "@ngx-translate/http-loader": "8.0.0",
    "cron-validator": "^1.3.1",
    "js-yaml": "^4.1.0",
    "ngx-clipboard": "^15.1.0",
    "ngx-cookie": "^6.0.1",
-    "ngx-markdown": "15.1.1",
+    "ngx-markdown": "16.0.0",
    "rxjs": "^7.4.0",
    "tslib": "^2.2.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.0"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.1",
-    "@angular-eslint/builder": "15.1.0",
-    "@angular-eslint/eslint-plugin": "15.1.0",
-    "@angular-eslint/eslint-plugin-template": "15.1.0",
-    "@angular-eslint/schematics": "15.1.0",
-    "@angular-eslint/template-parser": "15.1.0",
-    "@angular/cli": "^15.2.1",
-    "@angular/compiler-cli": "^15.2.1",
+    "@angular-devkit/build-angular": "^16.0.2",
+    "@angular-eslint/builder": "16.0.2",
+    "@angular-eslint/eslint-plugin": "16.0.2",
+    "@angular-eslint/eslint-plugin-template": "16.0.2",
+    "@angular-eslint/schematics": "16.0.2",
+    "@angular-eslint/template-parser": "16.0.2",
+    "@angular/cli": "^16.0.2",
+    "@angular/compiler-cli": "^16.0.2",
    "@cypress/schematic": "^2.5.0",
    "@types/express": "^4.17.12",
    "@types/jasmine": "~4.3.1",
    "@types/node": "^16.11.6",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "eslint": "^8.18.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
    "express": "^4.17.1",
    "https-proxy-agent": "^5.0.1",
    "jasmine-core": "~4.5.0",
    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "^6.4.0",
+    "karma": "6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "^2.2.0",
    "karma-jasmine": "~4.0.1",
@ -82,12 +81,12 @@
    "ng-swagger-gen": "^1.8.1",
    "prettier": "^2.6.2",
    "prettier-eslint": "^14.0.2",
-    "stylelint": "^14.8.5",
-    "stylelint-config-prettier": "^9.0.3",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard": "^25.0.0",
-    "stylelint-config-standard-scss": "^4.0.0",
-    "typescript": "~4.8.2",
-    "cypress": "latest"
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "typescript": "~5.0.4",
+    "cypress": "12.12.0"
  }
 }
--- a/src/portal/src/app/app.component.spec.ts
+++ b/src/portal/src/app/app.component.spec.ts
@ -11,7 +11,6 @@
 // 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.
-/* eslint-disable @typescript-eslint/no-unused-vars */

 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { Title } from '@angular/platform-browser';
--- a/src/portal/src/app/base/project/tag-feature-integration/tag-feature-guard.service.ts
+++ b/src/portal/src/app/base/project/tag-feature-integration/tag-feature-guard.service.ts
@ -1,9 +1,5 @@
 import { Injectable } from '@angular/core';
-import {
-    CanActivate,
-    ActivatedRouteSnapshot,
-    RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { UserPrivilegeServeItem } from 'src/app/shared/services/interface';
 import { MemberPermissionGuard } from '../../../shared/router-guard/member-permission-guard-activate.service';
@ -11,7 +7,7 @@ import { MemberPermissionGuard } from '../../../shared/router-guard/member-permi
@Injectable({
    providedIn: 'root',
 })
-export class TagFeatureGuardService implements CanActivate {
+export class TagFeatureGuardService {
    constructor(private memberPermissionGuard: MemberPermissionGuard) {}

    canActivate(
--- a/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.ts
+++ b/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.ts
@ -14,7 +14,6 @@
 import { Injectable } from '@angular/core';
 import {
    Router,
-    Resolve,
    RouterStateSnapshot,
    ActivatedRouteSnapshot,
 } from '@angular/router';
@ -29,7 +28,7 @@ import { dbEncodeURIComponent } from '../../shared/units/utils';
@Injectable({
    providedIn: 'root',
 })
-export class ArtifactDetailRoutingResolverService implements Resolve<Artifact> {
+export class ArtifactDetailRoutingResolverService {
    constructor(
        private projectService: ProjectService,
        private artifactService: ArtifactService,
--- a/src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.ts
+++ b/src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.ts
@ -14,7 +14,6 @@
 import { Injectable } from '@angular/core';
 import {
    Router,
-    Resolve,
    RouterStateSnapshot,
    ActivatedRouteSnapshot,
 } from '@angular/router';
@ -28,7 +27,7 @@ import { RoleInfo, Roles } from '../../shared/entities/shared.const';
@Injectable({
    providedIn: 'root',
 })
-export class ProjectRoutingResolver implements Resolve<Project> {
+export class ProjectRoutingResolver {
    constructor(
        private sessionService: SessionService,
        private projectService: ProjectService,
--- a/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.ts
+++ b/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.ts
@ -14,7 +14,6 @@
 import { Injectable } from '@angular/core';
 import {
    Router,
-    Resolve,
    RouterStateSnapshot,
    ActivatedRouteSnapshot,
 } from '@angular/router';
@ -26,9 +25,7 @@ import { ReplicationExecution } from '../../../../ng-swagger-gen/models/replicat
@Injectable({
    providedIn: 'root',
 })
-export class ReplicationTasksRoutingResolverService
-    implements Resolve<ReplicationExecution>
-{
+export class ReplicationTasksRoutingResolverService {
    constructor(
        private replicationService: ReplicationService,
        private router: Router
--- a/src/portal/src/app/shared/components/third-party/ngx-clipboard/clipboard.directive.ts
+++ b/src/portal/src/app/shared/components/third-party/ngx-clipboard/clipboard.directive.ts
@ -32,7 +32,6 @@ export class ClipboardDirective implements OnDestroy {
    }

    @HostListener('click', ['$event.target'])
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    public onClick(button: ElementRef) {
        if (!this.clipboardSrv.isSupported) {
            this.handleResult(false, undefined);
--- a/src/portal/src/app/shared/router-guard/auth-user-activate.service.ts
+++ b/src/portal/src/app/shared/router-guard/auth-user-activate.service.ts
@ -13,11 +13,9 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import {
-    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
-    CanActivateChild,
    NavigationExtras,
 } from '@angular/router';
 import { SessionService } from '../services/session.service';
@ -31,7 +29,7 @@ import { CommonRoutes, CONFIG_AUTH_MODE } from '../entities/shared.const';
@Injectable({
    providedIn: 'root',
 })
-export class AuthCheckGuard implements CanActivate, CanActivateChild {
+export class AuthCheckGuard {
    constructor(
        private authService: SessionService,
        private router: Router,
--- a/src/portal/src/app/shared/router-guard/member-guard-activate.service.ts
+++ b/src/portal/src/app/shared/router-guard/member-guard-activate.service.ts
@ -13,11 +13,9 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import {
-    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
-    CanActivateChild,
 } from '@angular/router';
 import { SessionService } from '../services/session.service';
 import { Observable, of } from 'rxjs';
@ -31,7 +29,7 @@ import { UN_LOGGED_PARAM, YES } from 'src/app/account/sign-in/sign-in.service';
@Injectable({
    providedIn: 'root',
 })
-export class MemberGuard implements CanActivate, CanActivateChild {
+export class MemberGuard {
    constructor(
        private sessionService: SessionService,
        private projectService: ProjectService,
--- a/src/portal/src/app/shared/router-guard/member-permission-guard-activate.service.ts
+++ b/src/portal/src/app/shared/router-guard/member-permission-guard-activate.service.ts
@ -1,10 +1,8 @@
 import { Injectable } from '@angular/core';
 import {
-    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
-    CanActivateChild,
 } from '@angular/router';
 import { Observable } from 'rxjs';
 import { ErrorHandler } from '../units/error-handler';
@ -14,7 +12,7 @@ import { CommonRoutes } from '../entities/shared.const';
@Injectable({
    providedIn: 'root',
 })
-export class MemberPermissionGuard implements CanActivate, CanActivateChild {
+export class MemberPermissionGuard {
    constructor(
        private router: Router,
        private errorHandler: ErrorHandler,
--- a/src/portal/src/app/shared/router-guard/mode-guard-activate.service.ts
+++ b/src/portal/src/app/shared/router-guard/mode-guard-activate.service.ts
@ -13,11 +13,9 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import {
-    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
-    CanActivateChild,
 } from '@angular/router';
 import { AppConfigService } from '../../services/app-config.service';
 import { Observable } from 'rxjs';
@ -26,7 +24,7 @@ import { CommonRoutes } from '../entities/shared.const';
@Injectable({
    providedIn: 'root',
 })
-export class ModeGuard implements CanActivate, CanActivateChild {
+export class ModeGuard {
    constructor(
        private router: Router,
        private appConfigService: AppConfigService
--- a/src/portal/src/app/shared/router-guard/oidc-guard-active.service.ts
+++ b/src/portal/src/app/shared/router-guard/oidc-guard-active.service.ts
@ -13,11 +13,9 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import {
-    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
-    CanActivateChild,
 } from '@angular/router';
 import { AppConfigService } from '../../services/app-config.service';
 import { Observable } from 'rxjs';
@ -26,7 +24,7 @@ import { CommonRoutes } from '../entities/shared.const';
@Injectable({
    providedIn: 'root',
 })
-export class OidcGuard implements CanActivate, CanActivateChild {
+export class OidcGuard {
    constructor(
        private appConfigService: AppConfigService,
        private router: Router
--- a/src/portal/src/app/shared/router-guard/sign-in-guard-activate.service.ts
+++ b/src/portal/src/app/shared/router-guard/sign-in-guard-activate.service.ts
@ -13,11 +13,9 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import {
-    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
-    CanActivateChild,
 } from '@angular/router';
 import { SessionService } from '../services/session.service';
 import { Observable } from 'rxjs';
@ -26,7 +24,7 @@ import { CommonRoutes } from '../entities/shared.const';
@Injectable({
    providedIn: 'root',
 })
-export class SignInGuard implements CanActivate, CanActivateChild {
+export class SignInGuard {
    constructor(private authService: SessionService, private router: Router) {}

    canActivate(
--- a/src/portal/src/app/shared/router-guard/system-admin-activate.service.ts
+++ b/src/portal/src/app/shared/router-guard/system-admin-activate.service.ts
@ -13,11 +13,9 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import {
-    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
-    CanActivateChild,
    NavigationExtras,
 } from '@angular/router';
 import { SessionService } from '../services/session.service';
@ -28,7 +26,7 @@ import { CommonRoutes } from '../entities/shared.const';
@Injectable({
    providedIn: 'root',
 })
-export class SystemAdminGuard implements CanActivate, CanActivateChild {
+export class SystemAdminGuard {
    constructor(
        private authService: SessionService,
        private router: Router,
--- a/src/portal/src/app/shared/services/endpoint.service.ts
+++ b/src/portal/src/app/shared/services/endpoint.service.ts
@ -175,7 +175,7 @@ export class EndpointDefaultService extends EndpointService {
    }

    public getEndpoint(endpointId: number | string): Observable<Endpoint> {
-        if (!endpointId || endpointId <= 0) {
+        if (!endpointId || +endpointId <= 0) {
            return observableThrowError('Bad request argument.');
        }
        let requestUrl: string = `${this._endpointUrl}/${endpointId}`;
@ -205,7 +205,7 @@ export class EndpointDefaultService extends EndpointService {
        endpointId: number | string,
        endpoint: Endpoint
    ): Observable<any> {
-        if (!endpointId || endpointId <= 0) {
+        if (!endpointId || +endpointId <= 0) {
            return observableThrowError('Bad request argument.');
        }
        if (!endpoint) {
@ -218,7 +218,7 @@ export class EndpointDefaultService extends EndpointService {
    }

    public deleteEndpoint(endpointId: number | string): Observable<any> {
-        if (!endpointId || endpointId <= 0) {
+        if (!endpointId || +endpointId <= 0) {
            return observableThrowError('Bad request argument.');
        }
        let requestUrl: string = `${this._endpointUrl}/${endpointId}`;
@ -240,7 +240,7 @@ export class EndpointDefaultService extends EndpointService {
    public getEndpointWithReplicationRules(
        endpointId: number | string
    ): Observable<any> {
-        if (!endpointId || endpointId <= 0) {
+        if (!endpointId || +endpointId <= 0) {
            return observableThrowError('Bad request argument.');
        }
        let requestUrl: string = `${this._endpointUrl}/${endpointId}/policies`;
--- a/src/portal/src/app/shared/services/job-log.service.ts
+++ b/src/portal/src/app/shared/services/job-log.service.ts
@ -74,7 +74,7 @@ export class JobLogDefaultService extends JobLogService {
        if (!this._isSupportedJobType(jobType)) {
            return observableThrowError('Unsupport job type: ' + jobType);
        }
-        if (!jobId || jobId <= 0) {
+        if (!jobId || +jobId <= 0) {
            return observableThrowError('Bad argument');
        }

--- a/src/portal/src/app/shared/services/replication.service.ts
+++ b/src/portal/src/app/shared/services/replication.service.ts
@ -350,7 +350,7 @@ export class ReplicationDefaultService extends ReplicationService {
    }

    public deleteReplicationRule(ruleId: number | string): Observable<any> {
-        if (!ruleId || ruleId <= 0) {
+        if (!ruleId || +ruleId <= 0) {
            return observableThrowError('Bad argument');
        }

@ -379,7 +379,7 @@ export class ReplicationDefaultService extends ReplicationService {
        ruleId: number | string,
        enablement: number
    ): Observable<any> {
-        if (!ruleId || ruleId <= 0) {
+        if (!ruleId || +ruleId <= 0) {
            return observableThrowError('Bad argument');
        }

@ -393,7 +393,7 @@ export class ReplicationDefaultService extends ReplicationService {
    }

    public disableReplicationRule(ruleId: number | string): Observable<any> {
-        if (!ruleId || ruleId <= 0) {
+        if (!ruleId || +ruleId <= 0) {
            return observableThrowError('Bad argument');
        }

@ -408,7 +408,7 @@ export class ReplicationDefaultService extends ReplicationService {
        ruleId: number | string,
        queryParams?: RequestQueryParams
    ): Observable<ReplicationExecution> {
-        if (!ruleId || ruleId <= 0) {
+        if (!ruleId || +ruleId <= 0) {
            return observableThrowError('Bad argument');
        }

@ -454,7 +454,7 @@ export class ReplicationDefaultService extends ReplicationService {
    public getExecutionById(
        executionId: number | string
    ): Observable<ReplicationExecution> {
-        if (!executionId || executionId <= 0) {
+        if (!executionId || +executionId <= 0) {
            return observableThrowError('Bad request argument.');
        }
        let requestUrl: string = `${this._replicateUrl}/executions/${executionId}`;
@ -493,7 +493,7 @@ export class ReplicationDefaultService extends ReplicationService {
    }

    public getJobLog(jobId: number | string): Observable<string> {
-        if (!jobId || jobId <= 0) {
+        if (!jobId || +jobId <= 0) {
            return observableThrowError('Bad argument');
        }

@ -504,7 +504,7 @@ export class ReplicationDefaultService extends ReplicationService {
    }

    public stopJobs(jobId: number | string): Observable<any> {
-        if (!jobId || jobId <= 0) {
+        if (!jobId || +jobId <= 0) {
            return observableThrowError('Bad request argument.');
        }
        let requestUrl: string = `${this._replicateUrl}/executions/${jobId}`;