Implement Module Planning Exercise form for NUS

[taneliang]

Umbrella issue that tracks the addition of an MPE feature to our planner (https://nusmods.com/planner). Hard deadline in March, but we'd like to complete this by the start of February.

cc @chuabingquan @williamhutech

Steps

Must have

• UI/UX design (both planner (if necessary) and MPE form, and associated user flows) (@williamhutech)
• Implement NUS Exchange auth serverless functions (Implement MPE and NUS Exchange serverless functions #3217, Tested MPE Serverless Functions #3242)
• Implement simple feature flag system (@taneliang, Fix modsn.us URL shortening script #3212)
• Implement MPE form in /website (after the first step, everything else can be done in parallel)
  • Add an empty-ish MpeContainer component on a new nusmods.com/mpe route. (Setup empty MpeContainer #3159)
  • Add announcement bar behind the enableMpe feature flag.
  • Add MPE page introduction content. (Add MPE page introduction content #3183)
  • Add NUS log in button to MPE page (dependent on NUS auth serverless function)
  • Implement NUS Exchange SAML token storage on frontend
  • Implement form (can be in parallel with auth/auth button, just implement the UI first)
    • Form should have an intuitive/helpful empty state
    • Form should have an add module button
    • Form should allow users to change the mod type
    • Form should allow reordering of selected modules
    • Form should display total MCs
    • Form should limit number of mods to the total allowable no. MCs
  • Implement autosave (may not be parallelizable with form implementation)
    • Form should autosave on every operation if the browser is online
    • Form should display saving errors
    • Form should have a retry button (but this can be implemented last)
    • Form should(?) be disabled when user goes offline. We have an <Online> component and isOnline var in our Redux store that can be used for this -- see existing callsites for how to use it
    • Form should autosave immediately when coming back online
    • Page should block navigation and reloads if form is dirty.
• Implement Vercel serverless functions (Implement MPE and NUS Exchange serverless functions #3217, Tested MPE Serverless Functions #3242; should be slightly different than the descriptions below)
  • MPE form submission: /website/api/nus/mpe/submit.ts (which will be accessible at https://nusmods.com/api/mpe/submission)
    • Function should verify SAML token.
    • Function should accept JSON input through a POST request.
    • Function should forward JSON input to VFS, automatically generating the correct filename from the SAML token.
    • Function should not do anything if enableMpe === false. (TODO)
  • MPE submission retriever: /website/api/nus/mpe/submission.ts
    • Function should verify SAML token.
    • Function should retrieve and return the user's existing submission from VFS, automatically generating the correct filename.
    • Function should not do anything if enableMpe === false. (TODO)
  • Add Vercel config (vercel.json) to redirect unrecognized nusmods.com/api/(.*) requests to api.nusmods.com/$1. (Set up /website Vercel deployment #3092)

Should have

• Lazy load MpeContainer. Ideally this should be lazy loaded with react-loadable (since RFC/Proof of concept: Adopt Suspense and Concurrent Mode roughly following Relay's Entry Points #2922 isn't ready) following /website/src/views/planner/PlannerContainer.

Could have

• Time-based MPE enable/disable, i.e. automatically enabling/disabling MPE during MPE periods based on the current datetime. We don't have to do this as we can just manually flip the feature flag and deploy when we want to enable/disable.

Won't have

• Bring Planner out of beta
• Integrate planner with MPE

Technical unknowns

To coordinate with NUSIT.

• NUS Exchange integration details
• VFS API
• MPE JSON file specification

[alissayarmantho]

I'll be doing 'Add an empty-ish MpeContainer component on a new nusmods.com/mpe route.'

[alissayarmantho]

I'll be doing 'Add MPE page introduction content.'

[alissayarmantho]

I'm going to 'Add the MPE page UI (draft)'.