FWF-4762 [feature] Upgrade formio.js and formio-react

[leodube-aot]

User description

Issue Tracking

JIRA: https://aottech.atlassian.net/browse/FWF-4762
Issue Type: FEATURE
DEPENDENCY PR: AOT-Technologies/forms-flow-ai-micro-front-ends#823

Changes

• Update to use latest dev version of formio.js and formio-react
• Fix some bugs. More details on the bugs found here: https://aottech.atlassian.net/wiki/x/AYCAoQ

Checklist

• Updated changelog
• Added meaningful title for pull request

🔗 Dependency PR Status

• Link: #823
• Status: 🕐 Open

---

PR Type

Enhancement, Bug fix

---

Description

• Switch Form prop from form to src

• Restore onFormReady prop usage

• Centralize FormBuilder options via ref

• Update formio imports and dependencies

---

Diagram Walkthrough

flowchart LR
  FormComponents["Form components"] -- "use src prop" --> RuntimeForms["Runtime forms"]
  FormBuilder["FormBuilder"] -- "initialForm + options ref" --> Designer["Form designer"]
  Imports["formio utils imports"] -- "update paths" --> Build["Build compatibility"]
  PackageJSON["package.json deps"] -- "update formio packages, bpmn-js" --> Dependencies["Updated dependencies"]
  Modals["TaskVariableModal"] -- "onFormReady, showHiddenFields" --> ReadonlyPreview["Readonly preview fixes"]
  IndexEJS["root index.ejs"] -- "add bootstrap icons stylesheet" --> Styles["UI icons available"]

Loading

File Walkthrough

	Relevant files
Enhancement	9 files Edit.js Use src prop for Form rendering                                                    +1/-1      applicationComponent.js Update formio utils import path                                                    +1/-1      helper.js Migrate utils import to new path                                                  +1/-1      FormEdit.js Refactor builder to initialForm and options ref                    +11/-10  FormPreview.js Switch Form to src prop                                                                    +1/-1      View.js Replace form with src in Form                                                        +1/-1      Edit.js Pass form via src to Form                                                                +1/-1      ResubmitForm.js Use src prop for resubmission form                                              +1/-1      View.js Replace form prop with src                                                              +1/-1
Bug fix	2 files TaskVariableModal.js Update Form props and readiness handler                                    +4/-4      UserForm.js Use src and onFormReady for Form                                                  +2/-2
Dependencies	2 files index.ejs Add bootstrap icons stylesheet CDN                                              +1/-0      package.json Point to new formio packages and bump bpmn-js                        +3/-3

---

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 79ae910

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix unclosed HTML comment The HTML comment is not closed, which will break the document head and potentially ignore subsequent tags. Close the comment properly to avoid malformed HTML and stylesheet loading issues. forms-flow-web-root-config/src/index.ejs [30] <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"> <!--TODO need to figure out why @aot-technologies/formiojs doesn't package this properly +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"> <!-- TODO: need to figure out why @aot-technologies/formiojs doesn't package this properly --> Suggestion importance[1-10]: 9 __ Why: The HTML comment after the bootstrap-icons link is indeed unclosed in the PR, which can break parsing of the head. Closing it is a small but critical correctness fix.	High
	Avoid unintended fetches in preview When rendering a static read-only preview, using src can trigger network fetching or schema resolution side effects. Pass the schema via form instead of src to avoid unintended requests and ensure consistent offline rendering. forms-flow-web/src/components/Modals/TaskVariableModal.js [265-275] <Form - src={updatedForm} + form={updatedForm} options={{ viewAsHtml: true, readOnly: true, showHiddenFields: showHiddenFields }} onFormReady={(e) => { formRef.current = e; }} /> Suggestion importance[1-10]: 7 __ Why: Switching from form to src in a read-only preview can trigger remote fetch or resolver behavior; recommending form improves determinism and avoids side effects. It directly matches the changed lines and is context-appropriate.	Medium
	Ensure builder reflects live form Using initialForm with a stable key can prevent the builder from updating when form changes, causing edits not to reflect. Re-key the builder when the working form changes and pass the live form to ensure the builder reflects current edits. forms-flow-web/src/routes/Design/Forms/FormEdit.js [1310-1316] <FormBuilder - key={initialForm._id} - initialForm={initialForm} + key={form._id} + initialForm={form} onChange={formChange} options={builderOptions.current} onDeleteComponent={captureFormChanges} /> Suggestion importance[1-10]: 5 __ Why: The PR intentionally switches to a memoized initialForm and stable key, likely to prevent unnecessary remounts; reverting to form may reintroduce churn. The concern about updates not reflecting is plausible but speculative without evidence, so impact is moderate.	Low

---

Previous suggestions

