Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Communication: Highlight solution answer in thread #9998

Conversation

badkeyy
Copy link
Contributor

@badkeyy badkeyy commented Dec 11, 2024

Checklist

General

Client

  • Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
  • I strictly followed the principle of data economy for all client-server REST calls.
  • I strictly followed the client coding and design guidelines.
  • Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
  • I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
  • I added authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
  • I documented the TypeScript code using JSDoc style.
  • I added multiple screenshots/screencasts of my UI changes.
  • I translated all newly inserted strings into English and German.

Motivation and Context

Implements #9934

Description

Add a solution badge to the resolving message of a thread.

Steps for Testing

Prerequisites:

  • 1 Course
  • 1 Instructor
  1. Log in to Artemis
  2. Go to the communication tab of any course
  3. Create a conversation (thread) with at least two answers
  4. Mark one answer as "Reply resovles the original message"
  5. Find that this message is now marked with the "Solution" badge

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

  • I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance even for very large courses with more than 2000 students.
  • I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance even for very large courses with more than 2000 students.

Code Review

  • Code Review 1
  • Code Review 2

Manual Tests

  • Test 1
  • Test 2

Exam Mode Test

  • Test 1
  • Test 2

Performance Tests

  • Test 1
  • Test 2

Screenshots

image

Summary by CodeRabbit

  • New Features

    • Added a badge to indicate whether a post resolves an issue, enhancing user context.
    • Introduced localization support for the new badge with translations in both German and English.
  • Bug Fixes

    • Updated tests to ensure accurate verification of the new functionality and existing component behavior.
  • Tests

    • Added a new test case to check the display of the solution badge based on post resolution status.

@github-actions github-actions bot added tests client Pull requests that update TypeScript code. (Added Automatically!) labels Dec 11, 2024
@badkeyy badkeyy marked this pull request as ready for review December 11, 2024 14:25
@badkeyy badkeyy requested a review from a team as a code owner December 11, 2024 14:25
Copy link

coderabbitai bot commented Dec 11, 2024

Walkthrough

The changes in this pull request introduce a new method and a conditional rendering in the AnswerPostHeaderComponent. A method named isResolvesPostSet() is added to check if a post resolves an issue, and based on this, a new badge is rendered in the HTML template. Additionally, new localization keys for "resolvesPost" are added in both German and English JSON files to support the new feature. The test suite for the component is also updated to include tests for the new functionality.

Changes

File Change Summary
src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html Added a conditional block to render a badge if isResolvesPostSet() returns true.
src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.ts Introduced a new method isResolvesPostSet() to check the resolvesPost attribute of posting.
src/main/webapp/i18n/de/metis.json Added a new key "resolvesPost": "Lösung" in the post section.
src/main/webapp/i18n/en/metis.json Added a new key "resolvesPost": "Solution" in the post section.
src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts Updated tests to include checks for the new isResolvesPostSet() method and its effects.

Possibly related PRs

Suggested labels

small, ready to merge, component:Communication, bugfix

Suggested reviewers

  • HawKhiem
  • SimonEntholzer
  • asliayk
  • rabeatwork
  • krusche

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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Experiment)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (2)
src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.ts (1)

32-35: Consider simplifying the boolean check and improving the comment.

The implementation can be improved in terms of clarity and documentation:

-    //Check if the post is a resolves post and if the attribute is not set return false
-    isResolvesPostSet(): boolean {
-        return this.posting.resolvesPost !== undefined && this.posting.resolvesPost;
-    }
+    /**
+     * Checks if the current post is marked as a solution.
+     * @returns true if this post resolves the original post, false otherwise
+     */
+    isResolvesPostSet(): boolean {
+        return Boolean(this.posting.resolvesPost);
+    }

The Boolean() conversion handles both undefined check and truthiness in a cleaner way.

src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html (1)

37-45: Enhance accessibility for the solution badge.

While the implementation is functionally correct, we should improve accessibility for screen readers:

         @if (isResolvesPostSet()) {
             <span class="post-header-solution">
                 <span
                     class="badge bg-info ms-2"
                     jhiTranslate="artemisApp.metis.post.resolvesPost"
                     ngbTooltip="{{ 'artemisApp.metis.post.resolvesPost' | artemisTranslate }}"
+                    role="status"
+                    aria-label="{{ 'artemisApp.metis.post.resolvesPost' | artemisTranslate }}"
                 ></span>
             </span>
         }

