TSK-1657: Angular 12 update

TSK-1657: Angular 12 preworks

TSK-1657: Updated core and cli to 12

TSK-1657: Updated material to 12

TSK-1657: Updated tests, but huge testfailures

TSK-1657: Huge testfails fixed, now only small ones remain

(A lot of them)

TSK-1657: Beatiful test fixes :)

TSK-1657: Prettiered the files

TSK-1657: fixed cache hash file due to introduction of yarn

TSK-1657: checked all dependencies and reupdated them

.github/workflows/continuous-integration.yml

@@ -92,7 +92,7 @@ jobs:
         uses: actions/cache@v2.1.6
         with:
           path: web/node_modules
-          key: ${{ runner.OS }}-${{ env.CACHE_WEB_NAME }}-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.OS }}-${{ env.CACHE_WEB_NAME }}-${{ hashFiles('**/yarn-lock.json') }}
           restore-keys: ${{ runner.OS }}-${{ env.CACHE_WEB_NAME }}
       - name: Cache maven dependencies (for web)
         uses: actions/cache@v2.1.6
@@ -177,7 +177,7 @@ jobs:
         uses: actions/cache@v2.1.6
         with:
           path: web/node_modules
-          key: ${{ runner.OS }}-${{ env.CACHE_WEB_NAME }}-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.OS }}-${{ env.CACHE_WEB_NAME }}-${{ hashFiles('**/yarn-lock.json') }}
           restore-keys: ${{ runner.OS }}-${{ env.CACHE_WEB_NAME }}
       # Theoretically this is not necessary because we reuse the cache from the 'compile_frontend' job.
       # Sometimes the cache is not created, therefore this is a fallback.

.gitignore

@@ -53,6 +53,7 @@ node_modules/
 npm-debug.log
 testem.log
 /typings
+/web/package-lock.json
 
 # e2e
 /web/cypress/screenshots/

