update all dependencies and devDependencies to work with angular 19

fix as much deprecations as possible make all components, pipes and directives not standalone rename scss files to use underscore and make new scss work fix bootstrap theme not working anymore and fix bug caused by this and simplify path used to access _variables.scss remove the this from all variables/functions inside templates because its deprecated fix another scss deprecation because you shouldnt have declerations after nested rules override glob so newest glob version gets used instead of deprecated version make sidepanel not fullscreen make all filepaths used in @use consistent override jsdom version to remove all deprecations make filepaths in scss @use all the same change import to use remove not needed variable declerations add comment to why intellij shows an error use interpolation in calc methods that use vars and namespaces fix faults made while rebasing remove override and update setup-jest.ts update package lock remove unused jest dependency update npm version to 11.0.0 regen package-lock
puzzle · Dec 24, 2024 · 7924cda · 7924cda
1 parent d984f1f
commit 7924cda
Show file tree

Hide file tree

Showing 91 changed files with 2,847 additions and 3,609 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,30 +27,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.8",
-    "@angular/cdk": "^18.2.9",
-    "@angular/common": "^18.2.8",
-    "@angular/compiler": "^18.2.8",
-    "@angular/core": "^18.2.8",
-    "@angular/forms": "^18.2.8",
-    "@angular/material": "^18.2.9",
-    "@angular/material-moment-adapter": "^18.2.9",
-    "@angular/platform-browser": "^18.2.8",
-    "@angular/platform-browser-dynamic": "^18.2.8",
-    "@angular/router": "^18.2.8",
-    "@ngx-translate/core": "^16.0.0",
+    "@angular/animations": "^19.0.3",
+    "@angular/cdk": "^19.0.2",
+    "@angular/common": "^19.0.3",
+    "@angular/compiler": "^19.0.3",
+    "@angular/core": "^19.0.3",
+    "@angular/forms": "^19.0.3",
+    "@angular/material": "^19.0.2",
+    "@angular/material-moment-adapter": "^19.0.2",
+    "@angular/platform-browser": "^19.0.3",
+    "@angular/platform-browser-dynamic": "^19.0.3",
+    "@angular/router": "^19.0.3",
+    "@ngx-translate/core": "^16.0.3",
     "@ngx-translate/http-loader": "^16.0.0",
-    "angular-oauth2-oidc": "^17.0.2",
+    "angular-oauth2-oidc": "^19.0.0",
     "bootstrap": "^5.3.3",
     "moment": "^2.30.1",
     "ngx-toastr": "^19.0.0",
     "rxjs": "^7.8.1",
-    "tslib": "^2.8.0"
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.9",
-    "@angular/cli": "~18.2.9",
-    "@angular/compiler-cli": "^18.2.8",
+    "@angular-devkit/build-angular": "^19.0.4",
+    "@angular/cli": "~19.0.4",
+    "@angular/compiler-cli": "^19.0.3",
     "@cypress/schematic": "^2.5.2",
     "@cypress/skip-test": "^2.6.1",
     "@stylistic/eslint-plugin": "^2.11.0",
@@ -59,21 +59,20 @@
     "@html-eslint/eslint-plugin": "^0.27.0",
     "@html-eslint/parser": "^0.27.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/uuid": "^10.0.0",
     "angular-eslint": "19.0.2",
     "browserslist": "^4.24.2",
-    "cypress": "^13.15.0",
+    "cypress": "^13.16.1",
     "cypress-real-events": "^1.13.0",
+    "jest-preset-angular": "^14.4.2",
     "eslint": "^9.16.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "jest": "^29.7.0",
-    "jest-preset-angular": "^14.2.4",
     "ngx-translate-testing": "^7.0.0",
     "prettier": "^3.4.2",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.3",
     "typescript-eslint": "8.18.0",
