TSK-1469: Update to Angular 11

* TSK-1469: Upgrade to Angular 11

Updated Angular core and cli to 10

Fixed compiler problems with ngxs

update of angular to 11

updated angular material to 11

still some build problems

fixed some errors (hopefully all)

TSK-1469: fixed tests

TSK-1469: incorporated change requests before rebase

* TSK-1469: Rebase fixing

prettier


TSK-1469: Fixed tests failures after rebase

* TSK-1469: small scss fix, but some css broken

* TSK-1469: Style Fixing continues

* TSK-1469: Fixed most styling

* TSK-1469: Fixed e2e tests

* TSK-1469: PR Review css changes


TSK-1469: Review css changes

* TSK-1469: More CSS refinement

Also removed added providedIn and refactored small bits

* TSK-1469: Renamed browserlist to browerslist

as it should be

Co-authored-by: Name <Email>

.github/workflows/continuous-integration.yml

@@ -20,7 +20,7 @@ env:
   ARTIFACTS_TASKANA_WEB_NAME: taskana-web
   ARTIFACTS_TASKANA_WEB_PATH: web/dist
   ARTIFACTS_JACOCO_REPORTS_NAME: jacoco-reports
-  ARTIFACTS_JACOCO_REPORTS_PATH: '**/jacoco.exec'
+  ARTIFACTS_JACOCO_REPORTS_PATH: "**/jacoco.exec"
 
   CACHE_WEB_NAME: web
   # IMPORTANT: this cannot start with CACHE_MAVEN_NAME's value
@@ -103,7 +103,7 @@ jobs:
       - name: Install Dependencies
         if: steps.web-cache.outputs.cache-hit != 'true'
         working-directory: web
-        run: npm ci
+        run: yarn ci
       # currently this is not working because the angular-tree-component needs core-js ^2.4.1 and we have 3.X.X
       #- name: Verify Dependencies
       #working-directory: web
@@ -111,8 +111,8 @@ jobs:
       - name: Compile & build
         working-directory: web
         run: |
-          npm run lint
+          yarn lint
-          npm run build:prod
+          yarn build:prod
       - name: Build maven artifact
         run: ./mvnw -B install -pl :taskana-web -am
       - name: Upload taskana-web artifact
@@ -184,7 +184,7 @@ jobs:
       - name: Install Dependencies
         if: steps.web-cache.outputs.cache-hit != 'true'
         working-directory: web
-        run: npm ci
+        run: yarn ci
       - name: Cache maven dependencies
         uses: actions/cache@v2.1.6
         with:
@@ -321,12 +321,12 @@ jobs:
         if: failure()
         uses: andymckay/cancel-action@0.2
 
-
   release_artifacts:
     runs-on: ubuntu-20.04
     name: Release artifacts to OSS Sonatype
     if: github.repository == 'Taskana/taskana' && ( startsWith(github.ref, 'refs/tags') || github.ref == 'refs/heads/master' ) && github.head_ref == ''
-    needs: [ test_frontend, test_backend, test_taskana-rest-spring-example-wildfly ]
+    needs:
+      [test_frontend, test_backend, test_taskana-rest-spring-example-wildfly]
     # as documented in the gpg manual (https://www.gnupg.org/documentation/manuals/gnupg/Invoking-GPG_002dAGENT.html)
     # we should execute this command before interacting with gpg (otherwise gpg won't work)
     env:
@@ -395,7 +395,8 @@ jobs:
     runs-on: ubuntu-20.04
     name: Deploy demo app to IBM Cloud Foundry
     if: github.repository == 'Taskana/taskana' && github.ref == 'refs/heads/master' && github.head_ref == ''
-    needs: [ test_frontend, test_backend, test_taskana-rest-spring-example-wildfly ]
+    needs:
+      [test_frontend, test_backend, test_taskana-rest-spring-example-wildfly]
     steps:
       - name: Git checkout
         uses: actions/checkout@v2.3.4
@@ -450,7 +451,8 @@ jobs:
     name: Upload SonarQube analysis to sonarcloud
     # no pull request and not on release
     if: github.head_ref == '' && !startsWith(github.ref, 'refs/tags')
-    needs: [ test_frontend, test_backend, test_taskana-rest-spring-example-wildfly ]
+    needs:
+      [test_frontend, test_backend, test_taskana-rest-spring-example-wildfly]
     steps:
       - name: Git checkout
         uses: actions/checkout@v2.3.4

web/.prettierignore

@@ -10,3 +10,4 @@ coverage/**
 **/dist/**
 out-tsc/**
 **/*.html
