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 23, 2024 · 2d5a26e · 2d5a26e
1 parent 970f986
commit 2d5a26e
Show file tree

Hide file tree

Showing 91 changed files with 3,453 additions and 4,779 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,43 +22,42 @@
   },
   "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",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/uuid": "^10.0.0",
     "browserslist": "^4.24.2",
-    "cypress": "^13.15.0",
+    "cypress": "^13.16.1",
     "cypress-real-events": "^1.13.0",
-    "jest": "^29.7.0",
-    "jest-preset-angular": "^14.2.4",
+    "jest-preset-angular": "^14.4.2",
     "ngx-translate-testing": "^7.0.0",
-    "prettier": "^3.3.3",
-    "typescript": "^5.5.4",
-    "uuid": "^11.0.0"
+    "prettier": "^3.4.2",
+    "typescript": "^5.6.3",
+    "uuid": "^11.0.3"
   },
   "jest": {
     "preset": "jest-preset-angular",
@@ -67,7 +66,7 @@
     ]
   },
   "engines": {
-    "npm": ">=10.0.0 <11.0.0",
+    "npm": ">=10.0.0 <12.0.0",
     "node": ">=22.0.0 <23.0.0"
   }
 }
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
@@ -7,6 +7,7 @@ import { DomSanitizer } from '@angular/platform-browser';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   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
@@ -24,7 +24,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
@@ -10,6 +10,7 @@ import { DialogService } from '../../services/dialog.service';
   selector: 'app-action-plan',
   templateUrl: './action-plan.component.html',
   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
@@ -16,6 +16,7 @@ import { DEFAULT_HEADER_HEIGHT_PX, PUZZLE_TOP_BAR_HEIGHT } from '../../shared/co
   templateUrl: './application-banner.component.html',
   styleUrls: ['./application-banner.component.scss'],
   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
@@ -1,7 +1,7 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
     <a routerLink="/" queryParamsHandling="preserve" class="d-flex h-100 align-items-center ps-4">
-      <img [attr.data-testId]="'logo'" alt="okr-logo" height="32" src="{{ this.logoSrc$ | async }}" priority />
+      <img [attr.data-testId]="'logo'" alt="okr-logo" height="32" src="{{ logoSrc$ | async }}" priority />
     </a>
     <div class="d-flex align-items-center me-md-5 me-1">
       <button
