`Development`: Use signals in title channel name component #10979

florian-glombik · 2025-06-04T09:20:02Z

Checklist

General

I tested all changes and their related features with all corresponding user types on a test server.
I chose a title conforming to the naming conventions for pull requests.

Client

Important: I implemented the changes with a very good performance, prevented too many UI re-renderings
I strictly followed the client coding and design guidelines.
I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
I documented the TypeScript code using JSDoc style.
I added multiple screenshots/screencasts of my UI changes.

Motivation and Context

We want to exploit the language features that Angular offers. In most cases, signals offer a more intuitive and more performant solution than raw RxJS subscriptions.

In the long run, we can simplify the status bar updates and rely on computed signals instead of registering effects and defining update methods, which is a much cleaner and easier to maintain approach. Exploiting signals also yields better performance and less UI updates.

This PR is a step in that direction.

Description

Removes the deprecated attributes formValid and formValidChanges from title-channel-name.component.ts
Use signals in components where title-channel-name.component.ts is used
Make injections readonly
Reduce code duplication by introducing shared method for removing hypens in title-channel-name.component.ts
Made constants protected readonly
Adjusted existing tests to work with signals, added some tests for coverage
The signal migration lowered the coverage threshold, but as the components are well tested and bumping the coverage up in this PR to the previous state would be a huge effort, I decided to add a dedicated PR to increase the coverage in unrelated components Development: Improve client test coverage #11016

Steps for Testing

Test this as instructor

Verify the status bar updates properly when changing the title when creating/editing TextExercises
Verify the status bar updates properly when changing the title when creating/editing ModelingExercises
Verify the status bar updates properly when changing the title when creating/editing ProgrammingExercises
Verify the status bar updates properly when changing the title when creating/editing FileUploadExercises
Verify the status bar updates properly when changing the title when creating/editing Lectures

The behaviour should not have changed in comparison to develop when editing the title of one of the listed entities.

Testserver States

You can manage test servers using Helios. Check environment statuses in the environment list. To deploy to a test server, go to the CI/CD page, find your PR or branch, and trigger the deployment.

Review Progress

Code Review

Code Review 1
Code Review 2

Manual Tests

Test 1
Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
doughnut-chart.component.ts	95.12%	✅
file-upload-exercise-update.component.ts	91.52%	✅
lecture-update.component.ts	91.03%	✅
modeling-exercise-update.component.ts	92.36%	✅
title-channel-name.component.ts	100%	✅
text-exercise-update.component.ts	96.94%	✅

Screenshots

Apperance should not have changed, see this example:

Summary by CodeRabbit

New Features
- Improved form validation experience for exercise and lecture update screens by making validity checks reactive and automatic.
- Enhanced title and channel name handling with more robust formatting and real-time updates.
Refactor
- Switched to a more reactive approach for child component communication and form validation across multiple exercise and update components.
- Updated component APIs to use function-based and signal-based access for properties and methods.
- Improved encapsulation and immutability of icons and injected services.
- Simplified subscription handling and replaced manual subscriptions with reactive effects.
- Refined component input handling using reactive models and signals.
Bug Fixes
- Ensured that empty or undefined titles and channel names are handled gracefully, preventing potential issues during updates.
Style
- Updated templates to use function calls for bindings, improving consistency and reliability.
Tests
- Refactored and enhanced test suites to align with new reactive patterns and component APIs.
- Improved test setup completeness and mocking for dependent services and components.
Chores
- Adjusted code coverage thresholds to reflect recent changes.

github-actions · 2025-06-04T10:04:25Z

End-to-End (E2E) Test Results Summary

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	201 ran	197 passed	3 skipped	1 failed	59m 22s 829ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/exercise/programming/ProgrammingExerciseStaticCodeAnalysis.spec.ts
ts.Static code analysis tests › Configures SCA grading and makes a successful submission with SCA errors	❌ failure	2m 16s 288ms

github-actions · 2025-06-13T15:27:03Z

End-to-End (E2E) Test Results Summary

	Tests	Passed ✅	Skipped ⚠️	Failed	Time ⏱
End-to-End (E2E) Test Report	201 ran	198 passed	3 skipped	0 failed	54m 53s 361ms

Test	Result	Time ⏱
No test annotations available

…annel-name-component

github-actions · 2025-06-13T19:45:02Z

End-to-End (E2E) Test Results Summary

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	201 ran	197 passed	3 skipped	1 failed	1h 1m 30s 415ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/exercise/programming/ProgrammingExerciseStaticCodeAnalysis.spec.ts
ts.Static code analysis tests › Configures SCA grading and makes a successful submission with SCA errors	❌ failure	2m 16s 292ms

ahmetsenturk

code lgtm 👍

…annel-name-component # Conflicts: # jest.config.js

github-actions · 2025-06-14T14:21:03Z

End-to-End (E2E) Test Results Summary

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	201 ran	197 passed	3 skipped	1 failed	56m 4s 844ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/exercise/programming/ProgrammingExerciseStaticCodeAnalysis.spec.ts
ts.Static code analysis tests › Configures SCA grading and makes a successful submission with SCA errors	❌ failure	2m 12s 866ms

github-actions · 2025-06-14T15:55:23Z

End-to-End (E2E) Test Results Summary

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	201 ran	197 passed	3 skipped	1 failed	59m 16s 291ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/exercise/programming/ProgrammingExerciseStaticCodeAnalysis.spec.ts
ts.Static code analysis tests › Configures SCA grading and makes a successful submission with SCA errors	❌ failure	2m 16s 721ms

chuuuun

Tested on TS4, user 17. status bars updates properly in mentioned domains.

github-actions · 2025-06-15T16:10:13Z