web/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['prettier/@typescript-eslint', 'plugin:prettier/recommended'],
+  extends: ['prettier', 'plugin:prettier/recommended'],
   env: {
     browser: true,
     node: true

web/angular.json

@@ -11,7 +11,7 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
-            "aot": false,
+            "aot": true,
             "customWebpackConfig": {
               "path": "webpack.config.js"
             },

web/jest.config.js

@@ -1,5 +1,6 @@
 const { pathsToModuleNameMapper } = require('ts-jest/utils');
 const { compilerOptions } = require('./tsconfig');
+require('jest-preset-angular/ngcc-jest-processor');
 
 module.exports = {
   preset: 'jest-preset-angular',

web/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start:hmr": "ng serve --hmr --no-live-reload",
     "build": "ng build",
     "build:prod": "ng build --prod=true",
     "build:prod-silent": "ng build --prod=true --no-progress",
@@ -20,57 +21,54 @@
     "ci": "yarn install --frozen-lockfile"
   },
   "private": true,
-  "resolutions": {
-    "webpack": "5.21.2"
-  },
   "dependencies": {
-    "@angular/animations": "11.1.0",
+    "@angular/animations": "12.0.5",
-    "@angular/cdk": "11.1.0",
+    "@angular/cdk": "12.0.5",
-    "@angular/common": "11.1.0",
+    "@angular/common": "12.0.5",
-    "@angular/core": "11.1.0",
+    "@angular/core": "12.0.5",
-    "@angular/forms": "11.1.0",
+    "@angular/forms": "12.0.5",
-    "@angular/material": "11.1.0",
+    "@angular/material": "12.0.5",
-    "@angular/platform-browser": "11.1.0",
+    "@angular/platform-browser": "12.0.5",
-    "@angular/platform-browser-dynamic": "11.1.0",
+    "@angular/platform-browser-dynamic": "12.0.5",
-    "@angular/router": "11.1.0",
+    "@angular/router": "12.0.5",
-    "@circlon/angular-tree-component": "10.0.2",
+    "@circlon/angular-tree-component": "11.0.4",
-    "@ngxs/store": "3.7.1",
+    "@ngxs/store": "3.7.2",
-    "angular-svg-icon": "11.0.0",
+    "angular-svg-icon": "12.0.0",
     "chart.js": "2.9.4",
-    "core-js": "3.8.3",
+    "core-js": "3.15.1",
     "file-saver": "2.0.5",
     "ng2-charts": "2.4.2",
     "ngx-bootstrap": "6.2.0",
     "ngx-infinite-scroll": "10.0.1",
-    "rxjs": "6.6.3",
+    "rxjs": "7.1.0",
-    "tslib": "2.1.0",
+    "tslib": "2.3.0",
-    "zone.js": "0.11.3"
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "11.0.0",
+    "@angular-builders/custom-webpack": "12.1.0",
-    "@angular-devkit/build-angular": "0.1101.1",
+    "@angular-devkit/build-angular": "12.0.5",
-    "@angular/cli": "11.1.1",
+    "@angular/cli": "12.0.5",
-    "@angular/compiler": "11.1.0",
+    "@angular/compiler": "12.0.5",
-    "@angular/compiler-cli": "11.1.0",
+    "@angular/compiler-cli": "12.0.5",
-    "@ngxs/devtools-plugin": "3.7.1",
+    "@ngxs/devtools-plugin": "3.7.2",
-    "@types/jest": "26.0.20",
+    "@types/jest": "26.0.23",
-    "@types/node": "14.14.22",
+    "@types/node": "15.12.4",
-    "@typescript-eslint/eslint-plugin": "4.14.0",
+    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/eslint-plugin-tslint": "4.14.0",
+    "@typescript-eslint/eslint-plugin-tslint": "4.28.0",
-    "@typescript-eslint/parser": "4.14.0",
+    "@typescript-eslint/parser": "4.28.0",
-    "compression-webpack-plugin": "7.1.2",
+    "compression-webpack-plugin": "8.0.0",
-    "cypress": "6.3.0",
+    "cypress": "7.5.0",
     "cypress-intellij-reporter": "0.0.6",
-    "eslint": "7.18.0",
+    "eslint": "7.29.0",
-    "eslint-config-prettier": "7.2.0",
+    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-prettier": "3.4.0",
-    "jest": "26.6.3",
+    "jest": "27.0.5",
-    "jest-preset-angular": "8.3.2",
+    "jest-preset-angular": "9.0.4",
-    "prettier": "2.2.1",
+    "prettier": "2.3.1",
-    "sass": "1.32.5",
+    "sass": "1.35.1",
-    "ts-jest": "26.4.4",
+    "ts-jest": "27.0.3",
     "tslint": "6.1.3",
-    "typescript": "4.1.3"
+    "typescript": "4.2.4"
   }
 }

web/src/app/administration/components/access-items-management/access-items-management.component.spec.ts

@@ -49,10 +49,6 @@ const notificationServiceSpy: Partial<NotificationService> = {
   showDialog: showDialogFn
 };
 
-const mockDialogRef = {
-  close: jasmine.createSpy('close')
-};
-
 @Component({ selector: 'svg-icon', template: '' })
 class SvgIconStub {}
 
