Skip to content

Commit c832d07

Browse files
heisbrotheisbrot
committed
Add extra dns labels, remove routing restriction
1 parent 0524155 commit c832d07

29 files changed

+602
-190
lines changed

‎src/app/(dashboard)/peer/page.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import Separator from "@components/Separator";
2323
import FullScreenLoading from "@components/ui/FullScreenLoading";
2424
import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
2525
import TextWithTooltip from "@components/ui/TextWithTooltip";
26-
import { getOperatingSystem } from "@hooks/useOperatingSystem";
2726
import useRedirect from "@hooks/useRedirect";
2827
import useFetchApi from "@utils/api";
2928
import { cn } from "@utils/helpers";
@@ -57,7 +56,6 @@ import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
5756
import RoutesProvider from "@/contexts/RoutesProvider";
5857
import { useLoggedInUser } from "@/contexts/UsersProvider";
5958
import { useHasChanges } from "@/hooks/useHasChanges";
60-
import { OperatingSystem } from "@/interfaces/OperatingSystem";
6159
import type { Peer } from "@/interfaces/Peer";
6260
import PageContainer from "@/layouts/PageContainer";
6361
import useGroupHelper from "@/modules/groups/useGroupHelper";
@@ -107,14 +105,6 @@ function PeerOverview() {
107105
peer,
108106
});
109107

