fix(Designer): Add null safety to localeCompare in connection flow

[rllyy97]

Commit Type

• feature - New functionality
• fix - Bug fix
• refactor - Code restructuring without behavior change
• perf - Performance improvement
• docs - Documentation update
• test - Test-related changes
• chore - Maintenance/tooling

Risk Level

• Low - Minor changes, limited scope
• Medium - Moderate changes, some user impact
• High - Major changes, significant user/system impact

What & Why

The resourcefield.tsx and selectConnection.helpers.ts sort comparators were calling localeCompare on potentially undefined displayName values, causing a TypeError that crashes the connection creation panel. This manifests as 'renderComponentIntoRoot encountered an error' in the Azure Portal.

Adds nullish coalescing to both sides of the comparison in both designer and designer-v2, matching the pattern from PR #8949.

Fixes ICM 761274226

Impact of Change

• Users: Fixes potential crashing issue in connections experience.
• Developers: N/A
• System: N/A

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in:

Simple null catches, no further test file changes needed

Contributors

@rllyy97

Screenshots/Videos

N/A

[github-actions]

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

• Current: fix(Designer): Add null safety to localeCompare in connection flow
• Issue: None — title is concise and descriptive.
• Recommendation: (Optional) You could mention that the fix applies to both designer and designer-v2 if you want to be extra explicit, but the current title is fine.

---

✅ Commit Type

• Properly selected (fix)
• Only one commit type selected which is correct.

---

✅ Risk Level

• The PR is labeled risk:low and the PR body selects Low — these match and are appropriate given the small, localized changes.

---

✅ What & Why

• Current: The body explains the problem (localeCompare called on possibly undefined displayName) and the fix (add nullish coalescing on both sides) and references PR fix(Designer): Add null safety to localeCompare in connector sort #8949 and an ICM.
• Issue: None — clear and sufficient.
• Recommendation: N/A

---

⚠️ Impact of Change

• Impact is described as fixing a crash for users; developer/system impact marked N/A.
• Recommendation: Consider adding a short note about whether there are any downstream consumers of these arrays that could be affected by sorting behavior (see the code note below).
  • Users: Fixes potential crash in connection creation UI
  • Developers: Recommend documenting the change behavior if any calling code depends on array ordering/mutation
  • System: No expected system-level impact

---

⚠️ Test Plan

• The PR marks Manual testing completed and explains "Simple null catches, no further test file changes needed." This is acceptable for a small defensive change, but I recommend adding at least one unit test that covers comparator behavior when displayName is undefined/null to prevent regressions.
• Recommendation: Add a short unit test for the comparator(s) to assert stable ordering when displayName is undefined (for both designer and designer-v2 helpers). If you choose not to add tests, expand the Test Plan to explain why unit tests are unnecessary and include the manual test steps you executed.

---

⚠️ Contributors

• The PR lists the author (@rllyy97). Good.
• Recommendation: If PMs, designers, or reviewers contributed, consider adding them in the Contributors section. This is optional.

---

✅ Screenshots/Videos

• Marked N/A — appropriate since this is a non-visual bug fix.

---

Summary Table

Section	Status	Recommendation
Title	✅	Title is good.
Commit Type	✅	Correct (fix).
Risk Level	✅	risk:low is appropriate.
What & Why	✅	Clear and adequate.
Impact of Change	⚠️	Add note about potential array-mutation impact.
Test Plan	⚠️	Add a unit test for comparator or expand manual test details.
Contributors	⚠️	Optional: add other contributors if applicable.
Screenshots/Videos	✅	N/A is fine.

---

Final notes & recommended action items

• Overall: ✅ This PR passes the PR title/body checks and the advised risk level is risk:low, which matches the label on the PR.
• Code-style suggestion (important): In the diff you use resources.sort(...). Array.prototype.sort mutates the input array in-place — if resources is a prop or shared reference this can cause surprising side effects. Please consider changing to an immutable sort to avoid mutating the original array, e.g.:
  • const sortedResources = useMemo(() => [...resources].sort((a, b) => (a.displayName ?? '').localeCompare(b.displayName ?? '')), [resources]);
  • and similarly for other occurrences if applicable.
• Testing: Please add a small unit test that verifies compare behavior when displayName is undefined/null to avoid regressions in future refactors. If you cannot add a unit test, expand the Test Plan with exact manual steps and environments you used to validate the fix.

Please update the PR with the test addition (or expanded Test Plan) and consider the immutable sort change. Once those are addressed you'll be good to merge. Thank you for the clear description and small, focused fix!

---

Last updated: Mon, 30 Mar 2026 22:02:22 GMT

[Copilot]

Pull request overview

Fixes a crash in the connections and resource picker flows by making string sorting resilient to missing displayName values, in both Designer (v1) and Designer V2.

Changes:

• Add null-safe localeCompare usage in connection sorting comparators.
• Add null-safe localeCompare usage in resource dropdown sorting.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
libs/designer/src/lib/ui/panel/connectionsPanel/selectConnection/selectConnection.helpers.ts	Makes connection comparator tolerant of missing displayName.
libs/designer/src/lib/ui/common/resourcepicker/resourcefield.tsx	Makes resource dropdown sorting tolerant of missing displayName.
libs/designer-v2/src/lib/ui/panel/connectionsPanel/selectConnection/selectConnection.helpers.ts	Mirrors the connection comparator null-safety in Designer V2.
libs/designer-v2/src/lib/ui/common/resourcepicker/resourcefield.tsx	Mirrors the resource dropdown sorting null-safety in Designer V2.

[github-actions]

📊 Coverage Check

🎉 All changed files have adequate test coverage!