- {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)
+
+ ) : (
+
+ )}
+
;
+
+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 (
+
+
+
+ );
+ }}
+ />
+ )}
+
+ {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()}
+
+
+
+ {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 (
+
+
+
+
+
-
+
+
+
+
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}
+
+
+
+
+
+
+
+
+
+
-
+
{" "}
@@ -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}
+
);
}
@@ -45,13 +62,10 @@ export default function TruncatedText({
onOpenChange={setOpen}
>
-
-
{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",
)}
>
-
-
+
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() && (
+
+ )
+ );
+};
+
export const useAnalytics = () => React.useContext(AnalyticsContext);
diff --git a/src/contexts/AnnouncementProvider.tsx b/src/contexts/AnnouncementProvider.tsx
index 8e478976..d50b1cfc 100644
--- a/src/contexts/AnnouncementProvider.tsx
+++ b/src/contexts/AnnouncementProvider.tsx
@@ -2,7 +2,7 @@ import { AnnouncementVariant } from "@components/ui/AnnouncementBanner";
import { useLocalStorage } from "@hooks/useLocalStorage";
import md5 from "crypto-js/md5";
import React, { useEffect, useState } from "react";
-import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
const initialAnnouncements: Announcement[] = [];
@@ -38,17 +38,18 @@ const AnnouncementContext = React.createContext(
const bannerHeight = 40;
-export default function AnnouncementProvider({ children }: Props) {
+export default function AnnouncementProvider({ children }: Readonly) {
const [height, setHeight] = useState(0);
const [closedAnnouncements, setClosedAnnouncements] = useLocalStorage<
string[]
>("netbird-closed-announcements", []);
const [announcements, setAnnouncements] = useState();
- const { permission } = useLoggedInUser();
+ const { isRestricted } = usePermissions();
useEffect(() => {
if (announcements && announcements.length > 0) return;
- if (permission?.dashboard_view === "blocked") return;
+
+ if (isRestricted) return;
const initial = initialAnnouncements.map((announcement) => {
const hash = md5(announcement.text).toString();
const isOpen = !closedAnnouncements.some((h) => h === hash);
diff --git a/src/contexts/ApplicationProvider.tsx b/src/contexts/ApplicationProvider.tsx
index 073b5dca..31ecfae2 100644
--- a/src/contexts/ApplicationProvider.tsx
+++ b/src/contexts/ApplicationProvider.tsx
@@ -1,6 +1,6 @@
import { useOidcUser } from "@axa-fr/react-oidc";
import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useApiCall } from "@utils/api";
+import { Params, useApiCall } from "@utils/api";
import { useIsMd } from "@utils/responsive";
import { getLatestNetbirdRelease } from "@utils/version";
import React, {
@@ -26,6 +26,10 @@ const ApplicationContext = React.createContext(
toggleMobileNav: () => void;
mobileNavOpen: boolean;
user: any;
+ globalApiParams?: Params;
+ setGlobalApiParams?: (p?: Params) => void;
+ isNavigationCollapsed: boolean;
+ toggleNavigation: () => void;
},
);
@@ -36,11 +40,19 @@ export default function ApplicationProvider({ children }: Props) {
const { oidcUser: user } = useOidcUser();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const isMd = useIsMd();
- const userRequest = useApiCall("/users", true);
+ const userRequest = useApiCall(`/users`, true);
const [show, setShow] = useState(false);
+ const [isNavigationCollapsed, setIsNavigationCollapsed] = useLocalStorage(
+ "netbird-nav-collapsed",
+ false,
+ );
const requestCalled = useRef(false);
const maxTries = 3;
+ const [globalApiParams, setGlobalApiParams] = useLocalStorage<
+ Params | undefined
+ >("netbird-api-params", undefined);
+
const populateCache = useCallback(
async (tries = 0) => {
if (tries >= maxTries) {
@@ -57,6 +69,10 @@ export default function ApplicationProvider({ children }: Props) {
[userRequest, setShow],
);
+ const toggleNavigation = useCallback(() => {
+ setIsNavigationCollapsed((prev) => !prev);
+ }, []);
+
useEffect(() => {
if (!requestCalled.current) {
populateCache().then();
@@ -98,7 +114,17 @@ export default function ApplicationProvider({ children }: Props) {
return show ? (
{children}
diff --git a/src/contexts/CountryProvider.tsx b/src/contexts/CountryProvider.tsx
index b51d7b9e..1b6d42a4 100644
--- a/src/contexts/CountryProvider.tsx
+++ b/src/contexts/CountryProvider.tsx
@@ -1,6 +1,6 @@
import useFetchApi from "@utils/api";
import React, { useCallback } from "react";
-import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
import { Country } from "@/interfaces/Country";
import { Peer } from "@/interfaces/Peer";
@@ -13,17 +13,24 @@ const CountryContext = React.createContext(
countries: Country[] | undefined;
isLoading: boolean;
getRegionByPeer: (peer: Peer) => string;
+ getRegionText: (country_code: string, city_name: string) => string;
},
);
export default function CountryProvider({ children }: Props) {
- const { permission } = useLoggedInUser();
+ const { isRestricted } = usePermissions();
const getRegionByPeer = (peer: Peer) => "Unknown";
+ const getRegionText = (country_code: string, city_name: string) => "Unknown";
- return permission?.dashboard_view != "full" ? (
+ return isRestricted ? (
{children}
@@ -39,21 +46,28 @@ function CountryProviderContent({ children }: Props) {
false,
);
- const getRegionByPeer = useCallback(
- (peer: Peer) => {
+ const getRegionText = useCallback(
+ (country_code: string, city_name: string) => {
if (!countries) return "Unknown";
- const country = countries.find(
- (c) => c.country_code === peer.country_code,
- );
+ const country = countries.find((c) => c.country_code === country_code);
if (!country) return "Unknown";
- if (!peer.city_name) return country.country_name;
- return `${country.country_name}, ${peer.city_name}`;
+ if (!city_name) return country.country_name;
+ return `${country.country_name}, ${city_name}`;
},
[countries],
);
+ const getRegionByPeer = useCallback(
+ (peer: Peer) => {
+ return getRegionText(peer.country_code, peer.city_name);
+ },
+ [getRegionText],
+ );
+
return (
-
+
{children}
);
diff --git a/src/contexts/DialogProvider.tsx b/src/contexts/DialogProvider.tsx
index 48165166..0cf10d7d 100644
--- a/src/contexts/DialogProvider.tsx
+++ b/src/contexts/DialogProvider.tsx
@@ -26,6 +26,7 @@ type DialogOptions = {
cancelText?: string;
type?: "default" | "warning" | "danger" | "center";
children?: React.ReactNode;
+ maxWidthClass?: string;
};
export default function DialogProvider({ children }: Props) {
@@ -62,7 +63,10 @@ export default function DialogProvider({ children }: Props) {
onOpenChange={(open) => fn.current && fn.current(open)}
>
{dialogOptions && (
-
+
{children}
) : (
- {children}
+ {children}
);
}
type ProviderContentProps = {
children: React.ReactNode;
- isUser: boolean;
};
export function GroupsProviderContent({
children,
- isUser,
}: Readonly) {
+ const { permission } = usePermissions();
+
const {
data: groups,
mutate,
isLoading,
- } = useFetchApi("/groups", false, true, !isUser);
+ } = useFetchApi("/groups", false, true, permission.groups.read);
const groupRequest = useApiCall("/groups", true);
const [dropdownOptions, setDropdownOptions] = useState([]);
@@ -103,10 +103,10 @@ export function GroupsProviderContent({
}) as string[];
let resources = group?.resources?.map((r) => {
- let isString = typeof r === "string";
- if (isString) return r;
- let resource = r as GroupResource;
- return resource.id;
+ let isString = typeof r === "string";
+ if (isString) return r;
+ let resource = r as GroupResource;
+ return resource.id;
}) as string[];
if (group.name === "All") return Promise.resolve(group);
diff --git a/src/contexts/PermissionsProvider.tsx b/src/contexts/PermissionsProvider.tsx
new file mode 100644
index 00000000..4856dee6
--- /dev/null
+++ b/src/contexts/PermissionsProvider.tsx
@@ -0,0 +1,39 @@
+import React, { useMemo } from "react";
+import { Permissions } from "@/interfaces/Permission";
+import { User } from "@/interfaces/User";
+
+type Props = {
+ children: React.ReactNode;
+ user: User;
+};
+
+const PermissionsContext = React.createContext(
+ {} as {
+ isRestricted: boolean;
+ permission: Permissions["modules"];
+ },
+);
+
+export default function PermissionsProvider({
+ children,
+ user,
+}: Readonly) {
+ const permissions = useMemo(() => {
+ return user.permissions;
+ }, [user]);
+
+ const data = useMemo(() => {
+ return {
+ isRestricted: permissions.is_restricted,
+ permission: permissions.modules,
+ };
+ }, [permissions]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export const usePermissions = () => React.useContext(PermissionsContext);
diff --git a/src/contexts/UsersProvider.tsx b/src/contexts/UsersProvider.tsx
index 67591516..19faab58 100644
--- a/src/contexts/UsersProvider.tsx
+++ b/src/contexts/UsersProvider.tsx
@@ -1,9 +1,14 @@
+import { useOidc } from "@axa-fr/react-oidc";
import FullScreenLoading from "@components/ui/FullScreenLoading";
import useFetchApi from "@utils/api";
+import loadConfig from "@utils/config";
import React, { useMemo } from "react";
-import { Permission } from "@/interfaces/Permission";
+import { useApplicationContext } from "@/contexts/ApplicationProvider";
+import PermissionsProvider from "@/contexts/PermissionsProvider";
import { Role, User } from "@/interfaces/User";
+const config = loadConfig();
+
type Props = {
children: React.ReactNode;
};
@@ -12,44 +17,83 @@ const UsersContext = React.createContext(
{} as {
users: User[] | undefined;
refresh: () => void;
+ isLoading: boolean;
+ },
+);
+
+const UserProfileContext = React.createContext(
+ {} as {
loggedInUser: User | undefined;
},
);
-export default function UsersProvider({ children }: Props) {
+export default function UsersProvider({ children }: Readonly) {
const { data: users, mutate, isLoading } = useFetchApi("/users");
const refresh = () => {
mutate().then();
};
+ return (
+
+ {children}
+
+ );
+}
+
+export const useUsers = () => React.useContext(UsersContext);
+
+const UserProfileProvider = ({ children }: Props) => {
+ const { users, isLoading: isAllUsersLoading } = useUsers();
+ const {
+ data: user,
+ error,
+ isLoading,
+ } = useFetchApi("/users/current", true, true, true, {
+ key: "user-profile",
+ });
+
const loggedInUser = useMemo(() => {
- return users?.find((user) => user.is_current);
- }, [users]);
+ if (isLoading) return undefined;
+ if (user) return user;
+ if (isAllUsersLoading) return undefined;
+ if (!user || error) {
+ return users?.find((u) => u?.is_current);
+ }
+ }, [user, error, users, isLoading, isAllUsersLoading]);
+
+ const data = useMemo(() => {
+ return {
+ loggedInUser,
+ };
+ }, [loggedInUser]);
return !isLoading && loggedInUser ? (
-
- {children}
-
+
+ {children}
+
) : (
);
-}
+};
-export const useUsers = () => React.useContext(UsersContext);
+export const useUserProfile = () => React.useContext(UserProfileContext);
export const useLoggedInUser = () => {
- const { loggedInUser } = useUsers();
+ const { loggedInUser } = useUserProfile();
+ const { logout: oidcLogout } = useOidc();
+ const { setGlobalApiParams } = useApplicationContext();
const isOwner = loggedInUser ? loggedInUser?.role === Role.Owner : false;
const isAdmin = loggedInUser ? loggedInUser?.role === Role.Admin : false;
+
const isUser = !isOwner && !isAdmin;
const isOwnerOrAdmin = isOwner || isAdmin;
- const permission = useMemo(() => {
- return {
- dashboard_view: loggedInUser?.permissions.dashboard_view || "blocked",
- } as Permission;
- }, [loggedInUser]);
+ const logout = async () => {
+ return oidcLogout("/", { client_id: config.clientId }).then(() => {
+ setGlobalApiParams?.({});
+ });
+ };
return {
loggedInUser,
@@ -57,6 +101,6 @@ export const useLoggedInUser = () => {
isAdmin,
isUser,
isOwnerOrAdmin,
- permission,
+ logout,
} as const;
};
diff --git a/src/interfaces/Account.ts b/src/interfaces/Account.ts
index a484d17e..688dfb84 100644
--- a/src/interfaces/Account.ts
+++ b/src/interfaces/Account.ts
@@ -1,5 +1,9 @@
export interface Account {
id: string;
+ domain: string;
+ domain_category: string;
+ created_at: string;
+ created_by: string;
settings: {
extra: {
peer_approval_enabled: boolean;
diff --git a/src/interfaces/Pagination.ts b/src/interfaces/Pagination.ts
new file mode 100644
index 00000000..1651c037
--- /dev/null
+++ b/src/interfaces/Pagination.ts
@@ -0,0 +1,7 @@
+export interface Pagination {
+ data: T;
+ page: number;
+ page_size: number;
+ total_pages: number;
+ total_records: number;
+}
diff --git a/src/interfaces/Permission.ts b/src/interfaces/Permission.ts
index 5bf318ca..a0b80602 100644
--- a/src/interfaces/Permission.ts
+++ b/src/interfaces/Permission.ts
@@ -1,3 +1,43 @@
+export interface Permissions {
+ is_restricted: boolean;
+ modules: {
+ peers: Permission;
+ groups: Permission;
+
+ setup_keys: Permission;
+
+ policies: Permission;
+ assistant: Permission;
+
+ networks: Permission;
+ routes: Permission;
+ nameservers: Permission;
+ dns: Permission;
+
+ users: Permission;
+ pats: Permission;
+
+ events: Permission;
+
+ settings: Permission;
+ accounts: Permission;
+ billing: Permission;
+
+ edr: Permission;
+ event_streaming: Permission;
+ idp: Permission;
+
+ msp: Permission;
+ tenants: Permission;
+
+ proxy: Permission;
+ proxy_configuration: Permission;
+ };
+}
+
export interface Permission {
- dashboard_view: "limited" | "full" | "blocked";
+ create: boolean;
+ read: boolean;
+ update: boolean;
+ delete: boolean;
}
diff --git a/src/interfaces/User.ts b/src/interfaces/User.ts
index 84df502a..53d10ba5 100644
--- a/src/interfaces/User.ts
+++ b/src/interfaces/User.ts
@@ -1,4 +1,4 @@
-import { Permission } from "@/interfaces/Permission";
+import { Permissions } from "@/interfaces/Permission";
export interface User {
id: string;
@@ -11,11 +11,14 @@ export interface User {
is_service_user?: boolean;
is_blocked?: boolean;
last_login?: Date;
- permissions: Permission;
+ permissions: Permissions;
}
export enum Role {
User = "user",
Admin = "admin",
Owner = "owner",
+ BillingAdmin = "billing_admin",
+ Auditor = "auditor",
+ NetworkAdmin = "network_admin",
}
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index 0d94acec..35d3cd6c 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -6,12 +6,15 @@ import { TooltipProvider } from "@components/Tooltip";
import { cn } from "@utils/helpers";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
-import { Viewport } from "next/dist/lib/metadata/types/extra-types";
+import { Viewport } from "next";
import localFont from "next/font/local";
-import React from "react";
+import React, { Suspense } from "react";
import { Toaster } from "react-hot-toast";
import OIDCProvider from "@/auth/OIDCProvider";
-import AnalyticsProvider from "@/contexts/AnalyticsProvider";
+import FullScreenLoading from "@/components/ui/FullScreenLoading";
+import AnalyticsProvider, {
+ GoogleTagManagerHeadScript,
+} from "@/contexts/AnalyticsProvider";
import DialogProvider from "@/contexts/DialogProvider";
import ErrorBoundaryProvider from "@/contexts/ErrorBoundary";
import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider";
@@ -30,31 +33,38 @@ export const viewport: Viewport = {
initialScale: 1,
};
-export default function AppLayout({ children }: { children: React.ReactNode }) {
+export default function AppLayout({
+ children,
+}: Readonly<{ children: React.ReactNode }>) {
return (
+
+
+
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
-
-
+ }>
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/layouts/DashboardLayout.tsx b/src/layouts/DashboardLayout.tsx
index 5ec0d86c..3655ddb3 100644
--- a/src/layouts/DashboardLayout.tsx
+++ b/src/layouts/DashboardLayout.tsx
@@ -17,15 +17,16 @@ import ApplicationProvider, {
} from "@/contexts/ApplicationProvider";
import CountryProvider from "@/contexts/CountryProvider";
import GroupsProvider from "@/contexts/GroupsProvider";
-import UsersProvider, { useLoggedInUser } from "@/contexts/UsersProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import UsersProvider from "@/contexts/UsersProvider";
import Navigation from "@/layouts/Navigation";
-import Navbar, { headerHeight } from "./Header";
+import Header, { headerHeight } from "./Header";
export default function DashboardLayout({
children,
-}: {
+}: Readonly<{
children: React.ReactNode;
-}) {
+}>) {
return (
@@ -41,14 +42,16 @@ export default function DashboardLayout({
);
}
-function DashboardPageContent({ children }: { children: React.ReactNode }) {
+function DashboardPageContent({
+ children,
+}: Readonly<{ children: React.ReactNode }>) {
const { oidcUser: user } = useOidcUser();
const { mobileNavOpen, toggleMobileNav } = useApplicationContext();
const isSm = useIsSm();
const isXs = useIsXs();
- const { permission } = useLoggedInUser();
+ const { isRestricted } = usePermissions();
- const navOpenPageWidth = isSm ? "50%" : isXs ? "65%" : "80%";
+ const navOpenPageWidth = isSm ? "45%" : isXs ? "60%" : "80%";
const { bannerHeight } = useAnnouncement();
return (
@@ -117,7 +120,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
}}
animate={{
x: mobileNavOpen ? navOpenPageWidth : 0,
- width: mobileNavOpen ? "100%" : "100%",
+ width: "100%",
height: mobileNavOpen ? "90vh" : "auto",
y: mobileNavOpen ? "6.5%" : 0,
}}
@@ -150,17 +153,14 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
mass: 0.1,
}}
>
-
-
+
- {permission.dashboard_view !== "blocked" && (
-
- )}
+ {!isRestricted && }
{children}
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index 60246417..d28e5cde 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -2,10 +2,9 @@
import Button from "@components/Button";
import { AnnouncementBanner } from "@components/ui/AnnouncementBanner";
-import DarkModeToggle from "@components/ui/DarkModeToggle";
import UserDropdown from "@components/ui/UserDropdown";
import { cn } from "@utils/helpers";
-import { MenuIcon } from "lucide-react";
+import { MenuIcon, PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import React, { useMemo } from "react";
@@ -13,7 +12,7 @@ import NetBirdLogo from "@/assets/netbird.svg";
import NetBirdLogoFull from "@/assets/netbird-full.svg";
import { useAnnouncement } from "@/contexts/AnnouncementProvider";
import { useApplicationContext } from "@/contexts/ApplicationProvider";
-import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
export const headerHeight = 75;
@@ -32,7 +31,7 @@ export default function NavbarWithDropdown() {
src={NetBirdLogo}
width={30}
alt={"NetBird Logo"}
- className={"md:hidden"}
+ className={"md:hidden ml-4"}
/>
);
@@ -40,7 +39,7 @@ export default function NavbarWithDropdown() {
const { toggleMobileNav } = useApplicationContext();
const { bannerHeight } = useAnnouncement();
- const { permission } = useLoggedInUser();
+ const { isRestricted } = usePermissions();
return (
<>
@@ -62,8 +61,7 @@ export default function NavbarWithDropdown() {
router.push("/peers")}
- className={"cursor-pointer hover:opacity-70 transition-all"}
- >
- {Logo}
+
+
+
-
@@ -97,3 +96,26 @@ export default function NavbarWithDropdown() {
);
}
+
+const ToggleCollapsableNavigationButton = () => {
+ const { isRestricted } = usePermissions();
+ const { toggleNavigation, isNavigationCollapsed } = useApplicationContext();
+
+ return (
+ !isRestricted && (
+
+ )
+ );
+};
diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx
index 1b3771ce..40509aa2 100644
--- a/src/layouts/Navigation.tsx
+++ b/src/layouts/Navigation.tsx
@@ -2,8 +2,6 @@
import { ScrollArea } from "@components/ScrollArea";
import { cn } from "@utils/helpers";
-import { CustomFlowbiteTheme, Sidebar } from "flowbite-react";
-import { SidebarItemGroupProps } from "flowbite-react/lib/esm/components/Sidebar/SidebarItemGroup";
import AccessControlIcon from "@/assets/icons/AccessControlIcon";
import ActivityIcon from "@/assets/icons/ActivityIcon";
import DNSIcon from "@/assets/icons/DNSIcon";
@@ -14,16 +12,11 @@ import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
import TeamIcon from "@/assets/icons/TeamIcon";
import SidebarItem from "@/components/SidebarItem";
import { useAnnouncement } from "@/contexts/AnnouncementProvider";
-import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { useApplicationContext } from "@/contexts/ApplicationProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
import { headerHeight } from "@/layouts/Header";
import { NetworkNavigation } from "@/modules/networks/misc/NetworkNavigation";
-const customTheme: CustomFlowbiteTheme["sidebar"] = {
- root: {
- inner: "bg-gray-50 dark:bg-nb-gray",
- },
-};
-
type Props = {
fullWidth?: boolean;
hideOnMobile?: boolean;
@@ -32,28 +25,27 @@ type Props = {
export default function Navigation({
fullWidth = false,
hideOnMobile = false,
-}: Props) {
- const { isUser } = useLoggedInUser();
- const { isOwnerOrAdmin } = useLoggedInUser();
+}: Readonly
) {
const { bannerHeight } = useAnnouncement();
+ const { isNavigationCollapsed } = useApplicationContext();
+ const { permission, isRestricted } = usePermissions();
return (
-
-
+
}
label="Peers"
href={"/peers"}
+ visible={!isRestricted}
/>
- {!isUser && (
- <>
- }
- label="Setup Keys"
- href={"/setup-keys"}
- />
- }
- label="Access Control"
- collapsible
- >
-
-
-
+ }
+ label="Setup Keys"
+ href={"/setup-keys"}
+ visible={permission.setup_keys.read}
+ />
+ }
+ label="Access Control"
+ collapsible
+ visible={permission.policies.read}
+ >
+
+
+
-
+
- }
- label="DNS"
- collapsible
- exactPathMatch={true}
- >
-
-
-
- } label="Team" collapsible>
-
-
-
- }
- label="Activity"
- href={"/activity"}
- />
-
- )}
+ }
+ label="DNS"
+ collapsible
+ exactPathMatch={true}
+ visible={permission.dns.read || permission.nameservers.read}
+ >
+
+
+
+ }
+ label="Team"
+ collapsible
+ visible={permission.users.read}
+ >
+
+
+
+ }
+ label="Activity"
+ href={"/events/audit"}
+ exactPathMatch={true}
+ visible={permission.events.read}
+ />
- {isOwnerOrAdmin && (
- }
- label="Settings"
- href={"/settings"}
- exactPathMatch={true}
- />
- )}
+ }
+ label="Settings"
+ href={"/settings"}
+ exactPathMatch={true}
+ visible={permission.settings.read}
+ />
}
href={"https://docs.netbird.io/"}
target={"_blank"}
label="Documentation"
+ visible={true}
/>
+
);
}
-export function SidebarItemGroup(props: SidebarItemGroupProps) {
+type SidebarItemGroupProps = {
+ children: React.ReactNode;
+};
+
+export function SidebarItemGroup({ children }: SidebarItemGroupProps) {
return (
-
- {props.children}
-
+ {children}
+
{children}
diff --git a/src/modules/access-control/AccessControlModal.tsx b/src/modules/access-control/AccessControlModal.tsx
index b86efc59..5bebc257 100644
--- a/src/modules/access-control/AccessControlModal.tsx
+++ b/src/modules/access-control/AccessControlModal.tsx
@@ -41,6 +41,7 @@ import {
} from "lucide-react";
import React, { useMemo, useState } from "react";
import AccessControlIcon from "@/assets/icons/AccessControlIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
import { Group } from "@/interfaces/Group";
import { Policy, Protocol } from "@/interfaces/Policy";
import { PostureCheck } from "@/interfaces/PostureCheck";
@@ -126,6 +127,8 @@ export function AccessControlModalContent({
initialName,
initialDescription,
}: Readonly
) {
+ const { permission } = usePermissions();
+
const {
portAndDirectionDisabled,
destinationGroups,
@@ -250,6 +253,9 @@ export function AccessControlModalContent({
@@ -388,6 +406,9 @@ export function AccessControlModalContent({
"e.g., Devs are allowed to access servers and servers are allowed to access Devs."
}
rows={3}
+ disabled={
+ !permission.policies.update || !permission.policies.create
+ }
/>
@@ -453,7 +474,7 @@ export function AccessControlModalContent({
{
+ const uniqueUsers = uniqBy(events, (event) => event.initiator_email);
+ return uniqueUsers.map((event) => {
+ return {
+ name: event.initiator_name,
+ id: event.initiator_id,
+ email: event.initiator_email || "NetBird",
+ external: !!event?.meta?.external,
+ } as UserSelectOption;
+ });
+ }, [events]);
+
return (
)}
{events && (
- {
- mutate("/events").then();
+ mutate("/events/audit").then();
}}
/>
diff --git a/src/modules/activity/ActivityTypeIcon.tsx b/src/modules/activity/ActivityTypeIcon.tsx
index b21ab4c1..2ae40794 100644
--- a/src/modules/activity/ActivityTypeIcon.tsx
+++ b/src/modules/activity/ActivityTypeIcon.tsx
@@ -10,6 +10,7 @@ import {
KeyRound,
Layers3Icon,
LogIn,
+ type LucideIcon,
MonitorSmartphoneIcon,
NetworkIcon,
RefreshCcw,
@@ -28,79 +29,44 @@ type Props = {
const DEFAULT_CLASSES = "shrink-0";
+type ActivityTypeKey = keyof typeof ActivityTypeMappings;
+
+const ActivityTypeMappings = {
+ peer: MonitorSmartphoneIcon,
+ user: User,
+ account: Cog,
+ rule: ArrowLeftRight,
+ policy: Shield,
+ setupkey: KeyRound,
+ group: FolderGit2,
+ route: NetworkIcon,
+ dns: Globe,
+ nameserver: Server,
+ dashboard: LogIn,
+ integration: Blocks,
+ personal: User,
+ service: Cog,
+ billing: CreditCardIcon,
+ integrated: ShieldCheck,
+ posture: ShieldCheck,
+ transferred: RefreshCcw,
+ resource: Layers3Icon,
+ network: NetworkIcon,
+} as const satisfies Record;
+
export default function ActivityTypeIcon({
code,
size = 18,
className,
}: Props) {
- if (code.startsWith("peer")) {
- return (
-
- );
- } else if (code.startsWith("user")) {
- return ;
- } else if (code.startsWith("account")) {
- return ;
- } else if (code.startsWith("rule")) {
- return (
-
- );
- } else if (code.startsWith("policy")) {
- return ;
- } else if (code.startsWith("setupkey")) {
- return ;
- } else if (code.startsWith("group")) {
- return (
-
- );
- } else if (code.startsWith("route")) {
- return (
-
- );
- } else if (code.startsWith("dns")) {
- return ;
- } else if (code.startsWith("nameserver")) {
- return ;
- } else if (code.startsWith("dashboard")) {
- return ;
- } else if (code.startsWith("integration")) {
- return ;
- } else if (code.startsWith("account")) {
- return ;
- } else if (code.startsWith("personal")) {
- return ;
- } else if (code.startsWith("service")) {
- return ;
- } else if (code.startsWith("billing")) {
- return (
-
- );
- } else if (code.startsWith("integrated")) {
- return (
-
- );
- } else if (code.startsWith("posture")) {
- return (
-
- );
- } else if (code.startsWith("transferred")) {
- return (
-
- );
- } else if (code.startsWith("resource")) {
- return (
-
- );
- } else if (code.startsWith("network")) {
- return (
-
- );
- } else {
- return (
-
- );
- }
+ const prefixParts = code?.split(".") || [];
+ const prefix = (prefixParts[0] || "").toLowerCase();
+
+ // Check if prefix is a valid key, otherwise use fallback
+ const Icon =
+ prefix in ActivityTypeMappings
+ ? ActivityTypeMappings[prefix as ActivityTypeKey]
+ : HelpCircleIcon;
+
+ return ;
}
diff --git a/src/modules/activity/ActivityUserSelector.tsx b/src/modules/activity/UsersDropdownSelector.tsx
similarity index 70%
rename from src/modules/activity/ActivityUserSelector.tsx
rename to src/modules/activity/UsersDropdownSelector.tsx
index 1805782f..34f24ca9 100644
--- a/src/modules/activity/ActivityUserSelector.tsx
+++ b/src/modules/activity/UsersDropdownSelector.tsx
@@ -2,31 +2,39 @@ import Button from "@components/Button";
import { CommandItem } from "@components/Command";
import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
import { ScrollArea } from "@components/ScrollArea";
+import { SmallBadge } from "@components/ui/SmallBadge";
import TextWithTooltip from "@components/ui/TextWithTooltip";
-import { IconArrowBack } from "@tabler/icons-react";
import { cn, generateColorFromString } from "@utils/helpers";
import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
-import { trim, uniqBy } from "lodash";
+import { sortBy, trim, uniqBy } from "lodash";
import { ChevronsUpDown, Cog, SearchIcon, UserCircle2 } from "lucide-react";
import * as React from "react";
import { useMemo, useState } from "react";
import { useElementSize } from "@/hooks/useElementSize";
-import { ActivityEvent } from "@/interfaces/ActivityEvent";
+import { SmallUserAvatar } from "@/modules/users/SmallUserAvatar";
-interface MultiSelectProps {
+interface Props {
value?: string;
onChange: (item: string | undefined) => void;
disabled?: boolean;
popoverWidth?: "auto" | number;
- events: ActivityEvent[];
+ options: UserSelectOption[];
}
-export function ActivityUserSelector({
+
+export type UserSelectOption = {
+ id: string;
+ name: string;
+ email: string;
+ external?: boolean;
+};
+
+export function UsersDropdownSelector({
onChange,
value,
disabled = false,
popoverWidth = 250,
- events,
-}: MultiSelectProps) {
+ options,
+}: Props) {
const searchRef = React.useRef(null);
const [inputRef, { width }] = useElementSize();
const [search, setSearch] = useState("");
@@ -44,20 +52,16 @@ export function ActivityUserSelector({
const [open, setOpen] = useState(false);
- const users = useMemo(() => {
- const uniqueUsers = uniqBy(events, (event) => event.initiator_email);
- return uniqueUsers.map((event) => {
- return {
- name: event.initiator_name,
- id: event.initiator_id,
- email: event.initiator_email || "NetBird",
- };
- });
- }, [events]);
+ const sortedOptions = useMemo(() => {
+ return sortBy(
+ uniqBy(options, (o) => o.email),
+ ["external", "name"],
+ );
+ }, [options]);
const selectedUser = useMemo(() => {
- return users.find((user) => user.email == value);
- }, [value, users]);
+ return options.find((user) => user.email == value);
+ }, [value, options]);
return (
{selectedUser?.email === "NetBird" ? (
@@ -103,8 +108,13 @@ export function ActivityUserSelector({
@@ -117,7 +127,7 @@ export function ActivityUserSelector({
-
- {users.map((user) => {
- const searchValue =
- user.email === "NetBird"
- ? "NetBird System"
- : user.name + " " + user.id + " " + user.email;
+ {sortedOptions.map((user) => {
+ const isSystemUser = user.email === "NetBird";
+ const searchValue = isSystemUser
+ ? "NetBird System"
+ : user.name + " " + user.id + " " + user.email;
+
return (
e.preventDefault()}
>
-
-
- {user?.email === "NetBird" ? (
-
- ) : (
- user?.name?.charAt(0) || user?.id?.charAt(0)
- )}
-
+
+
-
-
+
+
-
+
+ {user.external && (
+
+
+
+ )}
);
diff --git a/src/modules/activity/utils.ts b/src/modules/activity/utils.ts
index 86bec4d7..2e291208 100644
--- a/src/modules/activity/utils.ts
+++ b/src/modules/activity/utils.ts
@@ -1,36 +1,48 @@
-export function getColorFromCode(code: string) {
- if (code.includes("add")) {
- return "green";
- } else if (code.includes("join")) {
- return "green";
- } else if (code.includes("invite")) {
- return "green";
- } else if (code.includes("create")) {
- return "green";
- } else if (code.includes("delete")) {
- return "red";
- } else if (code.includes("update")) {
- return "blue-darker";
- } else if (code.includes("revoke")) {
- return "red";
- } else if (code.includes("overuse")) {
- return "netbird";
- } else if (code.includes("overuse")) {
- return "netbird";
- } else if (code.includes("enable")) {
- return "blue-darker";
- } else if (code.includes("disable")) {
- return "blue-darker";
- } else if (code.includes("rename")) {
- return "blue-darker";
- } else if (code.includes("block")) {
- return "red";
- } else if (code.includes("unblock")) {
- return "blue-darker";
- } else if (code.includes("login")) {
- return "blue-darker";
- } else if (code.includes("expire")) {
- return "netbird";
+enum ActionStatus {
+ SUCCESS = "green",
+ ERROR = "red",
+ INFO = "blue-darker",
+ WARNING = "netbird",
+}
+
+const ACTION_COLOR_MAPPING: Record
= {
+ // Success actions
+ add: ActionStatus.SUCCESS,
+ join: ActionStatus.SUCCESS,
+ invite: ActionStatus.SUCCESS,
+ create: ActionStatus.SUCCESS,
+ approve: ActionStatus.SUCCESS,
+ complete: ActionStatus.SUCCESS,
+ activate: ActionStatus.SUCCESS,
+
+ // Error actions
+ delete: ActionStatus.ERROR,
+ revoke: ActionStatus.ERROR,
+ block: ActionStatus.ERROR,
+
+ // Warning actions
+ overuse: ActionStatus.WARNING,
+ expire: ActionStatus.WARNING,
+
+ // Info actions
+ update: ActionStatus.INFO,
+ enable: ActionStatus.INFO,
+ disable: ActionStatus.INFO,
+ rename: ActionStatus.INFO,
+ unblock: ActionStatus.INFO,
+ login: ActionStatus.INFO,
+};
+
+export function getColorFromCode(code: string): string {
+ try {
+ const matchingAction = Object.keys(ACTION_COLOR_MAPPING).find((action) =>
+ code.includes(action),
+ );
+
+ return matchingAction
+ ? ACTION_COLOR_MAPPING[matchingAction]
+ : ActionStatus.INFO;
+ } catch (error) {
+ return ActionStatus.INFO;
}
- return "blue-darker";
}
diff --git a/src/modules/common-table-rows/ActiveInactiveRow.tsx b/src/modules/common-table-rows/ActiveInactiveRow.tsx
index 5c58c5a0..b391b726 100644
--- a/src/modules/common-table-rows/ActiveInactiveRow.tsx
+++ b/src/modules/common-table-rows/ActiveInactiveRow.tsx
@@ -38,7 +38,7 @@ export default function ActiveInactiveRow({
) {
const { groups: allGroups } = useGroups();
- const { isUser } = useLoggedInUser();
+ const { permission } = usePermissions();
// Get the group by the id
const foundGroups = useMemo(() => {
@@ -62,7 +64,7 @@ export default function GroupsRow({
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
- setModal && !isUser && setModal(true);
+ setModal && permission.groups.update && setModal(true);
}}
>
{foundGroups?.length == 0 && showAddGroupButton ? (
@@ -81,6 +83,7 @@ export default function GroupsRow({
description={description}
peer={peer}
hideAllGroup={hideAllGroup}
+ disabled={disabled}
/>
);
@@ -93,6 +96,7 @@ type EditGroupsModalProps = {
description?: string;
peer?: Peer;
hideAllGroup?: boolean;
+ disabled: boolean;
};
export function EditGroupsModal({
@@ -102,7 +106,8 @@ export function EditGroupsModal({
description,
peer,
hideAllGroup = false,
-}: EditGroupsModalProps) {
+ disabled,
+}: Readonly) {
const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
useGroupHelper({
initial: groups,
@@ -141,7 +146,7 @@ export function EditGroupsModal({
-
diff --git a/src/modules/dns-nameservers/NameserverModal.tsx b/src/modules/dns-nameservers/NameserverModal.tsx
index 844e4cf0..3ddaa9d9 100644
--- a/src/modules/dns-nameservers/NameserverModal.tsx
+++ b/src/modules/dns-nameservers/NameserverModal.tsx
@@ -36,6 +36,7 @@ import {
import React, { useEffect, useMemo, useReducer, useState } from "react";
import { useSWRConfig } from "swr";
import DNSIcon from "@/assets/icons/DNSIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
import { Nameserver, NameserverGroup } from "@/interfaces/Nameserver";
import useGroupHelper from "@/modules/groups/useGroupHelper";
@@ -53,20 +54,18 @@ export default function NameserverModal({
open,
onOpenChange,
cell,
-}: Props) {
+}: Readonly
) {
return (
- <>
-
- {children && {children}}
- {open && (
- onOpenChange(false)}
- preset={preset}
- cell={cell}
- />
- )}
-
-
+
+ {children && {children}}
+ {open && (
+ onOpenChange(false)}
+ preset={preset}
+ cell={cell}
+ />
+ )}
+
);
}
@@ -102,7 +101,8 @@ export function NameserverModalContent({
onSuccess,
preset,
cell,
-}: ModalProps) {
+}: Readonly) {
+ const { permission } = usePermissions();
const nsRequest = useApiCall("/dns/nameservers", true);
const { mutate } = useSWRConfig();
@@ -243,6 +243,12 @@ export function NameserverModalContent({
return !(!canContinueToGeneral || nameLengthError !== "" || name == "");
}, [canContinueToGeneral, nameLengthError, name]);
+ const canAction = useMemo(() => {
+ return isUpdate
+ ? permission.nameservers.update
+ : permission.nameservers.create;
+ }, [isUpdate, permission]);
+
return (
setNameservers({ type: "UPDATE", index: i, ns })
}
@@ -311,7 +318,7 @@ export function NameserverModalContent({
)}
}
helpText={"Use this switch to enable or disable the nameserver."}
+ disabled={!canAction}
/>
@@ -370,6 +382,7 @@ export function NameserverModalContent({
onRemove={() =>
setDomains({ type: "REMOVE", index: i })
}
+ disabled={!canAction}
/>
);
})}
@@ -382,6 +395,7 @@ export function NameserverModalContent({
className={"w-full"}
size={"sm"}
onClick={() => setDomains({ type: "ADD" })}
+ disabled={!canAction}
>
Add Domain
@@ -405,6 +419,7 @@ export function NameserverModalContent({
helpText={
"E.g., 'peer.example.com' will be accessible with 'peer'"
}
+ disabled={!canAction}
/>
@@ -421,6 +436,7 @@ export function NameserverModalContent({
placeholder={"e.g., Public DNS"}
value={name}
onChange={(e) => setName(e.target.value)}
+ disabled={!canAction}
/>
@@ -435,6 +451,7 @@ export function NameserverModalContent({
}
value={description}
rows={3}
+ disabled={!canAction}
onChange={(e) => setDescription(e.target.value)}
/>
@@ -504,7 +521,7 @@ export function NameserverModalContent({
@@ -596,11 +616,13 @@ function NameserverInput({
value={port}
type={"number"}
onChange={handlePortChange}
+ disabled={disabled}
/>
diff --git a/src/modules/dns-nameservers/table/NameserverActionCell.tsx b/src/modules/dns-nameservers/table/NameserverActionCell.tsx
index 633efecc..b5d1777a 100644
--- a/src/modules/dns-nameservers/table/NameserverActionCell.tsx
+++ b/src/modules/dns-nameservers/table/NameserverActionCell.tsx
@@ -5,15 +5,17 @@ import { Trash2 } from "lucide-react";
import * as React from "react";
import { useSWRConfig } from "swr";
import { useDialog } from "@/contexts/DialogProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
import { NameserverGroup } from "@/interfaces/Nameserver";
type Props = {
ns: NameserverGroup;
};
-export default function NameserverActionCell({ ns }: Props) {
+export default function NameserverActionCell({ ns }: Readonly
) {
const { confirm } = useDialog();
const nsRequest = useApiCall("/dns/nameservers");
const { mutate } = useSWRConfig();
+ const { permission } = usePermissions();
const deleteRule = async () => {
notify({
@@ -41,7 +43,12 @@ export default function NameserverActionCell({ ns }: Props) {
return (
-