110-
/**
111-
* Check the operating system of the peer, if it is linux, then show the routes table, otherwise hide it.
112-
*/
113-
const isLinux = useMemo(() => {
114-
const operatingSystem = getOperatingSystem(peer.os);
115-
return operatingSystem == OperatingSystem.LINUX;
116-
}, [peer.os]);
117-
118108
/**
119109
* Detect if there are changes in the peer information, if there are changes, then enable the save button.
120110
*/
@@ -331,7 +321,7 @@ function PeerOverview() {
331321
</div>
332322
</div>
333323

334-
{isLinux && !isUser ? (
324+
{!isUser ? (
335325
<>
336326
<Separator />
337327
<PeerNetworkRoutesSection peer={peer} />
@@ -385,14 +375,20 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
385375

386376
<Card.ListItem
387377
copy
388-
copyText={"Domain name"}
378+
copyText={"DNS label"}
389379
label={
390380
<>
391381
<Globe size={16} />
392382
Domain Name
393383
</>
394384
}
385+
className={
386+
peer?.extra_dns_labels && peer.extra_dns_labels.length > 0
387+
? "items-start"
388+
: ""
389+
}
395390
value={peer.dns_label}
391+
extraText={peer?.extra_dns_labels}
396392
/>
397393

398394
<Card.ListItem

‎src/components/Card.tsx‎

Lines changed: 60 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import React from "react";
77
interface Props extends React.HTMLAttributes<HTMLDivElement> {
88
children: React.ReactNode;
99
}
10+
1011
function Card({ children, className, ...props }: Props) {
1112
return (
1213
<div
@@ -32,6 +33,7 @@ type CardListItemProps = {
3233
copy?: boolean;
3334
copyText?: string;
3435
tooltip?: boolean;
36+
extraText?: string[];
3537
};
3638

3739
function CardListItem({
@@ -41,9 +43,8 @@ function CardListItem({
4143
copy = false,
4244
copyText,
4345
tooltip = true,
46+
extraText = [],
4447
}: CardListItemProps) {
45-
const [, copyToClipBoard] = useCopyToClipboard(value as string);
46-
4748
return (
4849
<li
4950
className={cn(
@@ -52,29 +53,68 @@ function CardListItem({
5253
)}
5354
>
5455
<div className={"flex gap-2.5 items-center text-sm"}>{label}</div>
55-
<div
56-
className={cn(
57-
"text-right text-nb-gray-400 text-sm flex items-center gap-2",
58-
copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
59-
)}
60-
onClick={() =>
61-
copy &&
62-
copyToClipBoard(
63-
`${copyText ? copyText : label} has been copied to clipboard.`,
64-
)
65-
}
66-
>
67-
{tooltip ? (
68-
<TextWithTooltip text={value as string} maxChars={40} />
69-
) : (
70-
value
71-
)}
72-
{copy && <Copy size={13} className={"shrink-0"} />}
56+
<div className={"flex flex-col gap-2"}>
57+
<CardTextItem
58+
label={label}
59+
value={value}
60+
copy={copy}
61+
copyText={copyText}
62+
tooltip={tooltip}
63+
/>
64+
{extraText?.map((extraLabel, index) => (
65+
<CardTextItem
66+
key={index}
67+
label={label}
68+
value={extraLabel}
69+
copy={copy}
70+
copyText={copyText}
71+
tooltip={tooltip}
72+
/>
73+
))}
7374
</div>
7475
</li>
7576
);
7677
}
7778

79+
type CardTextItemProps = {
80+
label: React.ReactNode;
81+
value: React.ReactNode;
82+
copy?: boolean;
83+
copyText?: string;
84+
tooltip?: boolean;
85+
};
86+
87+
const CardTextItem = ({
88+
label,
89+
value,
90+
copy = false,
91+
copyText,
92+
tooltip = true,
93+
}: CardTextItemProps) => {
94+
const [, copyToClipBoard] = useCopyToClipboard(value as string);
95+
return (
96+
<div
97+
className={cn(
98+
"text-right text-nb-gray-400 text-sm flex items-center gap-2",
99+
copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
100+
)}
101+
onClick={() =>
102+
copy &&
103+
copyToClipBoard(
104+
`${copyText ? copyText : label} has been copied to clipboard.`,
105+
)
106+
}
107+
>
108+
{tooltip ? (
109+
<TextWithTooltip text={value as string} maxChars={40} />
110+
) : (
111+
value
112+
)}
113+
{copy && <Copy size={13} className={"shrink-0"} />}
114+
</div>
115+
);
116+
};
117+
78118
Card.List = CardList;
79119
Card.ListItem = CardListItem;
80120

‎src/components/CopyToClipboardText.tsx‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,26 @@ import useCopyToClipboard from "@/hooks/useCopyToClipboard";
66
type Props = {
77
children: React.ReactNode;
88
message?: string;
9+
iconAlignment?: "left" | "right";
10+
className?: string;
11+
alwaysShowIcon?: boolean;
912
};
1013

11-
export default function CopyToClipboardText({ children, message }: Props) {
14+
export default function CopyToClipboardText({
15+
children,
16+
message,
17+
iconAlignment = "right",
18+
className,
19+
alwaysShowIcon = false,
20+
}: Props) {
1221
const [wrapper, copyToClipboard, copied] = useCopyToClipboard();
1322

1423
return (
1524
<div
1625
className={cn(
1726
"flex gap-2 items-center group cursor-pointer transition-all hover:underline underline-offset-4 decoration-dashed decoration-nb-gray-600",
1827
!copied && "hover:opacity-90",
28+
className,
1929
)}
2030
onClick={(e) => {
2131
e.stopPropagation();
@@ -28,17 +38,21 @@ export default function CopyToClipboardText({ children, message }: Props) {
2838

2939
{copied ? (
3040
<CheckIcon
31-
className={
32-
"text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
33-
}
34-
size={12}
41+
className={cn(
42+
"text-nb-gray-100 group-hover:opacity-100 shrink-0",
43+
iconAlignment === "left" ? "order-first" : "order-last",
44+
!alwaysShowIcon && "opacity-0",
45+
)}
46+
size={11}
3547
/>
3648
) : (
3749
<CopyIcon
38-
className={
39-
"text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
40-
}
41-
size={12}
50+
className={cn(
51+
"text-nb-gray-100 group-hover:opacity-100 shrink-0",
52+
iconAlignment === "left" ? "order-first" : "order-last",
53+
!alwaysShowIcon && "opacity-0",
54+
)}
55+
size={11}
4256
/>
4357
)}
4458
</div>

‎src/components/FancyToggleSwitch.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,26 @@ export default function FancyToggleSwitch({
5858
className,
5959
variant = "default",
6060
}: Readonly<Props>) {
61+
const handleToggle = () => {
62+
if (disabled) return;
63+
onChange(!value);
64+
};
65+
66+
const handleKeyDown = (event: React.KeyboardEvent) => {
67+
if (disabled) return;
68+
if (event.key === "Enter" || event.key === " ") {
69+
event.preventDefault();
70+
handleToggle();
71+
}
72+
};
73+
6174
return (
62-
<button
63-
onClick={() => {
64-
if (disabled) return;
65-
onChange(!value);
66-
}}
75+
<div
76+
onClick={handleToggle}
77+
onKeyDown={handleKeyDown}
78+
tabIndex={-1}
79+
role={"switch"}
80+
aria-checked={value}
6781
className={cn(
6882
"cursor-pointer transition-all duration-300 relative z-[1]",
6983
"inline-block text-left w-full",
@@ -86,6 +100,6 @@ export default function FancyToggleSwitch({
86100
</div>
87101
</div>
88102
<div>{children && value ? children : null}</div>
89-
</button>
103+
</div>
90104
);
91105
}

‎src/components/FullTooltip.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ type Props = {
2222
keepOpen?: boolean;
2323
customOpen?: boolean;
2424
customOnOpenChange?: React.Dispatch<React.SetStateAction<boolean>>;
25+
delayDuration?: number;
26+
skipDelayDuration?: number;
2527
} & TooltipProps;
2628
export default function FullTooltip({
2729
children,
@@ -37,6 +39,8 @@ export default function FullTooltip({
3739
keepOpen = false,
3840
customOpen,
3941
customOnOpenChange,
42+
delayDuration = 1,
43+
skipDelayDuration = 300,
4044
}: Props) {
4145
const [open, setOpen] = useState(!!keepOpen);
4246

@@ -46,9 +50,13 @@ export default function FullTooltip({
4650
};
4751

4852
return !disabled ? (
49-
<TooltipProvider disableHoverableContent={!interactive}>
53+
<TooltipProvider
54+
disableHoverableContent={!interactive}
55+
delayDuration={delayDuration}
56+
skipDelayDuration={skipDelayDuration}
57+
>
5058
<Tooltip
51-
delayDuration={1}
59+
delayDuration={delayDuration}
5260
open={customOpen || open}
5361
onOpenChange={customOnOpenChange || handleOpen}
5462
>

0 commit comments

Comments
 (0)