Implement Course Requirements for Undergraduate Majors

[Awesome-E]

Description

• Splits the search sidebar in the roadmap to "Major" and "All Courses"
• Provides the option to select from existing majors using data from the API
• If the selected major has specializations, provides the option to select a spec
• When a major (and spec if present) is selected, a required course list will be shown

Screenshots

Test Plan

This PR is work in progress

Issues

Closes #568

[CadenLee2]

Overall functionality

• Although majors don't save locally when not signed in, this doesn't seem like a major inconvenience (considering that a user hoping to work on their roadmap long-term would probably sign in)
• Because the course titles alone in the major requirements list don't show past quarter offerings, I think that makes it impossible to see quarter offerings on the desktop roadmap without using the All Courses/search menu. This probably increases the importance of our planned change of moving past quarter offering information to the popover

Styling Details

• Is the green color for completion of a group requirement finalized or just a temporary placeholder? I noticed it's just the default green and didn't see an example of what it should look like on the Figma, and it stands out a bit since there isn't much green elsewhere on the roadmap
• Rare long course names like ANTHRO121AW still stick out slightly from their cells. You had mentioned a while ago that it doesn't scale font size "yet"--is this a goal, or will we keep the font sizes the same?
• Noticed that certain other course titles wrap (see CHC/LAT132B under History B.A. History spec)
• The major/spec dropdowns use a different blue color that doesn't match the rest of PeterPortal (is it from the react-select default style?). Additionally, in dark theme, the text on the selected blue item is black, as opposed to the white-on-blue we have elsewhere.

For the most part, the changes work well:

• Clearing requirement groups works
• Major saving to my account works, including with multiple roadmaps
• Tested various majors (with and without specializations); signed in and signed out; desktop and mobile; multiple roadmaps with different majors per roadmap
• Didn't fully inspect all the code closely, but at a glance the file structure (such as how the sidebar is organized) looks good and major changes make sense

[Awesome-E]

Marking as ready for review now, but will address the comment later

[Awesome-E]

This probably increases the importance of our planned change of moving past quarter offering information to the popover

Agree

Is the green color for completion of a group requirement finalized or just a temporary placeholder? I noticed it's just the default green and didn't see an example of what it should look like on the Figma, and it stands out a bit since there isn't much green elsewhere on the roadmap

Yes, it is intended as that for now. We can consider matching it to the green that is in the graph at a later point though if that helps with consistency.

The major/spec dropdowns use a different blue color that doesn't match the rest of PeterPortal (is it from the react-select default style?). Additionally, in dark theme, the text on the selected blue item is black, as opposed to the white-on-blue we have elsewhere.

This is more or less the default theme for react-select's combobox component. I don't think it's a major issue now since the blue is "close enough", but we should create another issue to make that styling more consistent with the rest of our app's colors. We should also just have a more complete color pallet for our app defined in the CSS

Rare long course names like ANTHRO121AW still stick out slightly from their cells. You had mentioned a while ago that it doesn't scale font size "yet"--is this a goal, or will we keep the font sizes the same?
Noticed that certain other course titles wrap (see CHC/LAT132B under History B.A. History spec)

I will see if I can make a last-minute fix tomorrow?

[CadenLee2]

Significant features work well

• Major (with and without spec), minor, GE requirements, and search tabs all show the right info; tracking completion works; works on mobile
• The collapsed-by-default requirement groups make requirements easier to manage/less overwhelming at first, especially when groups have a lot of courses, so I think this was a good change

Details

• I do notice that minor requirements reload each time you click the tab, even if the dropdown selection hasn't changed. Not a large problem, but could be nice (and probably not difficult) to make them not reload unless the minor has been changed
• Also, when logged in, major requirements reload each time you click the tab (because major/spec is loaded from the account each time). Also not necessarily a problem, and technically this could include desired behavior (if you have PeterPortal open in two tabs open at once and change the major on one, then switching back to the major tab on the other will update it). Could be nice to check whether the major/spec has changed, and if not, we don't need to reload major requirements (maybe in the future since we want this merged soon)

Misc.

• Same styling comments as the previous comment

(Edited because I originally thought this was a review on the most recent changes since my last view, not the full PR)