feat: prevent prefill editing

[tshuli]

Problem

• Closes Allow pre-fills to be lockable #6093

Solution

Breaking Changes

• Yes - this PR contains breaking changes
  • Details ...
• No - this PR is backwards compatible

Features:

• Adds new lock feature for prefill.

Screenshots

Admin View

Public View

Tests

• Can create form with prefill and no prefill lock
• (via network call) attempting to create a field with no prefill but with prefill lock should return an error
• Non-prefill forms render and submit correctly
• Forms with only unlocked prefill can render and submit correctly
• Forms with only locked prefill can render and submit correctly
• Forms with combination of locked and unlocked prefill can render and submit correctly
  • Works for singpass form with combination of locked and unlocked prefill

[tshuli]

@staceytan1998 - I did a first pass, could I trouble you to review the design and propose changes if needed

• In particular, whether locked prefills should still be highlighted in yellow; this might confuse users if some yellow fields are editable and others are not
• I thought we could do it like myinfo fields, which are simply greyed-out / disabled

For merging after angular is deprecated

[tshuli]

Other considerations:

• This prevents accidental modification, but user could still modify the url deliberately. Maybe instead of 'lock prefill' which implies guarantee to admins that the value won't be changed, we can call it 'prevent field editing' and in the description indicate 'Prevent users from accidentally changing the value of the field'

[timotheeg]

+1 to the comments from ShuLi:

• Until we have true locking of the values (requires some form of server integration), labelling the feature "prevent field editing" sounds good to me
• Greying out like MyInfo field feels appropriate as well

[LinHuiqing]

from Kenneth: let's add metrics for prefills before we push this too

[staceytan1998]

Checked with Shanty on the pre-fill copy and finalised it, here is the design! Things to take note:

• Description for enable pre-fill toggle has been tweaked
• Addition of 'Prevent editing' setting
• Copy for the infobox shown on the form has also been tweaked!

[timotheeg]

What's the status on this prefill lock PR? @tshuli do you want to pass it to somebody else?

[tshuli]

I'll see it through since it's fairly straightforward!

Can we start merging in #afterreact PRs already? 😃

[tshuli]

@staceytan1998 I've updated the designs for your review!

[tshuli]

@staceytan1998 addressed your comments in chromatic, for your re-review!

[timotheeg]

PR looks good! Thanks @tshuli

I am still worried about soft locks having some inherent danger.

Also additionally, let's make sure we track product metrics for this feature so monitor adoption (number of forms with locked prefills) to add in the extractor function probably

[timotheeg]

/nit: we could have more descriptive messages here to be specific in various combination of locked/not-locked pre-filled fields and their values.

[tshuli]

thanks @timotheeg! having customised message is a good idea. @staceytan1998 please review the copy for the 3 cases: locked and normal prefill, normal prefill only, locked prefill only

Normal and Locked prefill

Normal prefill only

Locked prefill only

[staceytan1998]

For locked prefill only, we can omit the words 'with a lock icon'! So it will be 'Highlighted fields below have been pre-filled according to the form link you clicked. These are non-editable fields.'

Thanks Shu Li!

[tshuli]

edited the copy for locked prefill only

[tshuli]

On the inherent risks with soft locks, we discussed the possibility of beta flag to better manage usage, but decided to go ahead with it. to track usage and consider a harder-lock system (e.g. requiring admins to pre-register the links).