Adding role="status" and aria-label improves the experience for screen reader users.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between da468e2 and d1df3e7.

📒 Files selected for processing (5)
  • src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html (1 hunks)
  • src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.ts (1 hunks)
  • src/main/webapp/i18n/de/metis.json (1 hunks)
  • src/main/webapp/i18n/en/metis.json (1 hunks)
  • src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts (2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.ts (1)

Pattern src/main/webapp/**/*.ts: angular_style:https://angular.io/guide/styleguide;methods_in_html:false;lazy_loading:true;code_reuse:true;tests:meaningful;types:PascalCase;enums:PascalCase;funcs:camelCase;props:camelCase;no_priv_prefix:true;strings:single_quotes;localize:true;btns:functionality;links:navigation;icons_text:newline;labels:associate;code_style:arrow_funcs,curly_braces,open_braces_same_line,indent_4;memory_leak_prevention:true;routes:naming_schema;chart_framework:ngx-charts;responsive_layout:true

src/main/webapp/i18n/de/metis.json (1)

Pattern src/main/webapp/i18n/de/**/*.json: German language translations should be informal (dutzen) and should never be formal (sietzen). So the user should always be addressed with "du/dein" and never with "sie/ihr".

src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.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}}

📓 Learnings (1)
src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts (1)
Learnt from: rabeatwork
PR: ls1intum/Artemis#9103
File: src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts:94-94
Timestamp: 2024-11-12T12:52:03.805Z
Learning: The `#today-flag` ID is only present in the test files and not in the actual component's HTML or TypeScript files.
🔇 Additional comments (2)
src/main/webapp/i18n/en/metis.json (1)

138-138: LGTM! Translation key properly integrated

The new translation key "resolvesPost" with value "Solution" is well-placed in the post section and aligns perfectly with the PR objective of highlighting solution answers in threads.

src/main/webapp/i18n/de/metis.json (1)

138-138: LGTM! German translation properly implemented

The German translation key "resolvesPost" with value "Lösung" is:

  • Correctly placed in the post section
  • Uses appropriate German translation
  • Maintains consistency with the informal language style (dutzen) used throughout the file

Comment on lines +96 to +103
it('should display solution when answerPost resolves post', () => {
const isResolvesPostSetSpy = jest.spyOn(component, 'isResolvesPostSet');
component.posting = metisResolvingAnswerPostUser1;
fixture.detectChanges();
const solution = debugElement.query(By.css('.post-header-solution'));
expect(isResolvesPostSetSpy).toHaveReturnedWith(true);
expect(solution).not.toBeNull();
});
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance test coverage for the solution badge feature.

While the current test verifies the positive case, we should add more test cases:

     it('should display solution when answerPost resolves post', () => {
         const isResolvesPostSetSpy = jest.spyOn(component, 'isResolvesPostSet');
         component.posting = metisResolvingAnswerPostUser1;
         fixture.detectChanges();
         const solution = debugElement.query(By.css('.post-header-solution'));
         expect(isResolvesPostSetSpy).toHaveReturnedWith(true);
         expect(solution).not.toBeNull();
+        const badge = solution.query(By.css('.badge'));
+        expect(badge.nativeElement.getAttribute('aria-label')).toBeTruthy();
     });
+
+    it('should not display solution badge when post does not resolve', () => {
+        component.posting = { ...metisResolvingAnswerPostUser1, resolvesPost: false };
+        fixture.detectChanges();
+        const solution = debugElement.query(By.css('.post-header-solution'));
+        expect(solution).toBeNull();
+    });
+
+    it('should display correct translation in solution badge', () => {
+        component.posting = metisResolvingAnswerPostUser1;
+        fixture.detectChanges();
+        const badge = debugElement.query(By.css('.badge'));
+        expect(badge.attributes['jhiTranslate']).toBe('artemisApp.metis.post.resolvesPost');
+    });

These additional tests will:

  1. Verify the accessibility attributes
  2. Test the negative case
  3. Ensure correct translation key usage

