Staff Endorse Anytime Question Comment

[kjassani]

Description

High level Summary:

• Staff (TAs/Professors) can endorse comments on async questions via a thumbs-up button, and remove endorsements by clicking again
• Endorsed comments display a green badge showing the endorser's role (Instructor/TA) and name
• Endorsed comments are sorted to the top of the comment list, with time-based ordering as tiebreaker
• Only staff can endorse; students see the badge but not the button

Backend Changes:

• New PATCH /asyncQuestions/comment/:qid/:commentId/endorse endpoint, guarded by Role.TA and Role.PROFESSOR
• Added endorsedById foreign key to AsyncQuestionComment entity with a migration (1773057600000-add-comment-endorsement)
• Loaded comments.endorsedBy and comments.endorsedBy.courses relations across all async question query sites so the endorser's course role is derived correctly
• Added AsyncQuestionCommentEndorseParams DTO to @koh/common
• Response includes endorser info with role (derived from course membership, not global role)

Frontend Changes:

• Endorse button (thumbs-up icon) next to commenter name, visible to staff only
• Endorsed badge below comment body: green chip with "Endorsed by Instructor/TA (Name)"
• Comments sort endorsed-first, then by createdAt ascending
• New EndorserInfo type and endorseComment API method

Closes #501

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• This requires a run of yarn install
• This change requires an addition/change to the production .env variables. These changes are below:
• This change requires developers to add new .env variables. The file and variables needed are below:
• This change requires a database query to update old data on production. This query is below:

How Has This Been Tested?

• 7 new integration tests for the endorse endpoint:
  • TA can endorse / un-endorse a comment
  • Student cannot endorse (403)
  • 404 for non-existent question or comment
  • Users outside the course cannot endorse
  • GET response includes endorsedBy with role when a comment is endorsed
• Snapshots updated to reflect new endorsedBy/endorsedById fields

Mannual Testing Instructions:

Setup: Log in as TA/Professor in a course with at least one async question that has 2+ comments.

Endorse

1. Open an async question -> see thumbs-up icon next to each comment
2. Click thumbs-up -> green badge appears below comment: "Endorsed by TA/Instructor (YourName)"
3. Comment moves to top of list

Un-endorse

4. Click the green thumbs-up again -> badge disappears, comment returns to chronological position

Student view

5. Log in as student -> no thumbs-up button visible, endorsed badge still shows

Click to expand screenshots

Demo:

Anytime.Question.Endorse.Demo.mp4

Demo Mobile:

Staff.Endorse.Anytime.Question.Demo.Mobile.mov

Professor view:

Professor view on Mobile:

Student view:

Student view on Mobile:

Checklist:

• I have performed a code review of my own code (under the "Files Changed" tab on github) to ensure nothing is committed that shouldn't be (e.g. leftover console.logs, leftover unused logic, or anything else that was accidentally committed)
• I have commented my code where needed
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• I have checked that new and existing tests pass locally with my changes
• Any work that this PR is dependent on has been merged into the main branch
• Any UI changes have been checked to work on desktop, tablet, and mobile

[AdamFipke]

I gave it a quick look over. Changes looks pretty simple so it looks pretty good I think! Though, I would like you to test how it looks on mobile (since Anytime Questions on mobile can look particularly crammed). Send screenshots too please.

And as a reminder, you can turn your browser into a mobile view by clicking this button under browser inspect

[kjassani]

I gave it a quick look over. Changes looks pretty simple so it looks pretty good I think! Though, I would like you to test how it looks on mobile (since Anytime Questions on mobile can look particularly crammed). Send screenshots too please.

And as a reminder, you can turn your browser into a mobile view by clicking this button under browser inspect

Hi Adam, thanks for the review. I have updated the PR description with screenshots and a video from mobile.

[AdamFipke]

Few comments. Nothing that big.

Also super small thing. When reviewing this, I ended up reading through some old code logic that was baffling me and ended up renaming some variables to make it easier to read. That's all that commit was about.

[AdamFipke]

Few more comments. Only small things.

[AdamFipke]

should be good to merge i think