From 5bbcb75709b25d4f9cc0770ac63bbdcea7d0dd09 Mon Sep 17 00:00:00 2001 From: Eduard Gert Date: Mon, 5 May 2025 11:06:52 +0200 Subject: [PATCH 1/5] Add changes from dashboard cloud --- docker/init_react_envs.sh | 3 +- package-lock.json | 207 ++++++-- package.json | 11 +- .../{ => (deprecated)}/activity/layout.tsx | 0 .../(deprecated)/activity/page.tsx | 10 + src/app/(dashboard)/access-control/page.tsx | 8 +- src/app/(dashboard)/dns/nameservers/page.tsx | 8 +- src/app/(dashboard)/dns/settings/page.tsx | 9 +- src/app/(dashboard)/events/audit/layout.tsx | 8 + .../{activity => events/audit}/page.tsx | 29 +- src/app/(dashboard)/network-routes/page.tsx | 4 +- src/app/(dashboard)/network/page.tsx | 25 +- src/app/(dashboard)/networks/page.tsx | 8 +- src/app/(dashboard)/peer/page.tsx | 475 ++++++++++-------- src/app/(dashboard)/peers/page.tsx | 7 +- src/app/(dashboard)/posture-checks/page.tsx | 7 +- src/app/(dashboard)/settings/page.tsx | 74 ++- src/app/(dashboard)/setup-keys/page.tsx | 7 +- .../(dashboard)/team/service-users/page.tsx | 7 +- src/app/(dashboard)/team/user/page.tsx | 29 +- src/app/(dashboard)/team/users/page.tsx | 4 +- src/app/globals.css | 44 ++ src/app/page.tsx | 3 +- src/auth/OIDCProvider.tsx | 26 +- src/components/Button.tsx | 13 +- src/components/Callout.tsx | 28 ++ src/components/Command.tsx | 2 +- src/components/DatePickerWithRange.tsx | 63 ++- src/components/DropdownInput.tsx | 34 +- src/components/DropdownMenu.tsx | 13 +- src/components/InlineLink.tsx | 45 +- src/components/Input.tsx | 6 +- src/components/Notification.tsx | 27 +- src/components/PeerGroupSelector.tsx | 239 +++++---- src/components/Popover.tsx | 67 ++- src/components/SidebarItem.tsx | 62 ++- src/components/UserSelector.tsx | 219 ++++++++ src/components/VirtualScrollAreaList.tsx | 62 ++- src/components/modal/Modal.tsx | 62 ++- src/components/modal/ModalHeader.tsx | 2 +- src/components/table/DataTable.tsx | 6 +- src/components/table/DataTableFilter.tsx | 276 ++++++++++ .../table/DataTableGlobalSearch.tsx | 14 +- src/components/table/DataTablePagination.tsx | 10 +- src/components/ui/AbsoluteDateTimeInput.tsx | 87 ++++ src/components/ui/AddPeerButton.tsx | 44 +- src/components/ui/GetStartedTest.tsx | 5 +- src/components/ui/GroupBadge.tsx | 15 +- src/components/ui/InputDomain.tsx | 4 + src/components/ui/MultipleGroups.tsx | 23 +- src/components/ui/PageNotFound.tsx | 93 ++++ src/components/ui/RestrictedAccess.tsx | 25 +- src/components/ui/SmallBadge.tsx | 6 +- src/components/ui/TextWithTooltip.tsx | 2 +- src/components/ui/TruncatedText.tsx | 54 +- src/components/ui/UserAvatar.tsx | 17 +- src/components/ui/UserDropdown.tsx | 43 +- src/contexts/AnalyticsProvider.tsx | 78 ++- src/contexts/AnnouncementProvider.tsx | 9 +- src/contexts/ApplicationProvider.tsx | 32 +- src/contexts/CountryProvider.tsx | 38 +- src/contexts/DialogProvider.tsx | 6 +- src/contexts/GroupsProvider.tsx | 24 +- src/contexts/PermissionsProvider.tsx | 39 ++ src/contexts/UsersProvider.tsx | 76 ++- src/interfaces/Account.ts | 4 + src/interfaces/Pagination.ts | 7 + src/interfaces/Permission.ts | 42 +- src/interfaces/User.ts | 7 +- src/layouts/AppLayout.tsx | 11 +- src/layouts/DashboardLayout.tsx | 26 +- src/layouts/Header.tsx | 56 ++- src/layouts/Navigation.tsx | 208 ++++---- src/layouts/PageContainer.tsx | 11 +- .../access-control/AccessControlModal.tsx | 25 +- .../table/AccessControlActionCell.tsx | 11 +- .../table/AccessControlActiveCell.tsx | 3 + .../table/AccessControlTable.tsx | 15 +- .../access-control/useAccessControl.ts | 5 +- .../access-tokens/AccessTokenActionCell.tsx | 7 +- .../access-tokens/CreateAccessTokenModal.tsx | 10 +- src/modules/account/useAccount.tsx | 10 +- src/modules/activity/ActivityEntryRow.tsx | 63 ++- .../activity/ActivityEventCodeSelector.tsx | 16 +- src/modules/activity/ActivityTable.tsx | 30 +- src/modules/activity/ActivityTypeIcon.tsx | 106 ++-- ...Selector.tsx => UsersDropdownSelector.tsx} | 148 +++--- src/modules/activity/utils.ts | 80 +-- .../common-table-rows/ActiveInactiveRow.tsx | 2 +- src/modules/common-table-rows/GroupsRow.tsx | 17 +- .../dns-nameservers/NameserverModal.tsx | 62 ++- .../table/NameserverActionCell.tsx | 11 +- .../table/NameserverActiveCell.tsx | 5 +- .../table/NameserverGroupTable.tsx | 16 +- src/modules/exit-node/AddExitNodeButton.tsx | 8 +- .../exit-node/ExitNodeDropdownButton.tsx | 7 +- ...upSelector.tsx => GroupFilterSelector.tsx} | 18 +- src/modules/groups/SingleGroupSelector.tsx | 144 ++++++ .../networks/misc/NetworkNavigation.tsx | 12 +- .../networks/resources/ResourceActionCell.tsx | 13 +- .../resources/ResourceEnabledCell.tsx | 4 + .../networks/resources/ResourceGroupCell.tsx | 5 +- .../networks/resources/ResourceNameCell.tsx | 4 +- .../networks/resources/ResourcePolicyCell.tsx | 5 +- .../networks/resources/ResourcesTable.tsx | 4 + .../NetworkRoutingPeersSection.tsx | 3 + .../NetworkRoutingPeersTable.tsx | 3 + .../routing-peers/RoutingPeersActionCell.tsx | 13 +- .../routing-peers/RoutingPeersEnabledCell.tsx | 3 + .../RoutingPeersMasqueradeCell.tsx | 6 +- .../networks/table/NetworkActionCell.tsx | 8 +- .../networks/table/NetworkPolicyCell.tsx | 4 + .../networks/table/NetworkResourceCell.tsx | 4 + .../networks/table/NetworkRoutingPeerCell.tsx | 3 + src/modules/networks/table/NetworksTable.tsx | 9 +- src/modules/peer/AccessiblePeersSection.tsx | 2 +- src/modules/peer/AddRouteDropdownButton.tsx | 12 +- src/modules/peer/PeerExpirationToggle.tsx | 8 +- src/modules/peer/PeerNetworkRoutesSection.tsx | 4 +- src/modules/peer/PeerRoutesTable.tsx | 2 + src/modules/peers/PeerActionCell.tsx | 16 +- src/modules/peers/PeerGroupCell.tsx | 3 + src/modules/peers/PeerMultiSelect.tsx | 6 + src/modules/peers/PeerStatusCell.tsx | 6 +- src/modules/peers/PeersTable.tsx | 25 +- .../checks/PostureCheckGeoLocation.tsx | 20 +- .../checks/PostureCheckNetBirdVersion.tsx | 27 +- .../checks/PostureCheckOperatingSystem.tsx | 39 +- .../checks/PostureCheckPeerNetworkRange.tsx | 21 +- .../checks/PostureCheckProcess.tsx | 13 +- .../route-group/GroupedRouteActionCell.tsx | 10 +- .../route-group/NetworkRoutesTable.tsx | 4 + src/modules/routes/RouteActionCell.tsx | 10 +- src/modules/routes/RouteActiveCell.tsx | 4 + src/modules/routes/RouteModal.tsx | 4 +- src/modules/settings/DangerZoneTab.tsx | 21 +- src/modules/settings/GroupsActionCell.tsx | 4 +- src/modules/settings/GroupsTab.tsx | 5 + src/modules/settings/NetworkSettingsTab.tsx | 7 +- src/modules/settings/PermissionsTab.tsx | 6 +- src/modules/setup-keys/SetupKeyActionCell.tsx | 13 +- src/modules/setup-keys/SetupKeyGroupsCell.tsx | 29 +- src/modules/setup-keys/SetupKeysTable.tsx | 4 + src/modules/users/HorizontalUsersStack.tsx | 130 +++++ src/modules/users/ServiceUserModal.tsx | 31 +- src/modules/users/ServiceUsersTable.tsx | 186 +++---- src/modules/users/SmallUserAvatar.tsx | 32 ++ src/modules/users/UserResendInviteButton.tsx | 58 +++ src/modules/users/UserRoleSelector.tsx | 91 ++-- src/modules/users/UsersTable.tsx | 188 +++---- .../users/table-cells/ServiceUserNameCell.tsx | 2 +- .../users/table-cells/UserActionCell.tsx | 19 +- .../users/table-cells/UserBlockCell.tsx | 3 + .../users/table-cells/UserNameCell.tsx | 8 +- .../users/table-cells/UserRoleCell.tsx | 22 +- .../users/table-cells/UserStatusCell.tsx | 3 +- src/utils/api.tsx | 113 +++-- src/utils/config.ts | 10 +- src/utils/helpers.ts | 40 +- tailwind.config.ts | 2 + 160 files changed, 4096 insertions(+), 1444 deletions(-) rename src/app/(dashboard)/{ => (deprecated)}/activity/layout.tsx (100%) create mode 100644 src/app/(dashboard)/(deprecated)/activity/page.tsx create mode 100644 src/app/(dashboard)/events/audit/layout.tsx rename src/app/(dashboard)/{activity => events/audit}/page.tsx (65%) create mode 100644 src/components/Callout.tsx create mode 100644 src/components/UserSelector.tsx create mode 100644 src/components/table/DataTableFilter.tsx create mode 100644 src/components/ui/AbsoluteDateTimeInput.tsx create mode 100644 src/components/ui/PageNotFound.tsx create mode 100644 src/contexts/PermissionsProvider.tsx create mode 100644 src/interfaces/Pagination.ts rename src/modules/activity/{ActivityUserSelector.tsx => UsersDropdownSelector.tsx} (70%) rename src/modules/groups/{GroupSelector.tsx => GroupFilterSelector.tsx} (91%) create mode 100644 src/modules/groups/SingleGroupSelector.tsx create mode 100644 src/modules/users/HorizontalUsersStack.tsx create mode 100644 src/modules/users/SmallUserAvatar.tsx create mode 100644 src/modules/users/UserResendInviteButton.tsx diff --git a/docker/init_react_envs.sh b/docker/init_react_envs.sh index 2e1fcc25..79a1bddb 100644 --- a/docker/init_react_envs.sh +++ b/docker/init_react_envs.sh @@ -58,13 +58,14 @@ export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/( export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT} export NETBIRD_HOTJAR_TRACK_ID=${NETBIRD_HOTJAR_TRACK_ID} export NETBIRD_GOOGLE_ANALYTICS_ID=${NETBIRD_GOOGLE_ANALYTICS_ID} +export NETBIRD_GOOGLE_TAG_MANAGER_ID=${NETBIRD_GOOGLE_TAG_MANAGER_ID} export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken} export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false} echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}" # replace ENVs in the config -ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS" +ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS" OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js" envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS" diff --git a/package-lock.json b/package-lock.json index 75aed861..1074be1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,8 @@ "@types/react-dom": "^18", "@types/react-window": "^1.8.8", "autoprefixer": "^10", + "chart.js": "^4.4.8", + "chroma-js": "^3.1.2", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "cmdk": "^0.2.0", @@ -50,9 +52,10 @@ "flowbite-react": "^0.6.4", "framer-motion": "^10.16.4", "ip-cidr": "^3.1.0", + "js-cookie": "^3.0.5", "lodash": "^4.17.21", - "lucide-react": "^0.460.0", - "next": "13.5.7", + "lucide-react": "^0.479.0", + "next": "13.5.9", "next-themes": "^0.2.1", "punycode": "^2.3.1", "react": "^18", @@ -69,9 +72,13 @@ "swr": "^2.2.4", "tailwind-merge": "^1.14.0", "tailwindcss-animate": "^1.0.7", + "timescape": "^0.7.1", "typescript": "^5" }, "devDependencies": { + "@faker-js/faker": "^9.5.1", + "@types/chroma-js": "^3.1.1", + "@types/js-cookie": "^3.0.6", "cypress": "^13.13.0", "postcss": "^8", "prettier": "3.0.3", @@ -261,6 +268,23 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@faker-js/faker": { + "version": "9.7.0", + "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-9.7.0.tgz", + "integrity": "sha512-aozo5vqjCmDoXLNUJarFZx2IN/GgGaogY4TMJ6so/WLZOWpSV7fvj2dmrV6sEAnUm1O7aCrhTibjpzeDFgNqbg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/fakerjs" + } + ], + "license": "MIT", + "engines": { + "node": ">=18.0.0", + "npm": ">=9.0.0" + } + }, "node_modules/@floating-ui/core": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", @@ -382,10 +406,16 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", + "license": "MIT" + }, "node_modules/@next/env": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.7.tgz", - "integrity": "sha512-uVuRqoj28Ys/AI/5gVEgRAISd0KWI0HRjOO1CTpNgmX3ZsHb5mdn14Y59yk0IxizXdo7ZjsI2S7qbWnO+GNBcA==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.9.tgz", + "integrity": "sha512-h9+DconfsLkhHIw950Som5t5DC0kZReRRVhT4XO2DLo5vBK3PQK6CbFr8unxjHwvIcRdDvb8rosKleLdirfShQ==", "license": "MIT" }, "node_modules/@next/eslint-plugin-next": { @@ -397,9 +427,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.7.tgz", - "integrity": "sha512-7SxmxMex45FvKtRoP18eftrDCMyL6WQVYJSEE/s7A1AW/fCkznxjEShKet2iVVzf89gWp8HbXGaL4hCaseux6g==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.9.tgz", + "integrity": "sha512-pVyd8/1y1l5atQRvOaLOvfbmRwefxLhqQOzYo/M7FQ5eaRwA1+wuCn7t39VwEgDd7Aw1+AIWwd+MURXUeXhwDw==", "cpu": [ "arm64" ], @@ -413,9 +443,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.7.tgz", - "integrity": "sha512-6iENvgyIkGFLFszBL4b1VfEogKC3TDPEB6/P/lgxmgXVXIV09Q4or1MVn+U/tYyYmm7oHMZ3oxGpHAyJ80nA6g==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.9.tgz", + "integrity": "sha512-DwdeJqP7v8wmoyTWPbPVodTwCybBZa02xjSJ6YQFIFZFZ7dFgrieKW4Eo0GoIcOJq5+JxkQyejmI+8zwDp3pwA==", "cpu": [ "x64" ], @@ -429,9 +459,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.7.tgz", - "integrity": "sha512-P42jDX56wu9zEdVI+Xv4zyTeXB3DpqgE1Gb4bWrc0s2RIiDYr6uKBprnOs1hCGIwfVyByxyTw5Va66QCdFFNUg==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.9.tgz", + "integrity": "sha512-wdQsKsIsGSNdFojvjW3Ozrh8Q00+GqL3wTaMjDkQxVtRbAqfFBtrLPO0IuWChVUP2UeuQcHpVeUvu0YgOP00+g==", "cpu": [ "arm64" ], @@ -445,9 +475,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.7.tgz", - "integrity": "sha512-A06vkj+8X+tLRzSja5REm/nqVOCzR+x5Wkw325Q/BQRyRXWGCoNbQ6A+BR5M86TodigrRfI3lUZEKZKe3QJ9Bg==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.9.tgz", + "integrity": "sha512-6VpS+bodQqzOeCwGxoimlRoosiWlSc0C224I7SQWJZoyJuT1ChNCo+45QQH+/GtbR/s7nhaUqmiHdzZC9TXnXA==", "cpu": [ "arm64" ], @@ -461,9 +491,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.7.tgz", - "integrity": "sha512-UdHm7AlxIbdRdMsK32cH0EOX4OmzAZ4Xm+UVlS0YdvwLkI3pb7AoBEoVMG5H0Wj6Wpz6GNkrFguHTRLymTy6kw==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.9.tgz", + "integrity": "sha512-XxG3yj61WDd28NA8gFASIR+2viQaYZEFQagEodhI/R49gXWnYhiflTeeEmCn7Vgnxa/OfK81h1gvhUZ66lozpw==", "cpu": [ "x64" ], @@ -477,9 +507,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.7.tgz", - "integrity": "sha512-c50Y8xBKU16ZGj038H6C13iedRglxvdQHD/1BOtes56gwUrIRDX2Nkzn3mYtpz3Wzax0gfAF9C0Nqljt93IxvA==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.9.tgz", + "integrity": "sha512-/dnscWqfO3+U8asd+Fc6dwL2l9AZDl7eKtPNKW8mKLh4Y4wOpjJiamhe8Dx+D+Oq0GYVjuW0WwjIxYWVozt2bA==", "cpu": [ "x64" ], @@ -493,9 +523,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.7.tgz", - "integrity": "sha512-NcUx8cmkA+JEp34WNYcKW6kW2c0JBhzJXIbw+9vKkt9m/zVJ+KfizlqmoKf04uZBtzFN6aqE2Fyv2MOd021WIA==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.9.tgz", + "integrity": "sha512-T/iPnyurOK5a4HRUcxAlss8uzoEf5h9tkd+W2dSWAfzxv8WLKlUgbfk+DH43JY3Gc2xK5URLuXrxDZ2mGfk/jw==", "cpu": [ "arm64" ], @@ -509,9 +539,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.7.tgz", - "integrity": "sha512-wXp+/3NVcuyJDED6gJiLXs5dqHaWO7moAB6aBtjlKZvsxBDxpcyjsfRbtHPeYtaT20zCkmPs69H0K25lrVZmlA==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.9.tgz", + "integrity": "sha512-BLiPKJomaPrTAb7ykjA0LPcuuNMLDVK177Z1xe0nAem33+9FIayU4k/OWrtSn9SAJW/U60+1hoey5z+KCHdRLQ==", "cpu": [ "ia32" ], @@ -525,9 +555,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.7.tgz", - "integrity": "sha512-PLyD3Dl6jTTkLG8AoqhPGd5pXtSs8wbqIhWPQt3yEMfnYld/dGYuF2YPs3YHaVFrijCIF9pXY3+QOyvP23Zn7g==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.9.tgz", + "integrity": "sha512-/72/dZfjXXNY/u+n8gqZDjI6rxKMpYsgBBYNZKWOQw0BpBF7WCnPflRy3ZtvQ2+IYI3ZH2bPyj7K+6a6wNk90Q==", "cpu": [ "x64" ], @@ -2373,11 +2403,25 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@types/chroma-js": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-3.1.1.tgz", + "integrity": "sha512-SFCr4edNkZ1bGaLzGz7rgR1bRzVX4MmMxwsIa3/Bh6ose8v+hRpneoizHv0KChdjxaXyjRtaMq7sCuZSzPomQA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/crypto-js": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz", "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==" }, + "node_modules/@types/js-cookie": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz", + "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -3262,6 +3306,18 @@ "node": ">=8" } }, + "node_modules/chart.js": { + "version": "4.4.9", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz", + "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==", + "license": "MIT", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/check-more-types": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz", @@ -3308,6 +3364,12 @@ "node": ">= 6" } }, + "node_modules/chroma-js": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-3.1.2.tgz", + "integrity": "sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg==", + "license": "(BSD-3-Clause AND Apache-2.0)" + }, "node_modules/ci-info": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.1.0.tgz", @@ -5832,6 +5894,15 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "license": "MIT", + "engines": { + "node": ">=14" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -6138,12 +6209,12 @@ } }, "node_modules/lucide-react": { - "version": "0.460.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz", - "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==", + "version": "0.479.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.479.0.tgz", + "integrity": "sha512-aBhNnveRhorBOK7uA4gDjgaf+YlHMdMhQ/3cupk6exM10hWlEU+2QtWYOfhXhjAsmdb6LeKR+NZnow4UxRRiTQ==", "license": "ISC", "peerDependencies": { - "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/matchmediaquery": { @@ -6286,12 +6357,12 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==" }, "node_modules/next": { - "version": "13.5.7", - "resolved": "https://registry.npmjs.org/next/-/next-13.5.7.tgz", - "integrity": "sha512-W7KIRTE+hPcgGdq89P3mQLDX3m7pJ6nxSyC+YxYaUExE+cS4UledB+Ntk98tKoyhsv6fjb2TRAnD7VDvoqmeFg==", + "version": "13.5.9", + "resolved": "https://registry.npmjs.org/next/-/next-13.5.9.tgz", + "integrity": "sha512-h4ciD/Uxf1PwsiX0DQePCS5rMoyU5a7rQ3/Pg6HBLwpa/SefgNj1QqKSZsWluBrYyqdtEyqKrjeOszgqZlyzFQ==", "license": "MIT", "dependencies": { - "@next/env": "13.5.7", + "@next/env": "13.5.9", "@swc/helpers": "0.5.2", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", @@ -6306,15 +6377,15 @@ "node": ">=16.14.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "13.5.7", - "@next/swc-darwin-x64": "13.5.7", - "@next/swc-linux-arm64-gnu": "13.5.7", - "@next/swc-linux-arm64-musl": "13.5.7", - "@next/swc-linux-x64-gnu": "13.5.7", - "@next/swc-linux-x64-musl": "13.5.7", - "@next/swc-win32-arm64-msvc": "13.5.7", - "@next/swc-win32-ia32-msvc": "13.5.7", - "@next/swc-win32-x64-msvc": "13.5.7" + "@next/swc-darwin-arm64": "13.5.9", + "@next/swc-darwin-x64": "13.5.9", + "@next/swc-linux-arm64-gnu": "13.5.9", + "@next/swc-linux-arm64-musl": "13.5.9", + "@next/swc-linux-x64-gnu": "13.5.9", + "@next/swc-linux-x64-musl": "13.5.9", + "@next/swc-win32-arm64-msvc": "13.5.9", + "@next/swc-win32-ia32-msvc": "13.5.9", + "@next/swc-win32-x64-msvc": "13.5.9" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", @@ -7942,6 +8013,44 @@ "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", "dev": true }, + "node_modules/timescape": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/timescape/-/timescape-0.7.1.tgz", + "integrity": "sha512-v80kXaQ7a1QpgZoR1Sh81qmkGweR4gS80VZiOpRc0sYROOUbT2DDdd5PxynJs2v8NXtgyPCXQNjigf6je5hqgQ==", + "license": "MIT", + "peerDependencies": { + "@preact/signals": "1.x", + "preact": "10.x", + "react": ">=17", + "react-dom": ">=17", + "solid-js": ">=1", + "svelte": "3.x", + "vue": "3.x" + }, + "peerDependenciesMeta": { + "@preact/signals": { + "optional": true + }, + "preact": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "solid-js": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + } + } + }, "node_modules/tldts": { "version": "6.1.69", "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.69.tgz", diff --git a/package.json b/package.json index b63bac9c..cd97cec7 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "@types/react-dom": "^18", "@types/react-window": "^1.8.8", "autoprefixer": "^10", + "chart.js": "^4.4.8", + "chroma-js": "^3.1.2", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "cmdk": "^0.2.0", @@ -55,9 +57,10 @@ "flowbite-react": "^0.6.4", "framer-motion": "^10.16.4", "ip-cidr": "^3.1.0", + "js-cookie": "^3.0.5", "lodash": "^4.17.21", - "lucide-react": "^0.460.0", - "next": "13.5.7", + "lucide-react": "^0.479.0", + "next": "13.5.9", "next-themes": "^0.2.1", "punycode": "^2.3.1", "react": "^18", @@ -74,9 +77,13 @@ "swr": "^2.2.4", "tailwind-merge": "^1.14.0", "tailwindcss-animate": "^1.0.7", + "timescape": "^0.7.1", "typescript": "^5" }, "devDependencies": { + "@faker-js/faker": "^9.5.1", + "@types/chroma-js": "^3.1.1", + "@types/js-cookie": "^3.0.6", "cypress": "^13.13.0", "postcss": "^8", "prettier": "3.0.3", diff --git a/src/app/(dashboard)/activity/layout.tsx b/src/app/(dashboard)/(deprecated)/activity/layout.tsx similarity index 100% rename from src/app/(dashboard)/activity/layout.tsx rename to src/app/(dashboard)/(deprecated)/activity/layout.tsx diff --git a/src/app/(dashboard)/(deprecated)/activity/page.tsx b/src/app/(dashboard)/(deprecated)/activity/page.tsx new file mode 100644 index 00000000..083c0c90 --- /dev/null +++ b/src/app/(dashboard)/(deprecated)/activity/page.tsx @@ -0,0 +1,10 @@ +"use client"; + +import FullScreenLoading from "@components/ui/FullScreenLoading"; +import { useRedirect } from "@hooks/useRedirect"; +import React from "react"; + +export default function Redirect() { + useRedirect("/events/audit"); + return ; +} diff --git a/src/app/(dashboard)/access-control/page.tsx b/src/app/(dashboard)/access-control/page.tsx index 777e4bdf..39a5432f 100644 --- a/src/app/(dashboard)/access-control/page.tsx +++ b/src/app/(dashboard)/access-control/page.tsx @@ -11,6 +11,7 @@ import { ExternalLinkIcon } from "lucide-react"; import React, { lazy, Suspense } from "react"; import AccessControlIcon from "@/assets/icons/AccessControlIcon"; import GroupsProvider from "@/contexts/GroupsProvider"; +import { usePermissions } from "@/contexts/PermissionsProvider"; import PoliciesProvider from "@/contexts/PoliciesProvider"; import { Policy } from "@/interfaces/Policy"; import PageContainer from "@/layouts/PageContainer"; @@ -19,6 +20,8 @@ const AccessControlTable = lazy( () => import("@/modules/access-control/table/AccessControlTable"), ); export default function AccessControlPage() { + const { permission } = usePermissions(); + const { data: policies, isLoading } = useFetchApi("/policies"); const { ref: headingRef, portalTarget } = @@ -53,7 +56,10 @@ export default function AccessControlPage() { - + }> ("/dns/nameservers"); @@ -57,7 +60,10 @@ export default function NameServers() { - + }> ("/dns/settings"); @@ -61,7 +64,7 @@ export default function NameServerSettings() { in our documentation. - + {!isLoading && initialDNSGroups !== undefined ? ( ) : ( @@ -86,6 +89,7 @@ const SettingDisabledManagementGroups = ({ }) => { const settingRequest = useApiCall("/dns/settings"); const { mutate } = useSWRConfig(); + const { permission } = usePermissions(); const [selectedGroups, setSelectedGroups, { save: saveGroups }] = useGroupHelper({ @@ -124,6 +128,7 @@ const SettingDisabledManagementGroups = ({ dataCy={"dns-groups-selector"} onChange={setSelectedGroups} values={selectedGroups} + disabled={!permission.dns.update} />
Save Changes diff --git a/src/app/(dashboard)/events/audit/layout.tsx b/src/app/(dashboard)/events/audit/layout.tsx new file mode 100644 index 00000000..d991e240 --- /dev/null +++ b/src/app/(dashboard)/events/audit/layout.tsx @@ -0,0 +1,8 @@ +import { globalMetaTitle } from "@utils/meta"; +import type { Metadata } from "next"; +import BlankLayout from "@/layouts/BlankLayout"; + +export const metadata: Metadata = { + title: `Audit Events - Activity - ${globalMetaTitle}`, +}; +export default BlankLayout; diff --git a/src/app/(dashboard)/activity/page.tsx b/src/app/(dashboard)/events/audit/page.tsx similarity index 65% rename from src/app/(dashboard)/activity/page.tsx rename to src/app/(dashboard)/events/audit/page.tsx index a5af61b1..1e88c53f 100644 --- a/src/app/(dashboard)/activity/page.tsx +++ b/src/app/(dashboard)/events/audit/page.tsx @@ -6,15 +6,19 @@ import Paragraph from "@components/Paragraph"; import { RestrictedAccess } from "@components/ui/RestrictedAccess"; import { usePortalElement } from "@hooks/usePortalElement"; import useFetchApi from "@utils/api"; -import { ExternalLinkIcon } from "lucide-react"; +import { ExternalLinkIcon, LogsIcon } from "lucide-react"; import React from "react"; import ActivityIcon from "@/assets/icons/ActivityIcon"; +import { usePermissions } from "@/contexts/PermissionsProvider"; import { ActivityEvent } from "@/interfaces/ActivityEvent"; import PageContainer from "@/layouts/PageContainer"; import ActivityTable from "@/modules/activity/ActivityTable"; export default function Activity() { - const { data: events, isLoading } = useFetchApi("/events"); + const { permission } = usePermissions(); + + const { data: events, isLoading } = + useFetchApi("/events/audit"); const { ref: headingRef, portalTarget } = usePortalElement(); @@ -24,30 +28,31 @@ export default function Activity() {
} /> + } + /> -

Activity Events

- - Here you can see all the account and network activity events. - +

Audit Events

+ Here you can see all the audit activity events. Learn more about{" "} - Activity Events + Audit Events in our documentation.
- + ("/routes"); const groupedRoutes = useGroupedRoutes({ routes }); @@ -59,7 +61,7 @@ export default function NetworkRoutes() {
- + }> ) { - const { isUser } = useLoggedInUser(); + const { permission } = usePermissions(); + const [networkModal, setNetworkModal] = useState(false); const { mutate } = useSWRConfig(); @@ -64,7 +65,7 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) { } /> ) { size={"lg"} description={network.description} /> - + {permission.networks.update && ( + + )} ("/networks"); + const { permission } = usePermissions(); const { ref: headingRef, portalTarget } = usePortalElement(); @@ -31,8 +33,8 @@ export default function Networks() {

Networks

- Networks allow you to access internal resources in LANs and VPCs without - installing NetBird on every machine. + Networks allow you to access internal resources in LANs and VPCs + without installing NetBird on every machine. Learn more about @@ -47,7 +49,7 @@ export default function Networks() { - + }> ("/peers/" + peerId, true); + const { + data: peer, + isLoading, + error, + } = useFetchApi("/peers/" + peerId, true); - useRedirect("/peers", false, !peerId); + useRedirect("/peers", false, !peerId || isRestricted); const peerKey = useMemo(() => { let id = peer?.id ?? ""; @@ -77,6 +84,24 @@ export default function PeerPage() { return `${id}-${ssh}-${expiration}`; }, [peer]); + if (isRestricted) { + return ( + + + + ); + } + + if (error) + return ( + + ); + return peer && !isLoading ? ( @@ -87,6 +112,29 @@ export default function PeerPage() { } function PeerOverview() { + const { peer } = usePeer(); + + return ( + + +
+ + } + /> + + + +
+ + + + ); +} + +const PeerGeneralInformation = () => { const router = useRouter(); const { mutate } = useSWRConfig(); const { peer, user, peerGroups, openSSHDialog, update } = usePeer(); @@ -117,16 +165,21 @@ function PeerOverview() { ]); const updatePeer = async () => { - const updateRequest = update({ - name, - ssh, - loginExpiration, - inactivityExpiration, - }); + let batchCall: Promise[] = []; const groupCalls = getAllGroupCalls(); - const batchCall = groupCalls - ? [...groupCalls, updateRequest] - : [updateRequest]; + + if (permission.peers.update) { + const updateRequest = update({ + name, + ssh, + loginExpiration, + inactivityExpiration, + }); + batchCall = groupCalls ? [...groupCalls, updateRequest] : [updateRequest]; + } else { + batchCall = [...groupCalls]; + } + notify({ title: name, description: "Peer was successfully saved", @@ -145,199 +198,220 @@ function PeerOverview() { }); }; - const { isUser, isOwnerOrAdmin } = useLoggedInUser(); + const { permission } = usePermissions(); return ( - - -
- - } - /> - - - -
-
-
-

- - - - {!isUser && ( - +
+
+
+

+ + + + {permission.peers.update && ( + + +
- -
- -
- - { - setName(newName); - setShowEditNameModal(false); - }} - peer={peer} - initialName={name} - key={showEditNameModal ? 1 : 0} - /> - - )} -

- -
-
- - {user?.email} - -
-
-
- - -
+ +
+ + { + setName(newName); + setShowEditNameModal(false); + }} + peer={peer} + initialName={name} + key={showEditNameModal ? 1 : 0} + /> + + )} +

+
+
+ {user?.email} +
+
+
+ + +
+
-
- +
+ -
-
+
+
+ } + onChange={(state) => { + setLoginExpiration(state); + !state && setInactivityExpiration(false); + }} + /> + {permission.peers.update && !!peer?.user_id && ( +
} - onChange={(state) => { - setLoginExpiration(state); - !state && setInactivityExpiration(false); - }} + variant={"blank"} + value={inactivityExpiration} + onChange={setInactivityExpiration} + title={"Require login after disconnect"} + description={ + "Enable to require authentication after users disconnect from management for 10 minutes." + } + className={ + !loginExpiration ? "opacity-40 pointer-events-none" : "" + } /> - {isOwnerOrAdmin && !!peer?.user_id && ( -
- -
- )}
+ )} +
- - - - {`You don't have the required permissions to update this - setting.`} - -
- } - interactive={false} - className={"w-full block"} - disabled={!isUser} + - - !set - ? setSsh(false) - : openSSHDialog().then((confirm) => setSsh(confirm)) - } - label={ - <> - - SSH Access - - } - helpText={ - "Enable the SSH server on this peer to access the machine via an secure shell." - } - /> - - - {!isUser && ( -
- - - Use groups to control what this peer can access. - - -
- )} + + + {`You don't have the required permissions to update this + setting.`} + +
+ } + interactive={false} + className={"w-full block"} + disabled={!permission.peers.update} + > + + !set + ? setSsh(false) + : openSSHDialog().then((confirm) => setSsh(confirm)) + } + label={ + <> + + SSH Access + + } + helpText={ + "Enable the SSH server on this peer to access the machine via an secure shell." + } + /> + + + {permission.groups.read && ( +
+ + + Use groups to control what this peer can access. + +
-
+ )}
+
+ + ); +}; + +const PeerOverviewTabs = () => { + const { peer } = usePeer(); + const { permission } = usePermissions(); + + const [tab, setTab] = useState( + permission.routes.read ? "network-routes" : "accessible-peers", + ); + + return ( + setTab(v)} + value={tab} + className={"pt-10 pb-0 mb-0"} + > + + {permission.routes.read && ( + + + Network Routes + + )} - {!isUser ? ( - <> - - - - ) : null} - - {peer?.id && ( - <> - - - + {peer?.id && permission.peers.read && ( + + + Accessible Peers + )} - - + + + {permission.routes.read && ( + + + + )} + + {peer?.id && permission.peers.read && ( + + + + )} + ); -} +}; function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) { const { isLoading, getRegionByPeer } = useCountries(); @@ -347,7 +421,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) { }, [getRegionByPeer, peer]); return ( - + ) { value={peer.version} /> - - - UI Version - - } - value={peer.ui_version?.replace("netbird-desktop-ui/", "")} - /> + {peer.ui_version && ( + + + UI Version + + } + value={peer.ui_version?.replace("netbird-desktop-ui/", "")} + /> + )} ); @@ -499,6 +575,7 @@ interface ModalProps { peer: Peer; initialName: string; } + function EditNameModal({ onSuccess, peer, initialName }: Readonly) { const [name, setName] = useState(initialName); diff --git a/src/app/(dashboard)/peers/page.tsx b/src/app/(dashboard)/peers/page.tsx index 4170ccd5..becc3065 100644 --- a/src/app/(dashboard)/peers/page.tsx +++ b/src/app/(dashboard)/peers/page.tsx @@ -9,18 +9,19 @@ import { ExternalLinkIcon } from "lucide-react"; import React, { lazy, Suspense } from "react"; import PeerIcon from "@/assets/icons/PeerIcon"; import PeersProvider, { usePeers } from "@/contexts/PeersProvider"; -import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider"; +import { usePermissions } from "@/contexts/PermissionsProvider"; +import { useUsers } from "@/contexts/UsersProvider"; import PageContainer from "@/layouts/PageContainer"; import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal"; const PeersTable = lazy(() => import("@/modules/peers/PeersTable")); export default function Peers() { - const { permission } = useLoggedInUser(); + const { isRestricted } = usePermissions(); return ( - {permission.dashboard_view === "blocked" ? ( + {isRestricted ? ( ) : ( diff --git a/src/app/(dashboard)/posture-checks/page.tsx b/src/app/(dashboard)/posture-checks/page.tsx index 7edafb36..6a7dda53 100644 --- a/src/app/(dashboard)/posture-checks/page.tsx +++ b/src/app/(dashboard)/posture-checks/page.tsx @@ -11,6 +11,7 @@ import { ExternalLinkIcon, ShieldCheck } from "lucide-react"; import React, { lazy, Suspense } from "react"; import AccessControlIcon from "@/assets/icons/AccessControlIcon"; import GroupsProvider from "@/contexts/GroupsProvider"; +import { usePermissions } from "@/contexts/PermissionsProvider"; import PoliciesProvider from "@/contexts/PoliciesProvider"; import { PostureCheck } from "@/interfaces/PostureCheck"; import PageContainer from "@/layouts/PageContainer"; @@ -19,6 +20,7 @@ const PostureCheckTable = lazy( () => import("@/modules/posture-checks/table/PostureCheckTable"), ); export default function PostureChecksPage() { + const { permission } = usePermissions(); const { data: postureChecks, isLoading } = useFetchApi("/posture-checks"); @@ -59,7 +61,10 @@ export default function PostureChecksPage() {
- + }> { + if (permission.settings.read) return "authentication"; + return "authentication"; + }, [permission]); + + const [tab, setTab] = useState(queryTab ?? initialTab); + const account = useAccount(); useEffect(() => { @@ -37,28 +45,33 @@ export default function NetBirdSettings() { - - - Authentication - - - - Groups - - - - Permissions - - - - Networks - - - - Danger zone - + {permission.settings.read && ( + <> + + + Authentication + + + + Groups + + + + Permissions + + + + Networks + + + )} + + - +
{account && } {account && } @@ -71,3 +84,16 @@ export default function NetBirdSettings() { ); } + +const DangerZoneTabTrigger = () => { + const { isOwner } = useLoggedInUser(); + + return ( + isOwner && ( + + + Danger zone + + ) + ); +}; diff --git a/src/app/(dashboard)/setup-keys/page.tsx b/src/app/(dashboard)/setup-keys/page.tsx index 08147118..f7f7b0f3 100644 --- a/src/app/(dashboard)/setup-keys/page.tsx +++ b/src/app/(dashboard)/setup-keys/page.tsx @@ -11,6 +11,7 @@ import { ExternalLinkIcon } from "lucide-react"; import React, { lazy, Suspense, useMemo } from "react"; import SetupKeysIcon from "@/assets/icons/SetupKeysIcon"; import { useGroups } from "@/contexts/GroupsProvider"; +import { usePermissions } from "@/contexts/PermissionsProvider"; import { Group } from "@/interfaces/Group"; import { SetupKey } from "@/interfaces/SetupKey"; import PageContainer from "@/layouts/PageContainer"; @@ -21,6 +22,7 @@ const SetupKeysTable = lazy( export default function SetupKeys() { const { data: setupKeys, isLoading } = useFetchApi("/setup-keys"); + const { permission } = usePermissions(); const { groups } = useGroups(); const setupKeysWithGroups = useMemo(() => { @@ -71,7 +73,10 @@ export default function SetupKeys() { in our documentation.
- + }> ( "/users?service_user=true", ); @@ -59,7 +61,10 @@ export default function ServiceUsers() { in our documentation. - + }> ( `/users?service_user=${isServiceUser}`, @@ -50,6 +53,14 @@ export default function UserPage() { const userGroups = useGroupIdsToGroups(user?.auto_groups); + if (!permission.users.read) { + return ( + + + + ); + } + if (!isOwnerOrAdmin && user && !isLoading) { return ; } @@ -72,6 +83,7 @@ function UserOverview({ user, initialGroups }: Readonly) { const { mutate } = useSWRConfig(); const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser(); const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false; + const { permission } = usePermissions(); const [selectedGroups, setSelectedGroups, { save: saveGroups }] = useGroupHelper({ @@ -116,7 +128,7 @@ function UserOverview({ user, initialGroups }: Readonly) { } /> @@ -130,7 +142,7 @@ function UserOverview({ user, initialGroups }: Readonly) { } /> )} @@ -187,7 +199,7 @@ function UserOverview({ user, initialGroups }: Readonly) { - +
@@ -139,23 +173,10 @@ export function DatePickerWithRange({ className, value, onChange }: Props) { mode="range" defaultMonth={value?.from} selected={value} - onSelect={(range) => { - let from = - range && range.from - ? dayjs(range.from).startOf("day").toDate() - : undefined; - let to = - range && range.to - ? dayjs(range.to).endOf("day").toDate() - : undefined; - if (!from && !to) { - onChange?.(undefined); - return; - } - onChange?.({ from, to }); - }} + onSelect={handleOnSelect} numberOfMonths={2} /> +
@@ -168,7 +189,11 @@ type CalendarButtonProps = { active?: boolean; }; -function CalendarButton({ label, onClick, active }: CalendarButtonProps) { +function CalendarButton({ + label, + onClick, + active, +}: Readonly) { return ( ); } diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 67042aa0..f4bd9391 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -76,7 +76,7 @@ const Input = React.forwardRef( }), "flex h-[42px] w-auto rounded-l-md bg-white px-3 py-2 text-sm ", "border items-center whitespace-nowrap", - props.disabled && "opacity-20", + props.disabled && "opacity-40", prefixClassName, )} > @@ -87,7 +87,7 @@ const Input = React.forwardRef(
{icon} @@ -99,7 +99,7 @@ const Input = React.forwardRef( {...props} className={cn( inputVariants({ variant: error ? "error" : variant }), - "flex h-[42px] w-full rounded-md bg-white px-3 py-2 text-sm file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-20 ", + "flex h-[42px] w-full rounded-md bg-white px-3 py-2 text-sm file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 ", "file:border-0", "focus-visible:ring-2 focus-visible:ring-offset-2", customPrefix && "!border-l-0 !rounded-l-none", diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index a062cac6..99d4edaf 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -12,12 +12,15 @@ export interface NotifyProps { title: string; description: string; promise?: Promise; + loadingTitle?: string; loadingMessage?: string; duration?: number; icon?: React.ReactNode; backgroundColor?: string; preventSuccessToast?: boolean; + errorMessages?: ErrorResponse[]; } + interface NotificationProps extends NotifyProps { t: Toast; } @@ -28,9 +31,11 @@ export default function Notification({ backgroundColor, t, promise, + loadingTitle, loadingMessage, duration = 3500, preventSuccessToast = false, + errorMessages, }: NotificationProps) { const [error, setError] = useState(""); const [loading, setLoading] = useState(!!promise); @@ -51,15 +56,27 @@ export default function Notification({ if (promise) { promise .then(() => { - if (preventSuccessToast) setPreventSuccess(true); setLoading(false); closeToast(); + if (preventSuccessToast) setPreventSuccess(true); }) .catch((e) => { const err = e as ErrorResponse; - const message = err.message || "Something went wrong..."; + let message = err.message || "Something went wrong..."; + message = message.charAt(0).toUpperCase() + message.slice(1); const code: number = err.code || 418; - setError(`Code ${code}: ${message}`); + + if (errorMessages) { + const errorMessage = errorMessages.find( + (error) => error.code === code, + ); + if (errorMessage) { + setError(errorMessage.message); + } + } else { + setError(`Code ${code}: ${message}`); + } + setLoading(false); closeToast(); }); @@ -101,7 +118,9 @@ export default function Notification({

- {title} + + {loading ? loadingTitle || title : title} +

void; placeholder?: string; + customTrigger?: React.ReactNode; + align?: "start" | "end"; + side?: "top" | "bottom"; + users?: User[]; } export function PeerGroupSelector({ onChange, @@ -81,11 +87,17 @@ export function PeerGroupSelector({ resource, onResourceChange, placeholder = "Add or select group(s)...", + customTrigger, + align = "start", + side = "bottom", + users, }: Readonly) { const { groups, dropdownOptions, setDropdownOptions, addDropdownOptions } = useGroups(); const searchRef = React.useRef(null); - const [inputRef, { width }] = useElementSize(); + const [inputRef, { width }] = useElementSize< + HTMLButtonElement | HTMLSpanElement + >(); const [search, setSearch] = useState(""); const { data: resources, isLoading } = useFetchApi( "/networks/resources", @@ -251,97 +263,105 @@ export function PeerGroupSelector({ }} > -

-
- -
- +
+ +
+ + )} )} -
- {peerIcon} - {peerCount} Peer(s) +
+ {!users ? ( +
+ {peerIcon} + {peerCount} Peer(s) +
+ ) : ( + + )} +
@@ -555,6 +586,34 @@ const TabTriggers = ({ ); }; +const UsersCounter = ({ + group, + users, + selected, +}: { + group: Group; + users: User[]; + selected: boolean; +}) => { + const usersOfGroup = + users?.filter((user) => user.auto_groups.includes(group.id as string)) || + []; + + if (usersOfGroup.length === 0) return null; + + return ( + + ); +}; + const ResourcesCounter = ({ group }: { group: Group }) => { return group?.resources_count && group.resources_count > 0 ? (
; + +export const popoverVariants = cva([], { + variants: { + variant: { + lighter: [ + "rounded-md border border-neutral-200 bg-white px-5 py-3 text-sm text-neutral-950 shadow-md", + "dark:border-nb-gray-800 dark:bg-nb-gray-920 dark:text-neutral-50", + ], + dark: [ + "rounded-md border border-neutral-200 bg-white px-5 py-3 text-sm text-neutral-950 shadow-md", + "dark:border-nb-gray-900 dark:bg-nb-gray-940 dark:text-gray-50", + ], + }, + }, +}); + const Popover = PopoverPrimitive.Root; const PopoverTrigger = PopoverPrimitive.Trigger; const PopoverContent = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( - - - -)); + React.ComponentPropsWithoutRef & + PopoverVariants +>( + ( + { + className, + align = "center", + sideOffset = 4, + variant = "lighter", + ...props + }, + ref, + ) => ( + + + + ), +); PopoverContent.displayName = PopoverPrimitive.Content.displayName; export { Popover, PopoverContent, PopoverTrigger }; diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx index 067d40c2..0b16d9e4 100644 --- a/src/components/SidebarItem.tsx +++ b/src/components/SidebarItem.tsx @@ -1,8 +1,9 @@ "use client"; import * as Collapsible from "@radix-ui/react-collapsible"; +import { cn } from "@utils/helpers"; import classNames from "classnames"; -import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; +import { ChevronDownIcon, ChevronUpIcon, DotIcon } from "lucide-react"; import { usePathname, useRouter } from "next/navigation"; import React, { useMemo } from "react"; import { useApplicationContext } from "@/contexts/ApplicationProvider"; @@ -18,7 +19,10 @@ export type SidebarItemProps = { href?: string; exactPathMatch?: boolean; target?: string; + labelClassName?: string; + visible: boolean; }; + export default function SidebarItem({ icon, children, @@ -29,11 +33,14 @@ export default function SidebarItem({ href = "", exactPathMatch = false, target = "_self", -}: SidebarItemProps) { + labelClassName, + visible, +}: Readonly) { const [open, setOpen] = React.useState(false); const path = usePathname(); const router = useRouter(); - const { mobileNavOpen, toggleMobileNav } = useApplicationContext(); + const { mobileNavOpen, toggleMobileNav, isNavigationCollapsed } = + useApplicationContext(); const handleClick = () => { const preventRedirect = href @@ -54,14 +61,15 @@ export default function SidebarItem({ return href ? (exactPathMatch ? path == href : path.includes(href)) : false; }, [path, href, exactPathMatch, collapsible]); + if (!visible) return; + return ( -
  • +
  • diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx new file mode 100644 index 00000000..7c762117 --- /dev/null +++ b/src/components/UserSelector.tsx @@ -0,0 +1,219 @@ +import { DropdownInfoText } from "@components/DropdownInfoText"; +import { DropdownInput } from "@components/DropdownInput"; +import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover"; +import TextWithTooltip from "@components/ui/TextWithTooltip"; +import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList"; +import { useSearch } from "@hooks/useSearch"; +import { cn } from "@utils/helpers"; +import { ChevronsUpDown, MapPin } from "lucide-react"; +import * as React from "react"; +import { memo, useState } from "react"; +import { useElementSize } from "@/hooks/useElementSize"; +import { User } from "@/interfaces/User"; +import { SmallUserAvatar } from "@/modules/users/SmallUserAvatar"; + +const MapPinIcon = memo(() => ); +MapPinIcon.displayName = "MapPinIcon"; + +interface MultiSelectProps { + value?: User; + onChange: React.Dispatch>; + excludedPeers?: string[]; + disabled?: boolean; + options?: User[]; + placeholder?: string; +} + +const searchPredicate = (u: User, query: string) => { + const lowerCaseQuery = query.toLowerCase(); + try { + if (u.name.toLowerCase().includes(lowerCaseQuery)) return true; + return !!u?.email?.toLowerCase().includes(lowerCaseQuery); + } catch (e) { + return false; + } +}; + +export function UserSelector({ + onChange, + value, + disabled = false, + options = [], + placeholder = "Select a user...", +}: MultiSelectProps) { + const [inputRef, { width }] = useElementSize(); + + const [filteredItems, search, setSearch] = useSearch( + options, + searchPredicate, + { filter: true, debounce: 150 }, + ); + + const toggleUser = (user: User) => { + const isSelected = value && value.id == user.id; + if (isSelected) { + onChange(undefined); + } else { + onChange(user); + setSearch(""); + } + setOpen(false); + }; + + const [open, setOpen] = useState(false); + + return ( + { + if (!isOpen) { + setTimeout(() => { + setSearch(""); + }, 100); + } + setOpen(isOpen); + }} + > + + + + +
    + + + {options.length == 0 && !search && ( +
    + + { + "There are no users to select. Invite some users for this tenant before unlinking." + } + +
    + )} + + {filteredItems.length == 0 && search != "" && ( + + There are no users matching your search. + + )} + + {filteredItems.length > 0 && ( + { + return ( +
    + +
    + ); + }} + /> + )} +
    +     +     + ); +} + +type UserListItemProps = { + user: User; + className?: string; + variant?: "default" | "selected"; +}; + +export const UserListItem = ({ + user, + className, + variant, +}: UserListItemProps) => { + const isSystemUser = user?.email === "NetBird" || user?.email === ""; + const maxChars = variant === "selected" ? 30 : 20; + + return ( +
    + +
    + + + + + + + +
    +
    + ); +}; diff --git a/src/components/VirtualScrollAreaList.tsx b/src/components/VirtualScrollAreaList.tsx index c46fa80b..64fc7226 100644 --- a/src/components/VirtualScrollAreaList.tsx +++ b/src/components/VirtualScrollAreaList.tsx @@ -10,15 +10,25 @@ import { Virtuoso, VirtuosoHandle } from "react-virtuoso"; type Props = { items: T[]; onSelect: (item: T) => void; - renderItem?: (item: T) => React.ReactNode; + renderItem?: (item: T, selected?: boolean) => React.ReactNode; + renderBeforeItem?: (item: T) => React.ReactNode; itemClassName?: string; + itemWrapperClassName?: string; + scrollAreaClassName?: string; + maxHeight?: number; + estimatedItemHeight?: number; }; export function VirtualScrollAreaList({ items, onSelect, renderItem, + renderBeforeItem, itemClassName, + itemWrapperClassName, + scrollAreaClassName, + maxHeight, + estimatedItemHeight = 36, }: Readonly>) { const virtuosoRef = useRef(null); const [selected, setSelected] = useState(0); @@ -67,31 +77,47 @@ export function VirtualScrollAreaList({ const renderMemoizedItem = useMemo(() => renderItem, [renderItem]); + const scrollAreaHeight = { maxHeight: maxHeight ?? 195 }; + + const virtuosoHeight = { + height: Math.min(items.length * estimatedItemHeight + 8, maxHeight ?? 195), + }; + return ( items[index].id as string} context={{ selected, setSelected, onClick: onSelect }} itemContent={(index, option, { selected, setSelected, onClick }) => { return ( - setSelected(index)} - id={option.id} - onClick={() => onClick(option)} - ariaSelected={selected === index} - className={itemClassName} - > - {renderMemoizedItem ? renderMemoizedItem(option) : option.id} - +
    + {renderBeforeItem?.(option)} + setSelected(index)} + id={option.id} + onClick={() => onClick(option)} + ariaSelected={selected === index} + itemClassName={itemClassName} + className={itemWrapperClassName} + isLast={index === items.length - 1} + > + {renderMemoizedItem + ? renderMemoizedItem(option, selected === index) + : option.id} + +
    ); }} - style={{ height: 195 }} + style={virtuosoHeight} components={{ Scroller: MemoizedScrollAreaViewport, }} @@ -107,6 +133,8 @@ type ItemWrapperProps = { onClick?: () => void; ariaSelected?: boolean; className?: string; + itemClassName?: string; + isLast?: boolean; }; export const VirtualScrollListItemWrapper = memo( @@ -117,11 +145,17 @@ export const VirtualScrollListItemWrapper = memo( onMouseEnter, ariaSelected, className, + itemClassName, + isLast, }: ItemWrapperProps) => { return (
    @@ -129,7 +163,7 @@ export const VirtualScrollListItemWrapper = memo( className={cn( "text-xs flex justify-between py-2 px-3 cursor-pointer items-center rounded-md", "bg-transparent dark:aria-selected:bg-nb-gray-800/50", - className, + itemClassName, )} aria-selected={ariaSelected} role={"listitem"} diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx index 8f2abbba..f28e68f4 100644 --- a/src/components/modal/Modal.tsx +++ b/src/components/modal/Modal.tsx @@ -5,6 +5,7 @@ import { DialogTriggerProps } from "@radix-ui/react-dialog"; import { cn } from "@utils/helpers"; import { X } from "lucide-react"; import * as React from "react"; +import { headerHeight } from "@/layouts/Header"; const Modal = DialogPrimitive.Root; @@ -33,7 +34,7 @@ const ModalOverlay = React.forwardRef< className={cn( "fixed top-0 left-0 bottom-0 right-0 grid z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ", "mx-auto place-items-start overflow-y-auto md:py-16", - "bg-black/30 dark:bg-black/50 backdrop-blur-sm", + "bg-black/30 dark:bg-black/40 backdrop-blur-sm", className, )} {...props} @@ -66,7 +67,7 @@ const ModalContent = React.forwardRef< , + React.ComponentPropsWithoutRef & + ModalContentProps +>( + ( + { + className, + children, + showClose = true, + maxWidthClass = "max-w-3xl", + ...props + }, + ref, + ) => { + return ( + +
    + e.stopPropagation()} + > + <> + {children} + {showClose && ( + + + Close + + )} + + +
    +     + ); + }, +); +SidebarModalContent.displayName = DialogPrimitive.Content.displayName; + type ModalFooterProps = { variant?: "setup" | "default"; separator?: boolean; @@ -158,4 +215,5 @@ export { ModalPortal, ModalTitle, ModalTrigger, + SidebarModalContent, }; diff --git a/src/components/modal/ModalHeader.tsx b/src/components/modal/ModalHeader.tsx index 4c9b716e..35ef4fc2 100644 --- a/src/components/modal/ModalHeader.tsx +++ b/src/components/modal/ModalHeader.tsx @@ -25,7 +25,7 @@ export default function ModalHeader({ center, }: Props) { return ( -
    +
    {icon && }
    diff --git a/src/components/table/DataTable.tsx b/src/components/table/DataTable.tsx index 56935b3d..e281c528 100644 --- a/src/components/table/DataTable.tsx +++ b/src/components/table/DataTable.tsx @@ -101,7 +101,7 @@ const arrIncludesSomeExact: FilterFn = ( value: string[], ) => { const rowValue = row.getValue(columnId); - if (!rowValue) return false; + if (!rowValue && rowValue !== 0) return false; return value.some((val) => val === rowValue); }; @@ -302,8 +302,11 @@ export function DataTableContent({ setGlobalSearch(""); setRowSelection?.({}); onFilterReset?.(); + setSearchKey((prev) => (prev === 0 ? 1 : 0)); }; + const [searchKey, setSearchKey] = useState(0); + return (
    {showSearchAndFilters && ( @@ -316,6 +319,7 @@ export function DataTableContent({ { table.setPageIndex(0); diff --git a/src/components/table/DataTableFilter.tsx b/src/components/table/DataTableFilter.tsx new file mode 100644 index 00000000..856f4353 --- /dev/null +++ b/src/components/table/DataTableFilter.tsx @@ -0,0 +1,276 @@ +import Button from "@components/Button"; +import { Checkbox } from "@components/Checkbox"; +import { DropdownInfoText } from "@components/DropdownInfoText"; +import { DropdownInput } from "@components/DropdownInput"; +import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover"; +import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList"; +import { useSearch } from "@hooks/useSearch"; +import { Table } from "@tanstack/react-table"; +import { concat, sortBy, uniqBy } from "lodash"; +import { FilterIcon } from "lucide-react"; +import * as React from "react"; +import { useCallback, useMemo, useState } from "react"; + +interface Props { + table: Table; + filters: Filter[]; + disabled?: boolean; +} + +/** + * Filter + * @param columnId - Column ID to filter + * @param group - Group name for the filter + * @param item - Function to render the filter item + */ +interface Filter { + columnId: keyof TData | string; + group?: string; + item: (item: TData, value: string) => string | React.ReactNode; + exclude?: string[]; +} + +interface FilterItem { + id: string; + value: string; + showGroupHeading: boolean; + columnId: keyof TData | string; + group?: string; + original: TData; + renderItem: () => React.ReactNode; +} + +type SearchPredicate = ( + item: FilterItem, + query: string, +) => boolean; + +const searchPredicate: SearchPredicate = (item, query) => { + const lowerCaseQuery = query.toLowerCase(); + let itemValue = String(item?.value || "").toLowerCase(); + return itemValue.includes(lowerCaseQuery); +}; + +/** + * @desc Generic filter button. Filters are based on the table data and are displayed in a popover with search functionality. + * @param table - Table instance from tanstack/react-table + * @param filters - Array of filters to display + * @param filters.columnId Id of the column to filter. This column must have a filterFn: "arrIncludesSomeExact" in the column definition of the table. + * @param filters.group - Group name for the filter + * @param filters.item - Function to render the filter item + * @param disabled - Disable the filter button + * @returns React.ReactNode + * @example + * item.name, + * }]} + * /> + */ +export function DataTableFilter({ + table, + filters, + disabled = false, +}: Readonly>) { + const searchRef = React.useRef(null); + const [open, setOpen] = useState(false); + + const options = useMemo( + () => + filters.flatMap((filter) => { + const getTableColumnValues = (columnId: string) => { + return [ + ...new Set( + table + .getPreFilteredRowModel() + .rows.map((row) => { + return { + value: row?.getValue(columnId), + original: row.original, + }; + }) + .filter((value) => value !== undefined), + ), + ]; + }; + + // Get unique values from table rows + let tableRows = uniqBy( + getTableColumnValues(filter.columnId as string), + "value", + ); + + // Filter out excluded values + if (filter.exclude) { + tableRows = tableRows.filter( + (row) => !filter.exclude?.includes(row.value as string), + ); + } + + // Sort values + tableRows = sortBy(tableRows, (row) => { + return isNaN(Number(row?.value)) ? row?.value : Number(row?.value); + }); + + const groupCounts: Record = {}; + return tableRows.map((row) => { + const groupKey = filter?.group ?? "Ungrouped"; + groupCounts[groupKey] = (groupCounts[groupKey] || 0) + 1; + + return { + id: `${String(filter.columnId)}-${row.value}`, + value: row.value, + showGroupHeading: groupCounts[groupKey] === 1, + columnId: filter.columnId, + group: filter?.group, + original: row.original, + renderItem: () => filter?.item(row.original, String(row.value)), + } as FilterItem; + }); + }), + [], + ); + + const [filteredItems, search, setSearch] = useSearch>( + options, + searchPredicate, + { + filter: true, + debounce: 150, + }, + ); + + const onOpenChange = (isOpen: boolean) => { + if (!isOpen) { + setTimeout(() => { + setSearch(""); + }, 100); + } + setOpen(isOpen); + }; + + const getCurrentTableFilters = useCallback((columnId: string) => { + return table.getColumn(columnId)?.getFilterValue() as string[] | undefined; + }, []); + + const onSelect = (item: FilterItem) => { + table.setPageIndex(0); + + const currentFilters = getCurrentTableFilters(item.columnId as string); + const column = table.getColumn(item.columnId as string); + + const newFilters = currentFilters?.includes(item.value) + ? currentFilters.filter((f) => f !== item.value) + : concat(currentFilters ?? [], item.value); + + if (newFilters.length == 0) { + column?.setFilterValue(undefined); + } else { + column?.setFilterValue(newFilters); + } + + searchRef.current?.focus(); + }; + + const activeFiltersCount = useMemo(() => { + let columnIds = filters.map((filter) => filter.columnId as string); + let activeFilters = columnIds.map((columnId) => { + return getCurrentTableFilters(columnId); + }); + return activeFilters.flat().filter((filter) => filter !== undefined).length; + }, [filters, getCurrentTableFilters]); + + return ( + + + + + +
    + + + {filteredItems.length == 0 && search != "" && ( + + There are no filters matching your search. + + )} + + { + const currentTableFilters = getCurrentTableFilters( + option.columnId as string, + ); + const isActive = currentTableFilters?.includes(option.value); + + return ( +
    +
    +
    {option?.renderItem()}
    +
    + +
    + ); + }} + onSelect={onSelect} + /> +
    +     +     + ); +} + +const ListItemHeading = ({ + children, + show = false, +}: { + children: React.ReactNode; + show: boolean; +}) => { + if (!show) return null; + return ( +

    + {children} +

    + ); +}; diff --git a/src/components/table/DataTableGlobalSearch.tsx b/src/components/table/DataTableGlobalSearch.tsx index 89d1b340..b998fd45 100644 --- a/src/components/table/DataTableGlobalSearch.tsx +++ b/src/components/table/DataTableGlobalSearch.tsx @@ -1,7 +1,8 @@ import { Input } from "@components/Input"; import Kbd from "@components/Kbd"; +import { useDebounce } from "@hooks/useDebounce"; import { Search } from "lucide-react"; -import React from "react"; +import React, { useEffect, useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; interface Props extends React.InputHTMLAttributes { @@ -17,9 +18,16 @@ export default function DataTableGlobalSearch({ ...props }: Props) { const ref = React.useRef(null); + const [inputValue, setInputValue] = useState(globalSearch || ""); + const debouncedValue = useDebounce(inputValue, 300); + + // Call setGlobalSearch when debounced value changes + useEffect(() => { + setGlobalSearch(debouncedValue); + }, [debouncedValue]); const handleChange = (e: React.ChangeEvent) => { - setGlobalSearch(e.target.value); + setInputValue(e.target.value); }; useHotkeys("mod+k", () => ref.current?.focus(), []); @@ -29,7 +37,7 @@ export default function DataTableGlobalSearch({ {...props} ref={ref} icon={} - value={globalSearch} + value={inputValue} // Shows immediate updates onChange={handleChange} maxWidthClass={className} customSuffix={⌘ K} diff --git a/src/components/table/DataTablePagination.tsx b/src/components/table/DataTablePagination.tsx index 03d57753..58e54c9c 100644 --- a/src/components/table/DataTablePagination.tsx +++ b/src/components/table/DataTablePagination.tsx @@ -7,6 +7,7 @@ import { ChevronsLeft, ChevronsRight, } from "lucide-react"; +import { useEffect } from "react"; interface DataTablePaginationProps { table: Table; @@ -27,6 +28,13 @@ export function DataTablePagination({ const showingTo = isLastPage ? allRows : showingFrom + rowsPerPage - 1; const pageCount = table.getPageCount(); + // Reset page index if it's greater than the page count + useEffect(() => { + if (currentPage > pageCount) { + table.setPageIndex(0); + } + }, []); + return pageCount > 1 ? (
    @@ -53,7 +61,7 @@ export function DataTablePagination({
    - {table.getState().pagination.pageIndex + 1} of {pageCount} + {currentPage} of {pageCount}
    void; +}; +export const AbsoluteDateTimeInput = ({ value, onChange }: Props) => { + return ( +
    +
    +
    +
    + - +
    +
    +
    +
    + ); +}; + +const Time = ({ + value, + onChange, +}: { + value?: Date; + onChange?: (date?: Date) => void; +}) => { + const { getRootProps, getInputProps, options, update } = useTimescape({ + date: value, + minDate: undefined, + maxDate: undefined, + hour12: true, + digits: "2-digit", + wrapAround: false, + snapToStep: false, + wheelControl: true, + disallowPartial: false, + onChangeDate: onChange, + }); + + useEffect(() => { + if (options.date?.getTime() !== value?.getTime()) { + update({ ...options, date: value }); + } + }, [value]); + + return ( +
    +
    + + / + + / + +
    + ⋆ +
    + + : + + : + + +
    +
    + ); +}; diff --git a/src/components/ui/AddPeerButton.tsx b/src/components/ui/AddPeerButton.tsx index 0d7b3e6f..3e7a2d06 100644 --- a/src/components/ui/AddPeerButton.tsx +++ b/src/components/ui/AddPeerButton.tsx @@ -3,37 +3,57 @@ import Button from "@components/Button"; import { Modal, ModalTrigger } from "@components/modal/Modal"; import useFetchApi from "@utils/api"; import { PlusCircle } from "lucide-react"; -import { memo, useState } from "react"; +import React, { memo, useState } from "react"; +import { usePermissions } from "@/contexts/PermissionsProvider"; import { useLocalStorage } from "@/hooks/useLocalStorage"; import { Peer } from "@/interfaces/Peer"; import SetupModal from "@/modules/setup-netbird-modal/SetupModal"; function AddPeerButton() { + const { permission } = usePermissions(); const { data: peers } = useFetchApi("/peers"); const { oidcUser: user } = useOidcUser(); + const [hasOnboardingFormCompleted] = useLocalStorage( + "netbird-onboarding-modal", + false, + ); + const [isFirstRun, setIsFirstRun] = useLocalStorage( "netbird-first-run", !(peers && peers.length > 0), ); - const [setupModal, setSetupModal] = useState(isFirstRun); + const [installModal, setInstallModal] = useState( + !hasOnboardingFormCompleted + ? process.env.APP_ENV !== "test" + ? false + : isFirstRun + : isFirstRun, + ); const handleOpenChange = (open: boolean) => { - setSetupModal(open); + setInstallModal(open); setIsFirstRun(false); }; return ( - - - - - - + <> + + + + + + + ); } diff --git a/src/components/ui/GetStartedTest.tsx b/src/components/ui/GetStartedTest.tsx index 048aa894..e9c52ddc 100644 --- a/src/components/ui/GetStartedTest.tsx +++ b/src/components/ui/GetStartedTest.tsx @@ -1,5 +1,6 @@ import Card from "@components/Card"; import Paragraph from "@components/Paragraph"; +import { cn } from "@utils/helpers"; import React from "react"; import Skeleton from "react-loading-skeleton"; @@ -51,7 +52,9 @@ export default function GetStartedTest({ > {title} - + {description}
    diff --git a/src/components/ui/GroupBadge.tsx b/src/components/ui/GroupBadge.tsx index 6b033f8b..a9b6bc86 100644 --- a/src/components/ui/GroupBadge.tsx +++ b/src/components/ui/GroupBadge.tsx @@ -14,6 +14,9 @@ type Props = { children?: React.ReactNode; className?: string; showNewBadge?: boolean; + maxChars?: number; + maxWidth?: string; + hideTooltip?: boolean; }; export default function GroupBadge({ @@ -23,12 +26,15 @@ export default function GroupBadge({ children, className, showNewBadge = false, + maxChars = 20, + maxWidth, + hideTooltip = false, }: Readonly) { const isNew = !group?.id; return ( - + {children} {isNew && showNewBadge && } {showX && ( diff --git a/src/components/ui/InputDomain.tsx b/src/components/ui/InputDomain.tsx index 36549def..b17d9cea 100644 --- a/src/components/ui/InputDomain.tsx +++ b/src/components/ui/InputDomain.tsx @@ -13,6 +13,7 @@ type Props = { onRemove: () => void; onError?: (error: boolean) => void; error?: string; + disabled?: boolean; }; enum ActionType { ADD = "ADD", @@ -38,6 +39,7 @@ export default function InputDomain({ onChange, onRemove, onError, + disabled, }: Readonly) { const [name, setName] = useState(value?.name || ""); @@ -74,6 +76,7 @@ export default function InputDomain({ value={name} error={domainError} onChange={handleNameChange} + disabled={disabled} />
    @@ -81,6 +84,7 @@ export default function InputDomain({ className={"h-[42px]"} variant={"default-outline"} onClick={onRemove} + disabled={disabled} > diff --git a/src/components/ui/MultipleGroups.tsx b/src/components/ui/MultipleGroups.tsx index 8b347872..97dfe462 100644 --- a/src/components/ui/MultipleGroups.tsx +++ b/src/components/ui/MultipleGroups.tsx @@ -8,6 +8,7 @@ import { } from "@components/Tooltip"; import GroupBadge from "@components/ui/GroupBadge"; import PeerBadge from "@components/ui/PeerBadge"; +import { cn } from "@utils/helpers"; import { orderBy } from "lodash"; import { ArrowRightIcon } from "lucide-react"; import * as React from "react"; @@ -18,25 +19,34 @@ type Props = { groups: Group[]; label?: string; description?: string; + onClick?: () => void; + className?: string; }; export default function MultipleGroups({ groups, label = "Assigned Groups", description = "Use groups to control what this peer can access", -}: Props) { + onClick, + className, +}: Readonly) { if (!groups) return ; const orderedGroups = orderBy(groups, ["peers_count", "name"], ["desc"]); const firstGroup = orderedGroups.length > 0 ? orderedGroups[0] : undefined; const otherGroups = orderedGroups.length > 0 ? orderedGroups.slice(1) : []; return ( - - + +
    {firstGroup && } {otherGroups && otherGroups.length > 0 && ( @@ -51,7 +61,10 @@ export default function MultipleGroups({
    {orderedGroups && orderedGroups.length > 0 && ( - + e.stopPropagation()} + >
    {label}
    diff --git a/src/components/ui/PageNotFound.tsx b/src/components/ui/PageNotFound.tsx new file mode 100644 index 00000000..b641cbab --- /dev/null +++ b/src/components/ui/PageNotFound.tsx @@ -0,0 +1,93 @@ +import Button from "@components/Button"; +import Card from "@components/Card"; +import Paragraph from "@components/Paragraph"; +import SquareIcon from "@components/SquareIcon"; +import { CircleAlertIcon, Undo2Icon } from "lucide-react"; +import { useRouter } from "next/navigation"; +import * as React from "react"; +import Skeleton from "react-loading-skeleton"; +import PageContainer from "@/layouts/PageContainer"; + +type Props = { + title?: string; + description?: string; +}; +export const PageNotFound = ({ + title = "The requested page was not found", + description = "The page you are attempting to access cannot be found. Please verify the URL or return to the dashboard to continue browsing.", +}: Props) => { + const router = useRouter(); + + return ( + +
    +
    + +
    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + {" "} + } + color={"netbird"} + size={"large"} + /> +
    +
    +

    + {title} +

    + + {description} + + +
    +
    +
    +
    +
    +
    +     +
    +
    +     + ); +}; diff --git a/src/components/ui/RestrictedAccess.tsx b/src/components/ui/RestrictedAccess.tsx index bb785cbd..50cec24d 100644 --- a/src/components/ui/RestrictedAccess.tsx +++ b/src/components/ui/RestrictedAccess.tsx @@ -4,28 +4,21 @@ import SquareIcon from "@components/SquareIcon"; import { LockIcon } from "lucide-react"; import * as React from "react"; import Skeleton from "react-loading-skeleton"; -import { useLoggedInUser } from "@/contexts/UsersProvider"; -import { Role } from "@/interfaces/User"; type Props = { - children: React.ReactNode; - allow?: Role[]; + children?: React.ReactNode; + hasAccess?: boolean; page?: string; }; + export const RestrictedAccess = ({ children, - allow = [Role.Admin, Role.Owner], + hasAccess = false, page = "this page", }: Props) => { - const { loggedInUser } = useLoggedInUser(); - - const isAllowed = loggedInUser - ? allow.includes(loggedInUser?.role as Role) - : false; + if (hasAccess) return children; - return isAllowed ? ( - <>{children} - ) : ( + return (
    -
    +
    {" "} @@ -66,13 +59,13 @@ export const RestrictedAccess = ({

    {"You don't have access to"}
    {page}

    { - "Seems like you don't have access to this page. Only users with admin access can visit this page. Please contact your network administrator for further information." + "Seems like you don't have access to this page. Only users with proper permissions can visit this page. Please contact your network administrator for further information." }
    diff --git a/src/components/ui/SmallBadge.tsx b/src/components/ui/SmallBadge.tsx index cbf22c08..a4948f8e 100644 --- a/src/components/ui/SmallBadge.tsx +++ b/src/components/ui/SmallBadge.tsx @@ -6,8 +6,10 @@ const smallBadgeVariants = cva("", { variants: { variant: { green: "bg-green-900 border border-green-500/20 text-green-400", + blue: "bg-blue-900 border border-blue-500/20 text-blue-400", white: "bg-white/20 border border-white/10 text-white", sky: "bg-sky-900 border border-sky-500/20 text-white", + netbird: "bg-netbird-900 border border-netbird-400 text-netbird-300", }, }, }); @@ -15,12 +17,14 @@ const smallBadgeVariants = cva("", { type Props = { text?: string; className?: string; + textClassName?: string; children?: React.ReactNode; } & VariantProps; export const SmallBadge = ({ text = "NEW", className, + textClassName, variant = "green", children, }: Props) => { @@ -33,7 +37,7 @@ export const SmallBadge = ({ )} > {children} - {text} + {text} ); }; diff --git a/src/components/ui/TextWithTooltip.tsx b/src/components/ui/TextWithTooltip.tsx index 5b50d632..d37443fc 100644 --- a/src/components/ui/TextWithTooltip.tsx +++ b/src/components/ui/TextWithTooltip.tsx @@ -34,7 +34,7 @@ export default function TextWithTooltip({ } >
    ) { + const [isOverflowing, setIsOverflowing] = useState(false); + const [open, setOpen] = useState(false); + const contentRef = React.useRef(null); + const charCount = useMemo(() => { if (!text) return 0; return text.length; }, [text]); - const isDisabled = charCount <= maxChars || hideTooltip; + // Check for overflow on mount and when text/maxWidth changes + React.useEffect(() => { + const element = contentRef.current; + if (element) { + setIsOverflowing(element.scrollWidth > element.clientWidth); + } + }, [text, maxWidth]); - const [open, setOpen] = useState(false); + // If maxWidth is provided, use overflow detection + // Otherwise, fall back to character count logic + const isDisabled = maxWidth + ? !isOverflowing || hideTooltip + : charCount <= maxChars || hideTooltip; + + const containerStyle = maxWidth + ? { maxWidth } + : { maxWidth: `${maxChars - 2}ch` }; if (isDisabled) { return ( -
    -
    {text}
    +
    +
    + {text} +
    ); } @@ -45,13 +62,10 @@ export default function TruncatedText({ onOpenChange={setOpen} > -
    -
    {text}
    +
    +
    + {text} +
    @@ -61,13 +75,13 @@ export default function TruncatedText({ alignOffset={20} sideOffset={4} className={cn( - "z-[9999] overflow-hidden rounded-md border border-neutral-200 bg-white text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-nb-gray-930 dark:bg-nb-gray-940 dark:text-neutral-50", + "z-[9999] overflow-hidden rounded-md border border-neutral-200 bg-white text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-nb-gray-930 dark:bg-nb-gray-940 dark:text-neutral-50", className, "px-3 py-1.5", )} > -
    -
    +
    +
    {text}
    diff --git a/src/components/ui/UserAvatar.tsx b/src/components/ui/UserAvatar.tsx index 5864428d..58d61039 100644 --- a/src/components/ui/UserAvatar.tsx +++ b/src/components/ui/UserAvatar.tsx @@ -1,24 +1,30 @@ -import { cn, generateColorFromString } from "@utils/helpers"; +import { cn, generateColorFromUser } from "@utils/helpers"; import { Avatar } from "flowbite-react"; import * as React from "react"; import { useState } from "react"; import { useApplicationContext } from "@/contexts/ApplicationProvider"; type Props = { - size?: "default" | "small" | "large"; + size?: "default" | "small" | "large" | "medium"; }; export const UserAvatar = ({ size = "default" }: Props) => { const { user } = useApplicationContext(); const [pictureLoaded, setPictureLoaded] = useState(true); + const getAvatarSize = () => { + if (size === "small") return "sm"; + if (size === "large") return "lg"; + return "md"; + }; + return pictureLoaded ? ( setPictureLoaded(false)} - size={size == "small" ? "sm" : size == "large" ? "lg" : "md"} + size={getAvatarSize()} className={"shrink-0"} /> ) : ( @@ -26,13 +32,12 @@ export const UserAvatar = ({ size = "default" }: Props) => { className={cn( "rounded-full flex items-center justify-center bg-nb-gray-900 text-netbird uppercase", size == "small" && "w-8 h-8", + size == "medium" && "w-[2.3rem] h-[2.3rem]", size == "default" && "w-10 h-10", size == "large" && "w-12 h-12", )} style={{ - color: user?.name - ? generateColorFromString(user?.name || user?.id || "System User") - : "#808080", + color: generateColorFromUser(user), }} > {user?.name?.charAt(0) || user?.id?.charAt(0)} diff --git a/src/components/ui/UserDropdown.tsx b/src/components/ui/UserDropdown.tsx index c6c5ce87..3779d9f4 100644 --- a/src/components/ui/UserDropdown.tsx +++ b/src/components/ui/UserDropdown.tsx @@ -1,6 +1,5 @@ "use client"; -import { useOidc } from "@axa-fr/react-oidc"; import { DropdownMenu, DropdownMenuContent, @@ -17,25 +16,19 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { useApplicationContext } from "@/contexts/ApplicationProvider"; +import { usePermissions } from "@/contexts/PermissionsProvider"; import { useLoggedInUser } from "@/contexts/UsersProvider"; import useOSDetection from "@/hooks/useOperatingSystem"; -import loadConfig from "@/utils/config"; - -const config = loadConfig(); export default function UserDropdown() { - const { logout } = useOidc(); + const [dropdownOpen, setDropdownOpen] = useState(false); const { user } = useApplicationContext(); - const { loggedInUser } = useLoggedInUser(); + const { loggedInUser, logout } = useLoggedInUser(); + const { isRestricted, permission } = usePermissions(); const isMac = useOSDetection(); const router = useRouter(); - const logoutSession = async () => { - logout("/", { client_id: config.clientId }).then(); - }; - useHotkeys("shift+mod+l", () => logoutSession(), []); - const { permission } = useLoggedInUser(); - const [dropdownOpen, setDropdownOpen] = useState(false); + useHotkeys("shift+mod+l", () => logout(), []); return ( - + @@ -68,23 +61,18 @@ export default function UserDropdown() { - {permission.dashboard_view !== "blocked" && ( - { setDropdownOpen(false); if (loggedInUser) { router.push(`/team/user?id=${loggedInUser.id}`); } }} - > -
    - - Profile Settings -
    -     + /> )} - +
    Log out @@ -95,3 +83,14 @@ export default function UserDropdown() { ); } + +const ProfileSettingsDropdownItem = ({ onClick }: { onClick: () => void }) => { + return ( + +
    + + Profile Settings +
    +     + ); +}; diff --git a/src/contexts/AnalyticsProvider.tsx b/src/contexts/AnalyticsProvider.tsx index 72c2251a..d629bf0a 100644 --- a/src/contexts/AnalyticsProvider.tsx +++ b/src/contexts/AnalyticsProvider.tsx @@ -1,6 +1,7 @@ import loadConfig from "@utils/config"; import { isProduction } from "@utils/netbird"; import { usePathname } from "next/navigation"; +import Script from "next/script"; import React, { useEffect, useState } from "react"; import ReactGA from "react-ga4"; import { hotjar } from "react-hotjar"; @@ -12,6 +13,7 @@ type Props = { declare global { interface Window { _DATADOG_SYNTHETICS_BROWSER: any; + dataLayer: any[]; } } @@ -20,11 +22,18 @@ const AnalyticsContext = React.createContext( initialized: boolean; trackPageView: () => void; trackEvent: (category: string, action: string, label: string) => void; + trackEventV2: ( + category: string, + name: string, + value?: string, + userID?: string, + ) => void; + trackGTMCustomEvent: (name: string) => void; }, ); const config = loadConfig(); -export default function AnalyticsProvider({ children }: Props) { +export default function AnalyticsProvider({ children }: Readonly) { const [initialized, setInitialized] = useState(false); const path = usePathname(); @@ -62,13 +71,78 @@ export default function AnalyticsProvider({ children }: Props) { } }; + const trackEventV2 = ( + category: string, + name: string, + value?: string, + userID?: string, + ) => { + // Track custom event + if (isProduction() && ReactGA.isInitialized) { + ReactGA.event("nb_event", { + category: category, + action: name, + value: value, + userID: userID, + }); + } + }; + + const trackGTMCustomEvent = (name: string) => { + try { + window.dataLayer = window.dataLayer || []; + window.dataLayer.push({ + event: name, + }); + } catch (e) {} + }; + return ( + {children} ); } +export const GoogleTagManagerHeadScript = () => { + if (!config.googleTagManagerID) return null; + return ( + isProduction() && ( + + ) + ); +}; + +const GoogleTageManagerBodyScript = () => { + if (!config.googleTagManagerID) return null; + return ( + isProduction() && ( +