Suggestions up to commit b778160

Category	Suggestion	Impact
Possible issue	Safely memoize initial form Guard against formData being null during initial render to avoid a runtime error when accessing _id. Include formData in dependencies and safely return a clone only when defined. forms-flow-web/src/routes/Design/Forms/FormEdit.js [114] -const initialForm = useMemo(() => _cloneDeep(formData), [formData._id]); +const initialForm = useMemo(() => (formData ? _cloneDeep(formData) : null), [formData, formData?._id]); Suggestion importance[1-10]: 8 __ Why: Accessing formData._id in the dependency array can throw if formData is null; guarding against null and broadening dependencies prevents a runtime error and ensures correct memoization.	Medium
	Fix duplicate CSS and comment Remove the duplicate Formio CSS include to avoid conflicting styles and larger payloads. Also close the HTML comment after the Bootstrap Icons line to prevent malformed markup breaking subsequent tags. forms-flow-web-root-config/src/index.ejs [27-31] <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css"> -... -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"> <!--TODO need to figure out why @aot-technologies/formiojs doesn't package this properly +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"> <!-- TODO: figure out why @aot-technologies/formiojs doesn't package this properly --> Suggestion importance[1-10]: 7 __ Why: The PR adds Formio CSS twice (lines 23 and 29) and leaves an unclosed HTML comment on the Bootstrap Icons link (line 30), which can cause style duplication and malformed markup; removing the duplicate and closing the comment is correct and improves robustness.	Medium
General	Coerce hidden fields flag Ensure showHiddenFields is explicitly boolean to prevent unexpected rendering if it’s undefined or non-boolean. Coerce the value when passing into options to avoid leaking hidden fields in read-only previews. forms-flow-web/src/components/Modals/TaskVariableModal.js [265-274] <Form src={updatedForm} options={{ viewAsHtml: true, readOnly: true, - showHiddenFields: showHiddenFields + showHiddenFields: !!showHiddenFields }} onFormReady={(e) => { formRef.current = e; }} /> Suggestion importance[1-10]: 5 __ Why: Coercing showHiddenFields to boolean (!!showHiddenFields) is a reasonable safeguard to avoid unintended truthy values affecting rendering, though the impact is moderate and context-dependent.	Low

Suggestions up to commit 12ad238

Category	Suggestion	Impact
Possible issue	Fix duplicate CSS and bad comment There is a duplicated Formio CSS include and a malformed HTML comment missing a closing -->, which can break HTML parsing and stylesheet loading. Remove the duplicate CSS and close the comment to avoid rendering issues. forms-flow-web-root-config/src/index.ejs [27-31] <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css"> <link rel="stylesheet" href="https://cdn.form.io/flatpickr-formio/4.6.13-formio.3/flatpickr.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"> <!--TODO need to figure out why @aot-technologies/formiojs doesn't package this properly +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"> <!-- TODO: need to figure out why @aot-technologies/formiojs doesn't package this properly --> Suggestion importance[1-10]: 8 __ Why: It correctly identifies a duplicated Formio CSS include and an unclosed HTML comment that could cause parsing issues. Fixing both is important for correctness and rendering stability.	Medium
	Ensure boolean option consistency The options object is missing a default for showHiddenFields, which can be undefined and cause hidden fields to unexpectedly render. Explicitly coerce it to a boolean to avoid inconsistent behavior across renders. forms-flow-web/src/components/Modals/TaskVariableModal.js [265-275] <Form src={updatedForm} options={{ viewAsHtml: true, readOnly: true, - showHiddenFields: showHiddenFields + showHiddenFields: !!showHiddenFields }} onFormReady={(e) => { formRef.current = e; }} /> Suggestion importance[1-10]: 5 __ Why: Coercing showHiddenFields to a boolean is a reasonable minor robustness improvement and matches the new props (options.showHiddenFields). Impact is moderate and the change is accurate to the diff context.	Low
General	Fix stale FormBuilder re-renders Using initialForm for the key may prevent re-renders when other critical props change, leaving a stale builder. Use a stable key that updates whenever the source form changes to ensure the builder resets predictably. forms-flow-web/src/routes/Design/Forms/FormEdit.js [1283-1290] <FormBuilder - key={initialForm._id} + key={`${initialForm?._id || 'new'}-${initialForm?.modified || form?.modified || 0}`} initialForm={initialForm} onChange={formChange} options={{ language: lang, }} /> Suggestion importance[1-10]: 6 __ Why: Using a more robust key helps ensure the builder resets when the underlying form changes; the proposed key logic is sensible though speculative about modified presence. It addresses potential staleness without contradicting the PR.	Low

[sonarqubecloud]

Quality Gate failed

Failed conditions
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE