Add extra dns labels, remove routing restriction

netbirdio · Feb 21, 2025 · c832d07 · c832d07
1 parent 0524155
commit c832d07
Show file tree

Hide file tree

Showing 29 changed files with 602 additions and 190 deletions.
diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
@@ -23,7 +23,6 @@ import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
-import { getOperatingSystem } from "@hooks/useOperatingSystem";
 import useRedirect from "@hooks/useRedirect";
 import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
@@ -57,7 +56,6 @@ import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
@@ -107,14 +105,6 @@ function PeerOverview() {
       peer,
     });
 
-  /**
-   * Check the operating system of the peer, if it is linux, then show the routes table, otherwise hide it.
-   */
-  const isLinux = useMemo(() => {
-    const operatingSystem = getOperatingSystem(peer.os);
-    return operatingSystem == OperatingSystem.LINUX;
-  }, [peer.os]);
-
   /**
    * Detect if there are changes in the peer information, if there are changes, then enable the save button.
    */
@@ -331,7 +321,7 @@ function PeerOverview() {
           </div>
         </div>
 
-        {isLinux && !isUser ? (
+        {!isUser ? (
           <>
             <Separator />
             <PeerNetworkRoutesSection peer={peer} />
@@ -385,14 +375,20 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
 
         <Card.ListItem
           copy
-          copyText={"Domain name"}
+          copyText={"DNS label"}
           label={
             <>
               <Globe size={16} />
               Domain Name
             </>
           }
+          className={
+            peer?.extra_dns_labels && peer.extra_dns_labels.length > 0
+              ? "items-start"
+              : ""
+          }
           value={peer.dns_label}
+          extraText={peer?.extra_dns_labels}
         />
 
         <Card.ListItem

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -7,6 +7,7 @@ import React from "react";
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
+
 function Card({ children, className, ...props }: Props) {
   return (
     <div
@@ -32,6 +33,7 @@ type CardListItemProps = {
   copy?: boolean;
   copyText?: string;
   tooltip?: boolean;
+  extraText?: string[];
 };
 
 function CardListItem({
@@ -41,9 +43,8 @@ function CardListItem({
   copy = false,
   copyText,
   tooltip = true,
+  extraText = [],
 }: CardListItemProps) {
-  const [, copyToClipBoard] = useCopyToClipboard(value as string);
-
   return (
     <li
       className={cn(
@@ -52,29 +53,68 @@ function CardListItem({
       )}
     >
       <div className={"flex gap-2.5 items-center text-sm"}>{label}</div>
-      <div
-        className={cn(
-          "text-right text-nb-gray-400 text-sm flex items-center gap-2",
-          copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
-        )}
-        onClick={() =>
-          copy &&
-          copyToClipBoard(
-            `${copyText ? copyText : label} has been copied to clipboard.`,
-          )
-        }
-      >
-        {tooltip ? (
-          <TextWithTooltip text={value as string} maxChars={40} />
-        ) : (
-          value
-        )}
-        {copy && <Copy size={13} className={"shrink-0"} />}
+      <div className={"flex flex-col gap-2"}>
+        <CardTextItem
+          label={label}
+          value={value}
+          copy={copy}
+          copyText={copyText}
+          tooltip={tooltip}
+        />
+        {extraText?.map((extraLabel, index) => (
+          <CardTextItem
+            key={index}
+            label={label}
+            value={extraLabel}
+            copy={copy}
+            copyText={copyText}
+            tooltip={tooltip}
+          />
+        ))}
       </div>
     </li>
   );
 }
 
+type CardTextItemProps = {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  copy?: boolean;
+  copyText?: string;
+  tooltip?: boolean;
+};
+
+const CardTextItem = ({
+  label,
+  value,
+  copy = false,
+  copyText,
+  tooltip = true,
+}: CardTextItemProps) => {
+  const [, copyToClipBoard] = useCopyToClipboard(value as string);
+  return (
+    <div
+      className={cn(
+        "text-right text-nb-gray-400 text-sm flex items-center gap-2",
+        copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
+      )}
+      onClick={() =>
+        copy &&
+        copyToClipBoard(
+          `${copyText ? copyText : label} has been copied to clipboard.`,
+        )
+      }
+    >
+      {tooltip ? (
+        <TextWithTooltip text={value as string} maxChars={40} />
+      ) : (
+        value
+      )}
+      {copy && <Copy size={13} className={"shrink-0"} />}
+    </div>
+  );
+};
+
 Card.List = CardList;
 Card.ListItem = CardListItem;
 

diff --git a/src/components/CopyToClipboardText.tsx b/src/components/CopyToClipboardText.tsx
@@ -6,16 +6,26 @@ import useCopyToClipboard from "@/hooks/useCopyToClipboard";
 type Props = {
   children: React.ReactNode;
   message?: string;
+  iconAlignment?: "left" | "right";
+  className?: string;
+  alwaysShowIcon?: boolean;
 };
 
-export default function CopyToClipboardText({ children, message }: Props) {
+export default function CopyToClipboardText({
+  children,
+  message,
+  iconAlignment = "right",
+  className,
+  alwaysShowIcon = false,
+}: Props) {
   const [wrapper, copyToClipboard, copied] = useCopyToClipboard();
 
   return (
     <div
       className={cn(
         "flex gap-2 items-center group cursor-pointer transition-all hover:underline underline-offset-4 decoration-dashed decoration-nb-gray-600",
         !copied && "hover:opacity-90",
+        className,
       )}
       onClick={(e) => {
         e.stopPropagation();
@@ -28,17 +38,21 @@ export default function CopyToClipboardText({ children, message }: Props) {
 
       {copied ? (
         <CheckIcon
-          className={
-            "text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
-          }
-          size={12}
+          className={cn(
+            "text-nb-gray-100 group-hover:opacity-100 shrink-0",
+            iconAlignment === "left" ? "order-first" : "order-last",
+            !alwaysShowIcon && "opacity-0",
+          )}
+          size={11}
         />
       ) : (
         <CopyIcon
-          className={
-            "text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
-          }
-          size={12}
+          className={cn(
+            "text-nb-gray-100 group-hover:opacity-100 shrink-0",
+            iconAlignment === "left" ? "order-first" : "order-last",
+            !alwaysShowIcon && "opacity-0",
+          )}
+          size={11}
         />
       )}
     </div>

diff --git a/src/components/FancyToggleSwitch.tsx b/src/components/FancyToggleSwitch.tsx
@@ -58,12 +58,26 @@ export default function FancyToggleSwitch({
   className,
   variant = "default",
 }: Readonly<Props>) {
+  const handleToggle = () => {
+    if (disabled) return;
+    onChange(!value);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleToggle();
+    }
+  };
+
   return (
-    <button
-      onClick={() => {
-        if (disabled) return;
-        onChange(!value);
-      }}
+    <div
+      onClick={handleToggle}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+      role={"switch"}
+      aria-checked={value}
       className={cn(
         "cursor-pointer transition-all duration-300 relative z-[1]",
         "inline-block text-left w-full",
@@ -86,6 +100,6 @@ export default function FancyToggleSwitch({
         </div>
       </div>
       <div>{children && value ? children : null}</div>
-    </button>
+    </div>
   );
 }
diff --git a/src/components/FullTooltip.tsx b/src/components/FullTooltip.tsx
@@ -22,6 +22,8 @@ type Props = {
   keepOpen?: boolean;
   customOpen?: boolean;
   customOnOpenChange?: React.Dispatch<React.SetStateAction<boolean>>;
+  delayDuration?: number;
+  skipDelayDuration?: number;
 } & TooltipProps;
 export default function FullTooltip({
   children,
@@ -37,6 +39,8 @@ export default function FullTooltip({
   keepOpen = false,
   customOpen,
   customOnOpenChange,
+  delayDuration = 1,
+  skipDelayDuration = 300,
 }: Props) {
   const [open, setOpen] = useState(!!keepOpen);
 
@@ -46,9 +50,13 @@ export default function FullTooltip({
   };
 
   return !disabled ? (
-    <TooltipProvider disableHoverableContent={!interactive}>
+    <TooltipProvider
+      disableHoverableContent={!interactive}
+      delayDuration={delayDuration}
+      skipDelayDuration={skipDelayDuration}
+    >
       <Tooltip
-        delayDuration={1}
+        delayDuration={delayDuration}
         open={customOpen || open}
         onOpenChange={customOnOpenChange || handleOpen}
       >