+target/**

web/angular.json

@@ -20,21 +20,13 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "assets": [
+            "assets": ["src/assets", "src/environments/data-sources"],
-              "src/assets",
-              "src/environments/data-sources"
-            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/theme/_main.scss",
               "src/theme/custom-theme-material.scss"
             ],
-            "scripts": [
+            "scripts": []
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/popper.js/dist/umd/popper.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ]
           },
           "configurations": {
             "production": {
@@ -47,7 +39,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": true,
-              "extractCss": true,
               "namedChunks": true,
               "aot": true,
               "extractLicenses": true,
@@ -83,10 +74,7 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
             "exclude": []
           }
         }

web/cypress/integration/classifications/classifications.spec.js

@@ -6,8 +6,8 @@ context('TASKANA Classifications', () => {
 
     cy.visitTestClassification();
 
-    cy.get('#classification-service-level').clear().type(editedValue);
+    cy.get('#classification-service-level').clear({ force: true }).type(editedValue);
-    cy.get('button').contains('Save').click();
+    cy.get('button').contains('Save').click({ force: true });
 
     cy.get('#classification-service-level').should('have.value', editedValue);
   });
@@ -17,7 +17,7 @@ context('TASKANA Classifications', () => {
     cy.verifyPageLoad('/classifications');
 
     cy.get('button[mattooltip="Filter Category"]')
-      .click()
+      .click({ force: true })
       .then(() => {
         cy.get('.mat-menu-content').contains('MANUAL').click();
         cy.get('tree-node-collection').find('tree-node').should('have.length', 8);
@@ -29,7 +29,7 @@ context('TASKANA Classifications', () => {
 
     cy.visitTestClassification();
 
-    cy.get('#classification-name').clear().type(editedValue);
+    cy.get('#classification-name').scrollIntoView().clear().type(editedValue);
     cy.get('button').contains('Save').click();
 
     cy.get('#classification-name').should('have.value', editedValue);
@@ -38,24 +38,20 @@ context('TASKANA Classifications', () => {
   it('should be possible to edit the category of a classification', () => {
     cy.visitTestClassification();
 
-    cy.get('ng-form').find('mat-form-field').find('mat-select[role="listbox"]').click();
+    cy.get('ng-form').find('mat-form-field mat-select[required]').click({ force: true });
     cy.wait(Cypress.env('dropdownWait'));
-    cy.get('mat-option').contains('PROCESS').click();
+    cy.get('mat-option').contains('PROCESS').click({ force: true });
-    cy.get('button').contains('Save').click();
+    cy.get('button').contains('Save').click({ force: true });
 
     // assure that its process now
-    cy.get('ng-form')
+    cy.get('ng-form').find('mat-form-field mat-select[required]').contains('PROCESS').should('be.visible');
-      .find('mat-form-field')
-      .find('mat-select[role="listbox"]')
-      .contains('PROCESS')
-      .should('be.visible');
 
     // change back to external
-    cy.get('ng-form').find('mat-form-field').find('mat-select[role="listbox"]').click();
+    cy.get('ng-form').find('mat-form-field mat-select[required]').click({ force: true });
     cy.wait(Cypress.env('dropdownWait'));
-    cy.get('mat-option').contains('EXTERNAL').should('be.visible').click();
+    cy.get('mat-option').contains('EXTERNAL').should('be.visible').click({ force: true });
 
-    cy.get('button').contains('Save').click();
+    cy.get('button').contains('Save').click({ force: true });
   });
 
   it('should be possible to edit the description of a classification', () => {
@@ -63,8 +59,8 @@ context('TASKANA Classifications', () => {
 
     cy.visitTestClassification();
 
-    cy.get('#classification-description').clear().type(editedValue);
+    cy.get('#classification-description').clear({ force: true }).type(editedValue);
-    cy.get('button').contains('Save').click();
+    cy.get('button').contains('Save').click({ force: true });
 
     cy.get('#classification-description').should('have.value', editedValue);
   });
@@ -72,9 +68,9 @@ context('TASKANA Classifications', () => {
   it('should be possible to edit the custom classification', () => {
     cy.visitTestClassification();
 
-    cy.get('#classification-custom-1').clear().type(Cypress.env('testValueClassifications'));
+    cy.get('#classification-custom-1').clear({ force: true }).type(Cypress.env('testValueClassifications'));
 
-    cy.get('button').contains('Save').click();
+    cy.get('button').contains('Save').click({ force: true });
 
     cy.get('#classification-custom-1').should('have.value', Cypress.env('testValueClassifications'));
   });
@@ -82,8 +78,10 @@ context('TASKANA Classifications', () => {
   it('should be possible to edit the application entry point', () => {
     cy.visitTestClassification();
 
-    cy.get('#classification-application-entry-point').clear().type(Cypress.env('testValueClassifications'));
+    cy.get('#classification-application-entry-point')
-    cy.get('button').contains('Save').click();
+      .clear({ force: true })
+      .type(Cypress.env('testValueClassifications'));
+    cy.get('button').contains('Save').click({ force: true });
 
     cy.get('#classification-application-entry-point').should('have.value', Cypress.env('testValueClassifications'));
   });

web/cypress/integration/history/history.spec.js

@@ -10,7 +10,5 @@ context('TASKANA History', () => {
     } else {
       cy.log('History plugin not enabled - No need for testing history functionality');
     }
-
   });
-
 });

web/cypress/integration/login/login.spec.js

@@ -1,7 +1,5 @@
 context('TASKANA Login', () => {
-  
   it('should login depending on current configuration', () => {
     cy.loginAs('admin');
   });
-  
 });

web/cypress/integration/monitor/monitor.spec.js

@@ -9,7 +9,6 @@ context('TASKANA Monitor', () => {
     cy.get('canvas.chartjs-render-monitor').should('be.visible');
   });
 
-
   it('should visit taskana workbaskets monitor page', () => {
     cy.visit(Cypress.env('appUrl') + '/monitor');
     cy.verifyPageLoad('/monitor');
@@ -19,7 +18,6 @@ context('TASKANA Monitor', () => {
     cy.get('canvas.chartjs-render-monitor').should('be.visible');
   });
 
-
   it('should visit taskana classifications monitor page', () => {
     cy.visit(Cypress.env('appUrl') + '/monitor');
     cy.verifyPageLoad('/monitor');
@@ -29,7 +27,6 @@ context('TASKANA Monitor', () => {
     cy.get('canvas.chartjs-render-monitor').should('be.visible');
   });
 
-
   it('should visit taskana timestamp monitor page', () => {
     cy.visit(Cypress.env('appUrl') + '/monitor');
     cy.verifyPageLoad('/monitor');
@@ -38,5 +35,4 @@ context('TASKANA Monitor', () => {
     cy.get('nav').find('.mat-tab-label-active').should('contain', 'Timestamp');
     cy.contains('TimestampReport').should('be.visible');
   });
-
 });

web/cypress/integration/workbaskets/workbaskets.spec.js

@@ -6,7 +6,6 @@ context('TASKANA Workbaskets', () => {
     cy.verifyPageLoad('/workbaskets');
   });
 
-
   it('should be able to filter workbaskets by name', () => {
     cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets');
     cy.verifyPageLoad('/workbaskets');
@@ -19,31 +18,24 @@ context('TASKANA Workbaskets', () => {
       });
   });
 
-
   it('should be possible to edit workbasket custom information', () => {
     cy.visitTestWorkbasket();
 
-    cy.get('#wb-custom-1')
+    cy.get('#wb-custom-1').clear().type(Cypress.env('testValueWorkbaskets'));
-      .clear()
-      .type(Cypress.env('testValueWorkbaskets'));
 
     cy.saveWorkbaskets();
     cy.get('#wb-custom-1').should('have.value', Cypress.env('testValueWorkbaskets'));
   });
 
-
   it('should be possible to edit workbasket information orgLevel', () => {
     cy.visitTestWorkbasket();
 
-    cy.get('input[name="workbasket.orgLevel1"]')
+    cy.get('input[name="workbasket.orgLevel1"]').clear().type(Cypress.env('testValueWorkbaskets'));
-      .clear()
-      .type(Cypress.env('testValueWorkbaskets'));
 
     cy.saveWorkbaskets();
     cy.get('input[name="workbasket.orgLevel1"]').should('have.value', Cypress.env('testValueWorkbaskets'));
   });
 
-
   it('should be possible to edit workbasket description', () => {
     cy.visitTestWorkbasket();
 
@@ -56,7 +48,6 @@ context('TASKANA Workbaskets', () => {
       });
   });
 
-
   it('should be possible to edit the type of a workbasket', () => {
     cy.visitTestWorkbasket();
 
@@ -76,7 +67,6 @@ context('TASKANA Workbaskets', () => {
     cy.saveWorkbaskets();
   });
 
-
   it('should be possible to add new access', () => {
     cy.visitTestWorkbasket();
     cy.visitWorkbasketsAccessPage();
@@ -84,8 +74,7 @@ context('TASKANA Workbaskets', () => {
     cy.get('button[mattooltip="Add new access"')
       .click()
       .then(() => {
-        cy.get('mat-form-field').contains('mat-form-field', "Access id").find('input')
+        cy.get('mat-form-field').contains('mat-form-field', 'Access id').find('input').type('teamlead-2');
-          .type('teamlead-2');
         cy.get('input[aria-label="checkAll"]:first').click();
         cy.saveWorkbaskets();
       });
@@ -94,26 +83,30 @@ context('TASKANA Workbaskets', () => {
     cy.get('table#table-access-items > tbody > tr').should('have.length', 2);
   });
 
-
   it('should be possible to add a distribution target', () => {
     cy.visitTestWorkbasket();
     cy.visitWorkbasketsDistributionTargetsPage();
 
-    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Available distribution targets"]').find('mat-list-option:first')
+    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Available distribution targets"]')
-      .find('mat-pseudo-checkbox').click()
+      .find('mat-list-option:first')
-    cy.get('button').contains('Add selected distribution targets').click()
+      .find('mat-pseudo-checkbox')
+      .click();
+    cy.get('button').contains('Add selected distribution targets').click();
 
     cy.saveWorkbaskets();
 
     cy.visitWorkbasketsDistributionTargetsPage();
-    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Selected distribution targets"]').find('mat-selection-list').should('not.be.empty');
+    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Selected distribution targets"]')
+      .find('mat-selection-list')
+      .should('not.be.empty');
 
     // undo changes
-    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Selected distribution targets"]').find('mat-list-option:first')
+    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Selected distribution targets"]')
-      .find('mat-pseudo-checkbox').click()
+      .find('mat-list-option:first')
-    cy.get('button').contains('Remove selected distribution target').click()
+      .find('mat-pseudo-checkbox')
+      .click();
+    cy.get('button').contains('Remove selected distribution target').click();
 
     cy.saveWorkbaskets();
   });
-
 });

web/cypress/support/commands.js

@@ -25,8 +25,7 @@ Cypress.Commands.add('visitTestWorkbasket', () => {
   // since the list is loaded dynamically, we need to explicitly wait 400ms for the results
   // in order to avoid errors regarding detached DOM elements although it is a bad practice
   cy.wait(400);
-  cy.get('mat-selection-list').contains(Cypress.env('testValueWorkbasketSelectionName'))
+  cy.get('mat-selection-list').contains(Cypress.env('testValueWorkbasketSelectionName')).should('exist').click();
-    .should('exist').click();
   cy.visitWorkbasketsInformationPage();
 });
 
@@ -34,8 +33,10 @@ Cypress.Commands.add('visitTestClassification', () => {
   cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
   cy.verifyPageLoad('/classifications');
 
-  cy.get('taskana-administration-tree').contains(Cypress.env('testValueClassificationSelectionName'))
+  cy.get('taskana-administration-tree')
-    .should('exist').click();
+    .contains(Cypress.env('testValueClassificationSelectionName'))
+    .should('exist')
+    .click();
 });
 
 Cypress.Commands.add('loginAs', (username) => {

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "taskana",
   "version": "1.0.0",
-  "license": "Novatec gmbh",
+  "license": "Novatec GmbH",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -16,60 +16,61 @@
     "format:html": "prettier --write \"**/*.{html,}\"",
     "e2e-dev": "cypress install && cypress run",
     "e2e-dev:open": "cypress install && cypress open",
-    "e2e-standalone": "cypress install && cypress run --config-file cypress-standalone.json"
+    "e2e-standalone": "cypress install && cypress run --config-file cypress-standalone.json",
+    "ci": "yarn install --frozen-lockfile"
   },
   "private": true,
+  "resolutions": {
+    "webpack": "5.21.2"
+  },
   "dependencies": {
-    "@angular/animations": "9.1.12",
+    "@angular/animations": "11.1.0",
-    "@angular/cdk": "9.2.4",
+    "@angular/cdk": "11.1.0",
-    "@angular/common": "9.1.12",
+    "@angular/common": "11.1.0",
-    "@angular/core": "9.1.12",
+    "@angular/core": "11.1.0",
-    "@angular/forms": "9.1.12",
+    "@angular/forms": "11.1.0",
-    "@angular/material": "9.2.4",
+    "@angular/material": "11.1.0",
-    "@angular/platform-browser": "9.1.12",
+    "@angular/platform-browser": "11.1.0",
-    "@angular/platform-browser-dynamic": "9.1.12",
+    "@angular/platform-browser-dynamic": "11.1.0",
-    "@angular/router": "9.1.12",
+    "@angular/router": "11.1.0",
-    "@ngxs/devtools-plugin": "3.7.1",
+    "@circlon/angular-tree-component": "10.0.2",
     "@ngxs/store": "3.7.1",
-    "angular-svg-icon": "9.2.0",
+    "angular-svg-icon": "11.0.0",
-    "angular-tree-component": "8.5.6",
-    "bootstrap": "4.6.0",
     "chart.js": "2.9.4",
     "core-js": "3.8.3",
-    "file-saver": "1.3.3",
+    "file-saver": "2.0.5",
-    "jquery": "3.5.1",
     "ng2-charts": "2.4.2",
-    "ngx-bootstrap": "5.4.0",
+    "ngx-bootstrap": "6.2.0",
-    "ngx-infinite-scroll": "9.0.0",
+    "ngx-infinite-scroll": "10.0.1",
-    "popper.js": "1.16.1",
     "rxjs": "6.6.3",
-    "tslib": "1.14.1",
+    "tslib": "2.1.0",
-    "zone.js": "0.10.3"
+    "zone.js": "0.11.3"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "9.2.0",
+    "@angular-builders/custom-webpack": "11.0.0",
-    "@angular-devkit/build-angular": "0.901.13",
+    "@angular-devkit/build-angular": "0.1101.1",
-    "@angular/cli": "9.1.12",
+    "@angular/cli": "11.1.1",
-    "@angular/compiler": "9.1.12",
+    "@angular/compiler": "11.1.0",
-    "@angular/compiler-cli": "9.1.12",
+    "@angular/compiler-cli": "11.1.0",
+    "@ngxs/devtools-plugin": "3.7.1",
     "@types/jest": "26.0.20",
     "@types/node": "14.14.22",
-    "@typescript-eslint/eslint-plugin": "2.34.0",
+    "@typescript-eslint/eslint-plugin": "4.14.0",
     "@typescript-eslint/eslint-plugin-tslint": "4.14.0",
-    "@typescript-eslint/parser": "2.34.0",
+    "@typescript-eslint/parser": "4.14.0",
-    "compression-webpack-plugin": "4.0.0",
+    "compression-webpack-plugin": "7.1.2",
-    "cypress": "6.5.0",
+    "cypress": "6.3.0",
     "cypress-intellij-reporter": "0.0.6",
-    "eslint": "6.8.0",
+    "eslint": "7.18.0",
-    "eslint-config-prettier": "6.15.0",
+    "eslint-config-prettier": "7.2.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-prettier": "3.3.1",
     "jest": "26.6.3",
     "jest-preset-angular": "8.3.2",
-    "node-sass": "4.14.1",
     "prettier": "2.2.1",
+    "sass": "1.32.5",
     "ts-jest": "26.4.4",
     "tslint": "6.1.3",
-    "typescript": "3.8.3"
+    "typescript": "4.1.3"
   }
 }

