From a8a407d5542250d26fa0fe60539bf22f18ace4c1 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:03:16 +0200
Subject: [PATCH 01/35] Make GitDiffFileComponent standalone

---
 .../hestia/git-diff-report/git-diff-file.component.ts        | 5 ++++-
 .../hestia/git-diff-report/git-diff-report.module.ts         | 3 +--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
index 8c5c283c3c68..c9d5ae551888 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
@@ -6,6 +6,9 @@ import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-
     selector: 'jhi-git-diff-file',
     templateUrl: './git-diff-file.component.html',
     encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MonacoDiffEditorComponent],
 })
 export class GitDiffFileComponent implements OnInit {
     @ViewChild(MonacoDiffEditorComponent, { static: true })
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
index 17b5682de4cb..5d1488d39dc9 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 import { GitDiffReportComponent } from './git-diff-report.component';
-import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file.component';
 import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
 import { GitDiffFilePanelComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
@@ -12,7 +11,7 @@ import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-
 
 @NgModule({
     imports: [ArtemisSharedModule, NgbAccordionModule, MonacoDiffEditorComponent, ArtemisSharedComponentModule],
-    declarations: [GitDiffFilePanelComponent, GitDiffFilePanelTitleComponent, GitDiffReportComponent, GitDiffFileComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
+    declarations: [GitDiffFilePanelComponent, GitDiffFilePanelTitleComponent, GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
     exports: [GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
 })
 export class GitDiffReportModule {}

From 3141b5fc5036f9ed5a45217f0a935f79dcff4d14 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:08:08 +0200
Subject: [PATCH 02/35] Make GitDiffFilePanelTitleComponent standalone

---
 .../git-diff-report/git-diff-file-panel-title.component.ts  | 6 +++++-
 .../hestia/git-diff-report/git-diff-report.module.ts        | 3 +--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
index 3e7706581b88..6ec5af1a884e 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 enum FileStatus {
     CREATED = 'created',
@@ -10,6 +11,9 @@ enum FileStatus {
     selector: 'jhi-git-diff-file-panel-title',
     templateUrl: './git-diff-file-panel-title.component.html',
     styleUrls: ['./git-diff-file-panel-title.component.scss'],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [TranslateDirective],
 })
 export class GitDiffFilePanelTitleComponent implements OnInit {
     @Input()
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
index 5d1488d39dc9..d3a92fa76e0a 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
@@ -5,13 +5,12 @@ import { GitDiffReportComponent } from './git-diff-report.component';
 import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
 import { GitDiffFilePanelComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
-import { GitDiffFilePanelTitleComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
 @NgModule({
     imports: [ArtemisSharedModule, NgbAccordionModule, MonacoDiffEditorComponent, ArtemisSharedComponentModule],
-    declarations: [GitDiffFilePanelComponent, GitDiffFilePanelTitleComponent, GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
+    declarations: [GitDiffFilePanelComponent, GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
     exports: [GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
 })
 export class GitDiffReportModule {}

From bab7d17a068c4981c6958f4082740e47aac06180 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:10:26 +0200
Subject: [PATCH 03/35] Make GitDiffLineStatComponent standalone

---
 .../hestia/git-diff-report/git-diff-line-stat.component.ts    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
index 8f25b7794bfc..eafa39216d0a 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
@@ -1,9 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'jhi-git-diff-line-stat',
     templateUrl: './git-diff-line-stat.component.html',
     styleUrls: ['./git-diff-line-stat.component.scss'],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GitDiffLineStatComponent implements OnInit {
     @Input()

From 2802c99d59ceb95c8251abde3eb64e47c6b60991 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:13:08 +0200
Subject: [PATCH 04/35] Make GitDiffFilePanel standalone

---
 .../git-diff-report/git-diff-file-panel.component.ts     | 9 ++++++++-
 .../hestia/git-diff-report/git-diff-report.module.ts     | 6 ++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
index cd36cfc5b5f5..7f0df20b72a2 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
@@ -1,12 +1,19 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
+import { GitDiffFilePanelTitleComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component';
+import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
+import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file.component';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 @Component({
     selector: 'jhi-git-diff-file-panel',
     templateUrl: './git-diff-file-panel.component.html',
     styleUrls: ['./git-diff-file-panel.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [GitDiffFilePanelTitleComponent, GitDiffLineStatComponent, GitDiffFileComponent, ArtemisSharedModule],
 })
 export class GitDiffFilePanelComponent implements OnInit {
     @Input() diffEntries: ProgrammingExerciseGitDiffEntry[];
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
index d3a92fa76e0a..528a10650739 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
@@ -1,16 +1,14 @@
 import { NgModule } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 import { GitDiffReportComponent } from './git-diff-report.component';
 import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
-import { GitDiffFilePanelComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
 @NgModule({
     imports: [ArtemisSharedModule, NgbAccordionModule, MonacoDiffEditorComponent, ArtemisSharedComponentModule],
-    declarations: [GitDiffFilePanelComponent, GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
-    exports: [GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
+    declarations: [GitDiffReportComponent, GitDiffReportModalComponent],
+    exports: [GitDiffReportComponent, GitDiffReportModalComponent],
 })
 export class GitDiffReportModule {}

From 93bea42faadc56710477943ec2cf621b8178dd18 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:18:03 +0200
Subject: [PATCH 05/35] Make remaining components standalone

---
 .../git-diff-report/git-diff-report-modal.component.ts   | 7 ++++++-
 .../hestia/git-diff-report/git-diff-report.component.ts  | 9 ++++++++-
 .../hestia/git-diff-report/git-diff-report.module.ts     | 6 ++----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 107acb55c1de..8cbf96dcf069 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -1,14 +1,19 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
 import { ProgrammingExerciseParticipationService } from 'app/exercises/programming/manage/services/programming-exercise-participation.service';
 import { CachedRepositoryFilesService } from 'app/exercises/programming/manage/services/cached-repository-files.service';
 import { Subscription } from 'rxjs';
+import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({
     selector: 'jhi-git-diff-report-modal',
     templateUrl: './git-diff-report-modal.component.html',
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [GitDiffReportComponent, TranslateDirective],
 })
 export class GitDiffReportModalComponent implements OnInit, OnDestroy {
     @Input() report: ProgrammingExerciseGitDiffReport;
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
index 87f30aade34a..361aa5cd6457 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
@@ -1,8 +1,12 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { faSpinner, faTableColumns } from '@fortawesome/free-solid-svg-icons';
 import { ButtonSize, ButtonType } from 'app/shared/components/button.component';
+import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { GitDiffFilePanelComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component';
 
 interface DiffInformation {
     path: string;
@@ -15,6 +19,9 @@ interface DiffInformation {
 @Component({
     selector: 'jhi-git-diff-report',
     templateUrl: './git-diff-report.component.html',
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [GitDiffLineStatComponent, ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffFilePanelComponent],
 })
 export class GitDiffReportComponent implements OnInit {
     @Input() report: ProgrammingExerciseGitDiffReport;
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
index 528a10650739..80c74ce4e6a9 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
@@ -1,14 +1,12 @@
 import { NgModule } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { GitDiffReportComponent } from './git-diff-report.component';
-import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
 @NgModule({
     imports: [ArtemisSharedModule, NgbAccordionModule, MonacoDiffEditorComponent, ArtemisSharedComponentModule],
-    declarations: [GitDiffReportComponent, GitDiffReportModalComponent],
-    exports: [GitDiffReportComponent, GitDiffReportModalComponent],
+    declarations: [],
+    exports: [],
 })
 export class GitDiffReportModule {}

From 65fbc625ace2daf4781f27a27012773ee8863b85 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:25:02 +0200
Subject: [PATCH 06/35] Import components into other modules

---
 .../programming-diff-report-detail.component.ts                | 3 ++-
 src/main/webapp/app/exam/manage/exam-management.module.ts      | 2 ++
 .../code-hint-generation-overview.module.ts                    | 2 ++
 .../git-diff-report/git-diff-file-panel-title.component.ts     | 3 ++-
 .../manage/programming-exercise-management.module.ts           | 2 --
 .../programming/participate/programming-repository.module.ts   | 2 ++
 6 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
index e95dbf256ee2..68636be74c18 100644
--- a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
+++ b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
@@ -9,12 +9,13 @@ import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-r
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 
 @Component({
     selector: 'jhi-programming-diff-report-detail',
     templateUrl: 'programming-diff-report-detail.component.html',
     standalone: true,
-    imports: [ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffReportModule],
+    imports: [ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffReportModule, GitDiffLineStatComponent],
 })
 export class ProgrammingDiffReportDetailComponent implements OnDestroy {
     protected readonly FeatureToggle = FeatureToggle;
diff --git a/src/main/webapp/app/exam/manage/exam-management.module.ts b/src/main/webapp/app/exam/manage/exam-management.module.ts
index a932fdd227b9..e6daef695bb3 100644
--- a/src/main/webapp/app/exam/manage/exam-management.module.ts
+++ b/src/main/webapp/app/exam/manage/exam-management.module.ts
@@ -72,6 +72,7 @@ import { ArtemisProgrammingExerciseModule } from 'app/exercises/programming/shar
 import { DetailModule } from 'app/detail-overview-list/detail.module';
 import { ArtemisDurationFromSecondsPipe } from 'app/shared/pipes/artemis-duration-from-seconds.pipe';
 import { NoDataComponent } from 'app/shared/no-data-component';
+import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 
 const ENTITY_STATES = [...examManagementState];
 
@@ -114,6 +115,7 @@ const ENTITY_STATES = [...examManagementState];
         ArtemisProgrammingExerciseModule,
         DetailModule,
         NoDataComponent,
+        GitDiffLineStatComponent,
     ],
     declarations: [
         ExamManagementComponent,
diff --git a/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts b/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts
index 05be60e77689..b14d33d8297b 100644
--- a/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts
@@ -16,6 +16,7 @@ import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { CodeHintGenerationStatusStepComponent } from 'app/exercises/programming/hestia/generation-overview/code-hint-generation-status/code-hint-generation-status-step.component';
 import { ManualSolutionEntryCreationModalComponent } from '../manual-solution-entry-creation-modal/manual-solution-entry-creation-modal.component';
+import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 
 @NgModule({
     imports: [
@@ -31,6 +32,7 @@ import { ManualSolutionEntryCreationModalComponent } from '../manual-solution-en
         ArtemisMarkdownModule,
         ArtemisExerciseHintSharedModule,
         MatExpansionModule,
+        GitDiffReportComponent,
     ],
     declarations: [
         CodeHintGenerationStatusComponent,
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
index 6ec5af1a884e..9f70681d4e0d 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { CommonModule } from '@angular/common';
 
 enum FileStatus {
     CREATED = 'created',
@@ -13,7 +14,7 @@ enum FileStatus {
     styleUrls: ['./git-diff-file-panel-title.component.scss'],
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [TranslateDirective],
+    imports: [TranslateDirective, CommonModule],
 })
 export class GitDiffFilePanelTitleComponent implements OnInit {
     @Input()
diff --git a/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts b/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
index ce2056d24a44..7340599252c5 100644
--- a/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
+++ b/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
@@ -19,7 +19,6 @@ import { ArtemisPlagiarismModule } from 'app/exercises/shared/plagiarism/plagiar
 import { ArtemisProgrammingExerciseLifecycleModule } from 'app/exercises/programming/shared/lifecycle/programming-exercise-lifecycle.module';
 import { ProgrammingExerciseInstructorExerciseDownloadComponent } from '../shared/actions/programming-exercise-instructor-exercise-download.component';
 import { SubmissionResultStatusModule } from 'app/overview/submission-result-status.module';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ProgrammingExerciseExampleSolutionRepoDownloadComponent } from 'app/exercises/programming/shared/actions/programming-exercise-example-solution-repo-download.component';
 import { TestwiseCoverageReportModule } from 'app/exercises/programming/hestia/testwise-coverage-report/testwise-coverage-report.module';
 import { ArtemisCodeHintGenerationOverviewModule } from 'app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module';
@@ -49,7 +48,6 @@ import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.co
         OrionModule,
         ArtemisProgrammingExerciseLifecycleModule,
         SubmissionResultStatusModule,
-        GitDiffReportModule,
         TestwiseCoverageReportModule,
         ArtemisCodeHintGenerationOverviewModule,
         ArtemisCodeEditorModule,
diff --git a/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts b/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts
index c1b68191f38a..1c133cf5f4b2 100644
--- a/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts
+++ b/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts
@@ -20,6 +20,7 @@ import { CommitHistoryComponent } from 'app/localvc/commit-history/commit-histor
 import { CommitDetailsViewComponent } from 'app/localvc/commit-details-view/commit-details-view.component';
 import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
+import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 
 @NgModule({
     imports: [
@@ -41,6 +42,7 @@ import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programmi
         ArtemisProgrammingExerciseModule,
         GitDiffReportModule,
         ArtemisProgrammingExerciseActionsModule,
+        GitDiffReportComponent,
     ],
     declarations: [RepositoryViewComponent, CommitHistoryComponent, CommitDetailsViewComponent],
     exports: [RepositoryViewComponent],

From a529ddfb543595562c3a16935a78b73c43e4089d Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:27:29 +0200
Subject: [PATCH 07/35] Remove module import

---
 .../programming-diff-report-detail.component.ts             | 3 +--
 src/main/webapp/app/detail-overview-list/detail.module.ts   | 2 --
 src/main/webapp/app/exam/manage/exam-management.module.ts   | 2 --
 .../code-hint-generation-overview.module.ts                 | 6 ------
 .../participate/programming-repository.module.ts            | 2 --
 5 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
index 68636be74c18..68f4ba678f02 100644
--- a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
+++ b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
@@ -5,7 +5,6 @@ import { ButtonSize, ButtonType, TooltipPlacement } from 'app/shared/components/
 import { faCodeCompare } from '@fortawesome/free-solid-svg-icons';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -15,7 +14,7 @@ import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-d
     selector: 'jhi-programming-diff-report-detail',
     templateUrl: 'programming-diff-report-detail.component.html',
     standalone: true,
-    imports: [ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffReportModule, GitDiffLineStatComponent],
+    imports: [ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffLineStatComponent],
 })
 export class ProgrammingDiffReportDetailComponent implements OnDestroy {
     protected readonly FeatureToggle = FeatureToggle;
diff --git a/src/main/webapp/app/detail-overview-list/detail.module.ts b/src/main/webapp/app/detail-overview-list/detail.module.ts
index 28a1f3a8abb9..c661ae788647 100644
--- a/src/main/webapp/app/detail-overview-list/detail.module.ts
+++ b/src/main/webapp/app/detail-overview-list/detail.module.ts
@@ -6,7 +6,6 @@ import { ArtemisSharedComponentModule } from 'app/shared/components/shared-compo
 import { SubmissionResultStatusModule } from 'app/overview/submission-result-status.module';
 import { ArtemisProgrammingExerciseStatusModule } from 'app/exercises/programming/manage/status/programming-exercise-status.module';
 import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisProgrammingExerciseInstructionsEditorModule } from 'app/exercises/programming/manage/instructions-editor/programming-exercise-instructions-editor.module';
 import { ArtemisProgrammingExerciseLifecycleModule } from 'app/exercises/programming/shared/lifecycle/programming-exercise-lifecycle.module';
 import { AssessmentInstructionsModule } from 'app/assessment/assessment-instructions/assessment-instructions.module';
@@ -25,7 +24,6 @@ import { NoDataComponent } from 'app/shared/no-data-component';
         SubmissionResultStatusModule,
         ArtemisProgrammingExerciseStatusModule,
         ArtemisProgrammingExerciseActionsModule,
-        GitDiffReportModule,
         ArtemisProgrammingExerciseInstructionsEditorModule,
         ArtemisProgrammingExerciseLifecycleModule,
         AssessmentInstructionsModule,
diff --git a/src/main/webapp/app/exam/manage/exam-management.module.ts b/src/main/webapp/app/exam/manage/exam-management.module.ts
index e6daef695bb3..b9a9829ab1fa 100644
--- a/src/main/webapp/app/exam/manage/exam-management.module.ts
+++ b/src/main/webapp/app/exam/manage/exam-management.module.ts
@@ -67,7 +67,6 @@ import { ArtemisExamNavigationBarModule } from 'app/exam/participate/exam-naviga
 import { ArtemisExamSubmissionComponentsModule } from 'app/exam/participate/exercises/exam-submission-components.module';
 import { MatSliderModule } from '@angular/material/slider';
 import { ProgrammingExerciseExamDiffComponent } from './student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisProgrammingExerciseModule } from 'app/exercises/programming/shared/programming-exercise.module';
 import { DetailModule } from 'app/detail-overview-list/detail.module';
 import { ArtemisDurationFromSecondsPipe } from 'app/shared/pipes/artemis-duration-from-seconds.pipe';
@@ -111,7 +110,6 @@ const ENTITY_STATES = [...examManagementState];
         ArtemisExamNavigationBarModule,
         ArtemisExamSubmissionComponentsModule,
         MatSliderModule,
-        GitDiffReportModule,
         ArtemisProgrammingExerciseModule,
         DetailModule,
         NoDataComponent,
diff --git a/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts b/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts
index b14d33d8297b..a9d7088b56c9 100644
--- a/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module.ts
@@ -9,7 +9,6 @@ import { CoverageGenerationStepComponent } from '../steps/coverage-generation-st
 import { SolutionEntryGenerationStepComponent } from '../steps/solution-entry-generation-step/solution-entry-generation-step.component';
 import { CodeHintGenerationStepComponent } from '../steps/code-hint-generation-step/code-hint-generation-step.component';
 import { TestwiseCoverageReportModule } from 'app/exercises/programming/hestia/testwise-coverage-report/testwise-coverage-report.module';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { CodeHintGenerationOverviewComponent } from 'app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.component';
 import { RouterModule } from '@angular/router';
 import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
@@ -25,12 +24,7 @@ import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-dif
         ArtemisExerciseHintSharedModule,
         ArtemisSharedComponentModule,
         TestwiseCoverageReportModule,
-        GitDiffReportModule,
-        GitDiffReportModule,
-        TestwiseCoverageReportModule,
-        ArtemisSharedComponentModule,
         ArtemisMarkdownModule,
-        ArtemisExerciseHintSharedModule,
         MatExpansionModule,
         GitDiffReportComponent,
     ],
diff --git a/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts b/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts
index 1c133cf5f4b2..d90997bc2ccd 100644
--- a/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts
+++ b/src/main/webapp/app/exercises/programming/participate/programming-repository.module.ts
@@ -18,7 +18,6 @@ import { FormsModule } from '@angular/forms';
 import { ArtemisProgrammingExerciseModule } from 'app/exercises/programming/shared/programming-exercise.module';
 import { CommitHistoryComponent } from 'app/localvc/commit-history/commit-history.component';
 import { CommitDetailsViewComponent } from 'app/localvc/commit-details-view/commit-details-view.component';
-import { GitDiffReportModule } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.module';
 import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
 import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 
@@ -40,7 +39,6 @@ import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-dif
         ArtemisHeaderExercisePageWithDetailsModule,
         SubmissionResultStatusModule,
         ArtemisProgrammingExerciseModule,
-        GitDiffReportModule,
         ArtemisProgrammingExerciseActionsModule,
         GitDiffReportComponent,
     ],

From 4ca86422279e24aad11f80554adaae186fd5ecd3 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 22:30:27 +0200
Subject: [PATCH 08/35] Delete GitDiffReportModule

---
 .../hestia/git-diff-report/git-diff-report.module.ts | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
deleted file mode 100644
index 80c74ce4e6a9..000000000000
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
-import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
-import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
-
-@NgModule({
-    imports: [ArtemisSharedModule, NgbAccordionModule, MonacoDiffEditorComponent, ArtemisSharedComponentModule],
-    declarations: [],
-    exports: [],
-})
-export class GitDiffReportModule {}

From e6877454e829c42692bb2bcf84c601cf2f4f53f1 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 23:03:18 +0200
Subject: [PATCH 09/35] Use signals (GitDiffFile)

---
 .../git-diff-file-panel.component.html        |  2 +
 .../git-diff-file.component.html              |  4 +-
 .../git-diff-file.component.ts                | 71 +++++++------------
 .../git-diff-file.component.spec.ts           | 29 +++-----
 4 files changed, 40 insertions(+), 66 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
index 7b8fafd1178e..3bfee0f52020 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
@@ -25,7 +25,9 @@
                     [diffForTemplateAndSolution]="diffForTemplateAndSolution"
                     [diffEntries]="diffEntries"
                     [originalFileContent]="templateFileContent"
+                    [originalFilePath]="previousFilePath"
                     [modifiedFileContent]="solutionFileContent"
+                    [modifiedFilePath]="filePath"
                     (onDiffReady)="onDiffReady.emit($event)"
                 />
             </div>
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.html
index e06148d20072..2f9ca3570472 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.html
@@ -1,9 +1,9 @@
 <div class="ph-1">
-    @if (fileUnchanged) {
+    @if (fileUnchanged()) {
         <div class="w-100 d-flex justify-content-center">
             <span class="p-2" jhiTranslate="artemisApp.repository.commitHistory.commitDetails.fileUnchanged"></span>
         </div>
     }
     <!-- The editor is only hidden, not removed, as we still want it to report its readiness. -->
-    <jhi-monaco-diff-editor [hidden]="fileUnchanged" [allowSplitView]="allowSplitView" (onReadyForDisplayChange)="onDiffReady.emit($event)" />
+    <jhi-monaco-diff-editor [hidden]="fileUnchanged()" [allowSplitView]="allowSplitView()" (onReadyForDisplayChange)="onDiffReady.emit($event)" />
 </div>
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
index c9d5ae551888..a79a8cec69bf 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, effect, input, output, signal, untracked, viewChild } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
@@ -10,50 +10,29 @@ import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [MonacoDiffEditorComponent],
 })
-export class GitDiffFileComponent implements OnInit {
-    @ViewChild(MonacoDiffEditorComponent, { static: true })
-    monacoDiffEditor: MonacoDiffEditorComponent;
-
-    @Input()
-    diffForTemplateAndSolution: boolean = false;
-
-    @Input()
-    diffEntries: ProgrammingExerciseGitDiffEntry[];
-
-    @Input()
-    originalFileContent?: string;
-
-    @Input()
-    modifiedFileContent?: string;
-
-    @Input()
-    allowSplitView = true;
-
-    @Output()
-    onDiffReady = new EventEmitter<boolean>();
-
-    originalFilePath?: string;
-    modifiedFilePath?: string;
-    fileUnchanged = false;
-
-    ngOnInit(): void {
-        this.determineFilePaths();
-        this.monacoDiffEditor.setFileContents(this.originalFileContent, this.originalFilePath, this.modifiedFileContent, this.modifiedFilePath);
-        this.fileUnchanged = this.originalFileContent === this.modifiedFileContent;
-    }
-
-    /**
-     * Determines the previous and current file path of the current file
-     */
-    private determineFilePaths() {
-        this.modifiedFilePath = this.diffEntries
-            .map((entry) => entry.filePath)
-            .filter((filePath) => filePath)
-            .first();
-
-        this.originalFilePath = this.diffEntries
-            .map((entry) => entry.previousFilePath)
-            .filter((filePath) => filePath)
-            .first();
+export class GitDiffFileComponent {
+    monacoDiffEditor = viewChild.required(MonacoDiffEditorComponent);
+
+    diffForTemplateAndSolution = input<boolean>(false);
+    diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
+    originalFileContent = input<string>();
+    originalFilePath = input<string>();
+    modifiedFileContent = input<string>();
+    modifiedFilePath = input<string>();
+    allowSplitView = input<boolean>(true);
+    onDiffReady = output<boolean>();
+
+    fileUnchanged = signal<boolean>(false);
+
+    constructor() {
+        effect(
+            () => {
+                untracked(() => {
+                    this.monacoDiffEditor().setFileContents(this.originalFileContent(), this.originalFilePath(), this.modifiedFileContent(), this.modifiedFilePath());
+                    this.fileUnchanged.set(this.originalFileContent() === this.modifiedFileContent());
+                });
+            },
+            { allowSignalWrites: true },
+        );
     }
 }
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
index 47d3e75710b4..23922966205e 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file.component';
 import { MockResizeObserver } from '../../../helpers/mocks/service/mock-resize-observer';
 import { MonacoDiffEditorComponent } from '../../../../../../main/webapp/app/shared/monaco-editor/monaco-diff-editor.component';
+import { MockComponent } from 'ng-mocks';
 
 function getDiffEntryWithPaths(previousFilePath?: string, filePath?: string) {
     return {
@@ -17,8 +18,8 @@ describe('GitDiffFileComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, MonacoDiffEditorComponent],
-            declarations: [GitDiffFileComponent],
+            imports: [ArtemisTestModule],
+            declarations: [MockComponent(MonacoDiffEditorComponent)],
             providers: [],
         }).compileComponents();
         // Required because Monaco uses the ResizeObserver for the diff editor.
@@ -33,27 +34,19 @@ describe('GitDiffFileComponent', () => {
         jest.restoreAllMocks();
     });
 
-    it.each([
-        getDiffEntryWithPaths('same file', 'same file'),
-        getDiffEntryWithPaths('old file', 'renamed file'),
-        getDiffEntryWithPaths('deleted file', undefined),
-        getDiffEntryWithPaths(undefined, 'created file'),
-    ])('should infer file paths from the diff entries', (entry) => {
-        comp.diffEntries = [entry];
-        fixture.detectChanges();
-        expect(comp.modifiedFilePath).toBe(entry.filePath);
-        expect(comp.originalFilePath).toBe(entry.previousFilePath);
-    });
-
     it('should initialize the content of the diff editor', () => {
         const fileName = 'some-changed-file.java';
         const originalContent = 'some file content';
         const modifiedContent = 'some changed file content';
-        const setFileContentsStub = jest.spyOn(comp.monacoDiffEditor, 'setFileContents').mockImplementation();
+        const setFileContentsStub = jest.fn();
+        jest.spyOn(comp, 'monacoDiffEditor').mockReturnValue({ setFileContents: setFileContentsStub } as unknown as MonacoDiffEditorComponent);
         const diffEntry = getDiffEntryWithPaths(fileName, fileName);
-        comp.originalFileContent = originalContent;
-        comp.modifiedFileContent = modifiedContent;
-        comp.diffEntries = [diffEntry];
+        fixture.componentRef.setInput('diffEntries', [diffEntry]);
+        fixture.componentRef.setInput('originalFileContent', originalContent);
+        fixture.componentRef.setInput('originalFilePath', fileName);
+        fixture.componentRef.setInput('modifiedFileContent', modifiedContent);
+        fixture.componentRef.setInput('modifiedFilePath', fileName);
+        jest.spyOn(comp.monacoDiffEditor(), 'setFileContents').mockImplementation();
         fixture.detectChanges();
         expect(setFileContentsStub).toHaveBeenCalledExactlyOnceWith(originalContent, fileName, modifiedContent, fileName);
     });

From aea10548cc2da7064c56a53ae6a54ce1490405cc Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 23:16:23 +0200
Subject: [PATCH 10/35] Use signals (GitDiffFilePanelTitle)

---
 .../git-diff-file-panel-title.component.html  | 12 +++----
 .../git-diff-file-panel-title.component.ts    | 36 ++++++++-----------
 .../git-diff-file-panel.component.html        |  2 +-
 ...it-diff-file-panel-title.component.spec.ts | 26 +++++++-------
 4 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.html
index 80802af1dbd1..8b470a3e9fd5 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.html
@@ -1,13 +1,13 @@
 <div class="my-2 ps-1 file-path-with-badge">
-    {{ title }}
-    @if (fileStatus !== FileStatus.UNCHANGED) {
+    {{ title() }}
+    @if (fileStatus() !== FileStatus.UNCHANGED) {
         <span
-            [jhiTranslate]="'artemisApp.programmingExercise.diffReport.fileChange.' + fileStatus"
+            [jhiTranslate]="'artemisApp.programmingExercise.diffReport.fileChange.' + fileStatus()"
             [ngClass]="{
                 badge: true,
-                'bg-success': fileStatus === FileStatus.CREATED,
-                'bg-warning': fileStatus === FileStatus.RENAMED,
-                'bg-danger': fileStatus === FileStatus.DELETED,
+                'bg-success': fileStatus() === FileStatus.CREATED,
+                'bg-warning': fileStatus() === FileStatus.RENAMED,
+                'bg-danger': fileStatus() === FileStatus.DELETED,
             }"
         ></span>
     }
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
index 9f70681d4e0d..fc4ed6c0107d 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { CommonModule } from '@angular/common';
 
@@ -16,34 +16,28 @@ enum FileStatus {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [TranslateDirective, CommonModule],
 })
-export class GitDiffFilePanelTitleComponent implements OnInit {
-    @Input()
-    previousFilePath?: string;
+export class GitDiffFilePanelTitleComponent {
+    originalFilePath = input<string>();
+    modifiedFilePath = input<string>();
 
-    @Input()
-    filePath?: string;
+    titleAndFileStatus = computed(() => this.getTitleAndFileStatus(this.originalFilePath(), this.modifiedFilePath()));
 
-    title?: string;
-    fileStatus: FileStatus = FileStatus.UNCHANGED;
+    title = computed(() => this.titleAndFileStatus().title);
+    fileStatus = computed(() => this.titleAndFileStatus().fileStatus);
 
-    // Expose to template
     protected readonly FileStatus = FileStatus;
 
-    ngOnInit(): void {
-        if (this.filePath && this.previousFilePath) {
-            if (this.filePath !== this.previousFilePath) {
-                this.title = `${this.previousFilePath} → ${this.filePath}`;
-                this.fileStatus = FileStatus.RENAMED;
+    private getTitleAndFileStatus(originalFilePath?: string, modifiedFilePath?: string): { title?: string; fileStatus: FileStatus } {
+        if (modifiedFilePath && originalFilePath) {
+            if (modifiedFilePath !== originalFilePath) {
+                return { title: `${originalFilePath} → ${modifiedFilePath}`, fileStatus: FileStatus.RENAMED };
             } else {
-                this.title = this.filePath;
-                this.fileStatus = FileStatus.UNCHANGED;
+                return { title: modifiedFilePath, fileStatus: FileStatus.UNCHANGED };
             }
-        } else if (this.filePath) {
-            this.title = this.filePath;
-            this.fileStatus = FileStatus.CREATED;
+        } else if (modifiedFilePath) {
+            return { title: modifiedFilePath, fileStatus: FileStatus.CREATED };
         } else {
-            this.title = this.previousFilePath;
-            this.fileStatus = FileStatus.DELETED;
+            return { title: originalFilePath, fileStatus: FileStatus.DELETED };
         }
     }
 }
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
index 3bfee0f52020..cc8e6008e7a7 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
@@ -1,7 +1,7 @@
 <div ngbAccordion [destroyOnHide]="false" class="git-diff-file-panel">
     <div ngbAccordionItem #fileDiffPanel="ngbAccordionItem" [collapsed]="false">
         <div ngbAccordionHeader class="d-flex align-items-center justify-content-between">
-            <jhi-git-diff-file-panel-title [filePath]="filePath" [previousFilePath]="previousFilePath" />
+            <jhi-git-diff-file-panel-title [modifiedFilePath]="filePath" [originalFilePath]="previousFilePath" />
             <div>
                 <jhi-git-diff-line-stat
                     [addedLineCount]="addedLineCount"
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel-title.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel-title.component.spec.ts
index 3dc633eb4b50..86380ebed0a7 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel-title.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel-title.component.spec.ts
@@ -22,34 +22,34 @@ describe('GitDiffFilePanelTitleComponent', () => {
 
     it.each([
         {
-            filePath: 'some-unchanged-file.java',
-            previousFilePath: 'some-unchanged-file.java',
+            modifiedFilePath: 'some-unchanged-file.java',
+            originalFilePath: 'some-unchanged-file.java',
             status: 'unchanged',
             title: 'some-unchanged-file.java',
         },
         {
-            filePath: undefined,
-            previousFilePath: 'some-deleted-file.java',
+            modifiedFilePath: undefined,
+            originalFilePath: 'some-deleted-file.java',
             status: 'deleted',
             title: 'some-deleted-file.java',
         },
         {
-            filePath: 'some-created-file.java',
-            previousFilePath: undefined,
+            modifiedFilePath: 'some-created-file.java',
+            originalFilePath: undefined,
             status: 'created',
             title: 'some-created-file.java',
         },
         {
-            filePath: 'some-renamed-file.java',
-            previousFilePath: 'some-file.java',
+            modifiedFilePath: 'some-renamed-file.java',
+            originalFilePath: 'some-file.java',
             status: 'renamed',
             title: 'some-file.java → some-renamed-file.java',
         },
-    ])('should correctly set title and status', ({ filePath, previousFilePath, status, title }) => {
-        comp.previousFilePath = previousFilePath;
-        comp.filePath = filePath;
+    ])('should correctly set title and status', ({ originalFilePath, modifiedFilePath, status, title }) => {
+        fixture.componentRef.setInput('originalFilePath', originalFilePath);
+        fixture.componentRef.setInput('modifiedFilePath', modifiedFilePath);
         fixture.detectChanges();
-        expect(comp.title).toBe(title);
-        expect(comp.fileStatus).toBe(status);
+        expect(comp.title()).toBe(title);
+        expect(comp.fileStatus()).toBe(status);
     });
 });

From 733cdd058bf077b5ccc7fc44d6f633cae8d44a60 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 23:20:20 +0200
Subject: [PATCH 11/35] Use computed signal

---
 .../hestia/git-diff-report/git-diff-file.component.ts       | 5 ++---
 .../hestia/git-diff-report/git-diff-file.component.spec.ts  | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
index a79a8cec69bf..d88191485f8f 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, effect, input, output, signal, untracked, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, effect, input, output, untracked, viewChild } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
@@ -22,14 +22,13 @@ export class GitDiffFileComponent {
     allowSplitView = input<boolean>(true);
     onDiffReady = output<boolean>();
 
-    fileUnchanged = signal<boolean>(false);
+    fileUnchanged = computed(() => this.originalFileContent() === this.modifiedFileContent());
 
     constructor() {
         effect(
             () => {
                 untracked(() => {
                     this.monacoDiffEditor().setFileContents(this.originalFileContent(), this.originalFilePath(), this.modifiedFileContent(), this.modifiedFilePath());
-                    this.fileUnchanged.set(this.originalFileContent() === this.modifiedFileContent());
                 });
             },
             { allowSignalWrites: true },
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
index 23922966205e..17294d1d3050 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file.component';
 import { MockResizeObserver } from '../../../helpers/mocks/service/mock-resize-observer';
 import { MonacoDiffEditorComponent } from '../../../../../../main/webapp/app/shared/monaco-editor/monaco-diff-editor.component';
-import { MockComponent } from 'ng-mocks';
 
 function getDiffEntryWithPaths(previousFilePath?: string, filePath?: string) {
     return {
@@ -18,8 +17,8 @@ describe('GitDiffFileComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule],
-            declarations: [MockComponent(MonacoDiffEditorComponent)],
+            imports: [ArtemisTestModule, MonacoDiffEditorComponent],
+            declarations: [],
             providers: [],
         }).compileComponents();
         // Required because Monaco uses the ResizeObserver for the diff editor.
@@ -49,5 +48,6 @@ describe('GitDiffFileComponent', () => {
         jest.spyOn(comp.monacoDiffEditor(), 'setFileContents').mockImplementation();
         fixture.detectChanges();
         expect(setFileContentsStub).toHaveBeenCalledExactlyOnceWith(originalContent, fileName, modifiedContent, fileName);
+        expect(comp.fileUnchanged()).toBeFalse();
     });
 });

From 528d23510c2f1439db2ffa56aa12e0ff5258ff94 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 23:22:42 +0200
Subject: [PATCH 12/35] Tracked

---
 .../git-diff-report/git-diff-file.component.ts      | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
index d88191485f8f..1b07c6c720a7 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, effect, input, output, untracked, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, effect, input, output, viewChild } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
@@ -25,13 +25,8 @@ export class GitDiffFileComponent {
     fileUnchanged = computed(() => this.originalFileContent() === this.modifiedFileContent());
 
     constructor() {
-        effect(
-            () => {
-                untracked(() => {
-                    this.monacoDiffEditor().setFileContents(this.originalFileContent(), this.originalFilePath(), this.modifiedFileContent(), this.modifiedFilePath());
-                });
-            },
-            { allowSignalWrites: true },
-        );
+        effect(() => {
+            this.monacoDiffEditor().setFileContents(this.originalFileContent(), this.originalFilePath(), this.modifiedFileContent(), this.modifiedFilePath());
+        });
     }
 }

From 2035abbca4f930e57ef13e37be4caac03bd7da8b Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 23:29:47 +0200
Subject: [PATCH 13/35] Use signals (GitDiffLineStatComponent)

---
 .../git-diff-file-panel-title.component.ts    |  6 ++-
 .../git-diff-line-stat.component.html         |  8 ++--
 .../git-diff-line-stat.component.ts           | 41 +++++++++----------
 .../git-diff-line-stat.component.spec.ts      | 12 +++---
 4 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
index fc4ed6c0107d..ce32d21ac4f4 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
@@ -20,14 +20,16 @@ export class GitDiffFilePanelTitleComponent {
     originalFilePath = input<string>();
     modifiedFilePath = input<string>();
 
-    titleAndFileStatus = computed(() => this.getTitleAndFileStatus(this.originalFilePath(), this.modifiedFilePath()));
+    titleAndFileStatus = computed(() => this.getTitleAndFileStatus());
 
     title = computed(() => this.titleAndFileStatus().title);
     fileStatus = computed(() => this.titleAndFileStatus().fileStatus);
 
     protected readonly FileStatus = FileStatus;
 
-    private getTitleAndFileStatus(originalFilePath?: string, modifiedFilePath?: string): { title?: string; fileStatus: FileStatus } {
+    private getTitleAndFileStatus(): { title?: string; fileStatus: FileStatus } {
+        const originalFilePath = this.originalFilePath();
+        const modifiedFilePath = this.modifiedFilePath();
         if (modifiedFilePath && originalFilePath) {
             if (modifiedFilePath !== originalFilePath) {
                 return { title: `${originalFilePath} → ${modifiedFilePath}`, fileStatus: FileStatus.RENAMED };
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.html
index d23e649b7439..654c3a70afed 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.html
@@ -1,11 +1,11 @@
 <span class="diff-line-stat">
-    <span class="text-success">+{{ addedLineCount }}</span>
-    <span class="text-danger">-{{ removedLineCount }}</span>
+    <span class="text-success">+{{ addedLineCount() }}</span>
+    <span class="text-danger">-{{ removedLineCount() }}</span>
     <span class="diff-block-bar">
-        @for (i of [].constructor(addedSquareCount); track $index) {
+        @for (i of addedSquareArray(); track $index) {
             <span class="diff-block bg-success"></span>
         }
-        @for (i of [].constructor(removedSquareCount); track $index) {
+        @for (i of removedSquareArray(); track $index) {
             <span class="diff-block bg-danger"></span>
         }
     </span>
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
index eafa39216d0a..e4595b5d1296 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 @Component({
     selector: 'jhi-git-diff-line-stat',
@@ -7,30 +7,29 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GitDiffLineStatComponent implements OnInit {
-    @Input()
-    addedLineCount: number = 0;
-    @Input()
-    removedLineCount: number = 0;
-    addedSquareCount: number;
-    removedSquareCount: number;
+export class GitDiffLineStatComponent {
+    addedLineCount = input<number>(0);
+    removedLineCount = input<number>(0);
 
-    ngOnInit(): void {
-        if (!this.addedLineCount && !this.removedLineCount) {
-            this.addedSquareCount = 1;
-            this.removedSquareCount = 1;
-        } else if (this.addedLineCount === 0) {
-            this.addedSquareCount = 0;
-            this.removedSquareCount = 5;
-        } else if (this.removedLineCount === 0) {
-            this.addedSquareCount = 5;
-            this.removedSquareCount = 0;
+    squareCounts = computed(() => this.getSquareCounts());
+    addedSquareArray = computed(() => Array.from({ length: this.squareCounts().addedSquareCount }));
+    removedSquareArray = computed(() => Array.from({ length: this.squareCounts().removedSquareCount }));
+
+    getSquareCounts(): { addedSquareCount: number; removedSquareCount: number } {
+        const addedLineCount = this.addedLineCount();
+        const removedLineCount = this.removedLineCount();
+        if (!addedLineCount && !removedLineCount) {
+            return { addedSquareCount: 1, removedSquareCount: 1 };
+        } else if (addedLineCount === 0) {
+            return { addedSquareCount: 0, removedSquareCount: 5 };
+        } else if (removedLineCount === 0) {
+            return { addedSquareCount: 5, removedSquareCount: 0 };
         } else {
-            const totalLineCount = this.addedLineCount + this.removedLineCount;
+            const totalLineCount = addedLineCount + removedLineCount;
             // Calculates the amount of green rectangles to show between 1 and 4
             // This is the rounded percentage of added lines divided by total lines
-            this.addedSquareCount = Math.round(Math.max(1, Math.min(4, (this.addedLineCount / totalLineCount) * 5)));
-            this.removedSquareCount = 5 - this.addedSquareCount;
+            const addedSquareCount = Math.round(Math.max(1, Math.min(4, (addedLineCount / totalLineCount) * 5)));
+            return { addedSquareCount, removedSquareCount: 5 - addedSquareCount };
         }
     }
 }
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-line-stat.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-line-stat.component.spec.ts
index 03a61f184b67..2ea540371804 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-line-stat.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-line-stat.component.spec.ts
@@ -4,7 +4,7 @@ import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-d
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockPipe } from 'ng-mocks';
 
-describe('Git-Diff line-stat Component', () => {
+describe('GitDiffLineStatComponent', () => {
     let comp: GitDiffLineStatComponent;
     let fixture: ComponentFixture<GitDiffLineStatComponent>;
 
@@ -29,10 +29,10 @@ describe('Git-Diff line-stat Component', () => {
     ];
 
     it.each(boxesTestTable)('Should show %s-%s boxes', (expectedAddedSquareCount, expectedRemovedSquareCount, addedLineCount, removedLineCount) => {
-        comp.addedLineCount = addedLineCount;
-        comp.removedLineCount = removedLineCount;
-        comp.ngOnInit();
-        expect(comp.addedSquareCount).toBe(expectedAddedSquareCount);
-        expect(comp.removedSquareCount).toBe(expectedRemovedSquareCount);
+        fixture.componentRef.setInput('addedLineCount', addedLineCount);
+        fixture.componentRef.setInput('removedLineCount', removedLineCount);
+        fixture.detectChanges();
+        expect(comp.squareCounts().addedSquareCount).toBe(expectedAddedSquareCount);
+        expect(comp.squareCounts().removedSquareCount).toBe(expectedRemovedSquareCount);
     });
 });

From dda89f2094558f22015faa8e60b0e3d88b7e40ea Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Mon, 7 Oct 2024 23:39:23 +0200
Subject: [PATCH 14/35] Use signals (GitDiffFilePanelComponent)

---
 .../git-diff-file-panel.component.html        | 22 ++---
 .../git-diff-file-panel.component.ts          | 84 +++++++++----------
 .../git-diff-report.component.html            |  4 +-
 .../git-diff-file-panel.component.spec.ts     | 84 +++++++++----------
 4 files changed, 96 insertions(+), 98 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
index cc8e6008e7a7..bb9245843140 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.html
@@ -1,13 +1,13 @@
 <div ngbAccordion [destroyOnHide]="false" class="git-diff-file-panel">
     <div ngbAccordionItem #fileDiffPanel="ngbAccordionItem" [collapsed]="false">
         <div ngbAccordionHeader class="d-flex align-items-center justify-content-between">
-            <jhi-git-diff-file-panel-title [modifiedFilePath]="filePath" [originalFilePath]="previousFilePath" />
+            <jhi-git-diff-file-panel-title [modifiedFilePath]="modifiedFilePath()" [originalFilePath]="originalFilePath()" />
             <div>
                 <jhi-git-diff-line-stat
-                    [addedLineCount]="addedLineCount"
-                    [removedLineCount]="removedLineCount"
+                    [addedLineCount]="addedLineCount()"
+                    [removedLineCount]="removedLineCount()"
                     ngbTooltip="{{
-                        (diffForTemplateAndSolution
+                        (diffForTemplateAndSolution()
                             ? 'artemisApp.programmingExercise.diffReport.lineStatTooltipFullReport'
                             : 'artemisApp.programmingExercise.diffReport.lineStatTooltipFullReportExamTimeline'
                         ) | artemisTranslate
@@ -21,13 +21,13 @@
         <div ngbAccordionCollapse>
             <div ngbAccordionBody>
                 <jhi-git-diff-file
-                    [allowSplitView]="allowSplitView"
-                    [diffForTemplateAndSolution]="diffForTemplateAndSolution"
-                    [diffEntries]="diffEntries"
-                    [originalFileContent]="templateFileContent"
-                    [originalFilePath]="previousFilePath"
-                    [modifiedFileContent]="solutionFileContent"
-                    [modifiedFilePath]="filePath"
+                    [allowSplitView]="allowSplitView()"
+                    [diffForTemplateAndSolution]="diffForTemplateAndSolution()"
+                    [diffEntries]="diffEntries()"
+                    [originalFileContent]="originalFileContent()"
+                    [originalFilePath]="originalFilePath()"
+                    [modifiedFileContent]="modifiedFileContent()"
+                    [modifiedFilePath]="modifiedFilePath()"
                     (onDiffReady)="onDiffReady.emit($event)"
                 />
             </div>
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
index 7f0df20b72a2..6057b91438ef 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
 import { GitDiffFilePanelTitleComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component';
@@ -15,51 +15,51 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [GitDiffFilePanelTitleComponent, GitDiffLineStatComponent, GitDiffFileComponent, ArtemisSharedModule],
 })
-export class GitDiffFilePanelComponent implements OnInit {
-    @Input() diffEntries: ProgrammingExerciseGitDiffEntry[];
+export class GitDiffFilePanelComponent {
+    diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
+    originalFileContent = input<string>();
+    modifiedFileContent = input<string>();
+    diffForTemplateAndSolution = input<boolean>(true);
+    allowSplitView = input<boolean>(true);
+    onDiffReady = output<boolean>();
 
-    @Input() templateFileContent: string | undefined;
-
-    @Input() solutionFileContent: string | undefined;
-
-    @Input() diffForTemplateAndSolution = true;
-
-    @Input() allowSplitView = true;
-
-    @Output() onDiffReady = new EventEmitter<boolean>();
-
-    previousFilePath: string | undefined;
-    filePath: string | undefined;
-
-    addedLineCount: number;
-    removedLineCount: number;
-
-    faAngleUp = faAngleUp;
-    faAngleDown = faAngleDown;
-
-    ngOnInit(): void {
-        this.filePath = this.diffEntries
+    originalFilePath = computed(() =>
+        this.diffEntries()
+            .map((entry) => entry.previousFilePath)
+            .filter((filePath) => filePath)
+            .first(),
+    );
+    modifiedFilePath = computed(() =>
+        this.diffEntries()
             .map((entry) => entry.filePath)
             .filter((filePath) => filePath)
-            .first();
+            .first(),
+    );
 
-        this.previousFilePath = this.diffEntries
-            .map((entry) => entry.previousFilePath)
-            .filter((filePath) => filePath)
-            .first();
+    addedLineCount = computed(
+        () =>
+            this.diffEntries()
+                .filter((entry) => entry && entry.filePath && entry.startLine && entry.lineCount)
+                .flatMap((entry) => {
+                    return this.modifiedFileContent()
+                        ?.split('\n')
+                        .slice(entry.startLine! - 1, entry.startLine! + entry.lineCount! - 1);
+                })
+                .filter((line) => line && line.trim().length !== 0).length,
+    );
 
-        this.addedLineCount = this.diffEntries
-            .filter((entry) => entry && entry.filePath && entry.startLine && entry.lineCount)
-            .flatMap((entry) => {
-                return this.solutionFileContent?.split('\n').slice(entry.startLine! - 1, entry.startLine! + entry.lineCount! - 1);
-            })
-            .filter((line) => line && line.trim().length !== 0).length;
+    removedLineCount = computed(
+        () =>
+            this.diffEntries()
+                .filter((entry) => entry && entry.previousFilePath && entry.previousStartLine && entry.previousLineCount)
+                .flatMap((entry) => {
+                    return this.originalFileContent()
+                        ?.split('\n')
+                        .slice(entry.previousStartLine! - 1, entry.previousStartLine! + entry.previousLineCount! - 1);
+                })
+                .filter((line) => line && line.trim().length !== 0).length,
+    );
 
-        this.removedLineCount = this.diffEntries
-            .filter((entry) => entry && entry.previousFilePath && entry.previousStartLine && entry.previousLineCount)
-            .flatMap((entry) => {
-                return this.templateFileContent?.split('\n').slice(entry.previousStartLine! - 1, entry.previousStartLine! + entry.previousLineCount! - 1);
-            })
-            .filter((line) => line && line.trim().length !== 0).length;
-    }
+    faAngleUp = faAngleUp;
+    faAngleDown = faAngleDown;
 }
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
index 9f6cfb6f1867..cc521a0d5ee1 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
@@ -70,8 +70,8 @@ <h4 class="ps-2">
                 [allowSplitView]="allowSplitView"
                 [diffForTemplateAndSolution]="diffForTemplateAndSolution"
                 [diffEntries]="diffInformation.entries"
-                [templateFileContent]="diffInformation.templateFileContent"
-                [solutionFileContent]="diffInformation.solutionFileContent"
+                [originalFileContent]="diffInformation.templateFileContent"
+                [modifiedFileContent]="diffInformation.solutionFileContent"
                 (onDiffReady)="onDiffReady(diffInformation.path, $event)"
             />
         </div>
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel.component.spec.ts
index d4938caea953..26627dba3e8f 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file-panel.component.spec.ts
@@ -1,29 +1,27 @@
 import { ArtemisTestModule } from '../../../test.module';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { GitDiffFilePanelComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component';
-import { DeleteButtonDirective } from 'app/shared/delete-dialog/delete-button.directive';
 import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem } from '@ng-bootstrap/ng-bootstrap';
 import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file.component';
 import { GitDiffFilePanelTitleComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component';
+import { MonacoDiffEditorComponent } from '../../../../../../main/webapp/app/shared/monaco-editor/monaco-diff-editor.component';
 
-describe('ProgrammingExerciseGitDiffFilePanel Component', () => {
+describe('GitDiffFilePanelComponent', () => {
     let comp: GitDiffFilePanelComponent;
     let fixture: ComponentFixture<GitDiffFilePanelComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule],
+            // TODO: We cannot mock GitDiffFileComponent because of https://github.com/help-me-mom/ng-mocks/issues/8634.
+            imports: [ArtemisTestModule, GitDiffFileComponent],
             declarations: [
                 GitDiffFilePanelComponent,
-                MockPipe(ArtemisTranslatePipe),
                 MockComponent(GitDiffFilePanelTitleComponent),
                 MockComponent(GitDiffLineStatComponent),
-                MockComponent(GitDiffFileComponent),
-                MockDirective(DeleteButtonDirective),
+                MockComponent(MonacoDiffEditorComponent),
                 MockDirective(NgbAccordionDirective),
                 MockDirective(NgbAccordionItem),
                 MockDirective(NgbAccordionHeader),
@@ -35,8 +33,8 @@ describe('ProgrammingExerciseGitDiffFilePanel Component', () => {
         }).compileComponents();
         fixture = TestBed.createComponent(GitDiffFilePanelComponent);
         comp = fixture.componentInstance;
-        comp.templateFileContent = 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16';
-        comp.solutionFileContent = 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16';
+        fixture.componentRef.setInput('originalFileContent', 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16');
+        fixture.componentRef.setInput('modifiedFileContent', 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16');
     });
 
     afterEach(() => {
@@ -44,21 +42,21 @@ describe('ProgrammingExerciseGitDiffFilePanel Component', () => {
     });
 
     it('Should extract file path', () => {
-        comp.diffEntries = [{ filePath: 'src/a.java', previousFilePath: 'src/b.java' }] as ProgrammingExerciseGitDiffEntry[];
-        comp.ngOnInit();
-        expect(comp.filePath).toBe('src/a.java');
-        expect(comp.previousFilePath).toBe('src/b.java');
+        fixture.componentRef.setInput('diffEntries', [{ filePath: 'src/a.java', previousFilePath: 'src/b.java' }] as ProgrammingExerciseGitDiffEntry[]);
+        fixture.detectChanges();
+        expect(comp.modifiedFilePath()).toBe('src/a.java');
+        expect(comp.originalFilePath()).toBe('src/b.java');
     });
 
     it('Should set added/removed lines to 1-0', () => {
-        comp.diffEntries = [{ filePath: 'src/a.java', startLine: 1, lineCount: 1 }] as ProgrammingExerciseGitDiffEntry[];
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(1);
-        expect(comp.removedLineCount).toBe(0);
+        fixture.componentRef.setInput('diffEntries', [{ filePath: 'src/a.java', startLine: 1, lineCount: 1 }] as ProgrammingExerciseGitDiffEntry[]);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(1);
+        expect(comp.removedLineCount()).toBe(0);
     });
 
     it('Should set added/removed lines to 4-1', () => {
-        comp.diffEntries = [
+        fixture.componentRef.setInput('diffEntries', [
             {
                 filePath: 'src/a.java',
                 previousFilePath: 'src/a.java',
@@ -67,14 +65,14 @@ describe('ProgrammingExerciseGitDiffFilePanel Component', () => {
                 previousStartLine: 5,
                 previousLineCount: 1,
             },
-        ] as ProgrammingExerciseGitDiffEntry[];
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(4);
-        expect(comp.removedLineCount).toBe(1);
+        ] as ProgrammingExerciseGitDiffEntry[]);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(4);
+        expect(comp.removedLineCount()).toBe(1);
     });
 
     it('Should set added/removed lines to 3-2', () => {
-        comp.diffEntries = [
+        fixture.componentRef.setInput('diffEntries', [
             {
                 filePath: 'src/a.java',
                 previousFilePath: 'src/a.java',
@@ -83,14 +81,14 @@ describe('ProgrammingExerciseGitDiffFilePanel Component', () => {
                 previousStartLine: 5,
                 previousLineCount: 2,
             },
-        ] as ProgrammingExerciseGitDiffEntry[];
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(3);
-        expect(comp.removedLineCount).toBe(2);
+        ] as ProgrammingExerciseGitDiffEntry[]);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(3);
+        expect(comp.removedLineCount()).toBe(2);
     });
 
     it('Should set added/removed lines to 2-3', () => {
-        comp.diffEntries = [
+        fixture.componentRef.setInput('diffEntries', [
             {
                 filePath: 'src/a.java',
                 previousFilePath: 'src/a.java',
@@ -99,14 +97,14 @@ describe('ProgrammingExerciseGitDiffFilePanel Component', () => {
                 previousStartLine: 5,
                 previousLineCount: 3,
             },
-        ] as ProgrammingExerciseGitDiffEntry[];
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(2);
-        expect(comp.removedLineCount).toBe(3);
+        ] as ProgrammingExerciseGitDiffEntry[]);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(2);
+        expect(comp.removedLineCount()).toBe(3);
     });
 
     it('Should set added/removed lines to 1-4', () => {
-        comp.diffEntries = [
+        fixture.componentRef.setInput('diffEntries', [
             {
                 filePath: 'src/a.java',
                 previousFilePath: 'src/a.java',
@@ -115,23 +113,23 @@ describe('ProgrammingExerciseGitDiffFilePanel Component', () => {
                 previousStartLine: 5,
                 previousLineCount: 4,
             },
-        ] as ProgrammingExerciseGitDiffEntry[];
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(1);
-        expect(comp.removedLineCount).toBe(4);
+        ] as ProgrammingExerciseGitDiffEntry[]);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(1);
+        expect(comp.removedLineCount()).toBe(4);
     });
 
     it('Should set added/removed lines to 0-1', () => {
-        comp.diffEntries = [
+        fixture.componentRef.setInput('diffEntries', [
             {
                 filePath: 'src/a.java',
                 previousFilePath: 'src/a.java',
                 previousStartLine: 1,
                 previousLineCount: 1,
             },
-        ] as ProgrammingExerciseGitDiffEntry[];
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(0);
-        expect(comp.removedLineCount).toBe(1);
+        ] as ProgrammingExerciseGitDiffEntry[]);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(0);
+        expect(comp.removedLineCount()).toBe(1);
     });
 });

From 36f456a14b281c50cad4920b6b5a1b0b4f112f47 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 00:20:10 +0200
Subject: [PATCH 15/35] Use signals (GitDiffReportComponent)

---
 .../git-diff-report.component.html            |  38 ++---
 .../git-diff-report.component.ts              | 155 +++++++++---------
 .../git-diff-report.component.spec.ts         | 113 ++++++-------
 3 files changed, 156 insertions(+), 150 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
index cc521a0d5ee1..59a89d59223a 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
@@ -1,18 +1,18 @@
 <div class="row border-bottom">
     <div class="col-6">
         <h4 class="ps-2">
-            @if (isRepositoryView && leftCommit) {
-                @if (diffForTemplateAndEmptyRepository) {
+            @if (isRepositoryView() && leftCommit()) {
+                @if (diffForTemplateAndEmptyRepository()) {
                     {{ 'artemisApp.programmingExercise.diffReport.emptyRepository' | artemisTranslate }}
                 } @else {
                     {{ 'artemisApp.programmingExercise.diffReport.previousCommit' | artemisTranslate }}
                     <span class="text-primary">
-                        {{ leftCommit }}
+                        {{ leftCommit() }}
                     </span>
                 }
             } @else {
                 {{
-                    (diffForTemplateAndSolution || !report.participationIdForLeftCommit
+                    (diffForTemplateAndSolution() || !report().participationIdForLeftCommit
                         ? 'artemisApp.programmingExercise.diffReport.template'
                         : 'artemisApp.programmingExercise.diffReport.previousSubmission'
                     ) | artemisTranslate
@@ -22,18 +22,18 @@ <h4 class="ps-2">
     </div>
     <div class="col-3">
         <h4 class="ps-2">
-            @if (isRepositoryView && rightCommit) {
-                @if (diffForTemplateAndEmptyRepository) {
+            @if (isRepositoryView() && rightCommit()) {
+                @if (diffForTemplateAndEmptyRepository()) {
                     {{ 'artemisApp.programmingExercise.diffReport.template' | artemisTranslate }}
                 } @else {
                     {{ 'artemisApp.programmingExercise.diffReport.currentCommit' | artemisTranslate }}
                     <span class="text-primary">
-                        {{ rightCommit }}
+                        {{ rightCommit() }}
                     </span>
                 }
             } @else {
                 {{
-                    (diffForTemplateAndSolution ? 'artemisApp.programmingExercise.diffReport.solution' : 'artemisApp.programmingExercise.diffReport.currentSubmission')
+                    (diffForTemplateAndSolution() ? 'artemisApp.programmingExercise.diffReport.solution' : 'artemisApp.programmingExercise.diffReport.currentSubmission')
                         | artemisTranslate
                 }}
             }
@@ -46,15 +46,15 @@ <h4 class="ps-2">
                 [btnSize]="ButtonSize.SMALL"
                 [icon]="faTableColumns"
                 tooltip="artemisApp.programmingExercise.diffReport.splitView.tooltip"
-                [title]="'artemisApp.programmingExercise.diffReport.splitView.' + (allowSplitView ? 'disable' : 'enable')"
-                (onClick)="allowSplitView = !allowSplitView"
+                [title]="'artemisApp.programmingExercise.diffReport.splitView.' + (allowSplitView() ? 'disable' : 'enable')"
+                (onClick)="allowSplitView.set(!allowSplitView())"
             />
             <jhi-git-diff-line-stat
                 class="mt-1 fw-bold"
-                [addedLineCount]="addedLineCount"
-                [removedLineCount]="removedLineCount"
+                [addedLineCount]="addedLineCount()"
+                [removedLineCount]="removedLineCount()"
                 ngbTooltip="{{
-                    (diffForTemplateAndSolution
+                    (diffForTemplateAndSolution()
                         ? 'artemisApp.programmingExercise.diffReport.lineStatTooltipFullReport'
                         : 'artemisApp.programmingExercise.diffReport.lineStatTooltipFullReportExamTimeline'
                     ) | artemisTranslate
@@ -63,12 +63,12 @@ <h4 class="ps-2">
         </div>
     </div>
 </div>
-<div [hidden]="!allDiffsReady">
-    @for (diffInformation of diffInformationForPaths; track diffInformation) {
+<div [hidden]="!allDiffsReady()">
+    @for (diffInformation of diffInformationForPaths(); track diffInformation) {
         <div class="mt-2">
             <jhi-git-diff-file-panel
-                [allowSplitView]="allowSplitView"
-                [diffForTemplateAndSolution]="diffForTemplateAndSolution"
+                [allowSplitView]="allowSplitView()"
+                [diffForTemplateAndSolution]="diffForTemplateAndSolution()"
                 [diffEntries]="diffInformation.entries"
                 [originalFileContent]="diffInformation.templateFileContent"
                 [modifiedFileContent]="diffInformation.solutionFileContent"
@@ -78,9 +78,9 @@ <h4 class="ps-2">
     }
 </div>
 <div class="d-flex w-100 justify-content-center align-items-center fs-4">
-    @if (nothingToDisplay) {
+    @if (nothingToDisplay()) {
         <div class="text-secondary mt-3" jhiTranslate="artemisApp.repository.commitHistory.commitDetails.empty"></div>
-    } @else if (!allDiffsReady) {
+    } @else if (!allDiffsReady()) {
         <div>
             <fa-icon [icon]="faSpinner" animation="spin" />
         </div>
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
index 361aa5cd6457..4a90652d865e 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, input, signal, untracked } from '@angular/core';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { faSpinner, faTableColumns } from '@fortawesome/free-solid-svg-icons';
@@ -23,48 +23,18 @@ interface DiffInformation {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [GitDiffLineStatComponent, ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffFilePanelComponent],
 })
-export class GitDiffReportComponent implements OnInit {
-    @Input() report: ProgrammingExerciseGitDiffReport;
-
-    @Input() templateFileContentByPath: Map<string, string>;
-
-    @Input() solutionFileContentByPath: Map<string, string>;
-
-    @Input() filePaths: string[];
-
-    @Input() diffForTemplateAndSolution = true;
-
-    @Input() diffForTemplateAndEmptyRepository = false;
-
-    @Input() isRepositoryView = false;
-
-    leftCommit: string | undefined;
-
-    rightCommit: string | undefined;
-
-    entries: ProgrammingExerciseGitDiffEntry[];
-    entriesByPath: Map<string, ProgrammingExerciseGitDiffEntry[]>;
-    addedLineCount: number;
-    removedLineCount: number;
-    diffInformationForPaths: DiffInformation[] = [];
-    allDiffsReady = false;
-    nothingToDisplay = false;
-    allowSplitView = true;
-    renamedFilePaths: { [before: string]: string | undefined } = {};
-
-    faSpinner = faSpinner;
-    faTableColumns = faTableColumns;
-
-    // Expose to template
-    protected readonly ButtonSize = ButtonSize;
-    protected readonly ButtonType = ButtonType;
-
-    constructor() {}
-
-    ngOnInit(): void {
-        // Sort the diff entries by file path and start lines
-        this.entries =
-            this.report.entries?.sort((a, b) => {
+export class GitDiffReportComponent {
+    report = input.required<ProgrammingExerciseGitDiffReport>();
+    templateFileContentByPath = input.required<Map<string, string>>();
+    solutionFileContentByPath = input.required<Map<string, string>>();
+    diffForTemplateAndSolution = input<boolean>(true);
+    diffForTemplateAndEmptyRepository = input<boolean>(false);
+    isRepositoryView = input<boolean>(false);
+
+    // TODO rename to sortedEntries
+    entries = computed(() => {
+        return (
+            this.report().entries?.sort((a, b) => {
                 const filePathA = a.filePath ?? a.previousFilePath ?? '';
                 const filePathB = b.filePath ?? b.previousFilePath ?? '';
                 if (filePathA < filePathB) {
@@ -74,65 +44,97 @@ export class GitDiffReportComponent implements OnInit {
                     return 1;
                 }
                 return (a.startLine ?? a.previousStartLine ?? 0) - (b.startLine ?? b.previousStartLine ?? 0);
-            }) ?? [];
-
-        this.addedLineCount = this.entries
+            }) ?? []
+        );
+    });
+    addedLineCount = computed(() => {
+        return this.entries()
             .flatMap((entry) => {
                 if (entry && entry.filePath && entry.startLine && entry.lineCount) {
-                    return this.solutionFileContentByPath
+                    return this.solutionFileContentByPath()
                         .get(entry.filePath)
                         ?.split('\n')
                         .slice(entry.startLine - 1, entry.startLine + entry.lineCount - 1);
                 }
             })
             .filter((line) => line && line.trim().length !== 0).length;
+    });
 
-        this.removedLineCount = this.entries
+    removedLineCount = computed(() => {
+        return this.entries()
             .flatMap((entry) => {
                 if (entry && entry.previousFilePath && entry.previousStartLine && entry.previousLineCount) {
-                    return this.templateFileContentByPath
+                    return this.templateFileContentByPath()
                         .get(entry.previousFilePath!)
                         ?.split('\n')
                         .slice(entry.previousStartLine - 1, entry.previousStartLine + entry.previousLineCount - 1);
                 }
             })
             .filter((line) => line && line.trim().length !== 0).length;
+    });
 
-        // Create a set of all file paths
-        this.filePaths = [...new Set([...this.templateFileContentByPath.keys(), ...this.solutionFileContentByPath.keys()])].sort();
-        // Track renamed files
-        this.entries.forEach((entry) => {
+    filePaths = computed(() => {
+        return [...new Set([...this.templateFileContentByPath().keys(), ...this.solutionFileContentByPath().keys()])].sort();
+    });
+
+    renamedFilePaths = computed(() => {
+        const renamedFilePaths: { [before: string]: string | undefined } = {};
+        this.entries().forEach((entry) => {
             // Accounts only for files that have existed in the original and the modified version, but under different names
             if (entry.filePath && entry.previousFilePath && entry.filePath !== entry.previousFilePath) {
-                this.renamedFilePaths[entry.filePath] = entry.previousFilePath;
+                renamedFilePaths[entry.filePath] = entry.previousFilePath;
             }
         });
-        // Group the diff entries by file path
-        this.entriesByPath = new Map<string, ProgrammingExerciseGitDiffEntry[]>();
-        [...this.templateFileContentByPath.keys()].forEach((filePath) => {
-            this.entriesByPath.set(
+        return renamedFilePaths;
+    });
+
+    entriesByPath = computed(() => {
+        const entriesByPath = new Map<string, ProgrammingExerciseGitDiffEntry[]>();
+        this.filePaths().forEach((filePath) => {
+            entriesByPath.set(
                 filePath,
-                this.entries.filter((entry) => entry.previousFilePath === filePath && !entry.filePath),
+                this.entries().filter((entry) => entry.previousFilePath === filePath && !entry.filePath),
             );
         });
-        [...this.solutionFileContentByPath.keys()].forEach((filePath) => {
-            this.entriesByPath.set(
+        this.filePaths().forEach((filePath) => {
+            entriesByPath.set(
                 filePath,
-                this.entries.filter((entry) => entry.filePath === filePath),
+                this.entries().filter((entry) => entry.filePath === filePath),
             );
         });
-        this.leftCommit = this.report.leftCommitHash?.substring(0, 10);
-        this.rightCommit = this.report.rightCommitHash?.substring(0, 10);
-        this.diffInformationForPaths = this.filePaths
-            .filter((path) => this.entriesByPath.get(path)?.length)
-            .map((path) => {
-                // entries is not undefined due to the filter
-                const entries = this.entriesByPath.get(path)!;
-                const templateFileContent = this.templateFileContentByPath.get(this.renamedFilePaths[path] ?? path);
-                const solutionFileContent = this.solutionFileContentByPath.get(path);
-                return { path, entries, templateFileContent, solutionFileContent, diffReady: false };
+        return entriesByPath;
+    });
+
+    leftCommit = computed(() => this.report().leftCommitHash?.substring(0, 10));
+    rightCommit = computed(() => this.report().rightCommitHash?.substring(0, 10));
+    diffInformationForPaths = signal<DiffInformation[]>([]);
+    nothingToDisplay = computed(() => this.diffInformationForPaths().length === 0);
+    allDiffsReady = computed(() => Object.values(this.diffInformationForPaths()).every((info) => info.diffReady));
+    allowSplitView = signal<boolean>(true);
+
+    faSpinner = faSpinner;
+    faTableColumns = faTableColumns;
+
+    // Expose to template
+    protected readonly ButtonSize = ButtonSize;
+    protected readonly ButtonType = ButtonType;
+
+    constructor() {
+        effect(() => {
+            untracked(() => {
+                this.diffInformationForPaths.set(
+                    this.filePaths()
+                        .filter((path) => this.entriesByPath().get(path)?.length)
+                        .map((path) => {
+                            // entries is not undefined due to the filter above
+                            const entries = this.entriesByPath().get(path)!;
+                            const templateFileContent = this.templateFileContentByPath().get(this.renamedFilePaths()[path] ?? path);
+                            const solutionFileContent = this.solutionFileContentByPath().get(path);
+                            return { path, entries, templateFileContent, solutionFileContent, diffReady: false };
+                        }),
+                );
             });
-        this.nothingToDisplay = this.diffInformationForPaths.length === 0;
+        });
     }
 
     /**
@@ -142,10 +144,11 @@ export class GitDiffReportComponent implements OnInit {
      * @param ready Whether the diff is ready to be displayed or not.
      */
     onDiffReady(path: string, ready: boolean) {
-        const index = this.diffInformationForPaths.findIndex((info) => info.path === path);
+        const diffInformation = [...this.diffInformationForPaths()];
+        const index = diffInformation.findIndex((info) => info.path === path);
         if (index !== -1) {
-            this.diffInformationForPaths[index].diffReady = ready;
-            this.allDiffsReady = Object.values(this.diffInformationForPaths).every((info) => info.diffReady);
+            diffInformation[index].diffReady = ready;
+            this.diffInformationForPaths.set(diffInformation);
         } else {
             console.error(`Received diff ready event for unknown path: ${path}`);
         }
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts
index 18614f41c481..551fae0b6e62 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts
@@ -8,7 +8,6 @@ import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programmin
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { NgbTooltipMocksModule } from '../../../helpers/mocks/directive/ngbTooltipMocks.module';
 import { GitDiffFilePanelComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component';
-import { ButtonComponent } from 'app/shared/components/button.component';
 
 describe('ProgrammingExerciseGitDiffReport Component', () => {
     let comp: GitDiffReportComponent;
@@ -17,19 +16,19 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, NgbTooltipMocksModule],
-            declarations: [
-                GitDiffReportComponent,
-                MockComponent(ButtonComponent),
-                MockPipe(ArtemisTranslatePipe),
-                MockComponent(GitDiffFilePanelComponent),
-                MockComponent(GitDiffLineStatComponent),
-            ],
+            declarations: [GitDiffReportComponent, MockPipe(ArtemisTranslatePipe), MockComponent(GitDiffFilePanelComponent), MockComponent(GitDiffLineStatComponent)],
             providers: [],
         }).compileComponents();
         fixture = TestBed.createComponent(GitDiffReportComponent);
         comp = fixture.componentInstance;
-        comp.templateFileContentByPath = new Map<string, string>([['src/a.java', 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16']]);
-        comp.solutionFileContentByPath = new Map<string, string>([['src/a.java', 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16']]);
+        fixture.componentRef.setInput(
+            'templateFileContentByPath',
+            new Map<string, string>([['src/a.java', 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16']]),
+        );
+        fixture.componentRef.setInput(
+            'solutionFileContentByPath',
+            new Map<string, string>([['src/a.java', 'L1\nL2\nL3\nL4\nL5\nL6\nL7\nL8\nL9\nL10\nL11\nL12\nL13\nL14\nL15\nL16']]),
+        );
     });
 
     afterEach(() => {
@@ -55,18 +54,18 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
             { filePath: 'src/b.java', startLine: 2 },
         ] as ProgrammingExerciseGitDiffEntry[];
 
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.entries).toStrictEqual(expectedEntries);
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        expect(comp.entries()).toStrictEqual(expectedEntries);
     });
 
     it('Should set added/removed lines to 1-0', () => {
         const entries = [{ filePath: 'src/a.java', previousFilePath: 'src/a.java', startLine: 1, lineCount: 1 }] as ProgrammingExerciseGitDiffEntry[];
 
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(1);
-        expect(comp.removedLineCount).toBe(0);
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(1);
+        expect(comp.removedLineCount()).toBe(0);
     });
 
     it('Should set added/removed lines to 4-1', () => {
@@ -81,10 +80,10 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
             },
         ] as ProgrammingExerciseGitDiffEntry[];
 
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(4);
-        expect(comp.removedLineCount).toBe(1);
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(4);
+        expect(comp.removedLineCount()).toBe(1);
     });
 
     it('Should set added/removed lines to 3-2', () => {
@@ -99,10 +98,10 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
             },
         ] as ProgrammingExerciseGitDiffEntry[];
 
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(3);
-        expect(comp.removedLineCount).toBe(2);
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(3);
+        expect(comp.removedLineCount()).toBe(2);
     });
 
     it('Should set added/removed lines to 2-3', () => {
@@ -117,10 +116,10 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
             },
         ] as ProgrammingExerciseGitDiffEntry[];
 
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(2);
-        expect(comp.removedLineCount).toBe(3);
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(2);
+        expect(comp.removedLineCount()).toBe(3);
     });
 
     it('Should set added/removed lines to 1-4', () => {
@@ -135,19 +134,19 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
             },
         ] as ProgrammingExerciseGitDiffEntry[];
 
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(1);
-        expect(comp.removedLineCount).toBe(4);
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(1);
+        expect(comp.removedLineCount()).toBe(4);
     });
 
     it('Should set added/removed lines to 0-1', () => {
         const entries = [{ filePath: 'src/a.java', previousFilePath: 'src/a.java', previousStartLine: 1, previousLineCount: 1 }] as ProgrammingExerciseGitDiffEntry[];
 
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.addedLineCount).toBe(0);
-        expect(comp.removedLineCount).toBe(1);
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        expect(comp.addedLineCount()).toBe(0);
+        expect(comp.removedLineCount()).toBe(1);
     });
 
     it('should record for each path whether the diff is ready', () => {
@@ -161,26 +160,30 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
             { filePath: 'src/b.java', startLine: 2 },
             { filePath: 'src/a.java', startLine: 1 },
         ];
-        comp.solutionFileContentByPath = new Map<string, string>();
-        comp.solutionFileContentByPath.set(filePath1, 'some file content');
-        comp.solutionFileContentByPath.set(filePath2, 'some other file content');
-        comp.templateFileContentByPath = comp.solutionFileContentByPath;
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
+        fixture.componentRef.setInput(
+            'solutionFileContentByPath',
+            new Map<string, string>([
+                ['src/a.java', 'some file content'],
+                ['src/b.java', 'some other file content'],
+            ]),
+        );
+        fixture.componentRef.setInput('templateFileContentByPath', comp.solutionFileContentByPath());
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
         fixture.detectChanges();
         // Initialization
-        expect(comp.allDiffsReady).toBeFalse();
-        expect(comp.diffInformationForPaths[0].diffReady).toBeFalse();
-        expect(comp.diffInformationForPaths[1].diffReady).toBeFalse();
+        expect(comp.allDiffsReady()).toBeFalse();
+        expect(comp.diffInformationForPaths()[0].diffReady).toBeFalse();
+        expect(comp.diffInformationForPaths()[1].diffReady).toBeFalse();
         // First file ready
         comp.onDiffReady(filePath1, true);
-        expect(comp.allDiffsReady).toBeFalse();
-        expect(comp.diffInformationForPaths[0].diffReady).toBeTrue();
-        expect(comp.diffInformationForPaths[1].diffReady).toBeFalse();
+        expect(comp.allDiffsReady()).toBeFalse();
+        expect(comp.diffInformationForPaths()[0].diffReady).toBeTrue();
+        expect(comp.diffInformationForPaths()[1].diffReady).toBeFalse();
         // Second file ready
         comp.onDiffReady(filePath2, true);
-        expect(comp.allDiffsReady).toBeTrue();
-        expect(comp.diffInformationForPaths[0].diffReady).toBeTrue();
-        expect(comp.diffInformationForPaths[1].diffReady).toBeTrue();
+        expect(comp.allDiffsReady()).toBeTrue();
+        expect(comp.diffInformationForPaths()[0].diffReady).toBeTrue();
+        expect(comp.diffInformationForPaths()[1].diffReady).toBeTrue();
     });
 
     it('should correctly identify renamed files', () => {
@@ -196,18 +199,18 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
         ];
         const defaultContent = 'some content that might change';
         const modifiedContent = 'some content that has changed';
-        comp.report = { entries } as ProgrammingExerciseGitDiffReport;
+        fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
         const originalFileContents = new Map<string, string>();
         const modifiedFileContents = new Map<string, string>();
         [originalFilePath1, originalFilePath2, notRenamedFilePath].forEach((path) => {
             originalFileContents.set(path, defaultContent);
             modifiedFileContents.set(path, path === originalFilePath1 ? defaultContent : modifiedContent);
         });
-        comp.templateFileContentByPath = originalFileContents;
-        comp.solutionFileContentByPath = modifiedFileContents;
+        fixture.componentRef.setInput('templateFileContentByPath', originalFileContents);
+        fixture.componentRef.setInput('solutionFileContentByPath', modifiedFileContents);
 
         fixture.detectChanges();
 
-        expect(comp.renamedFilePaths).toEqual({ [renamedFilePath1]: originalFilePath1, [renamedFilePath2]: originalFilePath2 });
+        expect(comp.renamedFilePaths()).toEqual({ [renamedFilePath1]: originalFilePath1, [renamedFilePath2]: originalFilePath2 });
     });
 });

From 47177a7298096f4ef82d83e6824f217bc3a0b957 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 00:26:02 +0200
Subject: [PATCH 16/35] Use inject in Modal

---
 .../git-diff-report-modal.component.ts             | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 8cbf96dcf069..0b0ace88c21e 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
@@ -29,12 +29,12 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
     private participationRepoFilesAtLeftCommitSubscription: Subscription;
     private participationRepoFilesAtRightCommitSubscription: Subscription;
 
-    constructor(
-        protected activeModal: NgbActiveModal,
-        private programmingExerciseService: ProgrammingExerciseService,
-        private programmingExerciseParticipationService: ProgrammingExerciseParticipationService,
-        private cachedRepositoryFilesService: CachedRepositoryFilesService,
-    ) {}
+    private readonly activeModal = inject(NgbActiveModal);
+    private readonly programmingExerciseService = inject(ProgrammingExerciseService);
+    private readonly programmingExerciseParticipationService = inject(ProgrammingExerciseParticipationService);
+    private readonly cachedRepositoryFilesService = inject(CachedRepositoryFilesService);
+
+    constructor() {}
 
     ngOnInit(): void {
         if (this.diffForTemplateAndSolution) {

From 768ca8dd754ba8c09ad92690637f35cdc5877387 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 10:26:14 +0200
Subject: [PATCH 17/35] Make signals readonly

---
 .../git-diff-file-panel-title.component.ts    | 11 ++--
 .../git-diff-file-panel.component.ts          | 25 ++++-----
 .../git-diff-file.component.ts                | 22 ++++----
 .../git-diff-line-stat.component.ts           | 13 +++--
 .../git-diff-report.component.ts              | 52 +++++++++----------
 .../git-diff-report.component.spec.ts         |  2 +-
 6 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
index ce32d21ac4f4..74b0f35dfab0 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component.ts
@@ -17,13 +17,12 @@ enum FileStatus {
     imports: [TranslateDirective, CommonModule],
 })
 export class GitDiffFilePanelTitleComponent {
-    originalFilePath = input<string>();
-    modifiedFilePath = input<string>();
+    readonly originalFilePath = input<string>();
+    readonly modifiedFilePath = input<string>();
 
-    titleAndFileStatus = computed(() => this.getTitleAndFileStatus());
-
-    title = computed(() => this.titleAndFileStatus().title);
-    fileStatus = computed(() => this.titleAndFileStatus().fileStatus);
+    readonly titleAndFileStatus = computed(() => this.getTitleAndFileStatus());
+    readonly title = computed(() => this.titleAndFileStatus().title);
+    readonly fileStatus = computed(() => this.titleAndFileStatus().fileStatus);
 
     protected readonly FileStatus = FileStatus;
 
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
index 6057b91438ef..40ed428310be 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
@@ -16,27 +16,28 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
     imports: [GitDiffFilePanelTitleComponent, GitDiffLineStatComponent, GitDiffFileComponent, ArtemisSharedModule],
 })
 export class GitDiffFilePanelComponent {
-    diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
-    originalFileContent = input<string>();
-    modifiedFileContent = input<string>();
-    diffForTemplateAndSolution = input<boolean>(true);
-    allowSplitView = input<boolean>(true);
-    onDiffReady = output<boolean>();
+    readonly diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
+    readonly originalFileContent = input<string>();
+    readonly modifiedFileContent = input<string>();
+    readonly diffForTemplateAndSolution = input<boolean>(true);
+    readonly allowSplitView = input<boolean>(true);
+    readonly onDiffReady = output<boolean>();
 
-    originalFilePath = computed(() =>
+    readonly originalFilePath = computed(() =>
         this.diffEntries()
             .map((entry) => entry.previousFilePath)
             .filter((filePath) => filePath)
             .first(),
     );
-    modifiedFilePath = computed(() =>
+
+    readonly modifiedFilePath = computed(() =>
         this.diffEntries()
             .map((entry) => entry.filePath)
             .filter((filePath) => filePath)
             .first(),
     );
 
-    addedLineCount = computed(
+    readonly addedLineCount = computed(
         () =>
             this.diffEntries()
                 .filter((entry) => entry && entry.filePath && entry.startLine && entry.lineCount)
@@ -48,7 +49,7 @@ export class GitDiffFilePanelComponent {
                 .filter((line) => line && line.trim().length !== 0).length,
     );
 
-    removedLineCount = computed(
+    readonly removedLineCount = computed(
         () =>
             this.diffEntries()
                 .filter((entry) => entry && entry.previousFilePath && entry.previousStartLine && entry.previousLineCount)
@@ -60,6 +61,6 @@ export class GitDiffFilePanelComponent {
                 .filter((line) => line && line.trim().length !== 0).length,
     );
 
-    faAngleUp = faAngleUp;
-    faAngleDown = faAngleDown;
+    protected readonly faAngleUp = faAngleUp;
+    protected readonly faAngleDown = faAngleDown;
 }
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
index 1b07c6c720a7..52f31444a6b2 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
@@ -11,18 +11,16 @@ import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-
     imports: [MonacoDiffEditorComponent],
 })
 export class GitDiffFileComponent {
-    monacoDiffEditor = viewChild.required(MonacoDiffEditorComponent);
-
-    diffForTemplateAndSolution = input<boolean>(false);
-    diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
-    originalFileContent = input<string>();
-    originalFilePath = input<string>();
-    modifiedFileContent = input<string>();
-    modifiedFilePath = input<string>();
-    allowSplitView = input<boolean>(true);
-    onDiffReady = output<boolean>();
-
-    fileUnchanged = computed(() => this.originalFileContent() === this.modifiedFileContent());
+    readonly monacoDiffEditor = viewChild.required(MonacoDiffEditorComponent);
+    readonly diffForTemplateAndSolution = input<boolean>(false);
+    readonly diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
+    readonly originalFileContent = input<string>();
+    readonly originalFilePath = input<string>();
+    readonly modifiedFileContent = input<string>();
+    readonly modifiedFilePath = input<string>();
+    readonly allowSplitView = input<boolean>(true);
+    readonly onDiffReady = output<boolean>();
+    readonly fileUnchanged = computed(() => this.originalFileContent() === this.modifiedFileContent());
 
     constructor() {
         effect(() => {
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
index e4595b5d1296..b82ab8d02c02 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component.ts
@@ -8,14 +8,13 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GitDiffLineStatComponent {
-    addedLineCount = input<number>(0);
-    removedLineCount = input<number>(0);
+    readonly addedLineCount = input<number>(0);
+    readonly removedLineCount = input<number>(0);
+    readonly squareCounts = computed(() => this.getSquareCounts());
+    readonly addedSquareArray = computed(() => Array.from({ length: this.squareCounts().addedSquareCount }));
+    readonly removedSquareArray = computed(() => Array.from({ length: this.squareCounts().removedSquareCount }));
 
-    squareCounts = computed(() => this.getSquareCounts());
-    addedSquareArray = computed(() => Array.from({ length: this.squareCounts().addedSquareCount }));
-    removedSquareArray = computed(() => Array.from({ length: this.squareCounts().removedSquareCount }));
-
-    getSquareCounts(): { addedSquareCount: number; removedSquareCount: number } {
+    private getSquareCounts(): { addedSquareCount: number; removedSquareCount: number } {
         const addedLineCount = this.addedLineCount();
         const removedLineCount = this.removedLineCount();
         if (!addedLineCount && !removedLineCount) {
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
index 4a90652d865e..00a407ab4417 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
@@ -24,15 +24,14 @@ interface DiffInformation {
     imports: [GitDiffLineStatComponent, ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffFilePanelComponent],
 })
 export class GitDiffReportComponent {
-    report = input.required<ProgrammingExerciseGitDiffReport>();
-    templateFileContentByPath = input.required<Map<string, string>>();
-    solutionFileContentByPath = input.required<Map<string, string>>();
-    diffForTemplateAndSolution = input<boolean>(true);
-    diffForTemplateAndEmptyRepository = input<boolean>(false);
-    isRepositoryView = input<boolean>(false);
+    readonly report = input.required<ProgrammingExerciseGitDiffReport>();
+    readonly templateFileContentByPath = input.required<Map<string, string>>();
+    readonly solutionFileContentByPath = input.required<Map<string, string>>();
+    readonly diffForTemplateAndSolution = input<boolean>(true);
+    readonly diffForTemplateAndEmptyRepository = input<boolean>(false);
+    readonly isRepositoryView = input<boolean>(false);
 
-    // TODO rename to sortedEntries
-    entries = computed(() => {
+    readonly sortedEntries = computed(() => {
         return (
             this.report().entries?.sort((a, b) => {
                 const filePathA = a.filePath ?? a.previousFilePath ?? '';
@@ -47,8 +46,9 @@ export class GitDiffReportComponent {
             }) ?? []
         );
     });
-    addedLineCount = computed(() => {
-        return this.entries()
+
+    readonly addedLineCount = computed(() => {
+        return this.sortedEntries()
             .flatMap((entry) => {
                 if (entry && entry.filePath && entry.startLine && entry.lineCount) {
                     return this.solutionFileContentByPath()
@@ -60,8 +60,8 @@ export class GitDiffReportComponent {
             .filter((line) => line && line.trim().length !== 0).length;
     });
 
-    removedLineCount = computed(() => {
-        return this.entries()
+    readonly removedLineCount = computed(() => {
+        return this.sortedEntries()
             .flatMap((entry) => {
                 if (entry && entry.previousFilePath && entry.previousStartLine && entry.previousLineCount) {
                     return this.templateFileContentByPath()
@@ -73,13 +73,13 @@ export class GitDiffReportComponent {
             .filter((line) => line && line.trim().length !== 0).length;
     });
 
-    filePaths = computed(() => {
+    readonly filePaths = computed(() => {
         return [...new Set([...this.templateFileContentByPath().keys(), ...this.solutionFileContentByPath().keys()])].sort();
     });
 
-    renamedFilePaths = computed(() => {
+    readonly renamedFilePaths = computed(() => {
         const renamedFilePaths: { [before: string]: string | undefined } = {};
-        this.entries().forEach((entry) => {
+        this.sortedEntries().forEach((entry) => {
             // Accounts only for files that have existed in the original and the modified version, but under different names
             if (entry.filePath && entry.previousFilePath && entry.filePath !== entry.previousFilePath) {
                 renamedFilePaths[entry.filePath] = entry.previousFilePath;
@@ -88,32 +88,32 @@ export class GitDiffReportComponent {
         return renamedFilePaths;
     });
 
-    entriesByPath = computed(() => {
+    readonly entriesByPath = computed(() => {
         const entriesByPath = new Map<string, ProgrammingExerciseGitDiffEntry[]>();
         this.filePaths().forEach((filePath) => {
             entriesByPath.set(
                 filePath,
-                this.entries().filter((entry) => entry.previousFilePath === filePath && !entry.filePath),
+                this.sortedEntries().filter((entry) => entry.previousFilePath === filePath && !entry.filePath),
             );
         });
         this.filePaths().forEach((filePath) => {
             entriesByPath.set(
                 filePath,
-                this.entries().filter((entry) => entry.filePath === filePath),
+                this.sortedEntries().filter((entry) => entry.filePath === filePath),
             );
         });
         return entriesByPath;
     });
 
-    leftCommit = computed(() => this.report().leftCommitHash?.substring(0, 10));
-    rightCommit = computed(() => this.report().rightCommitHash?.substring(0, 10));
-    diffInformationForPaths = signal<DiffInformation[]>([]);
-    nothingToDisplay = computed(() => this.diffInformationForPaths().length === 0);
-    allDiffsReady = computed(() => Object.values(this.diffInformationForPaths()).every((info) => info.diffReady));
-    allowSplitView = signal<boolean>(true);
+    readonly leftCommit = computed(() => this.report().leftCommitHash?.substring(0, 10));
+    readonly rightCommit = computed(() => this.report().rightCommitHash?.substring(0, 10));
+    readonly diffInformationForPaths = signal<DiffInformation[]>([]);
+    readonly nothingToDisplay = computed(() => this.diffInformationForPaths().length === 0);
+    readonly allDiffsReady = computed(() => Object.values(this.diffInformationForPaths()).every((info) => info.diffReady));
+    readonly allowSplitView = signal<boolean>(true);
 
-    faSpinner = faSpinner;
-    faTableColumns = faTableColumns;
+    protected readonly faSpinner = faSpinner;
+    protected readonly faTableColumns = faTableColumns;
 
     // Expose to template
     protected readonly ButtonSize = ButtonSize;
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts
index 551fae0b6e62..143c150edc57 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-report.component.spec.ts
@@ -56,7 +56,7 @@ describe('ProgrammingExerciseGitDiffReport Component', () => {
 
         fixture.componentRef.setInput('report', { entries } as ProgrammingExerciseGitDiffReport);
         fixture.detectChanges();
-        expect(comp.entries()).toStrictEqual(expectedEntries);
+        expect(comp.sortedEntries()).toStrictEqual(expectedEntries);
     });
 
     it('Should set added/removed lines to 1-0', () => {

From 70d9f7a3e2d63162eb954185e4a10546aa9b1ef0 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 20:51:21 +0200
Subject: [PATCH 18/35] wip modal

---
 ...rogramming-diff-report-detail.component.ts |   4 +-
 ...rogramming-exercise-exam-diff.component.ts |   8 +-
 .../git-diff-report-modal.component.html      |  25 +--
 .../git-diff-report-modal.component.ts        | 205 +++++++++---------
 .../git-diff-modal.component.spec.ts          | 103 ++++-----
 5 files changed, 174 insertions(+), 171 deletions(-)

diff --git a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
index 68f4ba678f02..7fa944f0437e 100644
--- a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
+++ b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, inject } from '@angular/core';
+import { Component, Input, OnDestroy, inject, signal } from '@angular/core';
 import type { ProgrammingDiffReportDetail } from 'app/detail-overview-list/detail.model';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
 import { ButtonSize, ButtonType, TooltipPlacement } from 'app/shared/components/button.component';
@@ -39,6 +39,6 @@ export class ProgrammingDiffReportDetailComponent implements OnDestroy {
         }
 
         this.modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
-        this.modalRef.componentInstance.report = gitDiff;
+        this.modalRef.componentInstance.report = signal<ProgrammingExerciseGitDiffReport>(gitDiff);
     }
 }
diff --git a/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts b/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
index 7eafe4900d96..6e4b6185bbad 100644
--- a/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
+++ b/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core';
 import { ProgrammingExercise } from 'app/entities/programming/programming-exercise.model';
 import { ProgrammingSubmission } from 'app/entities/programming/programming-submission.model';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
@@ -124,9 +124,9 @@ export class ProgrammingExerciseExamDiffComponent extends ExamPageComponent impl
      */
     showGitDiff(): void {
         const modalRef = this.modalService.open(GitDiffReportModalComponent, { size: 'xl' });
-        modalRef.componentInstance.report = this.exercise.gitDiffReport;
-        modalRef.componentInstance.diffForTemplateAndSolution = false;
-        modalRef.componentInstance.cachedRepositoryFiles = this.cachedRepositoryFiles;
+        modalRef.componentInstance.report = signal(this.exercise.gitDiffReport);
+        modalRef.componentInstance.diffForTemplateAndSolution = signal(false);
+        modalRef.componentInstance.cachedRepositoryFiles = signal(this.cachedRepositoryFiles);
         this.cachedRepositoryFilesService.getCachedRepositoryFilesObservable().subscribe((cachedRepositoryFiles) => {
             this.cachedRepositoryFiles = cachedRepositoryFiles;
         });
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html
index 198b27469831..6b95cf90f178 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html
@@ -2,22 +2,22 @@
     <div class="modal-header">
         <h3
             class="modal-title"
-            jhiTranslate="{{ diffForTemplateAndSolution ? 'artemisApp.programmingExercise.diffReport.title' : 'artemisApp.programmingExercise.diffReport.titleForSubmissions' }}"
+            jhiTranslate="{{ diffForTemplateAndSolution() ? 'artemisApp.programmingExercise.diffReport.title' : 'artemisApp.programmingExercise.diffReport.titleForSubmissions' }}"
         ></h3>
         <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
     </div>
     <div class="modal-body">
-        @if (leftCommitFileContentByPath && rightCommitFileContentByPath) {
+        @if (leftCommitFileContentByPath() && rightCommitFileContentByPath()) {
             <div class="row mb-2">
                 <jhi-git-diff-report
-                    [report]="report"
-                    [diffForTemplateAndSolution]="diffForTemplateAndSolution"
-                    [templateFileContentByPath]="leftCommitFileContentByPath"
-                    [solutionFileContentByPath]="rightCommitFileContentByPath"
+                    [report]="report()"
+                    [diffForTemplateAndSolution]="diffForTemplateAndSolution()"
+                    [templateFileContentByPath]="leftCommitFileContentByPath()!"
+                    [solutionFileContentByPath]="rightCommitFileContentByPath()!"
                 />
             </div>
         } @else {
-            @if (!errorWhileFetchingRepos) {
+            @if (!errorWhileFetchingRepos()) {
                 <div class="text-center">
                     <span class="spinner-border spinner-border-lg" role="status" aria-hidden="true">
                         <span class="sr-only">Loading...</span>
@@ -25,16 +25,7 @@
                 </div>
             }
         }
-        <ng-template #spinner>
-            @if (!errorWhileFetchingRepos) {
-                <div class="text-center">
-                    <span class="spinner-border spinner-border-lg" role="status" aria-hidden="true">
-                        <span class="sr-only">Loading...</span>
-                    </span>
-                </div>
-            }
-        </ng-template>
-        @if (errorWhileFetchingRepos) {
+        @if (errorWhileFetchingRepos()) {
             <div>
                 <div class="alert alert-danger">
                     <div jhiTranslate="artemisApp.programmingExercise.diffReport.errorWhileFetchingRepos"></div>
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 0b0ace88c21e..17a026c088a1 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, effect, inject, input, signal, untracked } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
 import { ProgrammingExerciseParticipationService } from 'app/exercises/programming/manage/services/programming-exercise-participation.service';
 import { CachedRepositoryFilesService } from 'app/exercises/programming/manage/services/cached-repository-files.service';
-import { Subscription } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 
@@ -15,135 +15,142 @@ import { TranslateDirective } from 'app/shared/language/translate.directive';
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [GitDiffReportComponent, TranslateDirective],
 })
-export class GitDiffReportModalComponent implements OnInit, OnDestroy {
-    @Input() report: ProgrammingExerciseGitDiffReport;
-    @Input() diffForTemplateAndSolution = true;
-    @Input() cachedRepositoryFiles: Map<string, Map<string, string>> = new Map<string, Map<string, string>>();
-
-    errorWhileFetchingRepos = false;
-    leftCommitFileContentByPath: Map<string, string>;
-    rightCommitFileContentByPath: Map<string, string>;
-
-    private templateRepoFilesSubscription: Subscription;
-    private solutionRepoFilesSubscription: Subscription;
-    private participationRepoFilesAtLeftCommitSubscription: Subscription;
-    private participationRepoFilesAtRightCommitSubscription: Subscription;
-
+export class GitDiffReportModalComponent implements OnInit {
     private readonly activeModal = inject(NgbActiveModal);
     private readonly programmingExerciseService = inject(ProgrammingExerciseService);
     private readonly programmingExerciseParticipationService = inject(ProgrammingExerciseParticipationService);
     private readonly cachedRepositoryFilesService = inject(CachedRepositoryFilesService);
 
-    constructor() {}
+    readonly report = input.required<ProgrammingExerciseGitDiffReport>();
+    readonly diffForTemplateAndSolution = input<boolean>(true);
+    readonly cachedRepositoryFiles = input<Map<string, Map<string, string>>>(new Map<string, Map<string, string>>());
+    readonly onFilesLoaded = new EventEmitter<void>();
+
+    readonly errorWhileFetchingRepos = signal<boolean>(false);
+    readonly leftCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
+    readonly rightCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
+
+    constructor() {
+        effect(
+            async () => {
+                if (this.diffForTemplateAndSolution()) {
+                    await this.loadFilesForTemplateAndSolution();
+                } else {
+                    await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
+                }
+                this.onFilesLoaded.emit();
+            },
+            { allowSignalWrites: true },
+        );
+    }
 
-    ngOnInit(): void {
-        if (this.diffForTemplateAndSolution) {
-            this.loadFilesForTemplateAndSolution();
-        } else {
-            this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
-        }
+    async ngOnInit() {
+        this.onFilesLoaded.emit();
     }
 
-    ngOnDestroy(): void {
-        this.templateRepoFilesSubscription?.unsubscribe();
-        this.solutionRepoFilesSubscription?.unsubscribe();
-        this.participationRepoFilesAtLeftCommitSubscription?.unsubscribe();
-        this.participationRepoFilesAtRightCommitSubscription?.unsubscribe();
+    private async loadFilesForTemplateAndSolution() {
+        await Promise.all([this.fetchSolutionRepoFiles(), this.fetchTemplateRepoFiles()]);
     }
 
-    private loadFilesForTemplateAndSolution() {
-        this.fetchTemplateRepoFiles();
-        this.fetchSolutionRepoFiles();
+    private async foo() {
+        await Promise.all([this.fetchParticipationRepoFilesAtLeftCommit(), this.fetchParticipationRepoFilesAtRightCommit()]);
     }
 
-    private fetchSolutionRepoFiles() {
-        this.solutionRepoFilesSubscription = this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
-            next: (response: Map<string, string>) => {
-                this.rightCommitFileContentByPath = response;
-            },
-            error: () => {
-                this.errorWhileFetchingRepos = true;
-            },
-        });
+    private async fetchTemplateRepoFiles(): Promise<void> {
+        try {
+            const key = this.calculateTemplateMapKey();
+            const fileMap =
+                (await firstValueFrom(this.programmingExerciseService.getTemplateRepositoryTestFilesWithContent(this.report().programmingExercise.id!))) ??
+                new Map<string, string>();
+            this.leftCommitFileContentByPath.set(fileMap);
+            untracked(this.cachedRepositoryFiles).set(key, fileMap);
+            this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
     }
 
-    private loadRepositoryFilesForParticipationsFromCacheIfAvailable() {
-        if (this.report.participationIdForLeftCommit) {
-            const key = this.report.leftCommitHash!;
-            if (this.cachedRepositoryFiles.has(key)) {
-                this.leftCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
-                this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
+    private async fetchSolutionRepoFiles(): Promise<void> {
+        try {
+            const fileMap =
+                (await firstValueFrom(this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report().programmingExercise.id!))) ??
+                new Map<string, string>();
+            this.rightCommitFileContentByPath.set(fileMap);
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
+    }
+
+    private async loadRepositoryFilesForParticipationsFromCacheIfAvailable(): Promise<void> {
+        if (this.report().participationIdForLeftCommit) {
+            const key = this.report().leftCommitHash!;
+            if (untracked(this.cachedRepositoryFiles).has(key)) {
+                this.leftCommitFileContentByPath.set(untracked(this.cachedRepositoryFiles).get(key)!);
+                await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
             } else {
-                this.fetchParticipationRepoFilesAtLeftCommit();
+                await Promise.all([this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable(), this.fetchParticipationRepoFilesAtLeftCommit()]);
             }
         } else {
             // if there is no left commit, we want to see the diff between the current submission and the template
-            this.loadTemplateRepoFilesFromCacheIfAvailable();
-            this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
+            await Promise.all([this.loadTemplateRepoFilesFromCacheIfAvailable(), await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable()]);
         }
     }
 
-    private fetchParticipationRepoFilesAtLeftCommit() {
-        this.participationRepoFilesAtLeftCommitSubscription = this.programmingExerciseParticipationService
-            .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForLeftCommit!, this.report.leftCommitHash!)
-            .subscribe({
-                next: (filesWithContent: Map<string, string>) => {
-                    this.leftCommitFileContentByPath = filesWithContent;
-                    this.cachedRepositoryFiles.set(this.report.leftCommitHash!, filesWithContent);
-                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
-                    this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
-                },
-                error: () => {
-                    this.errorWhileFetchingRepos = true;
+    private async fetchParticipationRepoFilesAtLeftCommit(): Promise<void> {
+        try {
+            await Promise.all([
+                async () => {
+                    const fileMap =
+                        (await firstValueFrom(
+                            this.programmingExerciseParticipationService.getParticipationRepositoryFilesWithContentAtCommit(
+                                this.report().participationIdForLeftCommit!,
+                                this.report().leftCommitHash!,
+                            ),
+                        )) ?? new Map<string, string>();
+                    this.leftCommitFileContentByPath.set(fileMap);
+                    untracked(this.cachedRepositoryFiles).set(this.report().leftCommitHash!, fileMap);
+                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
                 },
-            });
+                this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable(),
+            ]);
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
     }
 
-    private loadTemplateRepoFilesFromCacheIfAvailable() {
+    private async loadTemplateRepoFilesFromCacheIfAvailable() {
         const key = this.calculateTemplateMapKey();
-        if (this.cachedRepositoryFiles.has(key)) {
-            this.leftCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
+        if (untracked(this.cachedRepositoryFiles).has(key)) {
+            this.leftCommitFileContentByPath.set(untracked(this.cachedRepositoryFiles).get(key)!);
         } else {
-            this.fetchTemplateRepoFiles();
+            await this.fetchTemplateRepoFiles();
         }
     }
 
-    private loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable() {
-        const key = this.report.rightCommitHash!;
-        if (this.cachedRepositoryFiles.has(key)) {
-            this.rightCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
+    private async loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable(): Promise<void> {
+        const key = this.report().rightCommitHash!;
+        if (untracked(this.cachedRepositoryFiles).has(key)) {
+            this.rightCommitFileContentByPath.set(untracked(this.cachedRepositoryFiles).get(key)!);
         } else {
-            this.fetchParticipationRepoFilesAtRightCommit();
+            await this.fetchParticipationRepoFilesAtRightCommit();
         }
     }
 
-    private fetchTemplateRepoFiles() {
-        const key = this.calculateTemplateMapKey();
-        this.templateRepoFilesSubscription = this.programmingExerciseService.getTemplateRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
-            next: (response: Map<string, string>) => {
-                this.leftCommitFileContentByPath = response;
-                this.cachedRepositoryFiles.set(key, response);
-                this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
-            },
-            error: () => {
-                this.errorWhileFetchingRepos = true;
-            },
-        });
-    }
-
-    private fetchParticipationRepoFilesAtRightCommit() {
-        this.participationRepoFilesAtRightCommitSubscription = this.programmingExerciseParticipationService
-            .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForRightCommit!, this.report.rightCommitHash!)
-            .subscribe({
-                next: (filesWithContent: Map<string, string>) => {
-                    this.rightCommitFileContentByPath = filesWithContent;
-                    this.cachedRepositoryFiles.set(this.report.rightCommitHash!, filesWithContent);
-                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
-                },
-                error: () => {
-                    this.errorWhileFetchingRepos = true;
-                },
-            });
+    private async fetchParticipationRepoFilesAtRightCommit(): Promise<void> {
+        try {
+            const fileMap =
+                (await firstValueFrom(
+                    this.programmingExerciseParticipationService.getParticipationRepositoryFilesWithContentAtCommit(
+                        this.report().participationIdForRightCommit!,
+                        this.report().rightCommitHash!,
+                    ),
+                )) ?? new Map<string, string>();
+            this.rightCommitFileContentByPath.set(fileMap);
+            untracked(this.cachedRepositoryFiles).set(this.report().rightCommitHash!, fileMap);
+            this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
     }
 
     close(): void {
@@ -151,6 +158,6 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
     }
 
     private calculateTemplateMapKey() {
-        return this.report.programmingExercise.id! + '-template';
+        return this.report().programmingExercise.id! + '-template';
     }
 }
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
index cfae09afae32..ac8f0b44feac 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
@@ -1,7 +1,7 @@
 import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 import { ArtemisTestModule } from '../../../test.module';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
 import { of, throwError } from 'rxjs';
@@ -32,7 +32,7 @@ describe('GitDiffReportModalComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule],
-            declarations: [GitDiffReportModalComponent, MockPipe(ArtemisTranslatePipe), MockComponent(GitDiffReportComponent)],
+            declarations: [MockPipe(ArtemisTranslatePipe), MockComponent(GitDiffReportComponent)],
         }).compileComponents();
         fixture = TestBed.createComponent(GitDiffReportModalComponent);
         comp = fixture.componentInstance;
@@ -52,68 +52,73 @@ describe('GitDiffReportModalComponent', () => {
         jest.restoreAllMocks();
     });
 
-    it('should call correct service method onInit', fakeAsync(() => {
+    it('should call correct service method onInit', async () => {
         // case 1: diff for template and solution
-        comp.report = { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'abc' } as ProgrammingExerciseGitDiffReport;
-        comp.diffForTemplateAndSolution = true;
-        comp.ngOnInit();
-        flush();
+        fixture.componentRef.setInput('report', { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'abc' } as ProgrammingExerciseGitDiffReport);
+        fixture.componentRef.setInput('diffForTemplateAndSolution', true);
+        fixture.detectChanges();
+        await fixture.whenStable();
         expect(loadTemplateFilesSpy).toHaveBeenCalledExactlyOnceWith(1);
         expect(loadSolutionFilesSpy).toHaveBeenCalledExactlyOnceWith(1);
         expect(loadParticipationFilesSpy).not.toHaveBeenCalled();
-        expect(comp.leftCommitFileContentByPath).toEqual(filesWithContentTemplate);
-        expect(comp.rightCommitFileContentByPath).toEqual(filesWithContentSolution);
-    }));
+        expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentTemplate);
+        expect(comp.rightCommitFileContentByPath()).toEqual(filesWithContentSolution);
+    });
 
-    it('should retrieve files for template and submission if diffForTemplateAndSolution is false and firstParticipationId is undefined', () => {
-        comp.report = { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'abc' } as ProgrammingExerciseGitDiffReport;
+    it('should retrieve files for template and submission if diffForTemplateAndSolution is false and firstParticipationId is undefined', async () => {
+        fixture.componentRef.setInput('report', { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'abc' } as ProgrammingExerciseGitDiffReport);
         // case 2: diff for submission with template
-        comp.diffForTemplateAndSolution = false;
-        comp.ngOnInit();
+        fixture.componentRef.setInput('diffForTemplateAndSolution', false);
+        fixture.detectChanges();
+        await fixture.whenStable();
         expect(loadParticipationFilesSpy).toHaveBeenCalledExactlyOnceWith(3, 'abc');
         expect(loadTemplateFilesSpy).toHaveBeenCalledExactlyOnceWith(1);
-        expect(comp.leftCommitFileContentByPath).toEqual(filesWithContentTemplate);
-        expect(comp.rightCommitFileContentByPath).toEqual(filesWithContentParticipation1);
+        expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentTemplate);
+        expect(comp.rightCommitFileContentByPath()).toEqual(filesWithContentParticipation1);
     });
 
-    it('should retrieve files for both submissions if diffForTemplateAndSolution is false and firstParticipationId is defined', function () {
+    it('should retrieve files for both submissions if diffForTemplateAndSolution is false and firstParticipationId is defined', async () => {
         // case 3: diff for two submissions
-        comp.report = {
+        fixture.componentRef.setInput('report', {
             programmingExercise: { id: 1 },
             participationIdForRightCommit: 3,
             rightCommitHash: 'abc',
             participationIdForLeftCommit: 2,
             leftCommitHash: 'def',
-        } as ProgrammingExerciseGitDiffReport;
-        comp.diffForTemplateAndSolution = false;
-        comp.ngOnInit();
+        } as ProgrammingExerciseGitDiffReport);
+        fixture.componentRef.setInput('diffForTemplateAndSolution', false);
+        fixture.detectChanges();
+        await fixture.whenStable();
         expect(loadParticipationFilesSpy).toHaveBeenCalledTimes(2);
         expect(loadParticipationFilesSpy).toHaveBeenCalledWith(2, 'def');
         expect(loadParticipationFilesSpy).toHaveBeenCalledWith(3, 'abc');
-        expect(comp.leftCommitFileContentByPath).toEqual(filesWithContentParticipation1);
-        expect(comp.rightCommitFileContentByPath).toEqual(filesWithContentParticipation1);
+        expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentParticipation1);
+        expect(comp.rightCommitFileContentByPath()).toEqual(filesWithContentParticipation1);
     });
 
-    it('should set error flag if loading files fails', () => {
+    it('should set error flag if loading files fails', async () => {
         jest.spyOn(programmingExerciseService, 'getTemplateRepositoryTestFilesWithContent').mockReturnValue(throwError('error'));
         jest.spyOn(programmingExerciseService, 'getSolutionRepositoryTestFilesWithContent').mockReturnValue(throwError('error'));
         jest.spyOn(programmingExerciseParticipationService, 'getParticipationRepositoryFilesWithContentAtCommit').mockReturnValue(throwError('error'));
-        comp.report = { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'abc' } as ProgrammingExerciseGitDiffReport;
-        comp.diffForTemplateAndSolution = true;
-        comp.ngOnInit();
-        expect(comp.errorWhileFetchingRepos).toBeTrue();
+        fixture.componentRef.setInput('report', { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'abc' } as ProgrammingExerciseGitDiffReport);
+        fixture.componentRef.setInput('diffForTemplateAndSolution', true);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        expect(comp.errorWhileFetchingRepos()).toBeTrue();
 
         //reset value
-        comp.errorWhileFetchingRepos = false;
-        comp.diffForTemplateAndSolution = false;
-        comp.ngOnInit();
-        expect(comp.errorWhileFetchingRepos).toBeTrue();
+        comp.errorWhileFetchingRepos.set(false);
+        fixture.componentRef.setInput('diffForTemplateAndSolution', false);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        expect(comp.errorWhileFetchingRepos()).toBeTrue();
 
         //reset value
-        comp.errorWhileFetchingRepos = false;
-        comp.report = { ...comp.report, participationIdForLeftCommit: 2, leftCommitHash: 'def' } as ProgrammingExerciseGitDiffReport;
-        comp.ngOnInit();
-        expect(comp.errorWhileFetchingRepos).toBeTrue();
+        comp.errorWhileFetchingRepos.set(false);
+        fixture.componentRef.setInput('report', { ...comp.report, participationIdForLeftCommit: 2, leftCommitHash: 'def' } as unknown as ProgrammingExerciseGitDiffReport);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        expect(comp.errorWhileFetchingRepos()).toBeTrue();
     });
 
     it('should call modal service when close() is invoked', () => {
@@ -126,32 +131,32 @@ describe('GitDiffReportModalComponent', () => {
         const cachedRepositoryFiles = new Map<string, Map<string, string>>();
         cachedRepositoryFiles.set('1-template', filesWithContentTemplate);
         cachedRepositoryFiles.set('def', filesWithContentParticipation1);
-        comp.cachedRepositoryFiles = cachedRepositoryFiles;
-        comp.report = { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'def' } as ProgrammingExerciseGitDiffReport;
-        comp.diffForTemplateAndSolution = false;
-        comp.ngOnInit();
+        fixture.componentRef.setInput('cachedRepositoryFiles', cachedRepositoryFiles);
+        fixture.componentRef.setInput('report', { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'def' } as ProgrammingExerciseGitDiffReport);
+        fixture.componentRef.setInput('diffForTemplateAndSolution', false);
+        fixture.detectChanges();
         expect(loadParticipationFilesSpy).not.toHaveBeenCalled();
         expect(loadTemplateFilesSpy).not.toHaveBeenCalled();
-        expect(comp.leftCommitFileContentByPath).toEqual(filesWithContentTemplate);
-        expect(comp.rightCommitFileContentByPath).toEqual(filesWithContentParticipation1);
+        expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentTemplate);
+        expect(comp.rightCommitFileContentByPath()).toEqual(filesWithContentParticipation1);
     });
 
     it('should load files from cache if available for participation repo at both commits', () => {
         const cachedRepositoryFiles = new Map<string, Map<string, string>>();
         cachedRepositoryFiles.set('def', filesWithContentParticipation1);
         cachedRepositoryFiles.set('abc', filesWithContentParticipation2);
-        comp.cachedRepositoryFiles = cachedRepositoryFiles;
-        comp.report = {
+        fixture.componentRef.setInput('cachedRepositoryFiles', cachedRepositoryFiles);
+        fixture.componentRef.setInput('report', {
             programmingExercise: { id: 1 },
             participationIdForRightCommit: 3,
             rightCommitHash: 'abc',
             participationIdForLeftCommit: 2,
             leftCommitHash: 'def',
-        } as ProgrammingExerciseGitDiffReport;
-        comp.diffForTemplateAndSolution = false;
-        comp.ngOnInit();
+        } as ProgrammingExerciseGitDiffReport);
+        fixture.componentRef.setInput('diffForTemplateAndSolution', false);
+        fixture.detectChanges();
         expect(loadParticipationFilesSpy).not.toHaveBeenCalled();
-        expect(comp.leftCommitFileContentByPath).toEqual(filesWithContentParticipation1);
-        expect(comp.rightCommitFileContentByPath).toEqual(filesWithContentParticipation2);
+        expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentParticipation1);
+        expect(comp.rightCommitFileContentByPath()).toEqual(filesWithContentParticipation2);
     });
 });

From bd51c28600f8b71cfe91310d54200ad7f51384eb Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 21:19:42 +0200
Subject: [PATCH 19/35] Revert change to git-diff-report-modal.component.ts

---
 .../git-diff-report-modal.component.ts        | 205 +++++++++---------
 1 file changed, 99 insertions(+), 106 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 17a026c088a1..0b0ace88c21e 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, effect, inject, input, signal, untracked } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
 import { ProgrammingExerciseParticipationService } from 'app/exercises/programming/manage/services/programming-exercise-participation.service';
 import { CachedRepositoryFilesService } from 'app/exercises/programming/manage/services/cached-repository-files.service';
-import { firstValueFrom } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 
@@ -15,142 +15,135 @@ import { TranslateDirective } from 'app/shared/language/translate.directive';
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [GitDiffReportComponent, TranslateDirective],
 })
-export class GitDiffReportModalComponent implements OnInit {
+export class GitDiffReportModalComponent implements OnInit, OnDestroy {
+    @Input() report: ProgrammingExerciseGitDiffReport;
+    @Input() diffForTemplateAndSolution = true;
+    @Input() cachedRepositoryFiles: Map<string, Map<string, string>> = new Map<string, Map<string, string>>();
+
+    errorWhileFetchingRepos = false;
+    leftCommitFileContentByPath: Map<string, string>;
+    rightCommitFileContentByPath: Map<string, string>;
+
+    private templateRepoFilesSubscription: Subscription;
+    private solutionRepoFilesSubscription: Subscription;
+    private participationRepoFilesAtLeftCommitSubscription: Subscription;
+    private participationRepoFilesAtRightCommitSubscription: Subscription;
+
     private readonly activeModal = inject(NgbActiveModal);
     private readonly programmingExerciseService = inject(ProgrammingExerciseService);
     private readonly programmingExerciseParticipationService = inject(ProgrammingExerciseParticipationService);
     private readonly cachedRepositoryFilesService = inject(CachedRepositoryFilesService);
 
-    readonly report = input.required<ProgrammingExerciseGitDiffReport>();
-    readonly diffForTemplateAndSolution = input<boolean>(true);
-    readonly cachedRepositoryFiles = input<Map<string, Map<string, string>>>(new Map<string, Map<string, string>>());
-    readonly onFilesLoaded = new EventEmitter<void>();
-
-    readonly errorWhileFetchingRepos = signal<boolean>(false);
-    readonly leftCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
-    readonly rightCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
-
-    constructor() {
-        effect(
-            async () => {
-                if (this.diffForTemplateAndSolution()) {
-                    await this.loadFilesForTemplateAndSolution();
-                } else {
-                    await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
-                }
-                this.onFilesLoaded.emit();
-            },
-            { allowSignalWrites: true },
-        );
-    }
-
-    async ngOnInit() {
-        this.onFilesLoaded.emit();
-    }
+    constructor() {}
 
-    private async loadFilesForTemplateAndSolution() {
-        await Promise.all([this.fetchSolutionRepoFiles(), this.fetchTemplateRepoFiles()]);
+    ngOnInit(): void {
+        if (this.diffForTemplateAndSolution) {
+            this.loadFilesForTemplateAndSolution();
+        } else {
+            this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
+        }
     }
 
-    private async foo() {
-        await Promise.all([this.fetchParticipationRepoFilesAtLeftCommit(), this.fetchParticipationRepoFilesAtRightCommit()]);
+    ngOnDestroy(): void {
+        this.templateRepoFilesSubscription?.unsubscribe();
+        this.solutionRepoFilesSubscription?.unsubscribe();
+        this.participationRepoFilesAtLeftCommitSubscription?.unsubscribe();
+        this.participationRepoFilesAtRightCommitSubscription?.unsubscribe();
     }
 
-    private async fetchTemplateRepoFiles(): Promise<void> {
-        try {
-            const key = this.calculateTemplateMapKey();
-            const fileMap =
-                (await firstValueFrom(this.programmingExerciseService.getTemplateRepositoryTestFilesWithContent(this.report().programmingExercise.id!))) ??
-                new Map<string, string>();
-            this.leftCommitFileContentByPath.set(fileMap);
-            untracked(this.cachedRepositoryFiles).set(key, fileMap);
-            this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
-        } catch (e) {
-            this.errorWhileFetchingRepos.set(true);
-        }
+    private loadFilesForTemplateAndSolution() {
+        this.fetchTemplateRepoFiles();
+        this.fetchSolutionRepoFiles();
     }
 
-    private async fetchSolutionRepoFiles(): Promise<void> {
-        try {
-            const fileMap =
-                (await firstValueFrom(this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report().programmingExercise.id!))) ??
-                new Map<string, string>();
-            this.rightCommitFileContentByPath.set(fileMap);
-        } catch (e) {
-            this.errorWhileFetchingRepos.set(true);
-        }
+    private fetchSolutionRepoFiles() {
+        this.solutionRepoFilesSubscription = this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
+            next: (response: Map<string, string>) => {
+                this.rightCommitFileContentByPath = response;
+            },
+            error: () => {
+                this.errorWhileFetchingRepos = true;
+            },
+        });
     }
 
-    private async loadRepositoryFilesForParticipationsFromCacheIfAvailable(): Promise<void> {
-        if (this.report().participationIdForLeftCommit) {
-            const key = this.report().leftCommitHash!;
-            if (untracked(this.cachedRepositoryFiles).has(key)) {
-                this.leftCommitFileContentByPath.set(untracked(this.cachedRepositoryFiles).get(key)!);
-                await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
+    private loadRepositoryFilesForParticipationsFromCacheIfAvailable() {
+        if (this.report.participationIdForLeftCommit) {
+            const key = this.report.leftCommitHash!;
+            if (this.cachedRepositoryFiles.has(key)) {
+                this.leftCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
+                this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
             } else {
-                await Promise.all([this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable(), this.fetchParticipationRepoFilesAtLeftCommit()]);
+                this.fetchParticipationRepoFilesAtLeftCommit();
             }
         } else {
             // if there is no left commit, we want to see the diff between the current submission and the template
-            await Promise.all([this.loadTemplateRepoFilesFromCacheIfAvailable(), await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable()]);
+            this.loadTemplateRepoFilesFromCacheIfAvailable();
+            this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
         }
     }
 
-    private async fetchParticipationRepoFilesAtLeftCommit(): Promise<void> {
-        try {
-            await Promise.all([
-                async () => {
-                    const fileMap =
-                        (await firstValueFrom(
-                            this.programmingExerciseParticipationService.getParticipationRepositoryFilesWithContentAtCommit(
-                                this.report().participationIdForLeftCommit!,
-                                this.report().leftCommitHash!,
-                            ),
-                        )) ?? new Map<string, string>();
-                    this.leftCommitFileContentByPath.set(fileMap);
-                    untracked(this.cachedRepositoryFiles).set(this.report().leftCommitHash!, fileMap);
-                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
+    private fetchParticipationRepoFilesAtLeftCommit() {
+        this.participationRepoFilesAtLeftCommitSubscription = this.programmingExerciseParticipationService
+            .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForLeftCommit!, this.report.leftCommitHash!)
+            .subscribe({
+                next: (filesWithContent: Map<string, string>) => {
+                    this.leftCommitFileContentByPath = filesWithContent;
+                    this.cachedRepositoryFiles.set(this.report.leftCommitHash!, filesWithContent);
+                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
+                    this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
                 },
-                this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable(),
-            ]);
-        } catch (e) {
-            this.errorWhileFetchingRepos.set(true);
-        }
+                error: () => {
+                    this.errorWhileFetchingRepos = true;
+                },
+            });
     }
 
-    private async loadTemplateRepoFilesFromCacheIfAvailable() {
+    private loadTemplateRepoFilesFromCacheIfAvailable() {
         const key = this.calculateTemplateMapKey();
-        if (untracked(this.cachedRepositoryFiles).has(key)) {
-            this.leftCommitFileContentByPath.set(untracked(this.cachedRepositoryFiles).get(key)!);
+        if (this.cachedRepositoryFiles.has(key)) {
+            this.leftCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
         } else {
-            await this.fetchTemplateRepoFiles();
+            this.fetchTemplateRepoFiles();
         }
     }
 
-    private async loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable(): Promise<void> {
-        const key = this.report().rightCommitHash!;
-        if (untracked(this.cachedRepositoryFiles).has(key)) {
-            this.rightCommitFileContentByPath.set(untracked(this.cachedRepositoryFiles).get(key)!);
+    private loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable() {
+        const key = this.report.rightCommitHash!;
+        if (this.cachedRepositoryFiles.has(key)) {
+            this.rightCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
         } else {
-            await this.fetchParticipationRepoFilesAtRightCommit();
+            this.fetchParticipationRepoFilesAtRightCommit();
         }
     }
 
-    private async fetchParticipationRepoFilesAtRightCommit(): Promise<void> {
-        try {
-            const fileMap =
-                (await firstValueFrom(
-                    this.programmingExerciseParticipationService.getParticipationRepositoryFilesWithContentAtCommit(
-                        this.report().participationIdForRightCommit!,
-                        this.report().rightCommitHash!,
-                    ),
-                )) ?? new Map<string, string>();
-            this.rightCommitFileContentByPath.set(fileMap);
-            untracked(this.cachedRepositoryFiles).set(this.report().rightCommitHash!, fileMap);
-            this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
-        } catch (e) {
-            this.errorWhileFetchingRepos.set(true);
-        }
+    private fetchTemplateRepoFiles() {
+        const key = this.calculateTemplateMapKey();
+        this.templateRepoFilesSubscription = this.programmingExerciseService.getTemplateRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
+            next: (response: Map<string, string>) => {
+                this.leftCommitFileContentByPath = response;
+                this.cachedRepositoryFiles.set(key, response);
+                this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
+            },
+            error: () => {
+                this.errorWhileFetchingRepos = true;
+            },
+        });
+    }
+
+    private fetchParticipationRepoFilesAtRightCommit() {
+        this.participationRepoFilesAtRightCommitSubscription = this.programmingExerciseParticipationService
+            .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForRightCommit!, this.report.rightCommitHash!)
+            .subscribe({
+                next: (filesWithContent: Map<string, string>) => {
+                    this.rightCommitFileContentByPath = filesWithContent;
+                    this.cachedRepositoryFiles.set(this.report.rightCommitHash!, filesWithContent);
+                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
+                },
+                error: () => {
+                    this.errorWhileFetchingRepos = true;
+                },
+            });
     }
 
     close(): void {
@@ -158,6 +151,6 @@ export class GitDiffReportModalComponent implements OnInit {
     }
 
     private calculateTemplateMapKey() {
-        return this.report().programmingExercise.id! + '-template';
+        return this.report.programmingExercise.id! + '-template';
     }
 }

From 47ec8baff26b0ea5b664348803ddc380bced2c49 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 21:47:46 +0200
Subject: [PATCH 20/35] Fix tests

---
 .../git-diff-report-modal.component.ts        | 150 +++++++++++++++---
 .../git-diff-modal.component.spec.ts          |  16 +-
 2 files changed, 142 insertions(+), 24 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 0b0ace88c21e..84f0bcf33a79 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, signal } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
 import { ProgrammingExerciseParticipationService } from 'app/exercises/programming/manage/services/programming-exercise-participation.service';
 import { CachedRepositoryFilesService } from 'app/exercises/programming/manage/services/cached-repository-files.service';
-import { Subscription } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { GitDiffReportComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report.component';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 
@@ -15,28 +15,41 @@ import { TranslateDirective } from 'app/shared/language/translate.directive';
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [GitDiffReportComponent, TranslateDirective],
 })
-export class GitDiffReportModalComponent implements OnInit, OnDestroy {
-    @Input() report: ProgrammingExerciseGitDiffReport;
-    @Input() diffForTemplateAndSolution = true;
-    @Input() cachedRepositoryFiles: Map<string, Map<string, string>> = new Map<string, Map<string, string>>();
+export class GitDiffReportModalComponent {
+    report = input.required<ProgrammingExerciseGitDiffReport>();
+    diffForTemplateAndSolution = input<boolean>(true);
+    cachedRepositoryFiles = input<Map<string, Map<string, string>>>(new Map<string, Map<string, string>>());
 
-    errorWhileFetchingRepos = false;
-    leftCommitFileContentByPath: Map<string, string>;
-    rightCommitFileContentByPath: Map<string, string>;
+    errorWhileFetchingRepos = signal<boolean>(false);
+    leftCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
+    rightCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
 
+    /*
     private templateRepoFilesSubscription: Subscription;
     private solutionRepoFilesSubscription: Subscription;
     private participationRepoFilesAtLeftCommitSubscription: Subscription;
     private participationRepoFilesAtRightCommitSubscription: Subscription;
+     */
 
     private readonly activeModal = inject(NgbActiveModal);
     private readonly programmingExerciseService = inject(ProgrammingExerciseService);
     private readonly programmingExerciseParticipationService = inject(ProgrammingExerciseParticipationService);
     private readonly cachedRepositoryFilesService = inject(CachedRepositoryFilesService);
 
-    constructor() {}
+    constructor() {
+        effect(
+            async () => {
+                if (this.diffForTemplateAndSolution()) {
+                    await this.loadFilesForTemplateAndSolution2();
+                } else {
+                    await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable2();
+                }
+            },
+            { allowSignalWrites: true },
+        );
+    }
 
-    ngOnInit(): void {
+    /* ngOnInit(): void {
         if (this.diffForTemplateAndSolution) {
             this.loadFilesForTemplateAndSolution();
         } else {
@@ -49,14 +62,29 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
         this.solutionRepoFilesSubscription?.unsubscribe();
         this.participationRepoFilesAtLeftCommitSubscription?.unsubscribe();
         this.participationRepoFilesAtRightCommitSubscription?.unsubscribe();
+    }*/
+
+    private async loadFilesForTemplateAndSolution2(): Promise<void> {
+        await this.fetchTemplateRepoFiles2();
+        await this.fetchSolutionRepoFiles2();
     }
 
+    /*
     private loadFilesForTemplateAndSolution() {
         this.fetchTemplateRepoFiles();
         this.fetchSolutionRepoFiles();
+    }*/
+
+    private async fetchSolutionRepoFiles2(): Promise<void> {
+        try {
+            const solutionRepoFiles = await firstValueFrom(this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report().programmingExercise.id!));
+            this.rightCommitFileContentByPath.set(solutionRepoFiles);
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
     }
 
-    private fetchSolutionRepoFiles() {
+    /*private fetchSolutionRepoFiles() {
         this.solutionRepoFilesSubscription = this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
             next: (response: Map<string, string>) => {
                 this.rightCommitFileContentByPath = response;
@@ -65,9 +93,24 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
                 this.errorWhileFetchingRepos = true;
             },
         });
+    }*/
+
+    private async loadRepositoryFilesForParticipationsFromCacheIfAvailable2(): Promise<void> {
+        if (this.report().participationIdForLeftCommit) {
+            const key = this.report().leftCommitHash!;
+            if (this.cachedRepositoryFiles().has(key)) {
+                this.leftCommitFileContentByPath.set(this.cachedRepositoryFiles().get(key)!);
+                await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2();
+            } else {
+                await this.fetchParticipationRepoFilesAtLeftCommit2();
+            }
+        } else {
+            await this.loadTemplateRepoFilesFromCacheIfAvailable2();
+            await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2();
+        }
     }
 
-    private loadRepositoryFilesForParticipationsFromCacheIfAvailable() {
+    /*private loadRepositoryFilesForParticipationsFromCacheIfAvailable() {
         if (this.report.participationIdForLeftCommit) {
             const key = this.report.leftCommitHash!;
             if (this.cachedRepositoryFiles.has(key)) {
@@ -81,9 +124,27 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
             this.loadTemplateRepoFilesFromCacheIfAvailable();
             this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
         }
+    }*/
+
+    private async fetchParticipationRepoFilesAtLeftCommit2(): Promise<void> {
+        try {
+            const filesWithContent =
+                (await firstValueFrom(
+                    this.programmingExerciseParticipationService.getParticipationRepositoryFilesWithContentAtCommit(
+                        this.report().participationIdForLeftCommit!,
+                        this.report().leftCommitHash!,
+                    ),
+                )) ?? new Map<string, string>();
+            this.leftCommitFileContentByPath.set(filesWithContent);
+            this.cachedRepositoryFiles().set(this.report().leftCommitHash!, filesWithContent);
+            this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
+            await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2();
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
     }
 
-    private fetchParticipationRepoFilesAtLeftCommit() {
+    /*private fetchParticipationRepoFilesAtLeftCommit() {
         this.participationRepoFilesAtLeftCommitSubscription = this.programmingExerciseParticipationService
             .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForLeftCommit!, this.report.leftCommitHash!)
             .subscribe({
@@ -97,27 +158,59 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
                     this.errorWhileFetchingRepos = true;
                 },
             });
+    }*/
+
+    private async loadTemplateRepoFilesFromCacheIfAvailable2(): Promise<void> {
+        const key = this.calculateTemplateMapKey();
+        if (this.cachedRepositoryFiles().has(key)) {
+            this.leftCommitFileContentByPath.set(this.cachedRepositoryFiles().get(key)!);
+        } else {
+            await this.fetchTemplateRepoFiles2();
+        }
     }
 
-    private loadTemplateRepoFilesFromCacheIfAvailable() {
+    /*private loadTemplateRepoFilesFromCacheIfAvailable() {
         const key = this.calculateTemplateMapKey();
         if (this.cachedRepositoryFiles.has(key)) {
             this.leftCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
         } else {
             this.fetchTemplateRepoFiles();
         }
+    }*/
+
+    private async loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2(): Promise<void> {
+        const key = this.report().rightCommitHash!;
+        if (this.cachedRepositoryFiles().has(key)) {
+            this.rightCommitFileContentByPath.set(this.cachedRepositoryFiles().get(key)!);
+        } else {
+            await this.fetchParticipationRepoFilesAtRightCommit2();
+        }
     }
 
-    private loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable() {
+    /*private loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable() {
         const key = this.report.rightCommitHash!;
         if (this.cachedRepositoryFiles.has(key)) {
             this.rightCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
         } else {
             this.fetchParticipationRepoFilesAtRightCommit();
         }
+    }*/
+
+    private async fetchTemplateRepoFiles2(): Promise<void> {
+        const key = this.calculateTemplateMapKey();
+        try {
+            const response =
+                (await firstValueFrom(this.programmingExerciseService.getTemplateRepositoryTestFilesWithContent(this.report().programmingExercise.id!))) ??
+                new Map<string, string>();
+            this.leftCommitFileContentByPath.set(response);
+            this.cachedRepositoryFiles().set(key, response);
+            this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
     }
 
-    private fetchTemplateRepoFiles() {
+    /*private fetchTemplateRepoFiles() {
         const key = this.calculateTemplateMapKey();
         this.templateRepoFilesSubscription = this.programmingExerciseService.getTemplateRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
             next: (response: Map<string, string>) => {
@@ -129,9 +222,26 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
                 this.errorWhileFetchingRepos = true;
             },
         });
+    }*/
+
+    private async fetchParticipationRepoFilesAtRightCommit2(): Promise<void> {
+        try {
+            const filesWithContent =
+                (await firstValueFrom(
+                    this.programmingExerciseParticipationService.getParticipationRepositoryFilesWithContentAtCommit(
+                        this.report().participationIdForRightCommit!,
+                        this.report().rightCommitHash!,
+                    ),
+                )) ?? new Map<string, string>();
+            this.rightCommitFileContentByPath.set(filesWithContent);
+            this.cachedRepositoryFiles().set(this.report().rightCommitHash!, filesWithContent);
+            this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
+        } catch (e) {
+            this.errorWhileFetchingRepos.set(true);
+        }
     }
 
-    private fetchParticipationRepoFilesAtRightCommit() {
+    /*private fetchParticipationRepoFilesAtRightCommit() {
         this.participationRepoFilesAtRightCommitSubscription = this.programmingExerciseParticipationService
             .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForRightCommit!, this.report.rightCommitHash!)
             .subscribe({
@@ -144,13 +254,13 @@ export class GitDiffReportModalComponent implements OnInit, OnDestroy {
                     this.errorWhileFetchingRepos = true;
                 },
             });
-    }
+    }*/
 
     close(): void {
         this.activeModal.dismiss();
     }
 
     private calculateTemplateMapKey() {
-        return this.report.programmingExercise.id! + '-template';
+        return this.report().programmingExercise.id! + '-template';
     }
 }
diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
index ac8f0b44feac..924c369c7ebc 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
@@ -52,12 +52,19 @@ describe('GitDiffReportModalComponent', () => {
         jest.restoreAllMocks();
     });
 
+    const finishEffects = async () => {
+        // We need to wait for all asynchronous code to finish execution before we can expect the results.
+        // See https://stackoverflow.com/questions/44741102/how-to-make-jest-wait-for-all-asynchronous-code-to-finish-execution-before-expec/51045733#51045733
+        await new Promise(process.nextTick);
+        await fixture.whenStable();
+    };
+
     it('should call correct service method onInit', async () => {
         // case 1: diff for template and solution
         fixture.componentRef.setInput('report', { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'abc' } as ProgrammingExerciseGitDiffReport);
         fixture.componentRef.setInput('diffForTemplateAndSolution', true);
         fixture.detectChanges();
-        await fixture.whenStable();
+        await finishEffects();
         expect(loadTemplateFilesSpy).toHaveBeenCalledExactlyOnceWith(1);
         expect(loadSolutionFilesSpy).toHaveBeenCalledExactlyOnceWith(1);
         expect(loadParticipationFilesSpy).not.toHaveBeenCalled();
@@ -70,7 +77,7 @@ describe('GitDiffReportModalComponent', () => {
         // case 2: diff for submission with template
         fixture.componentRef.setInput('diffForTemplateAndSolution', false);
         fixture.detectChanges();
-        await fixture.whenStable();
+        await finishEffects();
         expect(loadParticipationFilesSpy).toHaveBeenCalledExactlyOnceWith(3, 'abc');
         expect(loadTemplateFilesSpy).toHaveBeenCalledExactlyOnceWith(1);
         expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentTemplate);
@@ -88,7 +95,7 @@ describe('GitDiffReportModalComponent', () => {
         } as ProgrammingExerciseGitDiffReport);
         fixture.componentRef.setInput('diffForTemplateAndSolution', false);
         fixture.detectChanges();
-        await fixture.whenStable();
+        await finishEffects();
         expect(loadParticipationFilesSpy).toHaveBeenCalledTimes(2);
         expect(loadParticipationFilesSpy).toHaveBeenCalledWith(2, 'def');
         expect(loadParticipationFilesSpy).toHaveBeenCalledWith(3, 'abc');
@@ -127,7 +134,7 @@ describe('GitDiffReportModalComponent', () => {
         expect(modalServiceSpy).toHaveBeenCalled();
     });
 
-    it('should load files from cache if available for template and participation repo', () => {
+    it('should load files from cache if available for template and participation repo', async () => {
         const cachedRepositoryFiles = new Map<string, Map<string, string>>();
         cachedRepositoryFiles.set('1-template', filesWithContentTemplate);
         cachedRepositoryFiles.set('def', filesWithContentParticipation1);
@@ -135,6 +142,7 @@ describe('GitDiffReportModalComponent', () => {
         fixture.componentRef.setInput('report', { programmingExercise: { id: 1 }, participationIdForRightCommit: 3, rightCommitHash: 'def' } as ProgrammingExerciseGitDiffReport);
         fixture.componentRef.setInput('diffForTemplateAndSolution', false);
         fixture.detectChanges();
+        await finishEffects();
         expect(loadParticipationFilesSpy).not.toHaveBeenCalled();
         expect(loadTemplateFilesSpy).not.toHaveBeenCalled();
         expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentTemplate);

From f8f0448fdaf01e8105eca22eb1fe87a9001c28fd Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 21:56:27 +0200
Subject: [PATCH 21/35] Fix tests

---
 .../hestia/git-diff-report/git-diff-modal.component.spec.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
index 924c369c7ebc..7fc9a8693d0e 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-modal.component.spec.ts
@@ -149,7 +149,7 @@ describe('GitDiffReportModalComponent', () => {
         expect(comp.rightCommitFileContentByPath()).toEqual(filesWithContentParticipation1);
     });
 
-    it('should load files from cache if available for participation repo at both commits', () => {
+    it('should load files from cache if available for participation repo at both commits', async () => {
         const cachedRepositoryFiles = new Map<string, Map<string, string>>();
         cachedRepositoryFiles.set('def', filesWithContentParticipation1);
         cachedRepositoryFiles.set('abc', filesWithContentParticipation2);
@@ -163,6 +163,7 @@ describe('GitDiffReportModalComponent', () => {
         } as ProgrammingExerciseGitDiffReport);
         fixture.componentRef.setInput('diffForTemplateAndSolution', false);
         fixture.detectChanges();
+        await finishEffects();
         expect(loadParticipationFilesSpy).not.toHaveBeenCalled();
         expect(comp.leftCommitFileContentByPath()).toEqual(filesWithContentParticipation1);
         expect(comp.rightCommitFileContentByPath()).toEqual(filesWithContentParticipation2);

From 4578fd2c8ea47637220d6d7b8afb415ba1199f28 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 21:58:13 +0200
Subject: [PATCH 22/35] Remove dead code

---
 .../git-diff-report-modal.component.ts        | 118 ------------------
 1 file changed, 118 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 84f0bcf33a79..23bc16adb777 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -24,13 +24,6 @@ export class GitDiffReportModalComponent {
     leftCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
     rightCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
 
-    /*
-    private templateRepoFilesSubscription: Subscription;
-    private solutionRepoFilesSubscription: Subscription;
-    private participationRepoFilesAtLeftCommitSubscription: Subscription;
-    private participationRepoFilesAtRightCommitSubscription: Subscription;
-     */
-
     private readonly activeModal = inject(NgbActiveModal);
     private readonly programmingExerciseService = inject(ProgrammingExerciseService);
     private readonly programmingExerciseParticipationService = inject(ProgrammingExerciseParticipationService);
@@ -49,32 +42,11 @@ export class GitDiffReportModalComponent {
         );
     }
 
-    /* ngOnInit(): void {
-        if (this.diffForTemplateAndSolution) {
-            this.loadFilesForTemplateAndSolution();
-        } else {
-            this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
-        }
-    }
-
-    ngOnDestroy(): void {
-        this.templateRepoFilesSubscription?.unsubscribe();
-        this.solutionRepoFilesSubscription?.unsubscribe();
-        this.participationRepoFilesAtLeftCommitSubscription?.unsubscribe();
-        this.participationRepoFilesAtRightCommitSubscription?.unsubscribe();
-    }*/
-
     private async loadFilesForTemplateAndSolution2(): Promise<void> {
         await this.fetchTemplateRepoFiles2();
         await this.fetchSolutionRepoFiles2();
     }
 
-    /*
-    private loadFilesForTemplateAndSolution() {
-        this.fetchTemplateRepoFiles();
-        this.fetchSolutionRepoFiles();
-    }*/
-
     private async fetchSolutionRepoFiles2(): Promise<void> {
         try {
             const solutionRepoFiles = await firstValueFrom(this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report().programmingExercise.id!));
@@ -84,17 +56,6 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    /*private fetchSolutionRepoFiles() {
-        this.solutionRepoFilesSubscription = this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
-            next: (response: Map<string, string>) => {
-                this.rightCommitFileContentByPath = response;
-            },
-            error: () => {
-                this.errorWhileFetchingRepos = true;
-            },
-        });
-    }*/
-
     private async loadRepositoryFilesForParticipationsFromCacheIfAvailable2(): Promise<void> {
         if (this.report().participationIdForLeftCommit) {
             const key = this.report().leftCommitHash!;
@@ -110,22 +71,6 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    /*private loadRepositoryFilesForParticipationsFromCacheIfAvailable() {
-        if (this.report.participationIdForLeftCommit) {
-            const key = this.report.leftCommitHash!;
-            if (this.cachedRepositoryFiles.has(key)) {
-                this.leftCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
-                this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
-            } else {
-                this.fetchParticipationRepoFilesAtLeftCommit();
-            }
-        } else {
-            // if there is no left commit, we want to see the diff between the current submission and the template
-            this.loadTemplateRepoFilesFromCacheIfAvailable();
-            this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
-        }
-    }*/
-
     private async fetchParticipationRepoFilesAtLeftCommit2(): Promise<void> {
         try {
             const filesWithContent =
@@ -144,22 +89,6 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    /*private fetchParticipationRepoFilesAtLeftCommit() {
-        this.participationRepoFilesAtLeftCommitSubscription = this.programmingExerciseParticipationService
-            .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForLeftCommit!, this.report.leftCommitHash!)
-            .subscribe({
-                next: (filesWithContent: Map<string, string>) => {
-                    this.leftCommitFileContentByPath = filesWithContent;
-                    this.cachedRepositoryFiles.set(this.report.leftCommitHash!, filesWithContent);
-                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
-                    this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
-                },
-                error: () => {
-                    this.errorWhileFetchingRepos = true;
-                },
-            });
-    }*/
-
     private async loadTemplateRepoFilesFromCacheIfAvailable2(): Promise<void> {
         const key = this.calculateTemplateMapKey();
         if (this.cachedRepositoryFiles().has(key)) {
@@ -169,15 +98,6 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    /*private loadTemplateRepoFilesFromCacheIfAvailable() {
-        const key = this.calculateTemplateMapKey();
-        if (this.cachedRepositoryFiles.has(key)) {
-            this.leftCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
-        } else {
-            this.fetchTemplateRepoFiles();
-        }
-    }*/
-
     private async loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2(): Promise<void> {
         const key = this.report().rightCommitHash!;
         if (this.cachedRepositoryFiles().has(key)) {
@@ -187,15 +107,6 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    /*private loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable() {
-        const key = this.report.rightCommitHash!;
-        if (this.cachedRepositoryFiles.has(key)) {
-            this.rightCommitFileContentByPath = this.cachedRepositoryFiles.get(key)!;
-        } else {
-            this.fetchParticipationRepoFilesAtRightCommit();
-        }
-    }*/
-
     private async fetchTemplateRepoFiles2(): Promise<void> {
         const key = this.calculateTemplateMapKey();
         try {
@@ -210,20 +121,6 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    /*private fetchTemplateRepoFiles() {
-        const key = this.calculateTemplateMapKey();
-        this.templateRepoFilesSubscription = this.programmingExerciseService.getTemplateRepositoryTestFilesWithContent(this.report.programmingExercise.id!).subscribe({
-            next: (response: Map<string, string>) => {
-                this.leftCommitFileContentByPath = response;
-                this.cachedRepositoryFiles.set(key, response);
-                this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
-            },
-            error: () => {
-                this.errorWhileFetchingRepos = true;
-            },
-        });
-    }*/
-
     private async fetchParticipationRepoFilesAtRightCommit2(): Promise<void> {
         try {
             const filesWithContent =
@@ -241,21 +138,6 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    /*private fetchParticipationRepoFilesAtRightCommit() {
-        this.participationRepoFilesAtRightCommitSubscription = this.programmingExerciseParticipationService
-            .getParticipationRepositoryFilesWithContentAtCommit(this.report.participationIdForRightCommit!, this.report.rightCommitHash!)
-            .subscribe({
-                next: (filesWithContent: Map<string, string>) => {
-                    this.rightCommitFileContentByPath = filesWithContent;
-                    this.cachedRepositoryFiles.set(this.report.rightCommitHash!, filesWithContent);
-                    this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles);
-                },
-                error: () => {
-                    this.errorWhileFetchingRepos = true;
-                },
-            });
-    }*/
-
     close(): void {
         this.activeModal.dismiss();
     }

From b1cad69686607a89aea1d33a92b65eda80584173 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 21:59:26 +0200
Subject: [PATCH 23/35] Rename methods

---
 .../git-diff-report-modal.component.ts        | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 23bc16adb777..5a7ed31e370a 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -33,21 +33,21 @@ export class GitDiffReportModalComponent {
         effect(
             async () => {
                 if (this.diffForTemplateAndSolution()) {
-                    await this.loadFilesForTemplateAndSolution2();
+                    await this.loadFilesForTemplateAndSolution();
                 } else {
-                    await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable2();
+                    await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
                 }
             },
             { allowSignalWrites: true },
         );
     }
 
-    private async loadFilesForTemplateAndSolution2(): Promise<void> {
-        await this.fetchTemplateRepoFiles2();
-        await this.fetchSolutionRepoFiles2();
+    private async loadFilesForTemplateAndSolution(): Promise<void> {
+        await this.fetchTemplateRepoFiles();
+        await this.fetchSolutionRepoFiles();
     }
 
-    private async fetchSolutionRepoFiles2(): Promise<void> {
+    private async fetchSolutionRepoFiles(): Promise<void> {
         try {
             const solutionRepoFiles = await firstValueFrom(this.programmingExerciseService.getSolutionRepositoryTestFilesWithContent(this.report().programmingExercise.id!));
             this.rightCommitFileContentByPath.set(solutionRepoFiles);
@@ -56,22 +56,22 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    private async loadRepositoryFilesForParticipationsFromCacheIfAvailable2(): Promise<void> {
+    private async loadRepositoryFilesForParticipationsFromCacheIfAvailable(): Promise<void> {
         if (this.report().participationIdForLeftCommit) {
             const key = this.report().leftCommitHash!;
             if (this.cachedRepositoryFiles().has(key)) {
                 this.leftCommitFileContentByPath.set(this.cachedRepositoryFiles().get(key)!);
-                await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2();
+                await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
             } else {
-                await this.fetchParticipationRepoFilesAtLeftCommit2();
+                await this.fetchParticipationRepoFilesAtLeftCommit();
             }
         } else {
-            await this.loadTemplateRepoFilesFromCacheIfAvailable2();
-            await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2();
+            await this.loadTemplateRepoFilesFromCacheIfAvailable();
+            await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
         }
     }
 
-    private async fetchParticipationRepoFilesAtLeftCommit2(): Promise<void> {
+    private async fetchParticipationRepoFilesAtLeftCommit(): Promise<void> {
         try {
             const filesWithContent =
                 (await firstValueFrom(
@@ -83,31 +83,31 @@ export class GitDiffReportModalComponent {
             this.leftCommitFileContentByPath.set(filesWithContent);
             this.cachedRepositoryFiles().set(this.report().leftCommitHash!, filesWithContent);
             this.cachedRepositoryFilesService.emitCachedRepositoryFiles(this.cachedRepositoryFiles());
-            await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2();
+            await this.loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable();
         } catch (e) {
             this.errorWhileFetchingRepos.set(true);
         }
     }
 
-    private async loadTemplateRepoFilesFromCacheIfAvailable2(): Promise<void> {
+    private async loadTemplateRepoFilesFromCacheIfAvailable(): Promise<void> {
         const key = this.calculateTemplateMapKey();
         if (this.cachedRepositoryFiles().has(key)) {
             this.leftCommitFileContentByPath.set(this.cachedRepositoryFiles().get(key)!);
         } else {
-            await this.fetchTemplateRepoFiles2();
+            await this.fetchTemplateRepoFiles();
         }
     }
 
-    private async loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable2(): Promise<void> {
+    private async loadParticipationRepoFilesAtRightCommitFromCacheIfAvailable(): Promise<void> {
         const key = this.report().rightCommitHash!;
         if (this.cachedRepositoryFiles().has(key)) {
             this.rightCommitFileContentByPath.set(this.cachedRepositoryFiles().get(key)!);
         } else {
-            await this.fetchParticipationRepoFilesAtRightCommit2();
+            await this.fetchParticipationRepoFilesAtRightCommit();
         }
     }
 
-    private async fetchTemplateRepoFiles2(): Promise<void> {
+    private async fetchTemplateRepoFiles(): Promise<void> {
         const key = this.calculateTemplateMapKey();
         try {
             const response =
@@ -121,7 +121,7 @@ export class GitDiffReportModalComponent {
         }
     }
 
-    private async fetchParticipationRepoFilesAtRightCommit2(): Promise<void> {
+    private async fetchParticipationRepoFilesAtRightCommit(): Promise<void> {
         try {
             const filesWithContent =
                 (await firstValueFrom(

From b6052bdbdc6aa1c788ff44b12f62ff972304bf06 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 22:47:37 +0200
Subject: [PATCH 24/35] Simplify diff layout

---
 .../monaco-diff-editor.component.scss         |  9 +++++
 .../monaco-diff-editor.component.ts           | 34 +++++--------------
 .../monaco-editor/monaco-editor.service.ts    |  1 +
 .../monaco-diff-editor.component.spec.ts      |  9 ++---
 4 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.scss b/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.scss
index 85f7d08ca87a..34b221d82d90 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.scss
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.scss
@@ -1,3 +1,12 @@
+.diff-editor-container {
+    .monaco-diff-editor {
+        .monaco-editor {
+            // Disables the focus border around the editor.
+            outline: none;
+        }
+    }
+}
+
 /*
  * Hide the drag handles of the hidden lines, as this feature would result in unintuitive behavior.
  */
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts
index 8cb86be9a233..bd234e45cdec 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation, effect, inject, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, Renderer2, ViewEncapsulation, effect, inject, input, output } from '@angular/core';
 
 import * as monaco from 'monaco-editor';
 import { Disposable } from 'app/shared/monaco-editor/model/actions/monaco-editor.util';
@@ -13,7 +13,7 @@ export type MonacoEditorDiffText = { original: string; modified: string };
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
 })
-export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
+export class MonacoDiffEditorComponent implements OnDestroy {
     private _editor: monaco.editor.IStandaloneDiffEditor;
     monacoDiffEditorContainerElement: HTMLElement;
 
@@ -24,7 +24,6 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
      * Subscriptions and listeners that need to be disposed of when this component is destroyed.
      */
     listeners: Disposable[] = [];
-    resizeObserver?: ResizeObserver;
 
     /*
      * Injected services and elements.
@@ -42,6 +41,7 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
         this.monacoDiffEditorContainerElement = this.renderer.createElement('div');
         this._editor = this.monacoEditorService.createStandaloneDiffEditor(this.monacoDiffEditorContainerElement);
         this.renderer.appendChild(this.elementRef.nativeElement, this.monacoDiffEditorContainerElement);
+        this.renderer.addClass(this.monacoDiffEditorContainerElement, 'diff-editor-container');
         this.setupDiffListener();
         this.setupContentHeightListeners();
 
@@ -52,15 +52,7 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
         });
     }
 
-    ngOnInit(): void {
-        this.resizeObserver = new ResizeObserver(() => {
-            this.layout();
-        });
-        this.resizeObserver.observe(this.monacoDiffEditorContainerElement);
-    }
-
     ngOnDestroy(): void {
-        this.resizeObserver?.disconnect();
         this.listeners.forEach((listener) => {
             listener.dispose();
         });
@@ -73,7 +65,7 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
      */
     setupDiffListener(): void {
         const diffListener = this._editor.onDidUpdateDiff(() => {
-            this.adjustHeightAndLayout(this.getMaximumContentHeight());
+            this.adjustContainerHeight(this.getMaximumContentHeight());
             this.onReadyForDisplayChange.emit(true);
         });
 
@@ -91,13 +83,13 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
             const contentSizeListener = editor.onDidContentSizeChange((e: monaco.editor.IContentSizeChangedEvent) => {
                 if (e.contentHeightChanged) {
                     // Using the content height of the larger editor here ensures that neither of the editors break out of the container.
-                    this.adjustHeightAndLayout(this.getMaximumContentHeight());
+                    this.adjustContainerHeight(this.getMaximumContentHeight());
                 }
             });
 
             // Called when the user reveals or collapses a hidden region.
             const hiddenAreaListener = editor.onDidChangeHiddenAreas(() => {
-                this.adjustHeightAndLayout(this.getContentHeightOfEditor(editor));
+                this.adjustContainerHeight(this.getContentHeightOfEditor(editor));
             });
 
             this.listeners.push(contentSizeListener, hiddenAreaListener);
@@ -105,21 +97,11 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
     }
 
     /**
-     * Adjusts the height of the editor to fit the new content height.
+     * Adjusts the height of the editor's container to fit the new content height.
      * @param newContentHeight The new content height of the editor.
      */
-    adjustHeightAndLayout(newContentHeight: number) {
+    adjustContainerHeight(newContentHeight: number) {
         this.monacoDiffEditorContainerElement.style.height = newContentHeight + 'px';
-        this.layout();
-    }
-
-    /**
-     * Adjusts this editor to fit its container.
-     */
-    layout(): void {
-        const width = this.monacoDiffEditorContainerElement.clientWidth;
-        const height = this.monacoDiffEditorContainerElement.clientHeight;
-        this._editor.layout({ width, height });
     }
 
     /**
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
index 0d00d81300a3..b16cb7cf6b18 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
@@ -61,6 +61,7 @@ export class MonacoEditorService {
      */
     createStandaloneDiffEditor(domElement: HTMLElement): monaco.editor.IStandaloneDiffEditor {
         return monaco.editor.createDiffEditor(domElement, {
+            automaticLayout: true,
             glyphMargin: true,
             minimap: { enabled: false },
             readOnly: true,
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts
index 459c093e3896..bdfd70b64723 100644
--- a/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts
@@ -27,22 +27,19 @@ describe('MonacoDiffEditorComponent', () => {
 
     it('should dispose its listeners and subscriptions when destroyed', () => {
         fixture.detectChanges();
-        const resizeObserverDisconnectSpy = jest.spyOn(comp.resizeObserver!, 'disconnect');
         const listenerDisposeSpies = comp.listeners.map((listener) => jest.spyOn(listener, 'dispose'));
         comp.ngOnDestroy();
-        for (const spy of [resizeObserverDisconnectSpy, ...listenerDisposeSpies]) {
+        for (const spy of listenerDisposeSpies) {
             expect(spy).toHaveBeenCalledOnce();
         }
     });
 
-    it('should update the size of its container and layout the editor', () => {
-        const layoutSpy = jest.spyOn(comp, 'layout');
+    it('should update the size of its container', () => {
         fixture.detectChanges();
         const element = document.createElement('div');
         comp.monacoDiffEditorContainerElement = element;
-        comp.adjustHeightAndLayout(100);
+        comp.adjustContainerHeight(100);
         expect(element.style.height).toBe('100px');
-        expect(layoutSpy).toHaveBeenCalledOnce();
     });
 
     it('should set the text of the editor', () => {

From 1bd81924b02a699aae5aad79afb31e83c7dcf7af Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Tue, 8 Oct 2024 23:48:33 +0200
Subject: [PATCH 25/35] Reorganize

---
 .../git-diff-report-modal.component.ts        | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 5a7ed31e370a..eab8ca219897 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, signal, untracked } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
@@ -16,26 +16,28 @@ import { TranslateDirective } from 'app/shared/language/translate.directive';
     imports: [GitDiffReportComponent, TranslateDirective],
 })
 export class GitDiffReportModalComponent {
-    report = input.required<ProgrammingExerciseGitDiffReport>();
-    diffForTemplateAndSolution = input<boolean>(true);
-    cachedRepositoryFiles = input<Map<string, Map<string, string>>>(new Map<string, Map<string, string>>());
-
-    errorWhileFetchingRepos = signal<boolean>(false);
-    leftCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
-    rightCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
-
     private readonly activeModal = inject(NgbActiveModal);
     private readonly programmingExerciseService = inject(ProgrammingExerciseService);
     private readonly programmingExerciseParticipationService = inject(ProgrammingExerciseParticipationService);
     private readonly cachedRepositoryFilesService = inject(CachedRepositoryFilesService);
 
+    readonly report = input.required<ProgrammingExerciseGitDiffReport>();
+    readonly diffForTemplateAndSolution = input<boolean>(true);
+    readonly cachedRepositoryFiles = input<Map<string, Map<string, string>>>(new Map<string, Map<string, string>>());
+
+    readonly errorWhileFetchingRepos = signal<boolean>(false);
+    readonly leftCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
+    readonly rightCommitFileContentByPath = signal<Map<string, string> | undefined>(undefined);
+
     constructor() {
         effect(
             async () => {
+                // We call the signal here to ensure the effect always runs when the report changes.
+                this.report();
                 if (this.diffForTemplateAndSolution()) {
-                    await this.loadFilesForTemplateAndSolution();
+                    untracked(async () => await this.loadFilesForTemplateAndSolution());
                 } else {
-                    await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
+                    untracked(async () => await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable());
                 }
             },
             { allowSignalWrites: true },

From 4e26ffda7bf51045286d523408c538b7b1431c98 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Wed, 9 Oct 2024 00:42:41 +0200
Subject: [PATCH 26/35] Adjust tooltip placemnet

---
 .../hestia/git-diff-report/git-diff-report.component.html    | 1 +
 .../hestia/git-diff-report/git-diff-report.component.ts      | 5 ++---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
index 59a89d59223a..fbf8d6863357 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.html
@@ -46,6 +46,7 @@ <h4 class="ps-2">
                 [btnSize]="ButtonSize.SMALL"
                 [icon]="faTableColumns"
                 tooltip="artemisApp.programmingExercise.diffReport.splitView.tooltip"
+                [tooltipPlacement]="TooltipPlacement.BOTTOM"
                 [title]="'artemisApp.programmingExercise.diffReport.splitView.' + (allowSplitView() ? 'disable' : 'enable')"
                 (onClick)="allowSplitView.set(!allowSplitView())"
             />
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
index 00a407ab4417..4657cc8d714e 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, computed, effect, input, signal, un
 import { ProgrammingExerciseGitDiffReport } from 'app/entities/hestia/programming-exercise-git-diff-report.model';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { faSpinner, faTableColumns } from '@fortawesome/free-solid-svg-icons';
-import { ButtonSize, ButtonType } from 'app/shared/components/button.component';
+import { ButtonSize, ButtonType, TooltipPlacement } from 'app/shared/components/button.component';
 import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
@@ -114,10 +114,9 @@ export class GitDiffReportComponent {
 
     protected readonly faSpinner = faSpinner;
     protected readonly faTableColumns = faTableColumns;
-
-    // Expose to template
     protected readonly ButtonSize = ButtonSize;
     protected readonly ButtonType = ButtonType;
+    protected readonly TooltipPlacement = TooltipPlacement;
 
     constructor() {
         effect(() => {

From 7a9c9663ef73da2eb48ad82e1db917231f723c63 Mon Sep 17 00:00:00 2001
From: Patrik Zander <38403547+pzdr7@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:31:52 +0200
Subject: [PATCH 27/35] Update
 src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts

---
 .../programming-diff-report-detail.component.ts                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
index 7fa944f0437e..582a087f84df 100644
--- a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
+++ b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
@@ -39,6 +39,6 @@ export class ProgrammingDiffReportDetailComponent implements OnDestroy {
         }
 
         this.modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
-        this.modalRef.componentInstance.report = signal<ProgrammingExerciseGitDiffReport>(gitDiff);
+        this.modalRef.componentInstance.report = signal(gitDiff);
     }
 }

From 55113446e2ca0855ac1ac3d8d07ec7b15006bb97 Mon Sep 17 00:00:00 2001
From: Patrik Zander <38403547+pzdr7@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:31:57 +0200
Subject: [PATCH 28/35] Update
 src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts

---
 .../programming-exercise-exam-diff.component.ts                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts b/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
index 6e4b6185bbad..0115b42a00c3 100644
--- a/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
+++ b/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
@@ -123,7 +123,7 @@ export class ProgrammingExerciseExamDiffComponent extends ExamPageComponent impl
      * Shows the git-diff in a modal.
      */
     showGitDiff(): void {
-        const modalRef = this.modalService.open(GitDiffReportModalComponent, { size: 'xl' });
+        const modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
         modalRef.componentInstance.report = signal(this.exercise.gitDiffReport);
         modalRef.componentInstance.diffForTemplateAndSolution = signal(false);
         modalRef.componentInstance.cachedRepositoryFiles = signal(this.cachedRepositoryFiles);

From 011c89fd44d85b34991ca4b26179b3adea8fee5e Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Thu, 10 Oct 2024 11:08:40 +0200
Subject: [PATCH 29/35] Add constant

---
 .../programming-diff-report-detail.component.ts                 | 2 +-
 .../programming-exercise-exam-diff.component.ts                 | 2 +-
 .../hestia/git-diff-report/git-diff-report-modal.component.ts   | 2 ++
 .../exam/manage/programming-exam-diff.component.spec.ts         | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
index 582a087f84df..94fb86848f4f 100644
--- a/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
+++ b/src/main/webapp/app/detail-overview-list/components/programming-diff-report-detail/programming-diff-report-detail.component.ts
@@ -38,7 +38,7 @@ export class ProgrammingDiffReportDetailComponent implements OnDestroy {
             return;
         }
 
-        this.modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
+        this.modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: GitDiffReportModalComponent.WINDOW_CLASS });
         this.modalRef.componentInstance.report = signal(gitDiff);
     }
 }
diff --git a/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts b/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
index 0115b42a00c3..81a3f247a809 100644
--- a/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
+++ b/src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/programming-exam-diff/programming-exercise-exam-diff.component.ts
@@ -123,7 +123,7 @@ export class ProgrammingExerciseExamDiffComponent extends ExamPageComponent impl
      * Shows the git-diff in a modal.
      */
     showGitDiff(): void {
-        const modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: 'diff-view-modal' });
+        const modalRef = this.modalService.open(GitDiffReportModalComponent, { windowClass: GitDiffReportModalComponent.WINDOW_CLASS });
         modalRef.componentInstance.report = signal(this.exercise.gitDiffReport);
         modalRef.componentInstance.diffForTemplateAndSolution = signal(false);
         modalRef.componentInstance.cachedRepositoryFiles = signal(this.cachedRepositoryFiles);
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index eab8ca219897..0371ad25ac90 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -16,6 +16,8 @@ import { TranslateDirective } from 'app/shared/language/translate.directive';
     imports: [GitDiffReportComponent, TranslateDirective],
 })
 export class GitDiffReportModalComponent {
+    static readonly WINDOW_CLASS = 'diff-view-modal';
+
     private readonly activeModal = inject(NgbActiveModal);
     private readonly programmingExerciseService = inject(ProgrammingExerciseService);
     private readonly programmingExerciseParticipationService = inject(ProgrammingExerciseParticipationService);
diff --git a/src/test/javascript/spec/component/exam/manage/programming-exam-diff.component.spec.ts b/src/test/javascript/spec/component/exam/manage/programming-exam-diff.component.spec.ts
index cb10c66e1574..3a0d9d6e640c 100644
--- a/src/test/javascript/spec/component/exam/manage/programming-exam-diff.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/manage/programming-exam-diff.component.spec.ts
@@ -83,7 +83,7 @@ describe('ProgrammingExerciseExamDiffComponent', () => {
         const modalServiceSpy = jest.spyOn(modal, 'open');
         component.exercise = { id: 1 } as ProgrammingExercise;
         component.showGitDiff();
-        expect(modalServiceSpy).toHaveBeenCalledExactlyOnceWith(GitDiffReportModalComponent, { size: 'xl' });
+        expect(modalServiceSpy).toHaveBeenCalledExactlyOnceWith(GitDiffReportModalComponent, { windowClass: GitDiffReportModalComponent.WINDOW_CLASS });
     });
 
     it('should use reports from cache if available', fakeAsync(() => {

From cd377217f8cce90b54547bb824a7a876df02f29a Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Thu, 10 Oct 2024 11:53:19 +0200
Subject: [PATCH 30/35] Add translate directive

---
 .../hestia/git-diff-report/git-diff-file.component.ts          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
index 52f31444a6b2..45456a115513 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, effect, input, output, viewChild } from '@angular/core';
 import { ProgrammingExerciseGitDiffEntry } from 'app/entities/hestia/programming-exercise-git-diff-entry.model';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({
     selector: 'jhi-git-diff-file',
@@ -8,7 +9,7 @@ import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-
     encapsulation: ViewEncapsulation.None,
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [MonacoDiffEditorComponent],
+    imports: [MonacoDiffEditorComponent, TranslateDirective],
 })
 export class GitDiffFileComponent {
     readonly monacoDiffEditor = viewChild.required(MonacoDiffEditorComponent);

From bf3c2eb5e81a19d095531078ed571fc4a7dcf76b Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Thu, 10 Oct 2024 12:15:38 +0200
Subject: [PATCH 31/35] Fix display bug

---
 .../hestia/git-diff-report/git-diff-report.component.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
index 4657cc8d714e..22f7bd4d7662 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
@@ -90,13 +90,13 @@ export class GitDiffReportComponent {
 
     readonly entriesByPath = computed(() => {
         const entriesByPath = new Map<string, ProgrammingExerciseGitDiffEntry[]>();
-        this.filePaths().forEach((filePath) => {
+        [...this.templateFileContentByPath().keys()].forEach((filePath) => {
             entriesByPath.set(
                 filePath,
                 this.sortedEntries().filter((entry) => entry.previousFilePath === filePath && !entry.filePath),
             );
         });
-        this.filePaths().forEach((filePath) => {
+        [...this.solutionFileContentByPath().keys()].forEach((filePath) => {
             entriesByPath.set(
                 filePath,
                 this.sortedEntries().filter((entry) => entry.filePath === filePath),

From 671cac5ace1031f6b1317592119f3c1644b31729 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Thu, 10 Oct 2024 13:50:00 +0200
Subject: [PATCH 32/35] Remove redundant setup

---
 .../hestia/git-diff-report/git-diff-file.component.spec.ts       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
index 17294d1d3050..17007596e8a8 100644
--- a/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
+++ b/src/test/javascript/spec/component/hestia/git-diff-report/git-diff-file.component.spec.ts
@@ -45,7 +45,6 @@ describe('GitDiffFileComponent', () => {
         fixture.componentRef.setInput('originalFilePath', fileName);
         fixture.componentRef.setInput('modifiedFileContent', modifiedContent);
         fixture.componentRef.setInput('modifiedFilePath', fileName);
-        jest.spyOn(comp.monacoDiffEditor(), 'setFileContents').mockImplementation();
         fixture.detectChanges();
         expect(setFileContentsStub).toHaveBeenCalledExactlyOnceWith(originalContent, fileName, modifiedContent, fileName);
         expect(comp.fileUnchanged()).toBeFalse();

From 82454b3f4414fc084dcba157322ebe042c319cc0 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Thu, 10 Oct 2024 13:53:29 +0200
Subject: [PATCH 33/35] Move icons to the very top

---
 .../hestia/git-diff-report/git-diff-file-panel.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
index 40ed428310be..9e01edae26b9 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component.ts
@@ -16,6 +16,9 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
     imports: [GitDiffFilePanelTitleComponent, GitDiffLineStatComponent, GitDiffFileComponent, ArtemisSharedModule],
 })
 export class GitDiffFilePanelComponent {
+    protected readonly faAngleUp = faAngleUp;
+    protected readonly faAngleDown = faAngleDown;
+
     readonly diffEntries = input.required<ProgrammingExerciseGitDiffEntry[]>();
     readonly originalFileContent = input<string>();
     readonly modifiedFileContent = input<string>();
@@ -60,7 +63,4 @@ export class GitDiffFilePanelComponent {
                 })
                 .filter((line) => line && line.trim().length !== 0).length,
     );
-
-    protected readonly faAngleUp = faAngleUp;
-    protected readonly faAngleDown = faAngleDown;
 }

From 6601bfccb6fd1dcc74d01efd9016c1f48805ca04 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Thu, 10 Oct 2024 14:05:35 +0200
Subject: [PATCH 34/35] Move more icons to the top

---
 .../git-diff-report/git-diff-report.component.ts     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
index 22f7bd4d7662..cc916e5daf93 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.component.ts
@@ -24,6 +24,12 @@ interface DiffInformation {
     imports: [GitDiffLineStatComponent, ArtemisSharedModule, ArtemisSharedComponentModule, GitDiffFilePanelComponent],
 })
 export class GitDiffReportComponent {
+    protected readonly faSpinner = faSpinner;
+    protected readonly faTableColumns = faTableColumns;
+    protected readonly ButtonSize = ButtonSize;
+    protected readonly ButtonType = ButtonType;
+    protected readonly TooltipPlacement = TooltipPlacement;
+
     readonly report = input.required<ProgrammingExerciseGitDiffReport>();
     readonly templateFileContentByPath = input.required<Map<string, string>>();
     readonly solutionFileContentByPath = input.required<Map<string, string>>();
@@ -112,12 +118,6 @@ export class GitDiffReportComponent {
     readonly allDiffsReady = computed(() => Object.values(this.diffInformationForPaths()).every((info) => info.diffReady));
     readonly allowSplitView = signal<boolean>(true);
 
-    protected readonly faSpinner = faSpinner;
-    protected readonly faTableColumns = faTableColumns;
-    protected readonly ButtonSize = ButtonSize;
-    protected readonly ButtonType = ButtonType;
-    protected readonly TooltipPlacement = TooltipPlacement;
-
     constructor() {
         effect(() => {
             untracked(() => {

From e8bf525a326b0d92db3899b1c8f88ae08d062367 Mon Sep 17 00:00:00 2001
From: Patrik Zander <patrik.zander@tum.de>
Date: Thu, 10 Oct 2024 14:11:11 +0200
Subject: [PATCH 35/35] Simplify untracked

---
 .../git-diff-report-modal.component.ts            | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
index 0371ad25ac90..7684573f821f 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.ts
@@ -33,14 +33,17 @@ export class GitDiffReportModalComponent {
 
     constructor() {
         effect(
-            async () => {
+            () => {
                 // We call the signal here to ensure the effect always runs when the report changes.
                 this.report();
-                if (this.diffForTemplateAndSolution()) {
-                    untracked(async () => await this.loadFilesForTemplateAndSolution());
-                } else {
-                    untracked(async () => await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable());
-                }
+                const diffBetweenTemplateAndSolution = this.diffForTemplateAndSolution();
+                untracked(async () => {
+                    if (diffBetweenTemplateAndSolution) {
+                        await this.loadFilesForTemplateAndSolution();
+                    } else {
+                        await this.loadRepositoryFilesForParticipationsFromCacheIfAvailable();
+                    }
+                });
             },
             { allowSignalWrites: true },
         );