@@ -15,7 +15,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
@@ -11,6 +11,7 @@ import { getFullNameFromUser } from '../../shared/types/model/User';
   templateUrl: './application-top-bar.component.html',
   styleUrls: ['./application-top-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ApplicationTopBarComponent implements OnInit, OnDestroy {
   userFullName: string = '';

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,6 +15,7 @@ import { CheckInOrdinalMin } from '../../shared/types/model/CheckInOrdinalMin';
 @Component({
   selector: 'app-check-in-history-dialog',
   templateUrl: './check-in-history-dialog.component.html',
+  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
@@ -11,6 +11,7 @@ import { CheckInMetricMin } from '../../../shared/types/model/CheckInMetricMin';
   templateUrl: './check-in-form-metric.component.html',
   styleUrls: ['./check-in-form-metric.component.scss'],
   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
@@ -10,6 +10,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       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
@@ -8,6 +8,7 @@ import { CheckInMin } from '../../../shared/types/model/CheckInMin';
   selector: 'app-check-in-form-ordinal',
   templateUrl: './check-in-form-ordinal.component.html',
   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
@@ -89,7 +89,7 @@ <h3 class="okr-form-label okr-form-col">Key Result</h3>
       <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
@@ -19,6 +19,7 @@ import { CheckInOrdinalMin } from '../../../shared/types/model/CheckInOrdinalMin
   templateUrl: './check-in-form.component.html',
   styleUrls: ['./check-in-form.component.scss'],
   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
@@ -6,6 +6,7 @@ import { CheckInMin } from '../../shared/types/model/CheckInMin';
   templateUrl: './confidence.component.html',
   styleUrls: ['./confidence.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ConfidenceComponent implements OnChanges {
   min: number = 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
@@ -16,6 +16,7 @@ import { TranslateService } from '@ngx-translate/core';
   templateUrl: './key-result-form.component.html',
   styleUrls: ['./key-result-form.component.scss'],
   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,11 +1,11 @@
-@import "../style/variables";
+@use "variables";
 
 :host {
   flex: 1;
 }
 
 .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
@@ -25,6 +25,7 @@ import { CheckInMetric } from '../../shared/types/model/CheckInMetric';
   templateUrl: './keyresult-detail.component.html',
   styleUrls: ['./keyresult-detail.component.scss'],
   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
@@ -26,7 +26,7 @@
       </button>
       <button mat-button mat-dialog-close color="primary" [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 (click)="deleteKeyResult()" [attr.data-testId]="'delete-keyResult'">
         Key Result löschen
       </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
@@ -15,6 +15,7 @@ import { DialogService } from '../../services/dialog.service';
   selector: 'app-keyresult-dialog',
   templateUrl: './keyresult-dialog.component.html',
   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
@@ -11,6 +11,7 @@ import { TranslateService } from '@ngx-translate/core';
   selector: 'app-keyresult-type',
   templateUrl: './keyresult-type.component.html',
   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
@@ -10,6 +10,7 @@ import { KeyResultOrdinalMin } from '../../shared/types/model/KeyResultOrdinalMi
   templateUrl: './keyresult.component.html',
   styleUrls: ['./keyresult.component.scss'],
   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
@@ -13,6 +13,7 @@ import { DialogService } from '../../services/dialog.service';
   templateUrl: './objective-detail.component.html',
   styleUrl: 'objective-detail.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ObjectiveDetailComponent {
   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
@@ -8,6 +8,7 @@ import { debounceTime, map, Subject } from 'rxjs';
   templateUrl: './objective-filter.component.html',
   styleUrls: ['./objective-filter.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ObjectiveFilterComponent implements OnInit {
   refresh: Subject<void> = new Subject();

diff --git a/frontend/src/app/components/objective/objective.component.html b/frontend/src/app/components/objective/objective.component.html
@@ -46,7 +46,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"

diff --git a/frontend/src/app/components/objective/objective.component.scss b/frontend/src/app/components/objective/objective.component.scss
@@ -1,4 +1,4 @@
-@import "../style/variables";
+@use "variables";
 
 .objective {
   max-width: 750px;
@@ -20,7 +20,7 @@
 }
 
 .three-dot-menu {
-  color: $pz-dark-blue;
+  color: variables.$pz-dark-blue;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/frontend/src/app/components/objective/objective.component.ts b/frontend/src/app/components/objective/objective.component.ts
@@ -16,6 +16,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
   selector: 'app-objective-column',
   templateUrl: './objective.component.html',
   styleUrls: ['./objective.component.scss'],
+  standalone: false,
 })
 export class ObjectiveComponent {
   @Input() isWritable!: boolean;

diff --git a/frontend/src/app/components/overview/overview.component.html b/frontend/src/app/components/overview/overview.component.html
@@ -7,7 +7,7 @@
   </app-team>
   <div *ngIf="(overviewEntities$ | async)?.length == 0" class="d-flex align-items-center flex-column pt-5 gap-5">
     <p id="no-team-text">Kein Team ausgewählt</p>
-    <img src="{{ this.backgroundLogoSrc$ | async }}" alt="Greyed out company logo" width="242" class="puzzle-logo" />
+    <img src="{{ backgroundLogoSrc$ | async }}" alt="Greyed out company logo" width="242" class="puzzle-logo" />
   </div>
 </div>
 <router-outlet></router-outlet>
diff --git a/frontend/src/app/components/overview/overview.component.ts b/frontend/src/app/components/overview/overview.component.ts
@@ -22,6 +22,7 @@ import { ConfigService } from '../../services/config.service';
   templateUrl: './overview.component.html',
   styleUrls: ['./overview.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class OverviewComponent implements OnInit, OnDestroy {
   overviewEntities$: Subject<OverviewEntity[]> = new Subject<OverviewEntity[]>();

diff --git a/frontend/src/app/components/quarter-filter/quarter-filter.component.ts b/frontend/src/app/components/quarter-filter/quarter-filter.component.ts
@@ -10,6 +10,7 @@ import { getValueFromQuery } from '../../shared/common';
   selector: 'app-quarter-filter',
   templateUrl: './quarter-filter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class QuarterFilterComponent implements OnInit {
   quarters: BehaviorSubject<Quarter[]> = new BehaviorSubject<Quarter[]>([]);