refactor: volume based routing ui#4971
Conversation
XyneSpaces
left a comment
XyneSpaces
left a comment
There was a problem hiding this comment.
Automated Review Summary
PR: refactor: volume based routing ui
Reviewer: XyneSpaces Automation
Findings Overview
💡 Minor suggestions — 2 formatting/style observations.
Findings
1. Consistent code formatting in JSX
File: src/IntelligentRouting/IntelligentRoutingScreens/IntelligentRoutingHome.res
The multi-line formatting change for className and child elements improves readability. Continue applying this pattern consistently across the refactored components.
Verified: Formatting changes follow the existing pattern used elsewhere in the codebase.
2. PR checklist completion
The PR body indicates this is a refactoring change but the type of change checkbox is not marked. Consider updating the PR body to check [x] Refactoring for clarity.
Verdict: ✅ Clean refactoring — Formatting improvements are consistent. No functional changes detected.
XyneSpaces
left a comment
XyneSpaces
left a comment
There was a problem hiding this comment.
Automated Review Summary
PR: refactor: volume based routing UI
Reviewer: XyneSpaces Automation
Findings Overview
No blocking issues found. This is a UI refactor PR that modernizes the volume-based routing interface with the new design system.
Verification Passed
✅ Design system adoption — Consistent use of nd_gray color palette and new Typography helpers across all modified components
✅ Empty state pattern — New RoutingHelper.NoProcessorFound component follows established empty-state conventions with appropriate CTA
✅ Component composition — VolumeSplitRouting properly wraps conditional rendering with the new NoProcessorFound fallback
✅ Tailwind configuration — New min-80-vh utility follows the project's naming convention
✅ Profile selector integration — DefaultRouting correctly integrates BusinessProfileInp for profile-scoped connector selection
Suggestions
💡 Naming consistency — The new file RoutingHelper.res exports a NoProcessorFound module. Consider whether other routing-related helper components might belong here in future refactors, or if a more specific name like RoutingEmptyStates.res would be clearer if this is intended only for empty states.
Verdict: ✅ Approve — Clean UI refactor with consistent design system adoption.
| customButtonStyle="bg-nd_gray-0 !w-full" | ||
| input | ||
| options={gatewayOptions} | ||
| fixedDropDownDirection=SelectBox.TopRight |
There was a problem hiding this comment.
I think direct TopRight can be used.
| ).connector_label->React.string} | ||
| <div | ||
| key | ||
| className="flex items-center h-10 bg-nd_gray-0 border border-nd_gray-300 rounded-[10px] overflow-hidden"> |
There was a problem hiding this comment.
rounded-[10px] add in tailwind config.
| {ruleGateway.gateway_name->getGatewayName->React.string} | ||
| {if ruleGateway.distribution !== 100 { | ||
| <span className="text-jp-gray-700 dark:text-jp-gray-600 ml-1"> | ||
| className="flex items-center gap-2 h-10 px-3 bg-nd_gray-0 border border-nd_gray-300 rounded-[10px]"> |
4 participants
Type of Change
Description
Screen.Recording.2026-06-10.at.7.07.36.PM.mov
Motivation and Context
How did you test it?
Where to test it?
Backend Dependency
Backend PR URL:
Feature Flag
Feature flag name(s):
Checklist
npm run re:build