deps(workbench): update @scion/workbench to Angular 14

closes #340 BREAKING CHANGE: Updating `@scion/workbench` to Angular 14 introduced a breaking change. To migrate: - update your application to Angular 14.x; for detailed migration instructions, refer to https://v14.angular.io/guide/update-to-latest-version; - update @scion/components to version 14; for detailed migration instructions, refer to https://github.com/SchweizerischeBundesbahnen/scion-toolkit/blob/master/CHANGELOG_COMPONENTS.md;
SchweizerischeBundesbahnen · Sep 10, 2022 · 6ce5a89 · 6ce5a89
1 parent 3196f30
commit 6ce5a89
Show file tree

Hide file tree

Showing 69 changed files with 7,207 additions and 10,750 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -111,9 +111,11 @@
         "deprecation/deprecation": "warn",
         "consistent-return": "error",
         "eqeqeq": "error",
+        "implicit-arrow-linebreak": "error",
         "object-curly-spacing": [
           "error"
         ],
+        "nonblock-statement-body-position": "error",
         "rxjs/no-implicit-any-catch": "off"
       }
     },

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -1,7 +1,7 @@
 name: Continuous Integration and Delivery
 on: [ push, pull_request ]
 env:
-  NODE_VERSION: 16.14.0
+  NODE_VERSION: 16.16.0
 jobs:
   install:
     name: 'Installing NPM modules'

diff --git a/.gitignore b/.gitignore
@@ -7,7 +7,7 @@
 /bazel-out
 
 # Node
-**/node_modules
+/node_modules
 npm-debug.log
 yarn-error.log
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -36,7 +36,7 @@ This section explains how to submit a pull request.
   <summary><strong>Development</strong></summary>
   <br>
 
-Make sure to use Node.js version 16.14.0 for contributing to SCION. We suggest using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
+Make sure to use Node.js version 16.16.0 for contributing to SCION. We suggest using [Node Version Manager](https://github.com/nvm-sh/nvm) if you need different Node.js versions for other projects.
 
 For development, you can uncomment the section `PATH-OVERRIDE-FOR-DEVELOPMENT` in `tsconfig.json`. This allows running tests or serving applications without having to build dependent modules first.
 

diff --git a/README.md b/README.md
@@ -51,12 +51,13 @@ Although SCION Workbench is designed for use in Angular applications, its workbe
 ***
 
 ### Versions
-- `v13.0.0-beta.1` and newer are only compatible with Angular version 13.x.
-- `v12.0.0-beta.1` and newer are only compatible with Angular version 12.x.
+- `v14.0.0-beta.1` and newer are compatible with Angular version 14.x.
+- `v13.0.0-beta.1` and newer are compatible with Angular version 13.x.
+- `v12.0.0-beta.1` and newer are compatible with Angular version 12.x.
 - `v11.0.0-beta.3` provides built-in microfrontend support from the [SCION Microfrontend Platform][link-scion-microfrontend-platform].
-- `v11.0.0-beta.1` and newer are only compatible with Angular version 11.x.
-- `v0.0.0-beta.35` and newer are only compatible with Angular version 10.x.
-- `v0.0.0-beta.33` and newer are only compatible with Angular version 9.x.
+- `v11.0.0-beta.1` and newer are compatible with Angular version 11.x.
+- `v0.0.0-beta.35` and newer are compatible with Angular version 10.x.
+- `v0.0.0-beta.33` and newer are compatible with Angular version 9.x.
 - `v0.0.0-beta.23` to `v0.0.0-beta.32` is only compatible with Angular version 8.x.
 
 [![Project version](https://img.shields.io/npm/v/@scion/workbench.svg)][link-download]

diff --git a/angular.json b/angular.json
@@ -53,7 +53,7 @@
       "projectType": "library",
       "root": "projects/scion/workbench-client",
       "sourceRoot": "projects/scion/workbench-client/src",
-      "prefix": "lib",
+      "prefix": "wb",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
@@ -91,6 +91,11 @@
     },
     "workbench-testing-app": {
       "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "apps/workbench-testing-app",
       "sourceRoot": "apps/workbench-testing-app/src",
       "prefix": "app",
@@ -111,6 +116,11 @@
                 "input": "resources/branding",
                 "output": "/"
               },
+              {
+                "glob": "wb-icon.*",
+                "input": "resources/wb-font/icomoon_generated/fonts",
+                "output": "/assets/fonts"
+              },
               {
                 "glob": "scion-workbench-banner.svg",
                 "input": "resources/branding",
@@ -129,6 +139,18 @@
           },
           "configurations": {
             "production-vercel": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "apps/workbench-testing-app/src/environments/environment.ts",
@@ -139,6 +161,18 @@
               "outputPath": "dist/workbench-testing-app-vercel"
             },
             "production-ci": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "apps/workbench-testing-app/src/environments/environment.ts",
@@ -180,18 +214,15 @@
             ]
           }
         }