@@ -109,7 +105,6 @@ describe('AccessItemsManagementComponent', () => {
       providers: [
         { provide: FormsValidatorService, useValue: formValidatorServiceSpy },
         { provide: NotificationService, useValue: notificationServiceSpy },
-        { provide: MatDialogRef, useValue: { mockDialogRef } },
         RequestInProgressService,
         ClassificationCategoriesService,
         StartupService,

web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.scss

@@ -1,5 +1,4 @@
 @import '../../../../theme/colors';
-@import '~@angular/material/theming';
 
 .workbasket-access-items {
   height: calc(100vh - 213px);

web/src/app/administration/components/workbasket-details/workbasket-details.component.spec.ts

@@ -134,7 +134,7 @@ describe('WorkbasketDetailsComponent', () => {
     expect(information).toBeTruthy();
   });
 
-  it('should render new workbasket when action is CREATE', async (done) => {
+  it('should render new workbasket when action is CREATE', (done) => {
     store
       .dispatch(new CreateWorkbasket())
       .pipe(take(1))

web/src/app/shared/components/nav-bar/nav-bar.component.spec.ts

@@ -5,18 +5,18 @@ import { SelectedRouteService } from '../../services/selected-route/selected-rou
 import { SidenavService } from '../../services/sidenav/sidenav.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { By } from '@angular/platform-browser';
-import { of } from 'rxjs/internal/observable/of';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { EMPTY } from 'rxjs';
 
 jest.mock('angular-svg-icon');
 
 const SidenavServiceSpy: Partial<SidenavService> = {
-  toggleSidenav: jest.fn().mockReturnValue(of())
+  toggleSidenav: jest.fn().mockReturnValue(EMPTY)
 };
 
 const SelectedRouteServiceSpy: Partial<SelectedRouteService> = {
-  getSelectedRoute: jest.fn().mockReturnValue(of())
+  getSelectedRoute: jest.fn().mockReturnValue(EMPTY)
 };
 
 @Component({ selector: 'svg-icon', template: '' })

web/src/app/shared/components/sidenav-list/sidenav-list.component.spec.ts

@@ -9,21 +9,22 @@ import { RouterModule } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TaskanaEngineService } from '../../services/taskana-engine/taskana-engine.service';
 import { TaskanaEngineServiceMock } from '../../services/taskana-engine/taskana-engine.mock.service';
-import { of } from 'rxjs/internal/observable/of';
+
 import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
+import { EMPTY, of } from 'rxjs';
 
 const SidenavServiceSpy: Partial<SidenavService> = {
-  toggleSidenav: jest.fn().mockReturnValue(of())
+  toggleSidenav: jest.fn().mockReturnValue(EMPTY)
 };
 
 const TaskanaEngineServiceSpy: Partial<TaskanaEngineServiceMock> = {
-  hasRole: jest.fn().mockReturnValue(of()),
+  hasRole: jest.fn().mockReturnValue(EMPTY),
-  isHistoryProviderEnabled: jest.fn().mockReturnValue(of())
+  isHistoryProviderEnabled: jest.fn().mockReturnValue(EMPTY)
 };
 
 describe('SidenavListComponent', () => {

web/src/app/shared/components/type-ahead/type-ahead.component.spec.ts

@@ -7,17 +7,17 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterModule } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { of } from 'rxjs/internal/observable/of';
 import { MatSelectModule } from '@angular/material/select';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { EMPTY } from 'rxjs';
 
 const AccessIdsServiceSpy: Partial<AccessIdsService> = {
-  getAccessItems: jest.fn().mockReturnValue(of()),
+  getAccessItems: jest.fn().mockReturnValue(EMPTY),
-  searchForAccessId: jest.fn().mockReturnValue(of())
+  searchForAccessId: jest.fn().mockReturnValue(EMPTY)
 };
 
 describe('TypeAheadComponent', () => {

web/src/app/shared/models/sorting.ts

@@ -47,13 +47,11 @@ export enum WorkbasketAccessItemQuerySortParameter {
   ACCESS_ID = 'ACCESS_ID'
 }
 
-export const WORKBASKET_ACCESS_ITEM_SORT_PARAMETER_NAMING: Map<
+export const WORKBASKET_ACCESS_ITEM_SORT_PARAMETER_NAMING: Map<WorkbasketAccessItemQuerySortParameter, string> =
-  WorkbasketAccessItemQuerySortParameter,
+  new Map([
-  string
+    [WorkbasketAccessItemQuerySortParameter.ACCESS_ID, 'Access id'],
-> = new Map([
+    [WorkbasketAccessItemQuerySortParameter.WORKBASKET_KEY, 'Workbasket Key']
-  [WorkbasketAccessItemQuerySortParameter.ACCESS_ID, 'Access id'],
+  ]);
-  [WorkbasketAccessItemQuerySortParameter.WORKBASKET_KEY, 'Workbasket Key']
-]);
 
 export enum ClassificationQuerySortParameter {
   DOMAIN = 'DOMAIN',

web/src/app/shared/store/mock-data/mock-store.ts

@@ -112,19 +112,16 @@ export const selectedWorkbasketMock: Workbasket = {
       href: 'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000902'
     },
     distributionTargets: {
-      href:
+      href: 'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000902/distribution-targets'
-        'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000902/distribution-targets'
     },
     accessItems: {
-      href:
+      href: 'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000902/workbasketAccessItems'
-        'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000902/workbasketAccessItems'
     },
     allWorkbaskets: {
       href: 'http://localhost:8080/taskana/api/v1/workbaskets'
     },
     removeDistributionTargets: {
-      href:
+      href: 'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000902/distribution-targets'
-        'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000902/distribution-targets'
     }
   }
 };
@@ -182,8 +179,7 @@ export const workbasketAccessItemsMock: WorkbasketAccessItemsRepresentation = {
   ],
   _links: {
     self: {
-      href:
+      href: 'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000901/workbasketAccessItems'
-        'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000901/workbasketAccessItems'
     },
     workbasket: {
       href: 'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000901'
@@ -196,20 +192,16 @@ export const workbasketReadStateMock = {
   paginatedWorkbasketsSummary: {
     _links: {
       self: {
-        href:
+        href: 'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page=3&page-size=8'
-          'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page=3&page-size=8'
       },
       first: {
-        href:
+        href: 'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page-size=8&page=1'
-          'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page-size=8&page=1'
       },
       last: {
-        href:
+        href: 'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page-size=8&page=3'
-          'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page-size=8&page=3'
       },
       prev: {
-        href:
+        href: 'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page-size=8&page=2'
-          'http://localhost:8080/taskana/api/v1/workbaskets/?sort-by=name&order=asc&domain=DOMAIN_A&page-size=8&page=2'
       }
     },
     workbaskets: [
@@ -315,8 +307,7 @@ export const workbasketReadStateMock = {
   workbasketDistributionTargets: {
     _links: {
       self: {
-        href:
+        href: 'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000900/distribution-targets'
-          'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000900/distribution-targets'
       }
     },
     distributionTargets: [

web/src/app/workplace/components/task-master/task-master.component.ts

@@ -153,7 +153,7 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.destroy$.next();
+    this.destroy$.next(null);
     this.destroy$.complete();
   }
 }

web/src/app/workplace/services/task.service.ts

@@ -29,7 +29,7 @@ export class TaskService {
   }
 
   publishTaskDeletion() {
-    this.taskDeletedSource.next();
+    this.taskDeletedSource.next(null);
   }
 
   selectTask(task?: Task) {

web/src/polyfills.ts

@@ -33,7 +33,7 @@ import 'core-js/es/reflect';
 /** *************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /** *************************************************************************************************
  * APPLICATION IMPORTS

web/src/test.ts

@@ -1,4 +1,5 @@
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';
+import { fakeAsync } from '@angular/core/testing';
 
 Object.defineProperty(window, 'CSS', { value: null });
 Object.defineProperty(window, 'getComputedStyle', {

web/src/theme/custom-theme-material.scss

@@ -1,8 +1,8 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
-@include mat-core();
+@include mat.core();
 
-$my-app-primary: mat-palette($mat-blue-grey);
+$my-app-primary: mat.define-palette(mat.$blue-grey-palette);
-$my-app-accent: mat-palette($mat-teal, 500, 900, A100);
+$my-app-accent: mat.define-palette(mat.$teal-palette, 500, 900, A100);
-$my-app-warn: mat-palette($mat-red, 600);
+$my-app-warn: mat.define-palette(mat.$red-palette, 600);
-$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
+$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
-@include angular-material-theme($my-app-theme);
+@include mat.all-component-themes($my-app-theme);

web/src/tsconfig.app.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "",
-    "types": []
+    "types": ["jest"]
   },
   "files": ["main.ts", "polyfills.ts"],
   "include": ["src/**/*.d.ts"],