feat(form-v2/react-to-angular/1): add switch to angular option #4263

wanlingt · 2022-07-21T05:36:51Z

Problem

We need to give public respondents and admins a way to opt out of React and revert back to the AngularJS app.

Makes progress on #3933

Solution

This PR implements the inline messages for both public respondents and admins, giving them the option to switch from React to the AngularJS app.

Key changes:

Add PublicSwitchEnvMessage for public respondents, and AdminSwitchEnvMessage for admins
New API endpoint for public respondents /api/v3/forms/environment/(react|angular) to allow setting of the cookie
Add queries to allow for switching of env cookies

Other changes:

Set public respondent's cookie expiry to 2 months

Breaking Changes

No - this PR is backwards compatible

Future PRs

Add feedback modal to allow users to submit feedback upon clicking to change
Add floating action button to all admin pages
Remove visibility of infoboxes after rollouts hit their respective % (10% for public respondents, 100% for admins)

Before & After Screenshots

AFTER:
Admin

Public

Tests

[Admin] Log in. On the workspace page, click to switch to the original FormSG. The page should reload and should display the React interface. Also, the value of v2-admin-ui cookie should change from angular to react. This cookie should expire in 2 months time.
[Public] On a public form page, click to switch to the original FormSG. The page should reload and should display the React interface. Also, the value of v2-respondent-ui cookie should be react. This cookie should expire in 2 months time.

frontend/src/features/public-form/components/PublicSwitchEnvMessage.tsx

frontend/src/features/workspace/WorkspacePage.tsx

frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx

frontend/src/services/EnvService.ts

karrui · 2022-07-21T07:49:22Z

src/app/modules/react-migration/react-migration.controller.ts

