Restore the Active toggle and keep it visible on disabled rows - #803
Merged
Merged
Conversation
Disabled routing peers, network resources, policies and legacy routes were only distinguishable by a faded row, and the fade also dimmed the controls needed to re-enable them. Bring back the Active toggle column that was hidden in #654, and add a cellClassName hook to DataTable with a shared fadeDisabledRowCells helper that fades every cell of a disabled row except the toggle and actions cells.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (7)
Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review. 📝 WalkthroughWalkthroughThe change adds per-cell class support to ChangesTable cell behavior
Access control integration
Network and route integration
Priority: ⬇️ Low Estimated code review effort: 3 (Moderate) | ~20 minutes Change: Bug fix Sequence Diagram(s)sequenceDiagram
participant TableView
participant DataTable
participant DisabledRowHelpers
participant ActiveCell
TableView->>DataTable: Pass cellClassName and Active cell renderer
DataTable->>DisabledRowHelpers: Evaluate each cell
DisabledRowHelpers-->>DataTable: Return opacity-50 or empty class
DataTable->>ActiveCell: Render enabled state
ActiveCell-->>DataTable: Display Active control
Suggested reviewers: Merge Risk: ⚪ Minimal · up to The restored Active controls and disabled-row action visibility are consistently wired across the updated tables. The change is ready to merge. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 2📝 Generate docstrings 💡
🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. A rabbit sees the cells align Comment |
heisbrot
approved these changes
Sep 14, 2026
2 tasks
SunsetDrifter
added a commit
that referenced
this pull request
Sep 17, 2026
…hows (#805) * fix: keep tables from scrolling horizontally when the Active toggle shows The Active toggle column restored in #803 adds about 100px to every table, which pushed policies and legacy routes into a horizontal scrollbar next to an expanded sidebar on 1280px and 1440px screens. Hide the column below the xl breakpoint (2xl for legacy routes, the widest table) instead of dropping it. Enable/Disable remains available in each row's action menu on narrower viewports. Also on the legacy routes page: tighten cell padding in the expanded route rows, remove a 10px max-width on the network address that made it overflow into the Type column, let the Name cell shrink from 270px to 200px when space is tight, and drop the unused sort control from the Active header. * refactor: hide the Active column with responsive classes instead of a media query hook Columns can now carry a className through TanStack's column meta, which DataTable applies to both the header and body cells. The Active column uses `hidden xl:table-cell` (`2xl` for legacy routes) so the browser handles the breakpoint and no JavaScript listener is needed. * refactor: apply the Active column treatment consistently and cover it with a test - Peer routes, group resources and reverse proxy targets carry the same Active toggle column and now hide it below xl like the other tables. - DataTable gains tableHeadClassName so RouteTable can tighten header and body padding through props instead of descendant selectors. - The four tables reference ENABLED_COLUMN_ID instead of a literal id so the fade-on-disable helper and the column definitions stay linked. - The network address cell truncates past 16rem with a title tooltip so a long IPv6 CIDR cannot push the routes table back into a scrollbar. - Add a DataTable render test for column meta classes on header and body.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue ticket number and link
Resolves NET-1647
Summary
Disabled routing peers, network resources, policies and legacy routes were only distinguishable by a faded row, which made them easy to miss when reviewing a network. The fade also dimmed the controls needed to re-enable them.
cellClassNamehook toDataTableand a sharedfadeDisabledRowCellshelper. On a disabled row every cell fades except the toggle and the actions menu, which stay fully visible.actionsid so the helper can recognise it.Documentation
Select exactly one:
Visual-only change to existing tables. It restores a toggle column that previously existed and adjusts how disabled rows are dimmed. No new behaviour, settings or API surface to document.
Summary by CodeRabbit