-      },
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        }
       }
     },
     "workbench-client-testing-app": {
       "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "apps/workbench-client-testing-app",
       "sourceRoot": "apps/workbench-client-testing-app/src",
       "prefix": "app",
@@ -225,6 +256,18 @@
           },
           "configurations": {
             "production-vercel": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "apps/workbench-client-testing-app/src/environments/environment.ts",
@@ -235,6 +278,18 @@
               "outputPath": "dist/workbench-client-testing-app-vercel"
             },
             "production-ci": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "apps/workbench-client-testing-app/src/environments/environment.ts",
@@ -276,14 +331,6 @@
             ]
           }
         }
-      },
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        }
       }
     },
     "e2e-testing": {
@@ -300,9 +347,5 @@
         }
       }
     }
-  },
-  "defaultProject": "@scion/workbench",
-  "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
   }
 }
diff --git a/...h-client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.ts b/...h-client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.ts
@@ -9,7 +9,7 @@
  */
 
 import {Component} from '@angular/core';
-import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormArray, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {WorkbenchMessageBoxService, WorkbenchView} from '@scion/workbench-client';
 import {SciParamsEnterComponent} from '@scion/components.internal/params-enter';
 import {Beans} from '@scion/toolkit/bean-manager';
@@ -43,12 +43,12 @@ export class MessageBoxOpenerPageComponent {
   public readonly CSS_CLASS = CSS_CLASS;
   public readonly VIEW_CONTEXT = VIEW_CONTEXT;
 
-  public form: FormGroup;
+  public form: UntypedFormGroup;
 
   public openError: string;
   public closeAction: string;
 
-  constructor(formBuilder: FormBuilder, private _messageBoxService: WorkbenchMessageBoxService) {
+  constructor(formBuilder: UntypedFormBuilder, private _messageBoxService: WorkbenchMessageBoxService) {
     this.form = formBuilder.group({
       [QUALIFIER]: formBuilder.array([]),
       [PARAMS]: formBuilder.array([]),
@@ -64,9 +64,9 @@ export class MessageBoxOpenerPageComponent {
   }
 
   public onMessageBoxOpen(): void {
-    const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as FormArray);
-    const params = SciParamsEnterComponent.toParamsDictionary(this.form.get(PARAMS) as FormArray);
-    const actions = SciParamsEnterComponent.toParamsDictionary(this.form.get(ACTIONS) as FormArray);
+    const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as UntypedFormArray);
+    const params = SciParamsEnterComponent.toParamsDictionary(this.form.get(PARAMS) as UntypedFormArray);
+    const actions = SciParamsEnterComponent.toParamsDictionary(this.form.get(ACTIONS) as UntypedFormArray);
 
     this.openError = null;
     this.closeAction = null;

diff --git a/...client-testing-app/src/app/notification-opener-page/notification-opener-page.component.ts b/...client-testing-app/src/app/notification-opener-page/notification-opener-page.component.ts
@@ -9,7 +9,7 @@
  */
 
 import {Component} from '@angular/core';
-import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormArray, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {WorkbenchNotificationService} from '@scion/workbench-client';
 import {SciParamsEnterComponent} from '@scion/components.internal/params-enter';
 
@@ -38,11 +38,11 @@ export class NotificationOpenerPageComponent {
   public readonly GROUP = GROUP;
   public readonly CSS_CLASS = CSS_CLASS;
 
-  public form: FormGroup;
+  public form: UntypedFormGroup;
 
   public error: string;
 
-  constructor(formBuilder: FormBuilder, private _notificationService: WorkbenchNotificationService) {
+  constructor(formBuilder: UntypedFormBuilder, private _notificationService: WorkbenchNotificationService) {
     this.form = formBuilder.group({
       [QUALIFIER]: formBuilder.array([]),
       [PARAMS]: formBuilder.array([]),
@@ -56,8 +56,8 @@ export class NotificationOpenerPageComponent {
   }
 
   public onNotificationShow(): void {
-    const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as FormArray);
-    const params = SciParamsEnterComponent.toParamsDictionary(this.form.get(PARAMS) as FormArray);
+    const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as UntypedFormArray);
+    const params = SciParamsEnterComponent.toParamsDictionary(this.form.get(PARAMS) as UntypedFormArray);
 
     this.error = null;
     this._notificationService.show({

diff --git a/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.ts b/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.ts
@@ -9,7 +9,7 @@
  */
 
 import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
-import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {CloseStrategy, WorkbenchPopupService} from '@scion/workbench-client';
 import {SciParamsEnterComponent} from '@scion/components.internal/params-enter';
 import {undefinedIfEmpty} from '../util/util';
@@ -59,7 +59,7 @@ export class PopupOpenerPageComponent implements AfterViewInit {
 
   private _coordinateAnchor$: Observable<PopupOrigin>;
 
-  public form: FormGroup;
+  public form: UntypedFormGroup;
 
   public popupError: string;
   public returnValue: string;
@@ -69,16 +69,16 @@ export class PopupOpenerPageComponent implements AfterViewInit {
 
   constructor(private _host: ElementRef<HTMLElement>,
               private _popupService: WorkbenchPopupService,
-              formBuilder: FormBuilder) {
+              formBuilder: UntypedFormBuilder) {
     this.form = formBuilder.group({
       [QUALIFIER]: formBuilder.array([
-        new FormGroup({
-          paramName: new FormControl('component'),
-          paramValue: new FormControl('popup'),
+        new UntypedFormGroup({
+          paramName: new UntypedFormControl('component'),
+          paramValue: new UntypedFormControl('popup'),
         }),
-        new FormGroup({
-            paramName: new FormControl('app'),
-            paramValue: new FormControl('app1'),
+        new UntypedFormGroup({
+            paramName: new UntypedFormControl('app'),
+            paramValue: new UntypedFormControl('app1'),
           },
         )], Validators.required),
       [PARAMS]: formBuilder.array([]),
@@ -119,8 +119,8 @@ export class PopupOpenerPageComponent implements AfterViewInit {
   }
 
   public async onPopupOpen(): Promise<void> {
-    const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as FormArray);
-    const params = SciParamsEnterComponent.toParamsDictionary(this.form.get(PARAMS) as FormArray);
+    const qualifier = SciParamsEnterComponent.toParamsDictionary(this.form.get(QUALIFIER) as UntypedFormArray);
+    const params = SciParamsEnterComponent.toParamsDictionary(this.form.get(PARAMS) as UntypedFormArray);
 
     this.popupError = null;
     this.returnValue = null;

diff --git a/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.scss b/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.scss
@@ -11,9 +11,12 @@
 
   > sci-viewport {
     flex: auto;
-    --sci-viewport-content-grid-gap: 1em;
-    --sci-viewport-content-grid-template-columns: 1fr 1fr;
-    --sci-viewport-content-grid-auto-rows: min-content;
+
+    &::part(content) {
+      gap: 1em;
+      grid-template-columns: 1fr 1fr;
+      grid-auto-rows: min-content;
+    }
 
     section, form {
       display: grid;