fix(orchestrator): collapse ui:hidden custom widget gaps

[lokanandaprabhu]

Hey, I just made a Pull Request!

Fixes:

https://redhat.atlassian.net/browse/RHDHBUGS-2830

Summary

• Handle ui:hidden at the object field template level to avoid rendering empty MUI Grid items.
• Keep hidden custom widgets mounted (wrapped in display: none) so SchemaUpdater/fetch logic still runs.
• Remove the old HiddenFieldTemplate in favor of a single layout-aware approach.

---

------BEFORE----

---

------AFTER------

---

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-orchestrator-form-react	workspaces/orchestrator/plugins/orchestrator-form-react	patch	v2.6.2

[rhdh-qodo-merge]

Review Summary by Qodo

Handle ui:hidden at object template level to collapse gaps

🐞 Bug fix

Walkthroughs

Description

• Replace field-level hidden handling with object-level template
• Skip grid layout for hidden fields to eliminate spacing gaps
• Keep hidden widgets mounted with display:none for logic execution
• Remove deprecated HiddenFieldTemplate in favor of unified approach

Diagram

flowchart LR
  A["HiddenFieldTemplate<br/>Field-level wrapping"] -->|"Replaced by"| B["HiddenObjectFieldTemplate<br/>Object-level handling"]
  B -->|"Evaluates ui:hidden<br/>conditions"| C["Grid item rendering<br/>or display:none div"]
  C -->|"Result"| D["No layout gaps<br/>Widgets still mounted"]

Loading

File Changes

1. workspaces/orchestrator/.changeset/hidden-widget-gaps.md 📝 Documentation +6/-0

Changeset for hidden widget gaps fix

• Added changeset documenting the ui:hidden layout fix
• Marks package as patch version bump
• Describes avoiding gaps while keeping widgets mounted

workspaces/orchestrator/.changeset/hidden-widget-gaps.md

---

2. workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenFieldTemplate.tsx 🐞 Bug fix +0/-97

Remove deprecated field-level hidden template

• Removed entire file containing field-level hidden template
• Deleted useHiddenEvaluation hook and createHiddenFieldTemplate function
• Replaced by object-level template approach

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenFieldTemplate.tsx

---

3. workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenObjectFieldTemplate.tsx ✨ Enhancement +144/-0

New object-level hidden field template component

• New component handling ui:hidden at object field template level
• Evaluates hidden conditions per property and skips grid items
• Wraps hidden fields in display:none div to keep mounted
• Integrates with MUI Grid layout system

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenObjectFieldTemplate.tsx

---

View more (1)

4. workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx 🐞 Bug fix +4/-10

Update form wrapper to use object template approach

• Replaced HiddenFieldTemplate import with HiddenObjectFieldTemplate
• Removed field-level template wrapping logic
• Updated form templates configuration to use ObjectFieldTemplate
• Simplified template setup by removing DefaultFieldTemplate wrapper

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx

---

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 📐 Spec deviations (0)

1. Index used as key ☑ 🐞 Bug ⛯ Reliability

Description

HiddenObjectFieldTemplate uses the array index as the React key for each rendered property, which
can cause React to reuse a widget instance for the wrong field if the properties array
order/length changes. This can surface as stale widget UI state or validation messages attached to
the wrong field.

Code

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenObjectFieldTemplate.tsx[R112-123]

+          return isHidden ? (
+            <div
+              key={index}
+              style={{ display: 'none' }}
+              data-hidden-field="true"
+            >
+              {element.content}
+            </div>
+          ) : (
+            <Grid item xs={12} key={index} style={{ marginBottom: '10px' }}>
+              {element.content}
+            </Grid>

Evidence

In the properties.map(...) render, key={index} is used for both the hidden and visible branches,
even though a stable identifier already exists (element.name, used to look up the ui:hidden
condition). Using indices as keys is fragile when the list can change, because React’s
reconciliation can associate prior component state with a different item.

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenObjectFieldTemplate.tsx[104-123]
workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenObjectFieldTemplate.tsx[105-106]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`HiddenObjectFieldTemplate` uses `key={index}` when rendering `properties`. If the `properties` array ever reorders or changes length, React may reuse a previously-mounted field component for a different schema property, leading to stale widget state/validation UI.

### Issue Context
A stable identifier is already available on each property (`element.name`) and is already used for `uiSchema` lookup.

### Fix Focus Areas
- workspaces/orchestrator/plugins/orchestrator-form-react/src/components/HiddenObjectFieldTemplate.tsx[104-123]

### Suggested change
Replace both `key={index}` occurrences with `key={element.name}` (or another stable unique identifier such as `element.name` + an optional suffix if needed).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[karthikjeeyar]

Changes looks good to me! I dont see the gaps anymore

/approve
/lgtm