feat(form-v2): add error handling for deleted logic fields

[justynoh]

Problem

Builder logic breaks when a user deletes a field that was used in logic. This PR fixes that by adding error handling to the various components.

Closes #4341

Solution

LogicFieldBadge.tsx, InactiveLogicBlock.tsx

• Added error/info state props to LogicFieldBadge to display in case the field data cannot be found.
• InactiveLogicBlock provides these props to the LogicFieldBadge component.

useAdminFormLogic.ts, LogicContent.tsx

• Added computation to determine globally if any errors have occured within all the logics. Added an error box to display message in such case.

EditConditionBlock.tsx, ThenShowBlock.tsx

• Add effects to set form errors and values for deleted fields, as well as display info boxes where necessary.

Breaking Changes

• No - this PR is backwards compatible

Screenshots

Screen.Recording.2022-08-01.at.12.10.12.PM.mov

[mantariksh]

'info' is not really an errorType, maybe 'variant'? optionally you could also type this more strongly:

type FieldLogicBadgeProps = 
  | { type: 'info', field: FormFieldWithQuestionNo }
  | { type: 'error', message: string }
}

[mantariksh]

in fact if you look at it this way, the props required for the two cases are completely different, which is forcing us to use multiple switch statements and ternary operators all over the place. can consider splitting this into separate components. although it will result in a couple of lines of repeated code, it will reduce the case splits required everywhere else.

arguably in future we might need more types of LogicBadge and at some point it might make sense to refactor them into the same component, but for now imo these make more sense separately. up to you though!

[justynoh]

as discussed, 'error' | 'info' are the default fallbacks when field is null. This type is not ideal but I think any other way introduces a lot of complexity into the code. For example, another possibility is that we can have another component that deals with error cases specifically (so FieldLogicBadge only takes in a field, and ErrorLogicBadge takes in the { variant: 'error' | 'info', message: string }) but then the error-handling behavior is repeated everywhere you want a logic badge anyway, so it boils down to the same thing

[justynoh]

i'll change the names to variant and message though so its less confusing!

[mantariksh]

why do we need to watch this? does the component not automatically update when formFields updates?

[justynoh]

formFields only contains the fields in the form, not the logics. Also, we need to useWatch here since the effect right after sets the show value again, resulting in infinite rerender.

[justynoh]

i might be wrong / there might be a better way to achieve this though!

[timotheeg]

+1 again