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

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

---

PR Type

Enhancement, Bug fix

---

Description

• Switch Form prop from form to src

• Normalize component conditional to {"json": {}}

• Add outline-primary button border override

• Point formio-react to scoped npm alias

---

Diagram Walkthrough

flowchart LR
  reactForms["React form usages"] -- "prop change form -> src" --> apiUpdate["Align with new formio-react API"]
  components["Component preprocessing"] -- "conditional set to {\"json\": {}}" --> modalFix["Task variable modal rendering"]
  styling["SCSS buttons"] -- "outline-primary border added" --> uiPolish["Visual consistency"]
  packages["package.json"] -- "alias @aot-technologies/formio-react to npm:@leodube/formio-react@1.0.5" --> depRedirect["Dependency source update"]

Loading

File Walkthrough

	Relevant files
Enhancement	5 files FormComponent.tsx Update Form API usage and conditional schema                          +2/-2      FormSelectionModal.tsx Use src prop for Form preview component                                    +1/-1      TaskForm.tsx Switch Form to src prop in task view                                          +1/-1      View.tsx Replace Form form prop with src in viewer                                +1/-1      _button.scss Add border style for outline-primary buttons                          +4/-0
Dependencies	3 files package.json Redirect formio-react dependency to npm alias                        +1/-1      package.json Update formio-react alias and adjust react-bootstrap deps +4/-3      package.json Point formio-react to npm alias provider                                  +1/-1

---

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Behavior Change Overwriting component.conditional with {"json": {}} may differ from previous {} semantics. Validate that all component visibility logic is truly neutralized across component types and that formio.js treats an empty json conditional as no-op without warnings. useEffect(() => { const data = _.cloneDeep(form); const manipulatedKeys = []; Utils.eachComponent( data.components, (component) => { // remove display (show/hide) conditions for showing the component in taskvariable modal /* --------------------------- ------------------ --------------------------- */ component.conditional = {"json": {}}; component.customConditional = ""; component.logic = []; component.hidden = false; component.hideLabel = false; API Migration Switching <Form form={...}> to <Form src={...}> changes how the library expects input (URL/src vs inline schema). Confirm updatedForm is a valid value for src in the new formio-react version, or ensure it’s transformed to the expected type to avoid runtime fetch attempts or render failures. <div className="flex"> <div className="flex-grow-1 form-container form-hilighter"> <Form src={updatedForm} options={{ viewAsHtml: true, readOnly: true, } as any} Prop Type Compatibility <Form src={form} submission={...} url={...}> may conflict if src triggers its own data loading. Verify the new component’s precedence rules between src, submission, and url to prevent double-loading or ignored props. <Form key={isReadOnly ? "readonly" : "editable"} src={form} submission={safeSubmission} url={reduxSubmission?.url} options={{ ...options,

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Use correct prop for schema Passing a form object to src will trigger a remote fetch and likely fail when updatedForm is not a URL. Use the form prop for inline schema to ensure proper rendering. forms-flow-components/src/components/CustomComponents/FormComponent.tsx [230-235] <Form - src={updatedForm} + form={updatedForm} options={{ viewAsHtml: true, readOnly: true, } as any} Suggestion importance[1-10]: 8 __ Why: The snippet corresponds to lines 230–235 where src={updatedForm} replaced form={updatedForm}; if updatedForm is a schema object (as implied), using form prevents erroneous fetching and ensures correct rendering, making this a high-impact fix.	Medium
	Correct inline form usage src expects a URL; providing a form object will cause loading errors and ignore submission. Switch to the form prop for local schemas to keep submission and options working correctly. forms-flow-review/src/components/TaskForm.tsx [79-86] <Form key={isReadOnly ? "readonly" : "editable"} - src={form} + form={form} submission={safeSubmission} url={reduxSubmission?.url} options={{ ...options, Suggestion importance[1-10]: 8 __ Why: The existing_code maps to lines 79–86 with src={form}; if form is a local schema, form prop is the correct usage to avoid src fetch behavior and maintain submission handling, representing a substantial functional correction.	Medium
	Fix conditional initialization Initializing conditional with an empty json object can break condition evaluation expecting a string or a properly shaped object. Use an empty string to disable custom JSON logic while preserving structure for the upgraded API. forms-flow-components/src/components/CustomComponents/FormComponent.tsx [69] -component.conditional = {"json": {}}; +component.conditional = { json: "" }; Suggestion importance[1-10]: 6 __ Why: The existing_code matches line 69 in the new hunk, and suggesting { json: "" } could better align with APIs expecting a string; however, without full API context it’s a cautious correctness/readability improvement rather than critical.	Low