chore: upgrade from angular 11 to angular 13

ui/.eslintrc.json

@@ -15,49 +15,19 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
-        "@typescript-eslint/ban-types": [
-          "off"
-        ],
-        "@angular-eslint/no-output-native": [
-          "off"
-        ],
-        "no-shadow": [
+        "@angular-eslint/no-empty-lifecycle-method": [
           "off"
         ],
         "@angular-eslint/no-output-on-prefix": [
           "off"
         ],
-        "@typescript-eslint/prefer-for-of": [
-          "off"
-        ],
-        "max-len": [
-          "off"
-        ],
-        "prefer-arrow/prefer-arrow-functions": [
-          "off"
-        ],
-        "@typescript-eslint/consistent-type-assertions": [
-          "off"
-        ],
-        "@typescript-eslint/naming-convention": [
-          "off"
-        ],
-        "@typescript-eslint/member-ordering": [
+        "@angular-eslint/no-output-native": [
           "off"
         ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ],
         "@angular-eslint/directive-selector": [
           "error",
           {
@@ -66,45 +36,14 @@
             "style": "camelCase"
           }
         ],
-        "@typescript-eslint/consistent-type-definitions": "error",
-        "@typescript-eslint/dot-notation": "off",
-        "@typescript-eslint/explicit-member-accessibility": [
-          "off",
-          {
-            "accessibility": "explicit"
-          }
-        ],
-        "@typescript-eslint/member-delimiter-style": [
-          "off",
-          {
-            "multiline": {
-              "delimiter": "none",
-              "requireLast": true
-            },
-            "singleline": {
-              "delimiter": "semi",
-              "requireLast": false
-            }
-          }
-        ],
-        "@typescript-eslint/semi": [
-          "off",
-          null
-        ],
-        "brace-style": [
+        "@angular-eslint/component-selector": [
           "error",
-          "1tbs",
           {
-            "allowSingleLine": true
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
           }
-        ],
-        "id-blacklist": "off",
-        "id-match": "off",
-        "import/order": "error",
-        "no-redeclare": "error",
-        "no-underscore-dangle": "off",
-        "prefer-const": "off",
-        "semi": [1, "always"]
+        ]
       }
     },
     {
@@ -114,7 +53,14 @@
       "extends": [
         "plugin:@angular-eslint/template/recommended"
       ],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/template/eqeqeq": [
+          "error",
+          {
+            "allowNullOrUndefined": true
+          }
+        ]
+      }
     }
   ]
 }

ui/.gitignore

@@ -1,2 +1,3 @@
+/.angular/cache
 ui.tar.gz
 private.proxy.conf.json

ui/Makefile

@@ -14,10 +14,10 @@ $(NG):
 	npm install
 
 stats: $(NG)
-	@node --max-old-space-size=2048 node_modules/@angular/cli/bin/ng build --prod --stats-json
+	@node --max-old-space-size=2048 node_modules/@angular/cli/bin/ng build --configuration production --stats-json
 
 ngbuild: $(NG)
-	@node --max-old-space-size=2048 node_modules/@angular/cli/bin/ng build --prod
+	@node --max-old-space-size=2048 node_modules/@angular/cli/bin/ng build --configuration production
 
 INDEX = dist/index.tmpl
 $(INDEX):

ui/angular.json

@@ -33,6 +33,7 @@
               "node_modules/font-awesome/css/font-awesome.css",
               "node_modules/animate.css/animate.min.css",
               "node_modules/prismjs/themes/prism-okaidia.css",
+              "node_modules/spinkit/spinkit.min.css",
               "semantic/dist/semantic.min.css",
               "src/styles.scss"
             ],

