Programming exercises: Add information box to exercise details page
#9668
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
tests
client
WalkthroughThe pull request introduces significant modifications across multiple components in the Angular application, primarily focusing on enhancing the handling and display of information related to exams and exercises. Key changes include the restructuring of data types for information boxes, updates to HTML templates for conditional rendering, and the introduction of new components for displaying exercise headers and difficulty levels. Additionally, the styling of various components has been refined, and new utility functions have been added to improve functionality. The overall aim is to enhance the clarity, maintainability, and user experience of the application. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Component
participant Service
User->>Component: Request exercise details
Component->>Service: Fetch exercise data
Service-->>Component: Return exercise data
Component->>User: Display exercise details
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (2)
src/test/javascript/spec/component/exercises/shared/headers/exercise-headers-information.component.spec.ts (2)
28-35: Improve type safety of mock exercise objectConsider using a proper type construction for the mock exercise object instead of type casting.
- const exercise = { - id: 42, - type: ExerciseType.TEXT, - studentParticipations: [], - course: {}, - dueDate: dayjs().subtract(1, 'weeks'), - assessmentDueDate: dayjs().add(1, 'weeks'), - } as unknown as Exercise; + const exercise: Exercise = { + id: 42, + type: ExerciseType.TEXT, + studentParticipations: [], + course: {} as Course, + dueDate: dayjs().subtract(1, 'weeks'), + assessmentDueDate: dayjs().add(1, 'weeks'), + maxPoints: 0, + bonusPoints: 0, + title: '', + };
58-81: Enhance information box items test assertionsThe test could be more specific in validating the actual content of the information boxes rather than just checking their presence.
const compiled = fixture.nativeElement as HTMLElement; const informationBoxes = compiled.querySelectorAll('jhi-information-box'); expect(informationBoxes).toHaveLength(2); + const firstBox = informationBoxes[0]; + expect(firstBox.getAttribute('ng-reflect-title')).toBe('Test Title 1'); + expect(firstBox.getAttribute('ng-reflect-tooltip')).toBe('Test Tooltip 1'); + expect(firstBox.getAttribute('ng-reflect-content-color')).toBe('primary');
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (5)
src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.ts(2 hunks)src/main/webapp/app/overview/course-overview.component.scss(2 hunks)src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.html(2 hunks)src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html(1 hunks)src/test/javascript/spec/component/exercises/shared/headers/exercise-headers-information.component.spec.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.ts
- src/main/webapp/app/overview/course-overview.component.scss
- src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.html
- src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html
🧰 Additional context used
📓 Path-based instructions (1)
src/test/javascript/spec/component/exercises/shared/headers/exercise-headers-information.component.spec.ts (1)
Pattern src/test/javascript/spec/**/*.ts: jest: true; mock: NgMocks; bad_practices: avoid_full_module_import; perf_improvements: mock_irrelevant_deps; service_testing: mock_http_for_logic; no_schema: avoid_NO_ERRORS_SCHEMA; expectation_specificity: true; solutions: {boolean: toBeTrue/False, reference: toBe, existence: toBeNull/NotNull, undefined: toBeUndefined, class_obj: toContainEntries/toEqual, spy_calls: {not_called: not.toHaveBeenCalled, once: toHaveBeenCalledOnce, with_value: toHaveBeenCalledWith|toHaveBeenCalledExactlyOnceWith}}
🔇 Additional comments (1)
src/test/javascript/spec/component/exercises/shared/headers/exercise-headers-information.component.spec.ts (1)
184-217: Split submission color tests for better maintainability
...cript/spec/component/exercises/shared/headers/exercise-headers-information.component.spec.ts
Show resolved
Hide resolved
...cript/spec/component/exercises/shared/headers/exercise-headers-information.component.spec.ts
Show resolved
Hide resolved
sachmii
temporarily deployed
to
artemis-test2.artemis.cit.tum.de
GitHub Actions
Inactive
ahbitaqu
approved these changes
Nov 6, 2024
JerroyTan
temporarily deployed
to
artemis-test5.artemis.cit.tum.de
GitHub Actions
Inactive
JerroyTan
approved these changes
Nov 8, 2024
There was a problem hiding this comment.
[Tested on TS5]
I tested the boxes for Points, Submission Due, Start date, Status, Difficulty and Categories. Functionalities are all working as expected. Boxes also wrap on mobile view
Comment:
- Difficulty box seems to be less obvious than the previous fully-colored background boxes
- Box for Categories may be too small: it is very hard to read
|
github-actions
bot
added
the
deployment-error
github-actions
bot
removed
the
deployment-error
|
github-actions
bot
added
the
deployment-error
github-actions
bot
removed
the
deployment-error
sawys777
temporarily deployed
to
artemis-test3.artemis.cit.tum.de
GitHub Actions
Inactive
sawys777
approved these changes
Nov 9, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Checklist
General
Client
authoritiesto all new routes and checked the course groups for displaying navigation elements (links, buttons).Motivation and Context
This PR is part of the new design; it enhances usability and aligns with the updated layout.
Description
All important information for an exercise is now displayed in the information boxes at the top. Additionally, the Instructor Actions are consolidated into a dropdown button.
This is a reopened PR of the stale PR #9089: Programming exercises: Add information box to exercise details page.
Steps for Testing
Prerequisites:
Testserver States
Note
These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.
Review Progress
Performance Review
Code Review
Manual Tests
Test Coverage
Screenshots
Summary by CodeRabbit
Release Notes
New Features
ExerciseHeadersInformationComponentto display detailed exercise information.DifficultyLevelComponentfor visual representation of difficulty levels.InformationBoxstructure for better content handling.showCompletionto control the display of completion information in results.Improvements
Bug Fixes
Styling Updates
Tests