feat: conditional react routing

[timotheeg]

Context

We need a way to control rollout of React (and stop it if needed).

We have several constraints:

• We should have an illegibility criteria where some form are excluded from the react rollout
• Domain must stay constants as form.gov.sg
• Form URLs must be constant, so whatever URLs were shared before, during, and after rollout will work without us having to maintain deprecated custom routes
• Respondent taking SP/CP/MyInfo forms should have the same environment before and after login, so they are not confused
• Admin can chose an environment (react/angular) and have it served consistently across multiple sessions

We considered several approach to do routing in infra, but the constraints above make it hard to do this outside application (which can have knowledge on admin/respondent and eligibility criteria based on form definitions.

Approach

• Update old routes to have a consistent param formId in URL
• Conditional routing is done in app code with a new controller reactMigrationController
  • new config block `reactMigration populated from new env vars
  • static assets are loaded first so the react controller can catch all urls later
• Admins choice is saved in a cookie with 1 year expiry
  • new API endpoint /api/v3/admin/environment/(react|angular) to allow setting of the cookie (only needed if http-only)
• Respondent choice of react/angular is saved in a session cookie. Same user may get different ui for forms during the rollout period, but a single interaction with a form, including refreshes should be consistent within one ui.

TODOs / TODISCUSS

• Add Eligibility criteria (forms with SP/CP/MyInfo) are excluded from first phase of rollout
• Test for all common cases (pairing session wearing hacker hats -> can we break it?)
• Build UI in BOTH angular and React to allow switching the environment (simple api call to set cookie and redirect)
• Discuss whether frontend needs access to the environment cookies to take decisions (cookies do not contain secure data and do not necessarily need to be http-only

Deploy Notes

New environment variables:

• REACT_MIGRATION_RESPONDENT_ROLLOUT: number between 0 and 100
• REACT_MIGRATION_ADMIN_ROLLOUT: number between 0 and 100

[karrui]

I've fixed the Chromatic failure in #3751

[timotheeg]

Suggested change

	// Temporary: cookies are blacklisted, but we to track the state of the rollout for this particular request
	// Temporary: cookies are blacklisted, but we want to track the state of the rollout for this particular request