Committable suggestion skipped: line range outside the PR's diff.

Copy link

@HawKhiem HawKhiem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, could you please check why it's not possible to deploy to the test servers. I tried on TS1 and TS3 but still couldn't deploy. I also did update the brach before deploying. Thank you!

@badkeyy
Copy link
Contributor Author

badkeyy commented Dec 12, 2024

Hi, could you please check why it's not possible to deploy to the test servers. I tried on TS1 and TS3 but still couldn't deploy. I also did update the brach before deploying. Thank you!

Hey @HawKhiem,
this issue seems to persist across a lot of my PR's an I don't really know why... For me locally everything builds and runs perfectly. Is there any error message I could work with?

@HawKhiem
Copy link

HawKhiem commented Dec 12, 2024

Hi, could you please check why it's not possible to deploy to the test servers. I tried on TS1 and TS3 but still couldn't deploy. I also did update the brach before deploying. Thank you!

Hey @HawKhiem, this issue seems to persist across a lot of my PR's an I don't really know why... For me locally everything builds and runs perfectly. Is there any error message I could work with?

Sorry for pressing the wrong button and acidentally closing this pr a minute ago. I reopen it. Anyway when I tried to deploy to a test server, I got something like this. Starting from the third check onwards somehow didn't run through

image

@HawKhiem HawKhiem reopened this Dec 12, 2024
@badkeyy
Copy link
Contributor Author

badkeyy commented Dec 12, 2024

Hi, could you please check why it's not possible to deploy to the test servers. I tried on TS1 and TS3 but still couldn't deploy. I also did update the brach before deploying. Thank you!

Hey @HawKhiem, this issue seems to persist across a lot of my PR's an I don't really know why... For me locally everything builds and runs perfectly. Is there any error message I could work with?

Sorry for pressing the wrong button and acidentally closing this pr a minute ago. I reopen it. Anyway when I tried to deploy to a test server, I got something like this. Starting from the third check onwards somehow didn't run through

image

@HawKhiem I see, however all the errors seem to be CI related. It also does not make any sense that the server would not build as I didn't change anything in it.

image

@HawKhiem
Copy link

Hi, could you please check why it's not possible to deploy to the test servers. I tried on TS1 and TS3 but still couldn't deploy. I also did update the brach before deploying. Thank you!

Hey @HawKhiem, this issue seems to persist across a lot of my PR's an I don't really know why... For me locally everything builds and runs perfectly. Is there any error message I could work with?

Sorry for pressing the wrong button and acidentally closing this pr a minute ago. I reopen it. Anyway when I tried to deploy to a test server, I got something like this. Starting from the third check onwards somehow didn't run through
image

@HawKhiem I see, however all the errors seem to be CI related. It also does not make any sense that the server would not build as I didn't change anything in it.

image

That is indeed quite odd. I reran again and the build still doesnt go through. I will try deploying and test locally later today

image

@laxerhd
Copy link
Contributor

laxerhd commented Dec 12, 2024

I have also encountered this problem. For the majority (maybe even all) of my PRs, the deployment on the test server does not work. For most of them the Build Expected — Waiting for status to be reported test did not go through and thus also the tests down below it.
@HawKhiem do you maybe have an option like this shown to you?
image
I am not sure, but the build did not go through before sb pressed this for me. Or is this related to something else?

@HawKhiem
Copy link

I have also encountered this problem. For the majority (maybe even all) of my PRs, the deployment on the test server does not work. For most of them the Build Expected — Waiting for status to be reported test did not go through and thus also the tests down below it. @HawKhiem do you maybe have an option like this shown to you? image I am not sure, but the build did not go through before sb pressed this for me. Or is this related to something else?

Yes I also have that option

@laxerhd
Copy link
Contributor

laxerhd commented Dec 18, 2024

That is indeed quite odd. I reran again and the build still doesnt go through. I will try deploying and test locally later today

Just a quick update for others who may have the same problem of PRs not being deployed. If you try to create a PR with a branch from a forked Artemis repository, the test server will not deploy it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client Pull requests that update TypeScript code. (Added Automatically!) deploy:artemis-test1 ready for review tests
Projects
Status: Work In Progress
Development

Successfully merging this pull request may close these issues.

7 participants