End-to-End (E2E) Test Results Summary

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	201 ran	197 passed	3 skipped	1 failed	52m 49s 38ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/exercise/quiz-exercise/QuizExerciseParticipation.spec.ts
ts.Quiz Exercise Participation › DnD Quiz participation › Student can participate in DnD Quiz	❌ failure	2m 3s 472ms

…annel-name-component

github-actions · 2025-06-15T22:08:30Z

End-to-End (E2E) Test Results Summary

	Tests	Passed ✅	Skipped	Failed	Time ⏱
End-to-End (E2E) Test Report	1 ran	1 passed	0 skipped	0 failed	1s 834ms

Test	Result	Time ⏱
No test annotations available

florian-glombik added 9 commits June 2, 2025 10:52

Make sure that inputs use signals

876dc2b

Replace formValid variable with signal

e0c4ee3

Use signal for improved reactivity in modeling component

551996f

Remove form valid changes

d48131d

Remove subscription

4be9aed

Fix mistakes

23caa0f

Make sure to use signals in template

0accb5a

Fix remaining build issues

32939d7

Fix issues resulting from using viewChild

eaacbb4

github-project-automation bot added this to Artemis Development Jun 4, 2025

github-project-automation bot moved this to Work In Progress in Artemis Development Jun 4, 2025

github-actions bot assigned florian-glombik Jun 4, 2025

florian-glombik added 7 commits June 4, 2025 11:37

Fix text exercise updates

805d3d1

Fix file upload exercise updates

93ba4ae

Remove fallback that is not required anymore

c4e2ce4

Fix modeling exercise updates

d82eda3

Make injections readonly

5d16cbf

Use signals in programming exercise component

c5edf1d

Remove redundant notNull operators

854b2d8

florian-glombik added 3 commits June 4, 2025 12:11

Minor adjustments from self-review

6306388

Make sure tests are running again

c5cffa4

Remove not required fakeAsync

f7723c1

coderabbitai bot previously approved these changes Jun 13, 2025

View reviewed changes

Merge branch 'develop' into chore/development/use-signals-in-title-ch…

e8ee08f

…annel-name-component

ahmetsenturk previously approved these changes Jun 13, 2025

View reviewed changes

Merge branch 'develop' into chore/development/use-signals-in-title-ch…

5766c11

…annel-name-component # Conflicts: # jest.config.js

florian-glombik dismissed stale reviews from ahmetsenturk and coderabbitai[bot] via 5766c11 June 14, 2025 13:37

github-actions bot added tests server Pull requests that update Java code. (Added Automatically!) core Pull requests that affect the corresponding module labels Jun 14, 2025

coderabbitai bot previously approved these changes Jun 14, 2025

View reviewed changes

Bump coverage conditions

f68f20f

florian-glombik dismissed coderabbitai[bot]’s stale review via f68f20f June 14, 2025 15:10

coderabbitai bot previously approved these changes Jun 14, 2025

View reviewed changes

helios-aet bot temporarily deployed to artemis-test4.artemis.cit.tum.de June 14, 2025 19:07 Inactive

chuuuun previously approved these changes Jun 14, 2025

View reviewed changes

helios-aet bot temporarily deployed to artemis-test5.artemis.cit.tum.de June 14, 2025 19:20 Inactive

Adjust coverage treshold

44ab605

florian-glombik dismissed stale reviews from chuuuun and coderabbitai[bot] via 44ab605 June 15, 2025 15:29

coderabbitai bot approved these changes Jun 15, 2025

View reviewed changes

Merge branch 'develop' into chore/development/use-signals-in-title-ch…

acfd324

…annel-name-component

github-actions bot removed tests server Pull requests that update Java code. (Added Automatically!) core Pull requests that affect the corresponding module labels Jun 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

`Development`: Use signals in title channel name component #10979

`Development`: Use signals in title channel name component #10979

florian-glombik commented Jun 4, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

github-actions bot commented Jun 4, 2025

Uh oh!

github-actions bot commented Jun 13, 2025

Uh oh!

github-actions bot commented Jun 13, 2025

Uh oh!

ahmetsenturk left a comment

Uh oh!

github-actions bot commented Jun 14, 2025

Uh oh!

github-actions bot commented Jun 14, 2025

Uh oh!

chuuuun left a comment

Uh oh!

github-actions bot commented Jun 15, 2025

Uh oh!

github-actions bot commented Jun 15, 2025

Uh oh!

Uh oh!

Development: Use signals in title channel name component #10979

Are you sure you want to change the base?

Development: Use signals in title channel name component #10979

Conversation

florian-glombik commented Jun 4, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

General

Client

Motivation and Context

Description

Steps for Testing

Testserver States

Review Progress

Code Review

Manual Tests

Test Coverage

Client

Screenshots

Summary by CodeRabbit

Uh oh!

github-actions bot commented Jun 4, 2025

End-to-End (E2E) Test Results Summary

Uh oh!

github-actions bot commented Jun 13, 2025

End-to-End (E2E) Test Results Summary

Uh oh!

github-actions bot commented Jun 13, 2025

End-to-End (E2E) Test Results Summary

Uh oh!

ahmetsenturk left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 14, 2025

End-to-End (E2E) Test Results Summary

Uh oh!

github-actions bot commented Jun 14, 2025

End-to-End (E2E) Test Results Summary

Uh oh!

chuuuun left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 15, 2025

End-to-End (E2E) Test Results Summary

Uh oh!

github-actions bot commented Jun 15, 2025

End-to-End (E2E) Test Results Summary

Uh oh!

Uh oh!

`Development`: Use signals in title channel name component #10979

`Development`: Use signals in title channel name component #10979

florian-glombik commented Jun 4, 2025 •

edited by coderabbitai bot

Loading