Development: Use signals in title channel name component

jest.config.js

@@ -95,7 +95,7 @@ module.exports = {
         global: {
             // TODO: in the future, the following values should increase to at least 90%
             statements: 89.14,
-            branches: 75.18,
+            branches: 75.14,
             functions: 82.94,
             lines: 89.22,
         },

src/main/webapp/app/exercise/exercise-title-channel-name/exercise-title-channel-name.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges, ViewChild, effect, inject, input, output, signal } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, effect, inject, input, output, signal, viewChild } from '@angular/core';
 import { Course, isCommunicationEnabled } from 'app/core/course/shared/entities/course.model';
 import { Exercise } from 'app/exercise/shared/entities/exercise/exercise.model';
 import { TitleChannelNameComponent } from 'app/shared/form/title-channel-name/title-channel-name.component';
@@ -22,7 +22,7 @@ export class ExerciseTitleChannelNameComponent implements OnChanges {
     @Input() isImport: boolean;
     @Input() hideTitleLabel: boolean;
 
-    @ViewChild(TitleChannelNameComponent) titleChannelNameComponent: TitleChannelNameComponent;
+    readonly titleChannelNameComponent = viewChild.required(TitleChannelNameComponent);
 
     onTitleChange = output<string>();
     onChannelNameChange = output<string>();
@@ -51,14 +51,14 @@ export class ExerciseTitleChannelNameComponent implements OnChanges {
         }
     }
 