web/src/app/administration/administration.module.ts

@@ -2,7 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AngularSvgIconModule } from 'angular-svg-icon';
-import { AlertModule, TypeaheadModule } from 'ngx-bootstrap';
+import { AlertModule } from 'ngx-bootstrap/alert';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { SharedModule } from 'app/shared/shared.module';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
@@ -114,7 +115,6 @@ const DECLARATIONS = [
     WorkbasketDefinitionService,
     ClassificationCategoriesService,
     ImportExportService
-  ],
+  ]
-  entryComponents: []
 })
 export class AdministrationModule {}

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

@@ -15,7 +15,7 @@ import { GetAccessItems } from '../../../shared/store/access-items-management-st
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { TypeAheadComponent } from '../../../shared/components/type-ahead/type-ahead.component';
-import { TypeaheadModule } from 'ngx-bootstrap';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Direction, Sorting, WorkbasketAccessItemQuerySortParameter } from '../../../shared/models/sorting';
 import { StartupService } from '../../../shared/services/startup/startup.service';
@@ -35,6 +35,8 @@ import { MatListModule } from '@angular/material/list';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatTableModule } from '@angular/material/table';
 
+jest.mock('angular-svg-icon');
+
 const isFieldValidFn = jest.fn().mockReturnValue(true);
 const formValidatorServiceSpy = jest.fn().mockImplementation(
   (): Partial<FormsValidatorService> => ({
@@ -43,11 +45,9 @@ const formValidatorServiceSpy = jest.fn().mockImplementation(
 );
 
 const showDialogFn = jest.fn().mockReturnValue(true);
-const notificationServiceSpy = jest.fn().mockImplementation(
+const notificationServiceSpy: Partial<NotificationService> = {
-  (): Partial<NotificationService> => ({
   showDialog: showDialogFn
-  })
+};
-);
 
 const mockDialogRef = {
   close: jasmine.createSpy('close')
@@ -107,8 +107,8 @@ describe('AccessItemsManagementComponent', () => {
         SvgIconStub
       ],
       providers: [
-        { provide: FormsValidatorService, useClass: formValidatorServiceSpy },
+        { provide: FormsValidatorService, useValue: formValidatorServiceSpy },
-        { provide: NotificationService, useClass: notificationServiceSpy },
+        { provide: NotificationService, useValue: notificationServiceSpy },
         { provide: MatDialogRef, useValue: { mockDialogRef } },
         RequestInProgressService,
         ClassificationCategoriesService,
@@ -172,7 +172,10 @@ describe('AccessItemsManagementComponent', () => {
       { accessId: '1', name: 'users' },
       { accessId: '2', name: 'users' }
     ];
-    app.sortModel = { 'sort-by': WorkbasketAccessItemQuerySortParameter.ACCESS_ID, order: Direction.DESC };
+    app.sortModel = {
+      'sort-by': WorkbasketAccessItemQuerySortParameter.ACCESS_ID,
+      order: Direction.DESC
+    };
     app.searchForAccessItemsWorkbaskets();
     fixture.detectChanges();
     let actionDispatched = false;

web/src/app/administration/components/administration-overview/administration-overview.component.spec.ts

@@ -9,13 +9,11 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { of } from 'rxjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-const domainServiceSpy = jest.fn().mockImplementation(
+const domainServiceSpy: Partial<DomainService> = {
-  (): Partial<DomainService> => ({
   getDomains: jest.fn().mockReturnValue(of(['domain a', 'domain b'])),
   getSelectedDomain: jest.fn().mockReturnValue(of('domain a')),
   switchDomain: jest.fn()
-  })
+};
-);
 
 describe('AdministrationOverviewComponent', () => {
   let component: AdministrationOverviewComponent;
@@ -32,7 +30,7 @@ describe('AdministrationOverviewComponent', () => {
         BrowserAnimationsModule
       ],
       declarations: [AdministrationOverviewComponent],
-      providers: [{ provide: DomainService, useClass: domainServiceSpy }]
+      providers: [{ provide: DomainService, useValue: domainServiceSpy }]
     }).compileComponents();
   }));
 

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

@@ -55,59 +55,45 @@ class TextareaStub {
   @Input() ngModel;
 }
 
-const classificationServiceSpy = jest.fn().mockImplementation(
+const classificationServiceSpy: Partial<ClassificationsService> = {
-  (): Partial<ClassificationsService> => ({
   getClassification: jest.fn().mockReturnValue(of()),
   getClassifications: jest.fn().mockReturnValue(of()),
   postClassification: jest.fn().mockReturnValue(of()),
   putClassification: jest.fn().mockReturnValue(of()),
   deleteClassification: jest.fn().mockReturnValue(of())
-  })
+};
-);
+const classificationCategoriesServiceSpy: Partial<ClassificationCategoriesService> = {
-const classificationCategoriesServiceSpy = jest.fn().mockImplementation(
-  (): Partial<ClassificationCategoriesService> => ({
   getCustomisation: jest.fn().mockReturnValue(of())
-  })
+};
-);
+const domainServiceSpy: Partial<DomainService> = {
-const domainServiceSpy = jest.fn().mockImplementation(
-  (): Partial<DomainService> => ({
   getSelectedDomainValue: jest.fn().mockReturnValue(of('A')),
   getSelectedDomain: jest.fn().mockReturnValue(of())
-  })
+};
-);
 const getImportingFinishedFn = jest.fn().mockReturnValue(of(true));
-const importExportServiceSpy = jest.fn().mockImplementation(
+const importExportServiceSpy: Partial<ImportExportService> = {
-  (): Partial<ImportExportService> => ({
   getImportingFinished: getImportingFinishedFn
-  })
+};
-);
 
-const requestInProgressServiceSpy = jest.fn().mockImplementation(
+const requestInProgressServiceSpy: Partial<RequestInProgressService> = {
-  (): Partial<RequestInProgressService> => ({
   setRequestInProgress: jest.fn().mockReturnValue(of()),
   getRequestInProgress: jest.fn().mockReturnValue(of(false))
-  })
+};
-);
 
 const validateFormInformationFn = jest.fn().mockImplementation((): Promise<any> => Promise.resolve(true));
-const formsValidatorServiceSpy = jest.fn().mockImplementation(
+const formsValidatorServiceSpy: Partial<FormsValidatorService> = {
-  (): Partial<FormsValidatorService> => ({
   isFieldValid: jest.fn().mockReturnValue(true),
   validateInputOverflow: jest.fn(),
   validateFormInformation: validateFormInformationFn,
   get inputOverflowObservable(): Observable<Map<string, boolean>> {
     return of(new Map<string, boolean>());
   }
-  })
+};
-);
 
-const notificationServiceSpy = jest.fn().mockImplementation(
+const notificationServiceSpy: Partial<NotificationService> = {
-  (): Partial<NotificationService> => ({
   showToast: jest.fn().mockReturnValue(of()),
   showDialog: jest.fn().mockReturnValue(of()),
   triggerError: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 describe('ClassificationDetailsComponent', () => {
   let fixture: ComponentFixture<ClassificationDetailsComponent>;
@@ -135,13 +121,13 @@ describe('ClassificationDetailsComponent', () => {
       ],
       declarations: [ClassificationDetailsComponent, InputStub, FieldErrorDisplayStub, SvgIconStub, TextareaStub],
       providers: [
-        { provide: ClassificationsService, useClass: classificationServiceSpy },
+        { provide: ClassificationsService, useValue: classificationServiceSpy },
-        { provide: ClassificationCategoriesService, useClass: classificationCategoriesServiceSpy },
+        { provide: ClassificationCategoriesService, useValue: classificationCategoriesServiceSpy },
-        { provide: DomainService, useClass: domainServiceSpy },
+        { provide: DomainService, useValue: domainServiceSpy },
-        { provide: ImportExportService, useClass: importExportServiceSpy },
+        { provide: ImportExportService, useValue: importExportServiceSpy },
-        { provide: RequestInProgressService, useClass: requestInProgressServiceSpy },
+        { provide: RequestInProgressService, useValue: requestInProgressServiceSpy },
-        { provide: FormsValidatorService, useClass: formsValidatorServiceSpy },
+        { provide: FormsValidatorService, useValue: formsValidatorServiceSpy },
-        { provide: NotificationService, useClass: notificationServiceSpy }
+        { provide: NotificationService, useValue: notificationServiceSpy }
       ]
     }).compileComponents();
 

web/src/app/administration/components/classification-list/classification-list.component.scss

@@ -2,6 +2,8 @@
 
 .classification-list {
   height: 100%;
+  line-height: 1.5;
+  font-size: 1rem;
 
   &__no-items {
     text-align: center;

web/src/app/administration/components/classification-list/classification-list.component.spec.ts

@@ -48,36 +48,24 @@ class InputStub {
   @Input() ngModel;
 }
 
-const classificationServiceSpy = jest.fn().mockImplementation(
+const classificationServiceSpy: Partial<ClassificationsService> = {
-  (): Partial<ClassificationsService> => ({
   getClassification: jest.fn().mockReturnValue(of()),
   getClassifications: jest.fn().mockReturnValue(of())
-  })
+};
-);
+const classificationCategoriesServiceSpy = jest.fn().mockImplementation(() => jest.fn().mockReturnValue(of()));
-const classificationCategoriesServiceSpy = jest.fn().mockImplementation(
+const domainServiceSpy: Partial<DomainService> = {
-  (): Partial<ClassificationCategoriesService> => ({
-    getCustomisation: jest.fn().mockReturnValue(of())
-  })
-);
-const domainServiceSpy = jest.fn().mockImplementation(
-  (): Partial<DomainService> => ({
   getSelectedDomainValue: jest.fn().mockReturnValue(of()),
   getSelectedDomain: jest.fn().mockReturnValue(of())
-  })
+};
-);
 const getImportingFinishedFn = jest.fn().mockReturnValue(of(true));
-const importExportServiceSpy = jest.fn().mockImplementation(
+const importExportServiceSpy: Partial<ImportExportService> = {
-  (): Partial<ImportExportService> => ({
   getImportingFinished: getImportingFinishedFn
-  })
+};
-);
 
-const requestInProgressServiceSpy = jest.fn().mockImplementation(
+const requestInProgressServiceSpy: Partial<RequestInProgressService> = {
-  (): Partial<RequestInProgressService> => ({
   setRequestInProgress: jest.fn().mockReturnValue(of()),
   getRequestInProgress: jest.fn().mockReturnValue(of(false))
-  })
+};
-);
 
 describe('ClassificationListComponent', () => {
   let fixture: ComponentFixture<ClassificationListComponent>;
@@ -106,11 +94,11 @@ describe('ClassificationListComponent', () => {
         InputStub
       ],
       providers: [
-        { provide: ClassificationsService, useClass: classificationServiceSpy },
+        { provide: ClassificationsService, useValue: classificationServiceSpy },
-        { provide: ClassificationCategoriesService, useClass: classificationCategoriesServiceSpy },
+        { provide: ClassificationCategoriesService, useValue: classificationCategoriesServiceSpy },
-        { provide: DomainService, useClass: domainServiceSpy },
+        { provide: DomainService, useValue: domainServiceSpy },
-        { provide: ImportExportService, useClass: importExportServiceSpy },
+        { provide: ImportExportService, useValue: importExportServiceSpy },
-        { provide: RequestInProgressService, useClass: requestInProgressServiceSpy }
+        { provide: RequestInProgressService, useValue: requestInProgressServiceSpy }
       ]
     }).compileComponents();
 

web/src/app/administration/components/classification-overview/classification-overview.component.html

@@ -5,7 +5,7 @@
   <taskana-administration-classification-details *ngIf="showDetail; else showEmptyPage"></taskana-administration-classification-details>
 
   <ng-template #showEmptyPage>
-    <div class="hidden-xs hidden-sm col-md-8 container-no-items">
+    <div class="classification-overview__empty-page">
       <div class="center-block no-detail">
         <h3 class="grey select-classification">Select a classification</h3>
         <svg-icon class="img-responsive empty-icon" src="./assets/icons/classification-empty.svg"></svg-icon>

web/src/app/administration/components/classification-overview/classification-overview.component.scss

@@ -4,6 +4,13 @@
   width: 100%;
   overflow: hidden;
   align-items: stretch;
+
+  &__empty-page {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 taskana-administration-classification-list {
   min-width: 500px;

web/src/app/administration/components/classification-overview/classification-overview.component.spec.ts

@@ -31,18 +31,14 @@ const activatedRouteMock = {
 };
 
 const classificationCategoriesServiceSpy = jest.fn();
-const classificationServiceSpy = jest.fn().mockImplementation(
+const classificationServiceSpy: Partial<ClassificationsService> = {
-  (): Partial<ClassificationsService> => ({
   getClassification: jest.fn().mockReturnValue(of()),
   getClassifications: jest.fn().mockReturnValue(of())
-  })
+};
-);
+const domainServiceSpy: Partial<DomainService> = {
-const domainServiceSpy = jest.fn().mockImplementation(
-  (): Partial<DomainService> => ({
   getSelectedDomainValue: jest.fn().mockReturnValue(of()),
   getSelectedDomain: jest.fn().mockReturnValue(of('A'))
-  })
+};
-);
 
 describe('ClassificationOverviewComponent', () => {
   let fixture: ComponentFixture<ClassificationOverviewComponent>;
@@ -56,9 +52,9 @@ describe('ClassificationOverviewComponent', () => {
       imports: [NgxsModule.forRoot([ClassificationState])],
       declarations: [ClassificationOverviewComponent, ClassificationDetailsStub, ClassificationListStub, SvgIconStub],
       providers: [
-        { provide: ClassificationsService, useClass: classificationServiceSpy },
+        { provide: ClassificationsService, useValue: classificationServiceSpy },
-        { provide: ClassificationCategoriesService, useClass: classificationCategoriesServiceSpy },
+        { provide: ClassificationCategoriesService, useValue: classificationCategoriesServiceSpy },
-        { provide: DomainService, useClass: domainServiceSpy },
+        { provide: DomainService, useValue: domainServiceSpy },
         { provide: ActivatedRoute, useValue: activatedRouteMock }
       ]
     }).compileComponents();

web/src/app/administration/components/classification-types-selector/classification-types-selector.component.spec.ts

@@ -32,9 +32,9 @@ describe('ClassificationTypesSelectorComponent', () => {
       ],
       declarations: [ClassificationTypesSelectorComponent],
       providers: [
-        { provide: ClassificationsService, useClass: classificationServiceSpy },
+        { provide: ClassificationsService, useValue: classificationServiceSpy },
-        { provide: ClassificationCategoriesService, useClass: classificationCategoriesServiceSpy },
+        { provide: ClassificationCategoriesService, useValue: classificationCategoriesServiceSpy },
-        { provide: DomainService, useClass: domainServiceSpy }
+        { provide: DomainService, useValue: domainServiceSpy }
       ]
     }).compileComponents();
 

web/src/app/administration/components/import-export/import-export.component.html

@@ -4,8 +4,8 @@
     <mat-icon>cloud_upload</mat-icon>
   </button>
 
-  <form class="hidden" enctype="multipart/form-data" method="post">
+  <form class="hide" enctype="multipart/form-data" method="post">
-    <input #selectedFile type="file" accept=".json" (change)="uploadFile()" class="hide" />
+    <input #selectedFile type="file" accept=".json" (change)="uploadFile()" class="hidden" />
   </form>
 
   <button mat-stroked-button class="mr-1" matTooltip="Export {{parentComponent}}" [matMenuTriggerFor]="menu" [ngClass]="{disabled: uploadService?.isInUse}" title="Export">

web/src/app/administration/components/tree/tree.component.ts

@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 import { TreeNodeModel } from 'app/administration/models/tree-node';
 
-import { ITreeOptions, KEYS, TREE_ACTIONS, TreeComponent } from 'angular-tree-component';
+import { ITreeOptions, KEYS, TREE_ACTIONS, TreeComponent } from '@circlon/angular-tree-component';
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { filter, map, takeUntil } from 'rxjs/operators';
 import { Select, Store } from '@ngxs/store';

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

@@ -94,6 +94,7 @@
 .required-header {
   width: 200px;
 }
+
 .required-header:after {
   content: ' *';
   color: red;
@@ -113,3 +114,7 @@
 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
   margin-top: 0.7em;
 }
+
+table {
+  border-collapse: collapse;
+}

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

@@ -5,7 +5,7 @@ import { Actions, NgxsModule, ofActionDispatched, Store } from '@ngxs/store';
 import { Observable, of } from 'rxjs';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TypeAheadComponent } from '../../../shared/components/type-ahead/type-ahead.component';
-import { TypeaheadModule } from 'ngx-bootstrap';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
 import { FormsValidatorService } from '../../../shared/services/forms-validator/forms-validator.service';
 import { NotificationService } from '../../../shared/services/notifications/notification.service';
@@ -45,31 +45,25 @@ class SpinnerStub {
   @Input() positionClass: string;
 }
 
-const requestInProgressServiceSpy = jest.fn().mockImplementation(
+const requestInProgressServiceSpy: Partial<RequestInProgressService> = {
-  (): Partial<RequestInProgressService> => ({
   setRequestInProgress: jest.fn()
-  })
+};
-);
 
 const showDialogFn = jest.fn().mockReturnValue(true);
-const notificationServiceSpy = jest.fn().mockImplementation(
+const notificationServiceSpy: Partial<NotificationService> = {
-  (): Partial<NotificationService> => ({
   triggerError: showDialogFn,
   showToast: showDialogFn
-  })
+};
-);
 
 const validateFormInformationFn = jest.fn().mockImplementation((): Promise<any> => Promise.resolve(true));
-const formValidatorServiceSpy = jest.fn().mockImplementation(
+const formValidatorServiceSpy: Partial<FormsValidatorService> = {
-  (): Partial<FormsValidatorService> => ({
   isFieldValid: jest.fn().mockReturnValue(true),
   validateInputOverflow: jest.fn(),
   validateFormInformation: validateFormInformationFn,
   get inputOverflowObservable(): Observable<Map<string, boolean>> {
     return of(new Map<string, boolean>());
   }
-  })
+};
-);
 
 describe('WorkbasketAccessItemsComponent', () => {
   let fixture: ComponentFixture<WorkbasketAccessItemsComponent>;
@@ -99,9 +93,9 @@ describe('WorkbasketAccessItemsComponent', () => {
       ],
       declarations: [WorkbasketAccessItemsComponent, TypeAheadComponent, SpinnerStub],
       providers: [
-        { provide: RequestInProgressService, useClass: requestInProgressServiceSpy },
+        { provide: RequestInProgressService, useValue: requestInProgressServiceSpy },
-        { provide: FormsValidatorService, useClass: formValidatorServiceSpy },
+        { provide: FormsValidatorService, useValue: formValidatorServiceSpy },
-        { provide: NotificationService, useClass: notificationServiceSpy },
+        { provide: NotificationService, useValue: notificationServiceSpy },
         ClassificationCategoriesService,
         WorkbasketService,
         DomainService,

web/src/app/administration/components/workbasket-details/workbasket-details.component.scss

@@ -50,4 +50,3 @@
     color: $invalid;
   }
 }
-

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

@@ -50,13 +50,11 @@ class WorkbasketDistributionTargetsStub {
   @Input() active: string;
 }
 
-const domainServiceSpy = jest.fn().mockImplementation(
+const domainServiceSpy: Partial<DomainService> = {
-  (): Partial<DomainService> => ({
-    getSelectedDomainValue: jest.fn().mockReturnValue(of()),
   getSelectedDomain: jest.fn().mockReturnValue(of('A')),
+  getSelectedDomainValue: jest.fn().mockReturnValue(of()),
   getDomains: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 export const workbasketCopyState = {
   selectedWorkbasket: selectedWorkbasketMock,
@@ -102,7 +100,7 @@ describe('WorkbasketDetailsComponent', () => {
         WorkbasketInformationStub
       ],
       providers: [
-        { provide: DomainService, useClass: domainServiceSpy },
+        { provide: DomainService, useValue: domainServiceSpy },
         ImportExportService,
         WorkbasketService,
         RequestInProgressService,

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

@@ -35,31 +35,23 @@ class WorkbasketDistributionTargetsListStub {
   @Input() allSelected;
 }
 
-const domainServiceSpy = jest.fn().mockImplementation(
+const domainServiceSpy: Partial<DomainService> = {
-  (): Partial<DomainService> => ({
   getSelectedDomainValue: jest.fn().mockReturnValue(of()),
   getSelectedDomain: jest.fn().mockReturnValue(of('A')),
   getDomains: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
-const workbasketServiceSpy = jest.fn().mockImplementation(
+const workbasketServiceSpy: Partial<WorkbasketService> = {
-  (): Partial<WorkbasketService> => ({
   getWorkBasketsSummary: jest.fn().mockReturnValue(of()),
   getWorkBasketsDistributionTargets: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
-const notificationsServiceSpy = jest.fn().mockImplementation(
+const notificationsServiceSpy: Partial<NotificationService> = {
-  (): Partial<NotificationService> => ({
   showToast: jest.fn().mockReturnValue(true)
-  })
+};
-);
+const requestInProgressServiceSpy: Partial<RequestInProgressService> = {
-const requestInProgressServiceSpy = jest.fn().mockImplementation(
-  (): Partial<RequestInProgressService> => ({
   setRequestInProgress: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 describe('WorkbasketDistributionTargetsComponent', () => {
   let fixture: ComponentFixture<WorkbasketDistributionTargetsComponent>;
@@ -79,11 +71,11 @@ describe('WorkbasketDistributionTargetsComponent', () => {
       ],
       declarations: [WorkbasketDistributionTargetsComponent, WorkbasketDistributionTargetsListStub],
       providers: [
-        { provide: WorkbasketService, useClass: workbasketServiceSpy },
+        { provide: WorkbasketService, useValue: workbasketServiceSpy },
-        { provide: NotificationService, useClass: notificationsServiceSpy },
+        { provide: NotificationService, useValue: notificationsServiceSpy },
         { provide: ActivatedRoute, useValue: activatedRouteMock },
-        { provide: RequestInProgressService, useClass: requestInProgressServiceSpy },
+        { provide: RequestInProgressService, useValue: requestInProgressServiceSpy },
-        { provide: DomainService, useClass: domainServiceSpy }
+        { provide: DomainService, useValue: domainServiceSpy }
       ]
     }).compileComponents();
 

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

@@ -21,7 +21,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { SelectedRouteService } from '../../../shared/services/selected-route/selected-route';
 import { ClassificationCategoriesService } from '../../../shared/services/classification-categories/classification-categories.service';
 import { ACTION } from '../../../shared/models/action';
-import { TypeaheadModule } from 'ngx-bootstrap';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { TypeAheadComponent } from '../../../shared/components/type-ahead/type-ahead.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MarkWorkbasketForDeletion, UpdateWorkbasket } from '../../../shared/store/workbasket-store/workbasket.actions';
@@ -55,8 +55,7 @@ class IconTypeStub {
 }
 
 const triggerWorkbasketSavedFn = jest.fn().mockReturnValue(true);
-const workbasketServiceMock = jest.fn().mockImplementation(
+const workbasketServiceMock: Partial<WorkbasketService> = {
-  (): Partial<WorkbasketService> => ({
   triggerWorkBasketSaved: triggerWorkbasketSavedFn,
   updateWorkbasket: jest.fn().mockReturnValue(of(true)),
   markWorkbasketForDeletion: jest.fn().mockReturnValue(of(true)),
@@ -64,30 +63,25 @@ const workbasketServiceMock = jest.fn().mockImplementation(
   getWorkBasket: jest.fn().mockReturnValue(of({ ...selectedWorkbasketMock })),
   getWorkBasketAccessItems: jest.fn().mockReturnValue(of()),
   getWorkBasketsDistributionTargets: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 const isFieldValidFn = jest.fn().mockReturnValue(true);
 const validateFormInformationFn = jest.fn().mockImplementation((): Promise<any> => Promise.resolve(true));
-const formValidatorServiceSpy = jest.fn().mockImplementation(
+const formValidatorServiceMock: Partial<FormsValidatorService> = {
-  (): Partial<FormsValidatorService> => ({
   isFieldValid: isFieldValidFn,
   validateInputOverflow: jest.fn(),
   validateFormInformation: validateFormInformationFn,
   get inputOverflowObservable(): Observable<Map<string, boolean>> {
     return of(new Map<string, boolean>());
   }
-  })
+};
-);
 
 const showDialogFn = jest.fn().mockReturnValue(true);
-const notificationServiceSpy = jest.fn().mockImplementation(
+const notificationServiceMock: Partial<NotificationService> = {
-  (): Partial<NotificationService> => ({
   showDialog: showDialogFn,
   showToast: showDialogFn,
   triggerError: showDialogFn
-  })
+};
-);
 
 describe('WorkbasketInformationComponent', () => {
   let fixture: ComponentFixture<WorkbasketInformationComponent>;
@@ -125,9 +119,9 @@ describe('WorkbasketInformationComponent', () => {
         RemoveNoneTypePipe
       ],
       providers: [
-        { provide: WorkbasketService, useClass: workbasketServiceMock },
+        { provide: WorkbasketService, useValue: workbasketServiceMock },
-        { provide: FormsValidatorService, useClass: formValidatorServiceSpy },
+        { provide: FormsValidatorService, useValue: formValidatorServiceMock },
-        { provide: NotificationService, useClass: notificationServiceSpy },
+        { provide: NotificationService, useValue: notificationServiceMock },
         RequestInProgressService,
         DomainService,
         SelectedRouteService,

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

@@ -19,12 +19,10 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
 
 const getDomainFn = jest.fn().mockReturnValue(true);
-const domainServiceMock = jest.fn().mockImplementation(
+const domainServiceMock: Partial<DomainService> = {
-  (): Partial<DomainService> => ({
   getDomains: getDomainFn,
   getSelectedDomain: jest.fn().mockReturnValue(of('A'))
-  })
+};
-);
 
 @Component({ selector: 'taskana-administration-import-export', template: '' })
 class ImportExportStub {
@@ -44,11 +42,7 @@ class FilterStub {
   @Input() isExpanded = false;
 }
 
-const requestInProgressServiceSpy = jest.fn().mockImplementation(
+const requestInProgressServiceSpy = jest.fn().mockImplementation(() => jest.fn().mockReturnValue(of()));
-  (): Partial<RequestInProgressService> => ({
-    setRequestInProgress: jest.fn().mockReturnValue(of())
-  })
-);
 
 describe('WorkbasketListToolbarComponent', () => {
   let fixture: ComponentFixture<WorkbasketListToolbarComponent>;
@@ -70,8 +64,8 @@ describe('WorkbasketListToolbarComponent', () => {
       ],
       declarations: [WorkbasketListToolbarComponent, ImportExportStub, SortStub, FilterStub],
       providers: [
-        { provide: DomainService, useClass: domainServiceMock },
+        { provide: DomainService, useValue: domainServiceMock },
-        { provide: RequestInProgressService, useClass: requestInProgressServiceSpy },
+        { provide: RequestInProgressService, useValue: requestInProgressServiceSpy },
         WorkbasketService
       ]
     }).compileComponents();

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

@@ -28,45 +28,34 @@ const workbasketSavedTriggeredFn = jest.fn().mockReturnValue(of(1));
 const workbasketSummaryFn = jest.fn().mockReturnValue(of({}));
 const getWorkbasketFn = jest.fn().mockReturnValue(of(selectedWorkbasketMock));
 const getWorkbasketActionToolbarExpansionFn = jest.fn().mockReturnValue(of(false));
-const workbasketServiceMock = jest.fn().mockImplementation(
+const workbasketServiceMock: Partial<WorkbasketService> = {
-  (): Partial<WorkbasketService> => ({
   workbasketSavedTriggered: workbasketSavedTriggeredFn,
   getWorkBasketsSummary: workbasketSummaryFn,
   getWorkBasket: getWorkbasketFn,
   getWorkbasketActionToolbarExpansion: getWorkbasketActionToolbarExpansionFn,
   getWorkBasketAccessItems: jest.fn().mockReturnValue(of({})),
   getWorkBasketsDistributionTargets: jest.fn().mockReturnValue(of({}))
-  })
+};
-);
 
 const getOrientationFn = jest.fn().mockReturnValue(of('landscape'));
-const orientationServiceMock = jest.fn().mockImplementation(
+const orientationServiceMock: Partial<OrientationService> = {
-  (): Partial<OrientationService> => ({
   getOrientation: getOrientationFn,
   calculateNumberItemsList: jest.fn().mockReturnValue(1920)
-  })
+};
-);
 
-const getImportingFinishedFn = jest.fn().mockReturnValue(of(true));
+const importExportServiceMock: Partial<ImportExportService> = {
-const importExportServiceMock = jest.fn().mockImplementation(
+  getImportingFinished: jest.fn().mockReturnValue(of(true))
-  (): Partial<ImportExportService> => ({
+};
-    getImportingFinished: getImportingFinishedFn
-  })
-);
 
-const domainServiceSpy = jest.fn().mockImplementation(
+const domainServiceSpy: Partial<DomainService> = {
-  (): Partial<DomainService> => ({
   getSelectedDomainValue: jest.fn().mockReturnValue(of()),
   getSelectedDomain: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
-const requestInProgressServiceSpy = jest.fn().mockImplementation(
+const requestInProgressServiceSpy: Partial<RequestInProgressService> = {
-  (): Partial<RequestInProgressService> => ({
   setRequestInProgress: jest.fn().mockReturnValue(of()),
   getRequestInProgress: jest.fn().mockReturnValue(of(false))
-  })
+};
-);
 
 @Component({ selector: 'taskana-administration-workbasket-list-toolbar', template: '' })
 class WorkbasketListToolbarStub {
@@ -115,11 +104,11 @@ describe('WorkbasketListComponent', () => {
       ],
       declarations: [WorkbasketListComponent, WorkbasketListToolbarStub, IconTypeStub, PaginationStub, SvgIconStub],
       providers: [
-        { provide: WorkbasketService, useClass: workbasketServiceMock },
+        { provide: WorkbasketService, useValue: workbasketServiceMock },
-        { provide: OrientationService, useClass: orientationServiceMock },
+        { provide: OrientationService, useValue: orientationServiceMock },
-        { provide: ImportExportService, useClass: importExportServiceMock },
+        { provide: ImportExportService, useValue: importExportServiceMock },
-        { provide: DomainService, useClass: domainServiceSpy },
+        { provide: DomainService, useValue: domainServiceSpy },
-        { provide: RequestInProgressService, useClass: requestInProgressServiceSpy }
+        { provide: RequestInProgressService, useValue: requestInProgressServiceSpy }
       ]
     }).compileComponents();
 

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

@@ -21,20 +21,16 @@ import { MatIconModule } from '@angular/material/icon';
 import { take } from 'rxjs/operators';
 
 const showDialogFn = jest.fn().mockReturnValue(true);
-const NotificationServiceSpy = jest.fn().mockImplementation(
+const NotificationServiceSpy: Partial<NotificationService> = {
-  (): Partial<NotificationService> => ({
   triggerError: showDialogFn,
   showToast: showDialogFn
-  })
+};
-);
 
-const domainServiceSpy = jest.fn().mockImplementation(
+const domainServiceSpy: Partial<DomainService> = {
-  (): Partial<DomainService> => ({
   getSelectedDomainValue: jest.fn().mockReturnValue(of()),
   getSelectedDomain: jest.fn().mockReturnValue(of('A')),
   getDomains: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 const mockActivatedRoute = {
   firstChild: {
@@ -86,7 +82,7 @@ describe('WorkbasketOverviewComponent', () => {
       declarations: [WorkbasketOverviewComponent, WorkbasketListStub, WorkbasketDetailsStub, SvgIconStub],
       providers: [
         WorkbasketService,
-        { provide: NotificationService, useClass: NotificationServiceSpy },
+        { provide: NotificationService, useValue: NotificationServiceSpy },
         { provide: ActivatedRoute, useValue: mockActivatedRoute },
         { provide: DomainService, useValue: domainServiceSpy },
         DomainService,
@@ -152,7 +148,7 @@ describe('WorkbasketOverviewComponent Alternative Params ID', () => {
       declarations: [WorkbasketOverviewComponent, WorkbasketListStub, WorkbasketDetailsStub, SvgIconStub],
       providers: [
         WorkbasketService,
-        { provide: NotificationService, useClass: NotificationServiceSpy },
+        { provide: NotificationService, useValue: NotificationServiceSpy },
         { provide: ActivatedRoute, useValue: mockActivatedRouteAlternative },
         DomainService,
         RequestInProgressService,
@@ -195,7 +191,7 @@ describe('WorkbasketOverviewComponent No Params', () => {
       declarations: [WorkbasketOverviewComponent, WorkbasketListStub, WorkbasketDetailsStub, SvgIconStub],
       providers: [
         WorkbasketService,
-        { provide: NotificationService, useClass: NotificationServiceSpy },
+        { provide: NotificationService, useValue: NotificationServiceSpy },
         { provide: ActivatedRoute, useValue: mockActivatedRouteNoParams },
         DomainService,
         RequestInProgressService,

web/src/app/app.component.html

@@ -24,7 +24,7 @@
     <div (window:resize)="onResize()">
       <div class="taskana-main">
         <div class="taskana-main__progress-bar">
-          <mat-progress-bar [hidden]="!requestInProgress" mode="indeterminate"></mat-progress-bar>
+          <mat-progress-bar *ngIf="requestInProgress" mode="indeterminate"></mat-progress-bar>
         </div>
         <router-outlet></router-outlet>
         <taskana-shared-progress-spinner

web/src/app/app.component.ts

@@ -63,8 +63,10 @@ export class AppComponent implements OnInit, OnDestroy {
       .getRequestInProgress()
       .pipe(takeUntil(this.destroy$))
       .subscribe((value: boolean) => {
+        setTimeout(() => {
           this.requestInProgress = value;
         });
+      });
 
     this.selectedRouteService
       .getSelectedRoute()

web/src/app/app.module.ts

@@ -7,12 +7,22 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HttpClientXsrfModule, HttpXsrfTokenExtractor } from '@angular/common/http';
 import { NgxsModule } from '@ngxs/store';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
-import { AlertModule } from 'ngx-bootstrap';
+import { AlertModule } from 'ngx-bootstrap/alert';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TreeModule } from 'angular-tree-component';
+import { TreeModule } from '@circlon/angular-tree-component';
 import { SharedModule } from 'app/shared/shared.module';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 /**
  * Services
@@ -51,16 +61,8 @@ import { UserGuard } from './shared/guards/user.guard';
 import { ClassificationCategoriesService } from './shared/services/classification-categories/classification-categories.service';
 import { environment } from '../environments/environment';
 import { STATES } from './shared/store';
-import { MatSidenavModule } from '@angular/material/sidenav';
+
-import { MatIconModule } from '@angular/material/icon';
+const DECLARATIONS = [AppComponent, NavBarComponent, UserInformationComponent, NoAccessComponent, SidenavListComponent];
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatListModule } from '@angular/material/list';
-import { MatButtonModule } from '@angular/material/button';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatSelectModule } from '@angular/material/select';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 const MODULES = [
   TabsModule.forRoot(),
@@ -81,21 +83,15 @@ const MODULES = [
   MatButtonModule,
   MatIconModule,
   MatSelectModule,
+  MatToolbarModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
   NgxsModule.forRoot(STATES, { developmentMode: !environment.production }),
   NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production, maxAge: 25 }),
   HttpClientXsrfModule
 ];
 
-const DECLARATIONS = [AppComponent, NavBarComponent, UserInformationComponent, NoAccessComponent, SidenavListComponent];
+const PROVIDERS = [
-
-export function startupServiceFactory(startupService: StartupService): () => Promise<any> {
-  return (): Promise<any> => startupService.load();
-}
-
-@NgModule({
-  declarations: DECLARATIONS,
-  imports: [MODULES, MatSidenavModule, MatIconModule, MatToolbarModule, MatProgressBarModule, MatProgressSpinnerModule],
-  providers: [
   WindowRefService,
   DomainService,
   RequestInProgressService,
@@ -106,20 +102,29 @@ export function startupServiceFactory(startupService: StartupService): () => Pro
   MonitorGuard,
   UserGuard,
   StartupService,
-    {
-      provide: APP_INITIALIZER,
-      useFactory: startupServiceFactory,
-      deps: [StartupService],
-      multi: true
-    },
   MasterAndDetailService,
   TaskanaEngineService,
   FormsValidatorService,
   UploadService,
   NotificationService,
   ClassificationCategoriesService,
-    SidenavService
+  SidenavService,
-  ],
+  {
+    provide: APP_INITIALIZER,
+    useFactory: startupServiceFactory,
+    deps: [StartupService],
+    multi: true
+  }
+];
+
+@NgModule({
+  declarations: DECLARATIONS,
+  imports: MODULES,
+  providers: PROVIDERS,
   bootstrap: [AppComponent]
 })
 export class AppModule {}
+
+export function startupServiceFactory(startupService: StartupService): () => Promise<any> {
+  return (): Promise<any> => startupService.load();
+}

web/src/app/history/task-history-query/task-history-query.component.scss

@@ -10,4 +10,3 @@
     width: 100%;
   }
 }
-

web/src/app/monitor/components/task-report/task-report.component.html

@@ -3,7 +3,7 @@
       <h4>{{reportData.meta.name}} ({{reportData.meta.date | dateTimeZone}})</h4>
   </div>
   <div class="panel-body">
-    <div style="display: block" class =" col-xs-12 col-md-7 col-md-offset-2">
+    <div style="display: block">
       <canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType"></canvas>
     </div>
     <taskana-monitor-report-table [reportData]="reportData"></taskana-monitor-report-table>

web/src/app/monitor/monitor.module.ts

@@ -1,28 +1,26 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
-import { AlertModule } from 'ngx-bootstrap';
-import { ChartsModule } from 'ng2-charts';
-import { TabsModule } from 'ngx-bootstrap/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
 import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { AlertModule } from 'ngx-bootstrap/alert';
+import { TabsModule } from 'ngx-bootstrap/tabs';
+import { ChartsModule } from 'ng2-charts';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import { MapToIterable } from 'app/shared/pipes/map-to-iterable.pipe';
-import { MonitorRoutingModule } from './monitor-routing.module';
 import { SharedModule } from '../shared/shared.module';
+import { MonitorRoutingModule } from './monitor-routing.module';
 
 import { ReportTableComponent } from './components/report-table/report-table.component';
 import { MonitorComponent } from './components/monitor/monitor.component';
 import { TaskReportComponent } from './components/task-report/task-report.component';
 import { ClassificationReportComponent } from './components/classification-report/classification-report.component';
 import { TimestampReportComponent } from './components/timestamp-report/timestamp-report.component';
-
-import { MonitorService } from './services/monitor.service';
-
 import { WorkbasketReportComponent } from './components/workbasket-report/workbasket-report.component';
 import { WorkbasketReportPlannedDateComponent } from './components/workbasket-report-planned-date/workbasket-report-planned-date.component';
 import { WorkbasketReportDueDateComponent } from './components/workbasket-report-due-date/workbasket-report-due-date.component';
-import { MatButtonModule } from '@angular/material/button';
+import { MonitorService } from './services/monitor.service';
 
 const MODULES = [
   CommonModule,

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

@@ -9,17 +9,15 @@ import { of } from 'rxjs/internal/observable/of';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
-const SidenavServiceSpy = jest.fn().mockImplementation(
+jest.mock('angular-svg-icon');
-  (): Partial<SidenavService> => ({
-    toggleSidenav: jest.fn().mockReturnValue(of())
-  })
-);
 
-const SelectedRouteServiceSpy = jest.fn().mockImplementation(
+const SidenavServiceSpy: Partial<SidenavService> = {
-  (): Partial<SelectedRouteService> => ({
+  toggleSidenav: jest.fn().mockReturnValue(of())
+};
+
+const SelectedRouteServiceSpy: Partial<SelectedRouteService> = {
   getSelectedRoute: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 @Component({ selector: 'svg-icon', template: '' })
 class SvgIconStub {}
@@ -28,15 +26,15 @@ describe('NavBarComponent', () => {
   let component: NavBarComponent;
   let fixture: ComponentFixture<NavBarComponent>;
   let debugElement: DebugElement;
-  var route = '';
+  let route = '';
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [NavBarComponent, SvgIconStub],
       imports: [MatIconModule, HttpClientTestingModule, MatToolbarModule],
       providers: [
-        { provide: SidenavService, useClass: SidenavServiceSpy },
+        { provide: SidenavService, useValue: SidenavServiceSpy },
-        { provide: SelectedRouteService, useClass: SelectedRouteServiceSpy }
+        { provide: SelectedRouteService, useValue: SelectedRouteServiceSpy }
       ]
     }).compileComponents();
   }));

web/src/app/shared/components/no-access/no-access.component.html

@@ -1,4 +1,4 @@
-<div *ngIf ="showNoAccess" class="col-xs-12 container-no-access">
+<div *ngIf ="showNoAccess" class="container-no-access">
     <div class="center-block no-access">
         <h3 class="grey">You do not have access to taskana application</h3>
         <svg-icon class="img-responsive no-access-icon" src="./assets/icons/noaccess.svg"></svg-icon>

web/src/app/shared/components/popup/dialog-pop-up.component.scss

@@ -0,0 +1,8 @@
+.alert {
+  color: #a94442;
+  background-color: #f2dede;
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid #ebccd1;
+  border-radius: 4px;
+}

web/src/app/shared/components/progress-spinner/progress-spinner.component.scss

@@ -27,4 +27,3 @@
 }
 
 //TODO: Change color of spinner
-

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

@@ -17,18 +17,14 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
 
-const SidenavServiceSpy = jest.fn().mockImplementation(
+const SidenavServiceSpy: Partial<SidenavService> = {
-  (): Partial<SidenavService> => ({
   toggleSidenav: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
-const TaskanaEngingeServiceSpy = jest.fn().mockImplementation(
+const TaskanaEngineServiceSpy: Partial<TaskanaEngineServiceMock> = {
-  (): Partial<TaskanaEngineServiceMock> => ({
   hasRole: jest.fn().mockReturnValue(of()),
   isHistoryProviderEnabled: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 describe('SidenavListComponent', () => {
   let component: SidenavListComponent;
@@ -51,8 +47,8 @@ describe('SidenavListComponent', () => {
         HttpClientTestingModule
       ],
       providers: [
-        { provide: SidenavService, useClass: SidenavServiceSpy },
+        { provide: SidenavService, useValue: SidenavServiceSpy },
-        { provide: TaskanaEngineService, useClass: TaskanaEngingeServiceSpy }
+        { provide: TaskanaEngineService, useValue: TaskanaEngineServiceSpy }
       ]
     }).compileComponents();
   }));

web/src/app/shared/components/task-filter/task-filter.component.scss

@@ -30,5 +30,4 @@
     flex-grow: 1;
     min-width: 140px;
   }
-
 }

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

@@ -15,12 +15,10 @@ import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-const AccessIdsServiceSpy = jest.fn().mockImplementation(
+const AccessIdsServiceSpy: Partial<AccessIdsService> = {
-  (): Partial<AccessIdsService> => ({
   getAccessItems: jest.fn().mockReturnValue(of()),
   searchForAccessId: jest.fn().mockReturnValue(of())
-  })
+};
-);
 
 describe('TypeAheadComponent', () => {
   let component: TypeAheadComponent;
@@ -43,7 +41,7 @@ describe('TypeAheadComponent', () => {
         FormsModule,
         BrowserAnimationsModule
       ],
-      providers: [{ provide: AccessIdsService, useClass: AccessIdsServiceSpy }]
+      providers: [{ provide: AccessIdsService, useValue: AccessIdsServiceSpy }]
     }).compileComponents();
   }));
 

web/src/app/shared/components/user-information/user-information.component.spec.ts

@@ -5,18 +5,15 @@ import { BrowserModule, By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 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 { HttpClientTestingModule } from '@angular/common/http/testing';
 
-const TaskanaEngingeServiceSpy = jest.fn().mockImplementation(
+jest.mock('angular-svg-icon');
-  (): Partial<TaskanaEngineServiceMock> => ({
-    hasRole: jest.fn().mockReturnValue(of()),
-    isHistoryProviderEnabled: jest.fn().mockReturnValue(of())
-  })
-);
 
 @Component({ selector: 'svg-icon', template: '' })
-class SvgIconStub {}
+class SvgIconStub {
+  @Input() src;
+  @Input() matTooltip;
+}
 
 describe('UserInformationComponent', () => {
   let component: UserInformationComponent;
@@ -27,7 +24,7 @@ describe('UserInformationComponent', () => {
     TestBed.configureTestingModule({
       declarations: [UserInformationComponent, SvgIconStub],
       imports: [BrowserModule, HttpClientTestingModule, BrowserAnimationsModule],
-      providers: [{ provide: TaskanaEngineService, useClass: TaskanaEngingeServiceSpy }]
+      providers: [{ provide: TaskanaEngineService, useClass: TaskanaEngineServiceMock }]
     }).compileComponents();
   }));
 

web/src/app/shared/components/workbasket-filter/workbasket-filter.component.scss

@@ -1,7 +1,6 @@
 @import 'src/theme/_colors.scss';
 
 .filter {
-  
   &__collapsed-filter {
     display: flex;
     height: 36px;
@@ -46,4 +45,3 @@
     justify-content: space-between;
   }
 }
-

web/src/app/shared/services/classification-categories/classification-categories.service.spec.ts

@@ -13,8 +13,8 @@ describe('ClassificationCategoriesService', () => {
       providers: [ClassificationCategoriesService]
     });
 
-    categoryService = TestBed.get(ClassificationCategoriesService);
+    categoryService = TestBed.inject(ClassificationCategoriesService);
-    httpMock = TestBed.get(HttpTestingController);
+    httpMock = TestBed.inject(HttpTestingController);
   });
 
   it('should insert missing icon into customisation', async(() => {

web/src/app/shared/services/classifications/classifications.service.ts

@@ -12,7 +12,9 @@ import { asUrlQueryString } from '../../util/query-parameters-v2';
 import { ClassificationQueryFilterParameter } from '../../models/classification-query-filter-parameter';
 import { QueryPagingParameter } from '../../models/query-paging-parameter';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class ClassificationsService {
   constructor(
     private httpClient: HttpClient,

web/src/app/shared/services/orientation/orientation.service.ts

@@ -5,7 +5,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 @Injectable()
 export class OrientationService {
   private lock = false;
-  private currentOrientation;
+  private currentOrientation = Orientation.landscape;
   public orientation = new BehaviorSubject<Orientation>(this.currentOrientation);
 
   private static detectOrientation(): Orientation {

web/src/app/shared/services/startup/startup.service.spec.ts

@@ -28,9 +28,9 @@ describe('StartupService', () => {
 
   beforeEach(() => {
     const injector = getTestBed();
-    httpMock = injector.get(HttpTestingController);
+    httpMock = injector.inject(HttpTestingController);
     // UserService provided to the TestBed
-    service = TestBed.get(StartupService);
+    service = injector.inject(StartupService);
   });
 
   it('should be created', inject([StartupService], () => {

web/src/app/shared/services/workbasket/workbasket.service.ts

@@ -16,7 +16,9 @@ import { WorkbasketQueryFilterParameter } from '../../models/workbasket-query-fi
 import { QueryPagingParameter } from '../../models/query-paging-parameter';
 import { asUrlQueryString } from '../../util/query-parameters-v2';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class WorkbasketService {
   public workBasketSelected = new Subject<string>();
   public workBasketSaved = new Subject<number>();

web/src/app/shared/shared.module.ts

@@ -1,16 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import { RouterModule } from '@angular/router';
-import { TreeModule } from 'angular-tree-component';
+import { TreeModule } from '@circlon/angular-tree-component';
-import { AlertModule, TypeaheadModule } from 'ngx-bootstrap';
+import { AlertModule } from 'ngx-bootstrap/alert';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
 import { AccordionModule } from 'ngx-bootstrap/accordion';
-import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service';
-import { ClassificationsService } from 'app/shared/services/classifications/classifications.service';
 
 /**
  * Components
@@ -44,7 +43,6 @@ import { DateTimeZonePipe } from './pipes/date-time-zone.pipe';
  * Services
  */
 import { HttpClientInterceptor } from './services/http-client-interceptor/http-client-interceptor.service';
-import { AccessIdsService } from './services/access-ids/access-ids.service';
 import { ToastComponent } from './components/toast/toast.component';
 import { DialogPopUpComponent } from './components/popup/dialog-pop-up.component';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -72,7 +70,7 @@ const MODULES = [
   MatDialogModule,
   MatButtonModule,
   RouterModule,
-  TreeModule.forRoot(),
+  TreeModule,
   MatAutocompleteModule
 ];
 
@@ -120,11 +118,8 @@ const DECLARATIONS = [
       provide: HTTP_INTERCEPTORS,
       useClass: HttpClientInterceptor,
       multi: true
-    },
+    }
-    AccessIdsService,
-    ClassificationsService,
-    WorkbasketService
   ],
-  entryComponents: [ToastComponent, DialogPopUpComponent]
+  entryComponents: [DialogPopUpComponent, ToastComponent]
 })
 export class SharedModule {}

web/src/app/shared/store/access-items-management-store/access-items-management.state.ts

@@ -13,11 +13,13 @@ import { NOTIFICATION_TYPES } from '../../models/notifications';
 import { NotificationService } from '../../services/notifications/notification.service';
 import { WorkbasketAccessItemsRepresentation } from '../../models/workbasket-access-items-representation';
 import { RequestInProgressService } from '../../services/request-in-progress/request-in-progress.service';
+import { Injectable } from '@angular/core';
 
 class InitializeStore {
   static readonly type = '[Access Items Management] Initializing state';
 }
 
+@Injectable()
 @State<AccessItemsManagementStateModel>({ name: 'accessItemsManagement' })
 export class AccessItemsManagementState implements NgxsAfterBootstrap {
   constructor(

web/src/app/shared/store/classification-store/classification.state.ts

@@ -25,11 +25,13 @@ import { Classification } from '../../models/classification';
 import { ClassificationSummary } from '../../models/classification-summary';
 import { ClassificationQueryFilterParameter } from '../../models/classification-query-filter-parameter';
 import { ClassificationQuerySortParameter, Direction, Sorting } from '../../models/sorting';
+import { Injectable } from '@angular/core';
 
 class InitializeStore {
   static readonly type = '[ClassificationState] Initializing state';
 }
 
+@Injectable()
 @State<ClassificationStateModel>({ name: 'classification' })
 export class ClassificationState implements NgxsAfterBootstrap {
   constructor(

web/src/app/shared/store/engine-configuration-store/engine-configuration.state.ts

@@ -3,11 +3,12 @@ import { State, NgxsOnInit, StateContext, Action } from '@ngxs/store';
 import { ClassificationCategoriesService } from 'app/shared/services/classification-categories/classification-categories.service';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
 
 class InitializeStore {
   static readonly type = '[EngineConfigurationState] Initializing state';
 }
-
+@Injectable()
 @State<EngineConfigurationStateModel>({ name: 'engineConfiguration' })
 export class EngineConfigurationState implements NgxsOnInit {
   constructor(private categoryService: ClassificationCategoriesService) {}

web/src/app/shared/store/workbasket-store/workbasket.state.ts

@@ -38,11 +38,13 @@ import { WorkbasketType } from '../../models/workbasket-type';
 import { TaskanaDate } from '../../util/taskana.date';
 import { DomainService } from '../../services/domain/domain.service';
 import { ClearWorkbasketFilter } from '../filter-store/filter.actions';
+import { Injectable } from '@angular/core';
 
 class InitializeStore {
   static readonly type = '[Workbasket] Initializing state';
 }
 
+@Injectable()
 @State<WorkbasketStateModel>({ name: 'workbasket' })
 export class WorkbasketState implements NgxsAfterBootstrap {
   constructor(

web/src/app/shared/util/blob-generator.ts

@@ -1,4 +1,4 @@
-import { saveAs } from 'file-saver/FileSaver';
+import { saveAs } from 'file-saver';
 
 export class BlobGenerator {
   public static saveFile(object: Object, fileName: string) {

web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.scss

@@ -1,6 +1,7 @@
 @import 'src/theme/_colors.scss';
 
 .task-attribute-value {
+  line-height: 1.5;
 
   &__button--primary {
     background-color: $aquamarine;
@@ -58,9 +59,12 @@
   padding: 0;
 }
 
-::ng-deep .task-attribute-value__column--inputs > .mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  {
+::ng-deep
+  .task-attribute-value__column--inputs
+  > .mat-form-field-appearance-outline
+  > div.mat-form-field-wrapper
+  > div.mat-form-field-flex
+  > div.mat-form-field-infix {
   border-top-width: 0;
   height: 40px;
 }
-
-

web/src/app/workplace/components/task-custom-fields/task-custom-fields.component.scss

@@ -13,6 +13,7 @@
 
   &__input {
     width: 100%;
+    margin-top: 0.7em;
   }
 
   &__spacer {

web/src/app/workplace/components/task-details/task-details.component.scss

@@ -58,6 +58,7 @@
 
   &__task-name {
     font-size: 1.5rem;
+    font-weight: 500;
     padding: 0 0.5rem 0.5rem 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -65,6 +66,7 @@
     grid-area: 2/1;
     grid-column-start: 1;
     grid-column-end: 2;
+    margin: 0;
   }
 
   &__tab-group-wrapper {

web/src/app/workplace/components/task-information/task-information.component.scss

@@ -21,3 +21,7 @@
     justify-content: space-between;
   }
 }
+
+::ng-deep .task-information .mat-form-field {
+  margin-top: 0.7rem;
+}

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.scss

@@ -39,7 +39,13 @@
   }
 }
 
-::ng-deep .task-list-toolbar > .mat-tab-group > .mat-tab-header > .mat-tab-label-container > .mat-tab-list > .mat-tab-labels {
+::ng-deep
+  .task-list-toolbar
+  > .mat-tab-group
+  > .mat-tab-header
+  > .mat-tab-label-container
+  > .mat-tab-list
+  > .mat-tab-labels {
   background-color: $light-grey;
 }
 

web/src/app/workplace/components/task-list/task-list.component.scss

@@ -1,7 +1,6 @@
 @import 'src/theme/_colors.scss';
 
 .task-list {
-
   &__task {
     display: flex;
   }
@@ -18,12 +17,11 @@
   }
 }
 
-
-
 p {
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  line-height: 1.5;
 }
 
 .mat-list-item {
@@ -48,4 +46,3 @@ p {
   right: 16px;
   background-color: $green;
 }
-

web/src/app/workplace/components/task-processing/task-processing.component.scss

@@ -51,4 +51,3 @@ iframe {
   border: none;
   overflow-x: scroll;
 }
-

web/src/app/workplace/components/task-status-details/task-status-details.component.scss

@@ -16,6 +16,9 @@
   }
 }
 
+.task-status-details .mat-form-field {
+  margin-top: 0.7rem;
+}
 
 .mat-input-element:disabled {
   color: gray;

web/src/app/workplace/workplace.module.ts

@@ -3,7 +3,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AngularSvgIconModule } from 'angular-svg-icon';
-import { AlertModule, TypeaheadModule } from 'ngx-bootstrap';
+import { AlertModule } from 'ngx-bootstrap/alert';
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { SharedModule } from 'app/shared/shared.module';

web/src/theme/_main.scss

@@ -1,5 +1,4 @@
-@import '../../node_modules/angular-tree-component/dist/angular-tree-component.css';
+@import '../../node_modules/@circlon/angular-tree-component/css/angular-tree-component.css';
-@import 'bootstrap-3-backward-compatibility';
 
 @import 'variables';
 @import 'material_styles';
@@ -14,3 +13,5 @@
 @import 'mixin/colors';
 @import 'progress-bar';
 @import 'shameful';
+
+@import 'bootstrap-replacement';

web/src/theme/_site.scss

@@ -1,3 +1,7 @@
+* {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
+
 .placeholder img {
   display: inline-block;
   border-radius: 50%;

web/src/theme/bootstrap-3-backward-compatibility.scss

@@ -1,11 +0,0 @@
-.dropdown-menu.show,
-.modal-backdrop.show,
-.fade.show {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-}
-
-.modal.fade .modal-dialog {
-  transform: translate(0, 0);
-}

web/src/theme/bootstrap-replacement.scss

@@ -0,0 +1,43 @@
+/* * * * * * * * IMPORTANT * * * * * *
+
+          PLEASE DO NOT USE
+This CSS was created to easily get rid of bootstrap while keeping most of the layout intact
+These classes should be replaced and migrated to either component level or global styling
+
+* * * * * * * * * * * * * * * * * * */
+
+h3 {
+  font-size: 1.75rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+}
+
+h4 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  margin-top: 0;
+  line-height: 1.2;
+}
+
+h6 {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.mr-1,
+.mx-1 {
+  margin-right: 0.25rem !important;
+}
+
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}

web/tsconfig.json

@@ -2,7 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "downlevelIteration": true,
-    "module": "esnext",
+    "module": "es2020",
     "outDir": "./dist/out-tsc",
     "baseUrl": "src",
     "sourceMap": true,

web/webpack.config.js

@@ -5,12 +5,7 @@ module.exports = {
   plugins: [
     new CompressionPlugin({
       test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
-      filename(info) {
+      filename: '[name][ext].gzip'
-        let opFile = info.path.split('.'),
-          opFileType = opFile.pop(),
-          opFileName = opFile.join('.');
-        return `${opFileName}.${opFileType}.gzip`;
-      }
     })
   ]
 };