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

• Update form ready callback naming

• Adjust formio utils import paths

• Bump dependencies and add vendor styles

---

Diagram Walkthrough

flowchart LR
  deps["Dependencies updated (formio, bpmn-js)"] -- "new APIs" --> forms["Form usage updated to src"]
  forms -- "prop rename" --> ready["onFormReady replaces formReady"]
  utils["Utils import path changed"] -- "lib/utils -> utils" --> refs["All refs updated"]
  styles["Root HTML adds bootstrap-icons CSS"] -- "vendor assets" --> ui["Consistent UI icons"]
  builder["FormBuilder API changes"] -- "initialForm/key update" --> design["Design editor stability"]

Loading

File Walkthrough

	Relevant files
Enhancement	11 files Edit.js Use new Form src prop in Draft view                                            +1/-1      TaskVariableModal.js Migrate to src prop and onFormReady; options fix                  +4/-4      applicationComponent.js Update formio utils import path                                                    +1/-1      helper.js Update formio utils import path                                                    +1/-1      FormEdit.js Preview uses src; FormBuilder initialForm handling              +5/-4      FormPreview.js Use src prop for Form preview                                                        +1/-1      UserForm.js Switch to src and onFormReady in UserForm                                +2/-2      View.js Use src prop in public/active form view                                    +1/-1      Edit.js Use src prop in submission edit                                                    +1/-1      ResubmitForm.js Use src prop in resubmission flow                                                +1/-1      View.js Use src prop in submission view                                                    +1/-1
Configuration changes	1 files index.ejs Add bootstrap-icons stylesheet to root HTML                            +1/-0
Dependencies	1 files package.json Point formio deps to npm aliases; bump bpmn-js                      +3/-3

---

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Maintainability 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

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

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/[email protected]/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/[email protected]/dist/formio.full.min.css"> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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