-    "uuid": "^11.0.0"
+    "uuid": "^11.0.3"
   },
   "jest": {
     "preset": "jest-preset-angular",

diff --git a/frontend/setup-jest.ts b/frontend/setup-jest.ts
@@ -1 +1,3 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -6,7 +6,8 @@ import { DomSanitizer } from '@angular/platform-browser';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AppComponent {
   readonly PATH_PREFIX = '../assets/icons/';

diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -28,7 +28,7 @@
         (keydown.arrowDown)="handleKeyDown($event, i)"
         (keydown.arrowUp)="handleKeyDown($event, i)"
         (focusin)="activeItem = i"
-        (input)="updateActionTexts(this.control.value!)"
+        (input)="updateActionTexts(control.value!)"
         class="action-input"
         [value]="action.action"
         [attr.data-testId]="'actionInput'"

diff --git a/frontend/src/app/components/action-plan/action-plan.component.ts b/frontend/src/app/components/action-plan/action-plan.component.ts
@@ -9,7 +9,8 @@ import { DialogService } from '../../services/dialog.service';
 @Component({
   selector: 'app-action-plan',
   templateUrl: './action-plan.component.html',
-  styleUrls: ['./action-plan.component.scss']
+  styleUrls: ['./action-plan.component.scss'],
+  standalone: false,
 })
 export class ActionPlanComponent {
   @Input() control: BehaviorSubject<Action[] | null> = new BehaviorSubject<Action[] | null>([]);

diff --git a/frontend/src/app/components/application-banner/application-banner.component.scss b/frontend/src/app/components/application-banner/application-banner.component.scss
@@ -1,4 +1,4 @@
-@import '../style/variables';
+@use "variables";
 
 .header-content {
   padding-left: 1.5rem;

diff --git a/frontend/src/app/components/application-banner/application-banner.component.ts b/frontend/src/app/components/application-banner/application-banner.component.ts
@@ -15,7 +15,8 @@ import { DEFAULT_HEADER_HEIGHT_PX, PUZZLE_TOP_BAR_HEIGHT } from '../../shared/co
   selector: 'app-application-banner',
   templateUrl: './application-banner.component.html',
   styleUrls: ['./application-banner.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ApplicationBannerComponent implements AfterViewInit, OnDestroy {
   @ViewChild('okrBanner') okrBanner!: ElementRef;

diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.html b/frontend/src/app/components/application-top-bar/application-top-bar.component.html
@@ -9,7 +9,7 @@
         [attr.data-testId]="'logo'"
         alt="okr-logo"
         height="32"
-        src="{{ this.logoSrc$ | async }}"
+        src="{{ logoSrc$ | async }}"
         priority
       />
     </a>
@@ -29,7 +29,7 @@
       </button>
 
       <button
-        *ngIf="this.helpSiteUrl | async as helpSiteUrl"
+        *ngIf="helpSiteUrl | async as helpSiteUrl"
         id="hilfeButton"
         class="topBarEntry btn"
         [attr.data-testId]="'help-button'"

diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.scss b/frontend/src/app/components/application-top-bar/application-top-bar.component.scss
@@ -1,7 +1,7 @@
-@import '../style/variables';
+@use "variables";
 
 #topBarHeight {
-  height: $top-bar-height;
+  height: variables.$top-bar-height;
 }
 
 span.d-none.d-md-flex {

diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.ts b/frontend/src/app/components/application-top-bar/application-top-bar.component.ts
@@ -10,7 +10,8 @@ import { getFullNameFromUser } from '../../shared/types/model/User';
   selector: 'app-application-top-bar',
   templateUrl: './application-top-bar.component.html',
   styleUrls: ['./application-top-bar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ApplicationTopBarComponent implements OnInit, OnDestroy {
   userFullName = '';

diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.ts b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.ts
@@ -15,7 +15,7 @@ import { CheckInOrdinalMin } from '../../shared/types/model/CheckInOrdinalMin';
 @Component({
   selector: 'app-check-in-history-dialog',
   templateUrl: './check-in-history-dialog.component.html',
-  styleUrls: ['./check-in-history-dialog.component.scss']
+  standalone: false,
 })
 export class CheckInHistoryDialogComponent implements OnInit {
   keyResult!: KeyResult;

diff --git a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.ts b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.ts
@@ -10,7 +10,8 @@ import { CheckInMetricMin } from '../../../shared/types/model/CheckInMetricMin';
   selector: 'app-check-in-form-metric',
   templateUrl: './check-in-form-metric.component.html',
   styleUrls: ['./check-in-form-metric.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class CheckInFormMetricComponent implements OnInit {
   @Input()

diff --git a/frontend/src/app/components/checkin/check-in-form-metric/metric-check-in-directive.ts b/frontend/src/app/components/checkin/check-in-form-metric/metric-check-in-directive.ts
@@ -3,11 +3,14 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Directive({
   selector: '[metricCheckIn]',
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => MetricCheckInDirective),
-    multi: true
-  }]
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MetricCheckInDirective),
+      multi: true,
+    },
+  ],
+  standalone: false,
 })
 export class MetricCheckInDirective implements ControlValueAccessor {
   private onChange: (value: number | null) => void = () => {};

diff --git a/...end/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss b/...end/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
@@ -1,13 +1,13 @@
-@import '../style/variables';
+@use "variables";
 
 .submit {
-  background-color: $pz-dark-blue;
+  background-color: variables.$pz-dark-blue;
   border-radius: 8px;
 }
 
 .cancel {
   background-color: white;
-  color: $pz-dark-blue;
+  color: variables.$pz-dark-blue;
 }
 
 span {
@@ -17,6 +17,6 @@ mat-label {
   color: black;
 }
 .radio-text-container {
-  background: $display-element;
+  background: variables.$display-element;
   height: auto;
 }
diff --git a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts
@@ -7,7 +7,8 @@ import { CheckInMin } from '../../../shared/types/model/CheckInMin';
 @Component({
   selector: 'app-check-in-form-ordinal',
   templateUrl: './check-in-form-ordinal.component.html',
-  styleUrls: ['./check-in-form-ordinal.component.scss']
+  styleUrls: ['./check-in-form-ordinal.component.scss'],
+  standalone: false,
 })
 export class CheckInFormOrdinalComponent {
   @Input()

diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -90,7 +90,7 @@
       <button
         (click)="saveCheckIn()"
         [attr.data-testId]="'submit-check-in'"
-        [disabled]="!this.dialogForm.valid"
+        [disabled]="!dialogForm.valid"
         color="primary"
         mat-flat-button
         type="submit"

diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts
@@ -18,7 +18,8 @@ import { CheckInOrdinalMin } from '../../../shared/types/model/CheckInOrdinalMin
   selector: 'app-check-in-form',
   templateUrl: './check-in-form.component.html',
   styleUrls: ['./check-in-form.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class CheckInFormComponent implements OnInit {
   keyResult: KeyResult;

diff --git a/frontend/src/app/components/confidence/confidence.component.ts b/frontend/src/app/components/confidence/confidence.component.ts
@@ -5,7 +5,8 @@ import { CheckInMin } from '../../shared/types/model/CheckInMin';
   selector: 'app-confidence',
   templateUrl: './confidence.component.html',
   styleUrls: ['./confidence.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ConfidenceComponent implements OnChanges {
   min = 0;

diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.ts b/frontend/src/app/components/key-result-form/key-result-form.component.ts
@@ -15,7 +15,8 @@ import { TranslateService } from '@ngx-translate/core';
   selector: 'app-key-result-form',
   templateUrl: './key-result-form.component.html',
   styleUrls: ['./key-result-form.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class KeyResultFormComponent implements OnInit, OnDestroy {
   users$!: Observable<User[]>;

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
@@ -1,4 +1,4 @@
-@import '../style/variables';
+@use "variables";
 
 :host {
   flex: 1;
@@ -9,7 +9,7 @@ h3 {
 }
 
 .keyResult-detail-attribute-show {
-  background-color: $display-element;
+  background-color: variables.$display-element;
   height: auto;
 }
 

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.ts b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.ts
@@ -22,7 +22,8 @@ import { KeyResultOrdinalMin } from '../../shared/types/model/KeyResultOrdinalMi
   selector: 'app-keyresult-detail',
   templateUrl: './keyresult-detail.component.html',
   styleUrls: ['./keyresult-detail.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class KeyresultDetailComponent implements OnInit, OnDestroy {
   @Input() keyResultId!: number;

diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
@@ -31,7 +31,7 @@
         [attr.data-testId]="'cancel'"
       >Abbrechen</button>
     </div>
-    <div class="col-auto" *ngIf="this.data.keyResult">
+    <div class="col-auto" *ngIf="data.keyResult">
       <button
         color="primary"
         mat-button

diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.ts b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.ts
@@ -14,7 +14,8 @@ import { DialogService } from '../../services/dialog.service';
 @Component({
   selector: 'app-keyresult-dialog',
   templateUrl: './keyresult-dialog.component.html',
-  styleUrls: ['./keyresult-dialog.component.scss']
+  styleUrls: ['./keyresult-dialog.component.scss'],
+  standalone: false,
 })
 export class KeyresultDialogComponent {
   keyResultForm = new FormGroup({

diff --git a/frontend/src/app/components/keyresult-type/keyresult-type.component.scss b/frontend/src/app/components/keyresult-type/keyresult-type.component.scss
@@ -1,4 +1,4 @@
-@import 'custom_bootstrap';
+@use "custom_bootstrap";
 
 .active {
   border-left: #909090 1px solid;
@@ -30,6 +30,7 @@
 
 .tab-focus {
   outline: none;
+
   &:focus-visible {
     border-radius: 5px;
     border: 2px solid #1a4e83;

diff --git a/frontend/src/app/components/keyresult-type/keyresult-type.component.ts b/frontend/src/app/components/keyresult-type/keyresult-type.component.ts
@@ -10,7 +10,8 @@ import { TranslateService } from '@ngx-translate/core';
 @Component({
   selector: 'app-keyresult-type',
   templateUrl: './keyresult-type.component.html',
-  styleUrls: ['./keyresult-type.component.scss']
+  styleUrls: ['./keyresult-type.component.scss'],
+  standalone: false,
 })
 export class KeyresultTypeComponent implements OnInit {
   @Input() keyResultForm!: FormGroup;

diff --git a/frontend/src/app/components/keyresult/keyresult.component.scss b/frontend/src/app/components/keyresult/keyresult.component.scss
@@ -1,7 +1,7 @@
-@import '../style/variables';
+@use "variables";
 .key-result {
-  background-color: $soft-grey;
-  border: 1px solid $dark-grey-border;
+  background-color: variables.$soft-grey;
+  border: 1px solid variables.$dark-grey-border;
   word-wrap: break-word;
 
   &:hover {

diff --git a/frontend/src/app/components/keyresult/keyresult.component.ts b/frontend/src/app/components/keyresult/keyresult.component.ts
@@ -9,7 +9,8 @@ import { KeyResultOrdinalMin } from '../../shared/types/model/KeyResultOrdinalMi
   selector: 'app-keyresult',
   templateUrl: './keyresult.component.html',
   styleUrls: ['./keyresult.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class KeyresultComponent {
   @Input() keyResult!: KeyresultMin;

diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.ts b/frontend/src/app/components/objective-detail/objective-detail.component.ts
@@ -12,7 +12,8 @@ import { DialogService } from '../../services/dialog.service';
   selector: 'app-objective-detail',
   templateUrl: './objective-detail.component.html',
   styleUrl: 'objective-detail.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ObjectiveDetailComponent implements OnInit {
   objectiveId!: number;

diff --git a/frontend/src/app/components/objective-filter/objective-filter.component.ts b/frontend/src/app/components/objective-filter/objective-filter.component.ts
@@ -7,7 +7,8 @@ import { debounceTime, map, Subject } from 'rxjs';
   selector: 'app-objective-filter',
   templateUrl: './objective-filter.component.html',
   styleUrls: ['./objective-filter.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ObjectiveFilterComponent implements OnInit {
   refresh = new Subject<void>();

diff --git a/frontend/src/app/components/objective/objective.component.html b/frontend/src/app/components/objective/objective.component.html
@@ -50,7 +50,7 @@ <h2 class="title fit-content">{{ objective.title }}</h2>
 
       <section class="p-0 py-2 m-0">
         <button
-          *ngIf="!isObjectiveComplete(this.objective) && isWritable"
+          *ngIf="!isObjectiveComplete(objective) && isWritable"
           mat-button
           color="primary"
           class="fw-bold px-0 pe-2 ms-2"