ui/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "angular-cli": {},
   "engines": {
-    "node": ">= 12.0.0",
+    "node": ">= 14.0.0",
     "npm": ">= 6.0.0"
   },
   "scripts": {
@@ -15,30 +15,31 @@
     "test": "ng test --watch false --code-coverage",
     "e2e": "testcafe chromium:headless ./e2e/tests/* -S -s screenshots",
     "doc": "./node_modules/.bin/compodoc -p tsconfig.json -s",
-    "build:prod": "ng build --prod",
-    "build:stats": "ng build --prod --stats-json",
+    "build:prod": "ng build --configuration production",
+    "build:stats": "ng build --configuration production --stats-json",
     "build:analyse": "webpack-bundle-analyzer dist/stats.json",
     "sentry:release": "sentry-cli releases -o ${SENTRY_ORG} -p ${SENTRY_PROJECT} new ${CDS_VERSION}",
-    "sentry:sourcemaps": "sentry-cli releases -o ${SENTRY_ORG} -p ${SENTRY_PROJECT} files ${CDS_VERSION} upload-sourcemaps --url-prefix=${SENTRY_CDS_PREFIX_URL}"
+    "sentry:sourcemaps": "sentry-cli releases -o ${SENTRY_ORG} -p ${SENTRY_PROJECT} files ${CDS_VERSION} upload-sourcemaps --url-prefix=${SENTRY_CDS_PREFIX_URL}",
+    "lint": "ng lint"
   },
   "lint-staged": {
-    "*.{js,scss,ts}": "tslint"
+    "*.{js,ts}": "eslint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "11.2.14",
-    "@angular/cdk": "11.2.13",
-    "@angular/common": "11.2.14",
-    "@angular/compiler": "11.2.14",
-    "@angular/core": "11.2.14",
-    "@angular/forms": "11.2.14",
-    "@angular/platform-browser": "11.2.14",
-    "@angular/platform-browser-dynamic": "11.2.14",
-    "@angular/router": "11.2.14",
+    "@angular/animations": "13.2.0",
+    "@angular/cdk": "13.2.0",
+    "@angular/common": "13.2.0",
+    "@angular/compiler": "13.2.0",
+    "@angular/core": "13.2.0",
+    "@angular/forms": "13.2.0",
+    "@angular/platform-browser": "13.2.0",
+    "@angular/platform-browser-dynamic": "13.2.0",
+    "@angular/router": "13.2.0",
     "@fontsource/lato": "4.5.0",
     "@icholy/duration": "5.0.0",
     "@ngui/auto-complete": "3.0.0",
-    "@ngx-translate/core": "12.1.2",
+    "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "4.0.0",
     "@ngxs/devtools-plugin": "3.7.0",
     "@ngxs/logger-plugin": "3.7.0",
@@ -87,23 +88,24 @@
     "rxjs": "6.5.4",
     "rxjs-compat": "6.3.3",
     "sanitize-html": "2.3.2",
-    "spinkit": "1.2.5",
+    "spinkit": "2.0.1",
     "string-format-obj": "1.1.1",
     "ts-helpers": "1.1.2",
     "tslib": "2.0.0",
-    "zone.js": "0.11.3",
+    "url": "0.11.0",
+    "zone.js": "0.11.4",
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "11.0.0",
-    "@angular-devkit/build-angular": "0.1102.13",
-    "@angular-eslint/builder": "0.8.0-beta.3",
-    "@angular-eslint/eslint-plugin": "0.8.0-beta.3",
-    "@angular-eslint/eslint-plugin-template": "0.8.0-beta.3",
-    "@angular-eslint/schematics": "0.8.0-beta.3",
-    "@angular-eslint/template-parser": "0.8.0-beta.3",
-    "@angular/cli": "11.2.13",
-    "@angular/compiler-cli": "11.2.14",
+    "@angular-builders/custom-webpack": "13.1.0",
+    "@angular-devkit/build-angular": "13.2.1",
+    "@angular-eslint/builder": "13.0.1",
+    "@angular-eslint/eslint-plugin": "13.0.1",
+    "@angular-eslint/eslint-plugin-template": "13.0.1",
+    "@angular-eslint/schematics": "13.0.1",
+    "@angular-eslint/template-parser": "13.0.1",
+    "@angular/cli": "13.2.1",
+    "@angular/compiler-cli": "13.2.0",
     "@commitlint/cli": "13.0.0",
     "@commitlint/config-conventional": "13.0.0",
     "@compodoc/compodoc": "1.1.11",
@@ -116,14 +118,15 @@
     "@types/lodash-es": "4.17.3",
     "@types/node": "12.11.1",
     "@types/sanitize-html": "2.3.1",
-    "@typescript-eslint/eslint-plugin": "4.3.0",
-    "@typescript-eslint/parser": "4.3.0",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
+    "@typescript-eslint/typescript-estree": "5.10.2",
     "codelyzer": "6.0.0",
     "copy-webpack-plugin": "9.0.0",
-    "eslint": "7.6.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsdoc": "30.7.6",
-    "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint": "8.2.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jsdoc": "37.7.1",
+    "eslint-plugin-prefer-arrow": "1.2.3",
     "husky": "3.0.5",
     "jasmine-core": "3.6.0",
     "jasmine-spec-reporter": "5.0.0",
@@ -135,8 +138,8 @@
     "karma-junit-reporter": "1.2.0",
     "lint-staged": "^12.0.2",
     "ts-node": "8.3.0",
-    "tslint": "6.1.0",
-    "typescript": "4.0.2",
+    "typescript": "4.5.2",
+    "url": "0.11.0",
     "webdriver-manager": "12.1.7",
     "webpack-bundle-analyzer": "3.3.2",
     "wrench-sui": "0.0.3"

ui/src/app/app.component.html

@@ -20,7 +20,7 @@
     <ng-container *ngIf="isAPIAvailable && (!isConnected || !maintenance || currentAuthSummary?.user?.ring === 'ADMIN')">
         <app-navbar *ngIf="isConnected && !hideNavBar"></app-navbar>
 
-        <div class="banner" *ngIf="(maintenance) && (!isConnected || currentAuthSummary?.user?.ring == 'ADMIN')">
+        <div class="banner" *ngIf="(maintenance) && (!isConnected || currentAuthSummary?.user?.ring === 'ADMIN')">
             {{ 'maintenance_title' | translate }}
         </div>
         <div class="banner update" (click)="refresh()" *ngIf="showUIUpdatedBanner">

ui/src/app/service/application/application.store.ts

@@ -21,7 +21,9 @@ export class ApplicationStore {
 
     loadRecentApplication(): void {
         let arrayApp = JSON.parse(localStorage.getItem(ApplicationStore.RECENT_APPLICATIONS_KEY));
-        this._recentApplications.next(immutable.List.of(...arrayApp));
+        if (arrayApp) {
+            this._recentApplications.next(immutable.List.of(...arrayApp));
+        }
     }
 
     /**

ui/src/app/service/project/project.store.ts

@@ -28,7 +28,9 @@ export class ProjectStore {
 
     loadRecentProjects(): void {
         let arrayApp = JSON.parse(localStorage.getItem(ProjectStore.RECENT_PROJECTS_KEY));
-        this._recentProjects.next(List.of(...arrayApp));
+        if (arrayApp) {
+            this._recentProjects.next(List.of(...arrayApp));
+        }
     }
 
     getProjectsList(resync: boolean = false): Observable<List<Project>> {

ui/src/app/service/workflow/workflow.helper.ts

@@ -23,7 +23,7 @@ export class WorkflowHelper {
                     uiArtifact.name = data.name;
                     uiArtifact.size = data.size;
                     uiArtifact.human_size = this.getHumainFileSize(data.size);
-                    uiArtifact.type = r.type == 'artifact' ? 'file': r.type;
+                    uiArtifact.type = r.type === 'artifact' ? 'file' : r.type;
                     uiArtifact.file_type = uiArtifact.type;
                     return uiArtifact;
                 case 'artifact-manager':

ui/src/app/service/workflow/workflow.store.ts

@@ -20,7 +20,9 @@ export class WorkflowStore {
 
     loadRecentWorkflows(): void {
         let arrayWorkflows = JSON.parse(localStorage.getItem(WorkflowStore.RECENT_WORKFLOWS_KEY));
-        this._recentWorkflows.next(List.of(...arrayWorkflows));
+        if (arrayWorkflows) {
+            this._recentWorkflows.next(List.of(...arrayWorkflows));
+        }
     }
 
     /**

ui/src/app/shared/keys/form/keys.form.html

@@ -1,9 +1,9 @@
 <div class="KeyForm">
     <div class="ui form">
-        <div class="ui info message" *ngIf="newKey.type == 'ssh'">
+        <div class="ui info message" *ngIf="newKey.type === 'ssh'">
             {{ 'keys_ssh_key_help' | translate }} <a href="#" [routerLink]="['/docs', 'docs', 'components', 'worker', 'key', 'install']">Worker Install Key</a>
         </div>
-        <div class="ui info message" *ngIf="newKey.type == 'pgp'">
+        <div class="ui info message" *ngIf="newKey.type === 'pgp'">
             {{ 'keys_pgp_key_help' | translate }} <a href="#" [routerLink]="['/docs', 'docs', 'components', 'worker', 'key', 'install']">Worker Install Key</a>
         </div>
         <div class="fields">

ui/src/app/shared/shared.module.ts

@@ -232,10 +232,6 @@ import { ZoneComponent } from './zone/zone.component';
         ZoneComponent,
         ZoneContentComponent
     ],
-    entryComponents: [
-        NguiAutoCompleteComponent,
-        ToastHTTPErrorComponent
-    ],
     providers: [
         PermissionService,
         SharedService,