[#12287] Student home page: Make it easier to navigate courses

[Zxun2]

Fixes #12287

Outline of Solution
For students who link multiple courses to the same account, the number of courses on the home page may build up over the years, making it difficult to find a specific course.

Currently, these courses and their feedback sessions are loaded immediately on page load, resulting in long loading periods.

This PR introduces lazy loading to courses, loading feedback sessions only when needed. In addition, an accordion is used to make the UI cleaner (the top 3 (or 5?) most recent courses are open by default).

Overview of changes

Demo

Sort.Courses.by.Creation.Date.and.Lazy.Loading.mp4

[NicolasCwy]

Overall LGTM but got a query about the testing part. Let's also wait for @wkurniawan07 on allowing students to see course creation and deletion time.

Could you also update your branch with the latest master?

[Zxun2]

Hmm 🤔 Should i be worried about the failing E2E Tests? It is passing on my fork.

[domlimm]

@Zxun2 It fails sometimes, and we will re-run it. If not, we will need you to look into it. No worries ZX!

[Zxun2]

@domlimm Alright, thanks dom! 😊

[weiquu]

Overall LGTM but got a query about the testing part. Let's also wait for @wkurniawan07 on allowing students to see course creation and deletion time.

Bumping @wkurniawan07!

[Zxun2]

Any update on this?

[weiquu]

Hi @Zxun2, we're still waiting on @wkurniawan07 to weigh in on the hiding/unhiding of the creation time information. Also pinging other senior members @zhaojj2209 and @samuelfangjw for help :')

[zhaojj2209]

From looking at the issue #10264 thread, both creation and deletion timestamp are labelled as "good to hide" instead of "must hide", so at the very least exposing them won't cause serious security issues. My take is that it should be safe to expose creation timestamp for the sake of sorting courses by creation date. It would be good if we can continue hiding deletion timestamp though, let's not expose more than necessary.

[samuelfangjw]

Idea behind hiding these attributes is to, as a general principle, expose only as little as necessary for the app to function since we can never be sure how different bits of information can be used in an attack. I'm ok with exposing creation time since it is required for this functionality and I doubt exposing this attribute is inherently insecure.

[Zxun2]

@samuelfangjw @zhaojj2209 @weiquu @NicolasCwy Thanks for the inputs! I will make the changes shortly :)

[weiquu]

Hi @Zxun2, looks great (: Can I just check 1 small thing:

• On initial page load, only the feedback sessions for the first 3 courses are loaded (lines 118-121 of student-home-page.component.ts)
• When any of the sort buttons are clicked, the feedback sessions for all courses are loaded (lines 309-312 of student-home-page.component.ts)
• E.g. if I reload the page and expand the tabs, the sessions need to be loaded. If I reload the page, click the "Course ID" button and then expand the tabs, the sessions do not need to be loaded (they are loaded upon clicking the button)

Wondering if I've understood this correctly (seems to be the behaviour I saw as well), and if so, whether this difference was intentional

Anyway, didn't spot any other issues so all's good!

[Zxun2]

@weiquu Thanks for the catch! That was not intentional 😅

[NicolasCwy]

LGTM! Thanks for working on this @Zxun2 and sorry for the initial review delays!

[weiquu]

LGTM!