-    updateTitle(newTitle: string) {
+    updateTitle(newTitle: string | undefined) {
         this.exercise.title = newTitle;
-        this.onTitleChange.emit(newTitle);
+        this.onTitleChange.emit(newTitle ?? '');
     }
 
-    updateChannelName(newName: string) {
+    updateChannelName(newName: string | undefined) {
         this.exercise.channelName = newName;
-        this.onChannelNameChange.emit(newName);
+        this.onChannelNameChange.emit(newName ?? '');
     }
 
     /**

src/main/webapp/app/exercise/statistics/doughnut-chart/doughnut-chart.component.ts

@@ -21,7 +21,9 @@ const PIE_CHART_NA_FALLBACK_VALUE = [0, 0, 1];
     imports: [RouterLink, NgClass, FaIconComponent, PieChartModule, ArtemisTranslatePipe],
 })
 export class DoughnutChartComponent implements OnChanges, OnInit {
-    private router = inject(Router);
+    protected readonly faSpinner = faSpinner;
+
+    private readonly router = inject(Router);
 
     @Input() course: Course;
     @Input() contentType: DoughnutChartType;
@@ -36,10 +38,6 @@ export class DoughnutChartComponent implements OnChanges, OnInit {
     stats: number[];
     titleLink: string[] | undefined;
 
-    // Icons
-    faSpinner = faSpinner;
-
-    // ngx
     ngxDoughnutData: NgxChartsSingleSeriesDataEntry[] = [
         { name: 'Done', value: 0 },
         { name: 'Not done', value: 0 },

src/main/webapp/app/fileupload/manage/update/file-upload-exercise-update.component.spec.ts

@@ -12,19 +12,24 @@ import { MockActivatedRoute } from 'test/helpers/mocks/activated-route/mock-acti
 import { ExerciseGroup } from 'app/exam/shared/entities/exercise-group.model';
 import { Course } from 'app/core/course/shared/entities/course.model';
 import { TranslateService } from '@ngx-translate/core';
-import { MockProvider } from 'ng-mocks';
 import { MockNgbModalService } from 'test/helpers/mocks/service/mock-ngb-modal.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import dayjs from 'dayjs/esm';
 import { TextExercise } from 'app/text/shared/entities/text-exercise.model';
 import { Exam } from 'app/exam/shared/entities/exam.model';
 import { fileUploadExercise } from 'test/helpers/mocks/service/mock-file-upload-exercise.service';
-import { ExerciseTitleChannelNameComponent } from 'app/exercise/exercise-title-channel-name/exercise-title-channel-name.component';
 import { TeamConfigFormGroupComponent } from 'app/exercise/team-config-form-group/team-config-form-group.component';
 import { NgModel } from '@angular/forms';
 import { ExerciseCategory } from 'app/exercise/shared/entities/exercise/exercise-category.model';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MockRouter } from 'test/helpers/mocks/mock-router';
+import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service';
+import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
+import { MockComponent } from 'ng-mocks';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
+import { ProfileService } from 'app/core/layouts/profiles/shared/profile.service';
+import { MockProfileService } from 'test/helpers/mocks/service/mock-profile.service';
+import { MockResizeObserver } from 'test/helpers/mocks/service/mock-resize-observer';
 
 describe('FileUploadExerciseUpdateComponent', () => {
     let comp: FileUploadExerciseUpdateComponent;
@@ -33,13 +38,16 @@ describe('FileUploadExerciseUpdateComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
             providers: [
                 { provide: LocalStorageService, useClass: MockSyncStorage },
                 { provide: SessionStorageService, useClass: MockSyncStorage },
                 { provide: ActivatedRoute, useValue: new MockActivatedRoute({}) },
                 { provide: NgbModal, useClass: MockNgbModalService },
                 { provide: Router, useClass: MockRouter },
-                MockProvider(TranslateService),
+                { provide: TranslateService, useClass: MockTranslateService },
+                { provide: ProfileService, useClass: MockProfileService },
+                MockComponent(FormDateTimePickerComponent),
                 provideHttpClient(),
                 provideHttpClientTesting(),
             ],
@@ -134,6 +142,10 @@ describe('FileUploadExerciseUpdateComponent', () => {
             const route = TestBed.inject(ActivatedRoute);
             route.data = of({ fileUploadExercise });
             route.url = of([{ path: 'new' } as UrlSegment]);
+
+            global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
+                return new MockResizeObserver(callback);
+            });
         });
 
         it('should not be in exam mode', fakeAsync(() => {
@@ -147,17 +159,16 @@ describe('FileUploadExerciseUpdateComponent', () => {
 
         it('should calculate valid sections', () => {
             const calculateValidSpy = jest.spyOn(comp, 'calculateFormSectionStatus');
-            comp.exerciseTitleChannelNameComponent = { titleChannelNameComponent: { formValidChanges: new Subject() } } as ExerciseTitleChannelNameComponent;
+            comp.exerciseTitleChannelNameComponent().titleChannelNameComponent().isValid.set(false);
             comp.teamConfigFormGroupComponent = { formValidChanges: new Subject() } as TeamConfigFormGroupComponent;
             comp.bonusPoints = { valueChanges: new Subject(), valid: true } as unknown as NgModel;
             comp.points = { valueChanges: new Subject(), valid: true } as unknown as NgModel;
 
             comp.ngOnInit();
             comp.ngAfterViewInit();
-            expect(comp.titleChannelNameComponentSubscription).toBeDefined();
 
-            comp.exerciseTitleChannelNameComponent.titleChannelNameComponent.formValid = true;
-            comp.exerciseTitleChannelNameComponent.titleChannelNameComponent.formValidChanges.next(true);
+            comp.exerciseTitleChannelNameComponent().titleChannelNameComponent().isValid.set(true);
+            fixture.detectChanges();
             expect(calculateValidSpy).toHaveBeenCalledOnce();
             expect(comp.formStatusSections).toBeDefined();
             expect(comp.formStatusSections[0].valid).toBeTrue();
@@ -166,7 +177,6 @@ describe('FileUploadExerciseUpdateComponent', () => {
             expect(calculateValidSpy).toHaveBeenCalledTimes(2);
 
             comp.ngOnDestroy();
-            expect(comp.titleChannelNameComponentSubscription?.closed).toBeTrue();
         });
     });
     describe('imported exercise', () => {

src/main/webapp/app/fileupload/manage/update/file-upload-exercise-update.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, effect, inject, viewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { AlertService, AlertType } from 'app/shared/service/alert.service';
@@ -70,20 +70,19 @@ import { FormFooterComponent } from 'app/shared/form/form-footer/form-footer.com
     ],
 })
 export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestroy, OnInit {
-    private fileUploadExerciseService = inject(FileUploadExerciseService);
-    private modalService = inject(NgbModal);
-    private popupService = inject(ExerciseUpdateWarningService);
-    private activatedRoute = inject(ActivatedRoute);
-    private courseService = inject(CourseManagementService);
-    private exerciseService = inject(ExerciseService);
-    private alertService = inject(AlertService);
-    private navigationUtilService = inject(ArtemisNavigationUtilService);
-    private exerciseGroupService = inject(ExerciseGroupService);
+    private readonly fileUploadExerciseService = inject(FileUploadExerciseService);
+    private readonly modalService = inject(NgbModal);
+    private readonly popupService = inject(ExerciseUpdateWarningService);
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly courseService = inject(CourseManagementService);
+    private readonly exerciseService = inject(ExerciseService);
+    private readonly alertService = inject(AlertService);
+    private readonly navigationUtilService = inject(ArtemisNavigationUtilService);
+    private readonly exerciseGroupService = inject(ExerciseGroupService);
 
     protected readonly faQuestionCircle = faQuestionCircle;
-
-    readonly IncludedInOverallScore = IncludedInOverallScore;
-    readonly documentationType: DocumentationType = 'FileUpload';
+    protected readonly IncludedInOverallScore = IncludedInOverallScore;
+    protected readonly documentationType: DocumentationType = 'FileUpload';
 
     @ViewChild('bonusPoints') bonusPoints: NgModel;
     @ViewChild('points') points: NgModel;
@@ -92,7 +91,7 @@ export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestr
     @ViewChild('startDate') startDateField?: FormDateTimePickerComponent;
     @ViewChild('dueDate') dueDateField?: FormDateTimePickerComponent;
     @ViewChild('assessmentDueDate') assessmentDateField?: FormDateTimePickerComponent;
-    @ViewChild(ExerciseTitleChannelNameComponent) exerciseTitleChannelNameComponent: ExerciseTitleChannelNameComponent;
+    exerciseTitleChannelNameComponent = viewChild.required(ExerciseTitleChannelNameComponent);
     @ViewChild(TeamConfigFormGroupComponent) teamConfigFormGroupComponent: TeamConfigFormGroupComponent;
 
     isExamMode: boolean;
@@ -109,8 +108,6 @@ export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestr
 
     formStatusSections: FormSectionStatus[];
 
-    // Subscriptions
-    titleChannelNameComponentSubscription?: Subscription;
     pointsSubscription?: Subscription;
     bonusPointsSubscription?: Subscription;
     teamSubscription?: Subscription;
@@ -122,6 +119,21 @@ export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestr
         return this.fileUploadExercise.id == undefined ? EditType.CREATE : EditType.UPDATE;
     }
 
+    constructor() {
+        effect(() => {
+            this.updateFormSectionsOnIsValidChange();
+        });
+    }
+
+    /**
+     * Triggers {@link calculateFormSectionStatus} whenever a relevant signal changes
+     */
+    private updateFormSectionsOnIsValidChange() {
+        this.exerciseTitleChannelNameComponent().titleChannelNameComponent().isValid(); // trigger the effect
+
+        this.calculateFormSectionStatus();
+    }
+
     /**
      * Initializes information relevant to file upload exercise
      */
@@ -151,16 +163,12 @@ export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestr
     }
 
     ngAfterViewInit() {
-        this.titleChannelNameComponentSubscription = this.exerciseTitleChannelNameComponent.titleChannelNameComponent.formValidChanges.subscribe(() =>
-            this.calculateFormSectionStatus(),
-        );
         this.pointsSubscription = this.points?.valueChanges?.subscribe(() => this.calculateFormSectionStatus());
         this.bonusPointsSubscription = this.bonusPoints?.valueChanges?.subscribe(() => this.calculateFormSectionStatus());
         this.teamSubscription = this.teamConfigFormGroupComponent.formValidChanges.subscribe(() => this.calculateFormSectionStatus());
     }
 
     ngOnDestroy() {
-        this.titleChannelNameComponentSubscription?.unsubscribe();
         this.pointsSubscription?.unsubscribe();
         this.bonusPointsSubscription?.unsubscribe();
         this.teamSubscription?.unsubscribe();
@@ -170,7 +178,7 @@ export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestr
         this.formStatusSections = [
             {
                 title: 'artemisApp.exercise.sections.general',
-                valid: this.exerciseTitleChannelNameComponent.titleChannelNameComponent.formValid,
+                valid: this.exerciseTitleChannelNameComponent().titleChannelNameComponent().isValid(),
             },
             { title: 'artemisApp.exercise.sections.mode', valid: this.teamConfigFormGroupComponent.formValid },
             { title: 'artemisApp.exercise.sections.problem', valid: true, empty: !this.fileUploadExercise.problemStatement },

src/main/webapp/app/iris/overview/exercise-chatbot/exercise-chatbot-button.component.ts

@@ -44,6 +44,10 @@ import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
     imports: [NgClass, TranslateDirective, FaIconComponent, IrisLogoComponent, HtmlForMarkdownPipe],
 })
 export class IrisExerciseChatbotButtonComponent implements OnInit, OnDestroy {
+    protected readonly faCircle = faCircle;
+    protected readonly faChevronDown = faChevronDown;
+    protected readonly faAngleDoubleDown = faAngleDoubleDown;
+
     dialog = inject(MatDialog);
     protected overlay = inject(Overlay);
     protected readonly chatService = inject(IrisChatService);
@@ -64,11 +68,6 @@ export class IrisExerciseChatbotButtonComponent implements OnInit, OnDestroy {
     private latestIrisMessageSubscription: Subscription;
     private queryParamsSubscription: Subscription;
 
-    // Icons
-    faCircle = faCircle;
-    faChevronDown = faChevronDown;
-    faAngleDoubleDown = faAngleDoubleDown;
-
     @ViewChild('chatBubble') chatBubble: ElementRef;
 
     protected readonly IrisLogoLookDirection = IrisLogoLookDirection;

src/main/webapp/app/lecture/manage/lecture-update/lecture-update.component.spec.ts

@@ -363,7 +363,7 @@ describe('LectureUpdateComponent', () => {
             lectureUpdateComponent.isEditMode.set(true);
             lectureUpdateComponent.titleSection = signal({
                 titleChannelNameComponent: () => ({
-                    isFormValidSignal: () => true,
+                    isValid: () => true,
                 }),
             } as any);
             lectureUpdateComponent.lecturePeriodSection = signal({
@@ -390,7 +390,7 @@ describe('LectureUpdateComponent', () => {
             lectureUpdateComponent.isEditMode.set(false);
             lectureUpdateComponent.titleSection = signal({
                 titleChannelNameComponent: () => ({
-                    isFormValidSignal: () => false,
+                    isValid: () => false,
                 }),
             } as any);
             lectureUpdateComponent.lecturePeriodSection = signal({
@@ -409,7 +409,7 @@ describe('LectureUpdateComponent', () => {
             lectureUpdateComponent.isEditMode.set(true);
             lectureUpdateComponent.titleSection = signal({
                 titleChannelNameComponent: () => ({
-                    isFormValidSignal: () => false,
+                    isValid: () => false,
                 }),
             } as any);
             lectureUpdateComponent.lecturePeriodSection = signal({

src/main/webapp/app/lecture/manage/lecture-update/lecture-update.component.ts

@@ -93,7 +93,7 @@ export class LectureUpdateComponent implements OnInit, OnDestroy {
 
     areSectionsValid = computed(() => {
         return (
-            this.titleSection().titleChannelNameComponent().isFormValidSignal() &&
+            this.titleSection().titleChannelNameComponent().isValid() &&
             this.lecturePeriodSection().isPeriodSectionValid() &&
             (this.unitSection()?.isUnitConfigurationValid() ?? true) &&
             (this.attachmentsSection()?.isFormValid() ?? true)
@@ -104,16 +104,16 @@ export class LectureUpdateComponent implements OnInit, OnDestroy {
 
     constructor() {
         effect(() => {
-            if (this.titleSection()?.titleChannelNameComponent() && this.lecturePeriodSection()) {
+            if (this.titleSection().titleChannelNameComponent() && this.lecturePeriodSection()) {
                 this.subscriptions.add(
-                    this.titleSection()!
+                    this.titleSection()
                         .titleChannelNameComponent()
                         .titleChange.subscribe(() => {
                             this.updateIsChangesMadeToTitleOrPeriodSection();
                         }),
                 );
                 this.subscriptions.add(
-                    this.titleSection()!
+                    this.titleSection()
                         .titleChannelNameComponent()
                         .channelNameChange.subscribe(() => {
                             this.updateIsChangesMadeToTitleOrPeriodSection();
@@ -174,7 +174,7 @@ export class LectureUpdateComponent implements OnInit, OnDestroy {
         updatedFormStatusSections.push(
             {
                 title: 'artemisApp.lecture.sections.title',
-                valid: Boolean(this.titleSection().titleChannelNameComponent().isFormValidSignal()),
+                valid: this.titleSection().titleChannelNameComponent().isValid(),
             },
             {
                 title: 'artemisApp.lecture.sections.period',