Feature/simplified layout - #649
Conversation
Nest Peers as a collapsible group with three children: User Devices (/peers/users), Servers (/peers/servers) and Setup Keys. Each peer sub-page reuses PeersTable with a new kind prop that filters by whether the peer's owner is a real user (devices) or a service user / no user (servers). /peers now redirects to /peers/users so old links keep working. Also drops the Beta badge from Control Center. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Toolbar: replace the wide All/Online/Offline ButtonGroup with a single OnlineStatusFilter dropdown, drop DataTableRowsPerPage in favor of initialPageSize=25, and add a UserFilterSelector scoped to users who own at least one peer in the current view. Columns: remove the inline Connect column; fold SSH and RDP launchers into the existing 3-dot action menu (gated to non-mobile online peers). Shorten the DNS label in the address cell to its leading segment; CopyToClipboardText gains a textToCopy prop so the full label still lands on the clipboard. Collapse the Groups column to a single count badge via a new countOnly flag on MultipleGroups / GroupsRow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Roll back the toolbar-filter changes from the previous commit so the filter UI on /peers/users and /peers/servers matches what was on main: the All/Online/Offline ButtonGroup and DataTableRowsPerPage are back, and the OnlineStatusFilter popover, UserFilterSelector dropdown, hidden user_id_filter column, and initialPageSize=25 are gone. The kind split itself stays — both views still scope to their respective peer populations. Non-filter changes (Connect column folded into the action menu, DNS-label shortening, Groups countOnly) are unaffected. A follow-up PR will reintroduce the richer filter UI on its own. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the existing hideDocker prop with a single semantic
isUserDevice flag on SetupModal/SetupModalContent and AddPeerButton.
SetupModalContent derives hideDocker = isUserDevice internally, so
the call sites pick the audience (user device vs server) and the
modal handles the display differences. PeersTable now passes
isUserDevice={kind === "users"} so the User Devices Add Peer flow
omits Docker. Onboarding flows that previously set hideDocker={true}
switch to isUserDevice={true}. This sets up a single hook for the
Servers-specific changes coming next.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When isUserDevice is explicitly false (Add Peer from /peers/servers), the modal now hides mobile, keeps Docker, and inserts an inline setup-key generation step between install and run. The Generate button posts to /setup-keys (one-off, 24h, no auto_groups, no "All" group) and lifts the resulting key into a shared state so every OS tab splices it into the netbird up / docker run command. Before generation the command shows a SETUP_KEY placeholder so the shape stays visible. isUserDevice becomes tri-state (true / false / undefined) so legacy call sites (/install, InstallNetBirdButton, ReverseProxyTargetSelector, routing-peer onboarding) keep their pre-existing behaviour via the undefined branch. The key step heading carries a HelpTooltip explaining what a setup key is plus a Learn more link. Pre-generation the banner is just a Generate button; post-generation it shows the key, copy action, and a one-line single-use / 24-hour reminder. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop the size=xs from the Generate Key button so it matches the other primary actions in the modal (e.g. Download NetBird), restore the "Generate" → "Generate Key" label, and revert the server-flow description to the original "install and run NetBird with the setup key as a parameter" copy so user-device and server flows read consistently. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Long netbird up commands overflowed the modal's Code block once --setup-key, --hostname, or --management-url were spliced in. Introduce a shared NetBirdUpCommand helper that drops the command across multiple shell-continuation lines (with trailing backslashes) so the full invocation stays on screen and still copy/pastes cleanly. Linux, Windows, and macOS tabs (main + accordion paths) now render through the helper; unused getNetBirdUpCommand imports are cleaned up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughSplits the legacy peers route into /peers/users and /peers/servers (legacy /peers now redirects), refactors SetupModal for user-device vs server flows with inline key generation, and updates PeersTable, cells, and navigation to support the new flows. ChangesPeers Route Restructuring and Navigation Updates
Setup Modal Refactoring for User Device and Server Flows
Peers Table Filtering and UI Cell Updates
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/(dashboard)/peers/servers/page.tsxOops! Something went wrong! :( ESLint: 9.39.2 TypeError: Converting circular structure to JSON src/app/(dashboard)/peers/users/page.tsxOops! Something went wrong! :( ESLint: 9.39.2 TypeError: Converting circular structure to JSON 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/modules/setup-netbird-modal/SetupModal.tsx (1)
478-487: 💤 Low valueSilent clipboard failure is acceptable but consider minimal feedback.
The empty
catch {}is a common pattern for clipboard operations since they can fail silently due to browser permissions or lack of focus. The success path shows a notification, so users know when it works. If you want to improve UX, you could add a brief error notification, but this is not blocking.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/modules/setup-netbird-modal/SetupModal.tsx` around lines 478 - 487, The empty catch in the copy function swallows clipboard errors; update the catch to provide minimal feedback by calling notify with an error title/description (or at least console.debug) so users get informed on failure; locate the copy function that uses generatedKey?.key and navigator.clipboard.writeText and add a small error notification via the existing notify(...) call inside the catch block.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/`(dashboard)/peers/servers/page.tsx:
- Around line 37-47: The peersWithUser mapping uses users without checking the
users-loading state, causing peers to temporarily lack user data and be
misclassified as kind={"servers"}; update the logic (both where peersWithUser is
computed and the similar block around lines 79-84) to gate rendering until users
are loaded: use the loading flag from useUsers (e.g., isLoading or similar) or
check users !== undefined before mapping or before rendering the table, and
preserve peer.user as undefined only after users finish loading so kind
determination waits for users data (adjust the peersWithUser computation and the
server-table rendering condition accordingly).
- Line 113: The SetupModalContent invocation on the servers onboarding page
currently omits the server/client flow flag; update the call to pass the
explicit prop isUserDevice={false} so SetupModalContent uses the server
onboarding rules (locate the JSX element SetupModalContent in page.tsx and add
the isUserDevice prop with value false).
In `@src/app/`(dashboard)/peers/users/page.tsx:
- Around line 37-47: The table readiness logic is ignoring the users loading
state causing temporary empty results when kind={"users"}; update the mapping
that builds peersWithUser (and the similar mapping at lines ~77-82) to respect
useUsers' loading state (from useUsers) — either wait until users are loaded
before applying users?.find(...) or add a separate isUsersLoading check so you
don't filter out rows while loading; ensure peersWithUser only substitutes user
when users are available (keep user undefined/null while loading) and that any
downstream filter by kind={"users"} accounts for the loading flag to avoid a
transient empty table.
---
Nitpick comments:
In `@src/modules/setup-netbird-modal/SetupModal.tsx`:
- Around line 478-487: The empty catch in the copy function swallows clipboard
errors; update the catch to provide minimal feedback by calling notify with an
error title/description (or at least console.debug) so users get informed on
failure; locate the copy function that uses generatedKey?.key and
navigator.clipboard.writeText and add a small error notification via the
existing notify(...) call inside the catch block.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ce32c548-54c2-42aa-982d-85b5f9729f52
📒 Files selected for processing (21)
src/app/(dashboard)/peers/page.tsxsrc/app/(dashboard)/peers/servers/layout.tsxsrc/app/(dashboard)/peers/servers/page.tsxsrc/app/(dashboard)/peers/users/layout.tsxsrc/app/(dashboard)/peers/users/page.tsxsrc/components/CopyToClipboardText.tsxsrc/components/ui/AddPeerButton.tsxsrc/components/ui/MultipleGroups.tsxsrc/layouts/Navigation.tsxsrc/modules/common-table-rows/GroupsRow.tsxsrc/modules/onboarding/networks/OnboardingAddUserDevice.tsxsrc/modules/onboarding/p2p/OnboardingFirstDevice.tsxsrc/modules/peers/PeerActionCell.tsxsrc/modules/peers/PeerAddressCell.tsxsrc/modules/peers/PeerGroupCell.tsxsrc/modules/peers/PeersTable.tsxsrc/modules/setup-netbird-modal/DockerTab.tsxsrc/modules/setup-netbird-modal/LinuxTab.tsxsrc/modules/setup-netbird-modal/MacOSTab.tsxsrc/modules/setup-netbird-modal/SetupModal.tsxsrc/modules/setup-netbird-modal/WindowsTab.tsx
| // one click away inside the three-dot menu. | ||
| const peerOs = getOperatingSystem(peer?.os); | ||
| const isMobile = | ||
| peerOs === OperatingSystem.ANDROID || peerOs === OperatingSystem.IOS; |
There was a problem hiding this comment.
This is wrong. Android is supported
There was a problem hiding this comment.
The change reflects the current state of the functionality (main). Apparently, I don't see that "Connect" is supported for the Android devices in the current version of the table.
There was a problem hiding this comment.
Android (and iOS) was explicitly skipped. PeerConnectButton.tsx lines 19–22:
const os = getOperatingSystem(peer?.os);
const isMobile = os === OperatingSystem.ANDROID || os === OperatingSystem.IOS;
if (isMobile) return;
So the old Connect column cell returned nothing for Android/iOS peers — the button never rendered. My replacement in PeerActionCell.tsx keeps the same gating
(showRemoteAccessItems = !isMobile && !!peer.connected), so behavior is preserved: SSH/RDP items in the 3-dot menu also hide for Android/iOS peers.
There was a problem hiding this comment.
I can add android support tho
There was a problem hiding this comment.
we can do in a small change later
|
Instead of having different sections for User Devices and Servers, it should've been a toggle. Now I can't see the entire list of all devices. This UX behavior removes functionality, not adds to it. |
Splits the Peers sidebar entry into User Devices (/peers/users) and Servers (/peers/servers), with /peers redirecting to User Devices and a shared kind filter splitting peers by whether the owner is a real user vs a service/no-user. The Servers page description and an inline link replace what was the old "Setup Keys" sidebar item under Peers.
Splits the Peers sidebar entry into User Devices (/peers/users) and Servers (/peers/servers), with /peers redirecting to User Devices and a shared kind filter splitting peers by whether the owner is a real user vs a service/no-user. The Servers page description and an inline link replace what was the old "Setup Keys" sidebar item under Peers.
4 participants
Issue ticket number and link
The 1st step of simplifying the UI layout that addresses the Peers view. Changes of the tables and moving of teh setup keys to settings wil lfollow.
Splits the Peers sidebar entry into User Devices (/peers/users) and Servers (/peers/servers), with /peers redirecting to User Devices and a shared kind filter splitting peers
by whether the owner is a real user vs a service/no-user. The Servers page description and an inline link replace what was the old "Setup Keys" sidebar item under Peers.
Refines the shared Peers table: drops the Beta badge from Control Center, removes the inline Connect column (SSH/RDP now live in the 3-dot action menu, gated to online
non-mobile peers), shortens the DNS label in the address cell (full label still copies), and renders the Groups column as a single N Groups count badge (with the existing
hover card + edit affordances).
Tailors the Install NetBird modal to the audience via a tri-state isUserDevice flag (defaults preserve legacy callers like /install):
with type=one-off, 24-hour expiry, no auto-groups. The generated key flows into every OS tab's netbird up --setup-key=… command; before generation a SETUP_KEY placeholder
keeps the command shape visible.
Documentation
Select exactly one:
Docs PR URL (required if "docs added" is checked)
Paste the PR link from https://github.com/netbirdio/docs here:
netbirdio/docs#766
Summary by CodeRabbit
New Features
Improvements