@@ -15,6 +15,7 @@ export type SetEnvironmentParams = {

 export const RESPONDENT_COOKIE_OPTIONS = {
  httpOnly: false,
+  maxAge: 31 * 2 * 24 * 60 * 60, // 2 months


was this what we decided? @timotheeg thoughts? or we can keep this first.

sorry if the issue is unclear. basically the idea is this:

if you are randomly assigned React, you should stay on React unless you opt for Angular (hence 2 months)

if you are randomly assigned AngularJS, you should stay on AngularJS for the next 24h (so the rollout % can be increased the next day)

if you opt for Angular, you should stay on Angular until the relevant rollout % is 100% (e.g. if I opt for Angular on an email mode form, I will stay on Angular for email mode forms until email mode form rollout is 100%, after which I can be on React. if I opt for Angular on storage mode form, I stay on Angular until storage mode is 100%)

is that clearer?

That doesn't sound right 🤔

if you are randomly assigned React, you should stay on React unless you opt for Angular (hence 2 months)

This will cause the percentage to increase in favour of react more than what the rollout threshold suggests.

I think the random assignment should remain as session as we had discussed, and only explicit switches should have an expended expiry.

Also the change here needs more work to fit the logic. RESPONDENT_COOKIE_OPTIONS is currently applied on the random assignment, so both angular and react would get the 2 month expiry.

maxAge should probably be added to the explicit choice functions rather than the base constant.

oops sorry, I got confused between this and the admin side. my bad. respondent should be session expiry unless explicitly opting for Angular.

This will cause the percentage to increase in favour of react more than what the rollout threshold suggests.

yup, I wrote about this in #4217. I think on the admin side I'd rather have the deviation than have a situation where admins are randomly flipping back and forth between React and Angular. discuss later!

Based on our discussion on cookie expiry dates:

Public respondents

random assignment:

react: session cookie

angular: session cookie

personal choice - react to angular: 2 months

Admins

random assignment

react: 2 months

angular: session

personal choice - react to angular: 2 months

personal choice - angular to react: 2 months

I've removed maxAge from the base cookie options, and have added new ADMIN_COOKIE_OPTIONS_WITH_EXPIRY and RESPONDENT_COOKIE_OPTIONS_WITH_EXPIRY for the personal choice cases, since it's a standard 2 months for both react to angular and vice versa switches.

TODO: Differentiate random assignment env cookie expiry for admins.
Currently admins are on Angular by default, and see React if they opt in. Have left it since this PR only focuses on the personal choice option, to be tackled in #4217

wanlingt · 2022-07-21T10:15:06Z

Flow for switching:

click link in info box
see feedback modal (autofocus the textarea so it’s easier to type)
either choose to type feedback or don’t type feedback
click “Send feedback” (we can change “Send feedback” to “Next” to make it clearer that it’s optional, and don’t disable the button if feedback is empty)
see “Thanks for your feedback!” where they can either switch or stay on same page

karrui

lgtm

frontend/src/features/public-form/components/PublicSwitchEnvMessage.tsx

frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx

karrui · 2022-07-22T08:28:21Z

frontend/src/services/EnvService.ts

+const ENV_ENDPOINT = '/environment'
+const ADMIN_ENDPOINT = '/admin'
+
+export const publicChooseEnvironment = async (): Promise<UiCookieValues> => {


do you think we should create an issue and link a TODO here so we remember to remove all these related code when we go 100% React?

(and everywhere else that is related to these functions)

good idea, will reference in TODOs + have created a new issue to tag it to

wanlingt added 4 commits July 21, 2022 10:35

feat: add switch env endpoint for respondents

e30e121

feat: add switchEnvMessage for respondents

ca033b5

feat: add AdminSwitchEnvMessage

c285276

fix: adjust styling

7b12067

wanlingt marked this pull request as ready for review July 21, 2022 06:01

wanlingt requested review from karrui and timotheeg July 21, 2022 06:02

wanlingt changed the title ~~feat(form-v2/react-to-angular/1): add~~ feat(form-v2/react-to-angular/1): add switch to angular option Jul 21, 2022

fix: adjust PublicSwitchEnvMessage margin

faf1666

karrui reviewed Jul 21, 2022

View reviewed changes

wanlingt added 4 commits July 21, 2022 23:13

ref: hardcode angular in params

fd5d888

feat: add react-query env mutations

f7a243c

fix: amend cookie expiry date

635acb9

fix: update cookie expiry

75f25a8

wanlingt temporarily deployed to staging-alt2 July 22, 2022 02:02 Inactive

wanlingt mentioned this pull request Jul 22, 2022

Percentage-based React rollout for form admins #4217

Closed

wanlingt requested a review from karrui July 22, 2022 05:25

fix: navigate to old workspace page

3d98395

wanlingt temporarily deployed to staging-alt2 July 22, 2022 06:34 Inactive

fix: add window reload

a5e9bd0

wanlingt temporarily deployed to staging-alt2 July 22, 2022 07:40 Inactive

karrui approved these changes Jul 22, 2022

View reviewed changes

wanlingt added 3 commits July 22, 2022 16:52

fix: mutations

d795523

chore: add removal TODOs

b98a968

fix: underline inline links

1a61b42

wanlingt merged commit 81da65b into form-v2/develop Jul 25, 2022

wanlingt deleted the form-v2/react-to-angular branch July 25, 2022 02:50

wanlingt mentioned this pull request Jul 26, 2022

feat(form-v2/react-to-angular/2): add feedback modal #4352

Merged

8 tasks

karrui mentioned this pull request Oct 4, 2022

feat: merge form-v2/develop into develop branch #5002

Closed

karrui mentioned this pull request Oct 5, 2022

feat: form-v2/develop branch into develop #5018

Merged

justynoh mentioned this pull request Oct 5, 2022

build: release v6.0.0 #5036

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(form-v2/react-to-angular/1): add switch to angular option #4263

feat(form-v2/react-to-angular/1): add switch to angular option #4263

wanlingt commented Jul 21, 2022 •

edited

Loading

karrui Jul 21, 2022

mantariksh Jul 21, 2022

timotheeg Jul 21, 2022

timotheeg Jul 21, 2022

mantariksh Jul 21, 2022

wanlingt Jul 21, 2022 •

edited

Loading

wanlingt Jul 22, 2022 •

edited

Loading

wanlingt commented Jul 21, 2022

karrui left a comment

karrui Jul 22, 2022

wanlingt Jul 22, 2022

feat(form-v2/react-to-angular/1): add switch to angular option #4263

feat(form-v2/react-to-angular/1): add switch to angular option #4263

Conversation

wanlingt commented Jul 21, 2022 • edited Loading

Problem

Solution

Before & After Screenshots

Tests

karrui Jul 21, 2022

Choose a reason for hiding this comment

mantariksh Jul 21, 2022

Choose a reason for hiding this comment

timotheeg Jul 21, 2022

Choose a reason for hiding this comment

timotheeg Jul 21, 2022

Choose a reason for hiding this comment

mantariksh Jul 21, 2022

Choose a reason for hiding this comment

wanlingt Jul 21, 2022 • edited Loading

Choose a reason for hiding this comment

wanlingt Jul 22, 2022 • edited Loading

Choose a reason for hiding this comment

wanlingt commented Jul 21, 2022

karrui left a comment

Choose a reason for hiding this comment

karrui Jul 22, 2022

Choose a reason for hiding this comment

wanlingt Jul 22, 2022

Choose a reason for hiding this comment

wanlingt commented Jul 21, 2022 •

edited

Loading

wanlingt Jul 21, 2022 •

edited

Loading

wanlingt Jul 22, 2022 •

edited

Loading