Add new loading indicator

src/app/(dashboard)/reverse-proxy/self-hosted-proxies/layout.tsx

@@ -1,8 +0,0 @@
-import { globalMetaTitle } from "@utils/meta";
-import type { Metadata } from "next";
-import BlankLayout from "@/layouts/BlankLayout";
-
-export const metadata: Metadata = {
-  title: `Self-Hosted Proxies - Reverse Proxy - ${globalMetaTitle}`,
-};
-export default BlankLayout;

src/app/(dashboard)/reverse-proxy/self-hosted-proxies/page.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import Breadcrumbs from "@components/Breadcrumbs";
-import InlineLink from "@components/InlineLink";
-import Paragraph from "@components/Paragraph";
-import SkeletonTable from "@components/skeletons/SkeletonTable";
-import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
-import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
-import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
-import { usePermissions } from "@/contexts/PermissionsProvider";
-import { REVERSE_PROXY_CLUSTERS_DOCS_LINK } from "@/interfaces/ReverseProxy";
-import PageContainer from "@/layouts/PageContainer";
-
-const SelfHostedProxiesTable = lazy(
-  () =>
-    import(
-      "@/modules/reverse-proxy/self-hosted-proxies/SelfHostedProxiesTable"
-    ),
-);
-
-export default function ReverseProxyClustersPage() {
-  const { permission } = usePermissions();
-
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
-  return (
-    <PageContainer>
-      <div className={"p-default py-6"}>
-        <Breadcrumbs>
-          <Breadcrumbs.Item
-            href={"/reverse-proxy/services"}
-            label={"Reverse Proxy"}
-            icon={<ReverseProxyIcon size={16} />}
-          />
-          <Breadcrumbs.Item
-            href={"/reverse-proxy/self-hosted-proxies"}
-            label={"Self-Hosted Proxies"}
-            active={true}
-          />
-        </Breadcrumbs>
-        <h1 ref={headingRef}>Self-Hosted Proxies</h1>
-        <Paragraph>
-          Setup self-hosted proxies on your own infrastructure for full control
-          over traffic and geographic location.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
-          <InlineLink href={REVERSE_PROXY_CLUSTERS_DOCS_LINK} target={"_blank"}>
-            Self-Hosted Proxies
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-          in our documentation.
-        </Paragraph>
-      </div>
-      <RestrictedAccess
-        page={"Self-Hosted Proxies"}
-        hasAccess={permission?.services?.read}
-      >
-        <Suspense fallback={<SkeletonTable />}>
-          <SelfHostedProxiesTable headingTarget={portalTarget} />
-        </Suspense>
-      </RestrictedAccess>
-    </PageContainer>
-  );
-}

src/assets/icons/LoadingIcon.tsx

@@ -3,103 +3,36 @@ import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
 export default function LoadingIcon(props: IconProps) {
   return (
     <svg
-      width="135"
-      height="140"
-      viewBox="0 0 135 140"
+      viewBox="0 0 919 669"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      fillOpacity="0.8"
       {...iconProperties(props)}
     >
-      <rect y="10" width="15" height="120" rx="6">
-        <animate
-          attributeName="height"
-          begin="0.5s"
-          dur="1s"
-          values="120;110;100;90;80;70;60;50;40;140;120"
-          calcMode="linear"
-          repeatCount="indefinite"
+      <style>{`
+        @keyframes nb-loader-pulse {
+          0%, 100% { transform: scale(0.85); opacity: 0.35; }
+          50%      { transform: scale(1);    opacity: 1;    }
+        }
+        .nb-loader-bird {
+          animation: nb-loader-pulse 1.75s ease-in-out infinite;
+          transform-origin: 50% 50%;
+          transform-box: fill-box;
+        }
+      `}</style>
+      <g className={"nb-loader-bird"}>
+        <path
+          d="M653.25 0C542.297 10.255 487.216 74.132 466.346 106.359L456.959 122.609C456.311 123.963 455.886 124.865 455.886 124.865L455.774 124.685L142.056 668.021H533.256L918.947 0H653.25Z"
+          fill="#F68330"
         />
-        <animate
-          attributeName="y"
-          begin="0.5s"
-          dur="1s"
-          values="10;15;20;25;30;35;40;45;50;0;10"
-          calcMode="linear"
-          repeatCount="indefinite"
+        <path
+          d="M533.256 668.02L0 102.296C0 102.296 603.149 -59.6172 661.827 445.893L533.256 668.02Z"
+          fill="#F68330"
         />
-      </rect>
-      <rect x="30" y="10" width="15" height="120" rx="6">
-        <animate
-          attributeName="height"
-          begin="0.25s"
-          dur="1s"
-          values="120;110;100;90;80;70;60;50;40;140;120"
-          calcMode="linear"
-          repeatCount="indefinite"
+        <path
+          d="M454.3 127.229L290.658 410.664L533.256 668.02L661.757 445.475C641.46 271.63 556.721 176.843 454.3 127.229Z"
+          fill="#F35E32"
         />
-        <animate
-          attributeName="y"
-          begin="0.25s"
-          dur="1s"
-          values="10;15;20;25;30;35;40;45;50;0;10"
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-      </rect>
-      <rect x="60" width="15" height="140" rx="6">
-        <animate
-          attributeName="height"
-          begin="0s"
-          dur="1s"
-          values="120;110;100;90;80;70;60;50;40;140;120"
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-        <animate
-          attributeName="y"
-          begin="0s"
-          dur="1s"
-          values="10;15;20;25;30;35;40;45;50;0;10"
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-      </rect>
-      <rect x="90" y="10" width="15" height="120" rx="6">
-        <animate
-          attributeName="height"
-          begin="0.25s"
-          dur="1s"
-          values="120;110;100;90;80;70;60;50;40;140;120"
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-        <animate
-          attributeName="y"
-          begin="0.25s"
-          dur="1s"
-          values="10;15;20;25;30;35;40;45;50;0;10"
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-      </rect>
-      <rect x="120" y="10" width="15" height="120" rx="6">
-        <animate
-          attributeName="height"
-          begin="0.5s"
-          dur="1s"
-          values="120;110;100;90;80;70;60;50;40;140;120"
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-        <animate
-          attributeName="y"
-          begin="0.5s"
-          dur="1s"
-          values="10;15;20;25;30;35;40;45;50;0;10"
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-      </rect>
+      </g>
     </svg>
   );
-}
+}

src/components/CardTable.tsx

@@ -1,129 +0,0 @@
-import useCopyToClipboard from "@hooks/useCopyToClipboard";
-import { cn } from "@utils/helpers";
-import { Copy } from "lucide-react";
-import React from "react";
-
-type CardTableProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-function CardTable({ children, className }: CardTableProps) {
-  return (
-    <div
-      className={cn(
-        "bg-nb-gray-940 rounded-md border border-nb-gray-900 w-full overflow-hidden",
-        className,
-      )}
-    >
-      <table className={"w-full border-collapse text-sm"}>{children}</table>
-    </div>
-  );
-}
-
-function CardTableHeader({ children, className }: CardTableProps) {
-  return (
-    <thead>
-      <tr
-        className={cn(
-          "border-b border-nb-gray-900",
-          className,
-        )}
-      >
-        {children}
-      </tr>
-    </thead>
-  );
-}
-
-type CardTableHeaderCellProps = {
-  children: React.ReactNode;
-  width?: number;
-  className?: string;
-};
-
-function CardTableHeaderCell({
-  children,
-  width,
-  className,
-}: CardTableHeaderCellProps) {
-  return (
-    <th
-      className={cn(
-        "px-4 py-2.5 text-left text-sm font-normal",
-        className,
-      )}
-      style={width ? { width } : undefined}
-    >
-      {children}
-    </th>
-  );
-}
-
-function CardTableBody({ children, className }: CardTableProps) {
-  return <tbody className={className}>{children}</tbody>;
-}
-
-type CardTableRowProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-function CardTableRow({ children, className }: CardTableRowProps) {
-  return (
-    <tr
-      className={cn(
-        "border-b border-nb-gray-900 last:border-b-0",
-        className,
-      )}
-    >
-      {children}
-    </tr>
-  );
-}
-
-type CardTableCellProps = {
-  children: React.ReactNode;
-  copy?: boolean;
-  copyText?: string;
-  width?: number;
-  className?: string;
-};
-
-function CardTableCell({
-  children,
-  copy = false,
-  copyText,
-  width,
-  className,
-}: CardTableCellProps) {
-  const [, copyToClipBoard] = useCopyToClipboard(copyText ?? "");
-  return (
-    <td
-      className={cn("px-4 py-3", className)}
-      style={width ? { width } : undefined}
-    >
-      <div
-        className={cn(
-          "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} has been copied to clipboard.`)
-        }
-      >
-        {children}
-        {copy && <Copy size={13} className={"shrink-0"} />}
-      </div>
-    </td>
-  );
-}
-
-CardTable.Header = CardTableHeader;
-CardTable.HeaderCell = CardTableHeaderCell;
-CardTable.Body = CardTableBody;
-CardTable.Row = CardTableRow;
-CardTable.Cell = CardTableCell;
-
-export default CardTable;

src/components/ui/FullScreenLoading.tsx

@@ -12,7 +12,7 @@ export default function FullScreenLoading({ fullScreen = true }: Props) {
         fullScreen && "h-screen",
       )}
     >
-      <LoadingIcon className="fill-netbird" size={44} />
+      <LoadingIcon className="fill-netbird" size={68} />
     </div>
   );
 }

src/contexts/ReverseProxiesProvider.tsx

@@ -2,7 +2,6 @@
 
 import { notify } from "@components/Notification";
 import useFetchApi, { useApiCall } from "@utils/api";
-import { wrapIPv6 } from "@utils/ip";
 import React, {
   createContext,
   useCallback,
@@ -16,7 +15,6 @@ import { Network, NetworkResource } from "@/interfaces/Network";
 import { Peer } from "@/interfaces/Peer";
 import {
   ReverseProxy,
-  ReverseProxyCluster,
   ReverseProxyDomain,
   ReverseProxyFlatTarget,
   ReverseProxyTarget,
@@ -25,7 +23,6 @@ import {
 } from "@/interfaces/ReverseProxy";
 import ReverseProxyModal from "@/modules/reverse-proxy/ReverseProxyModal";
 import ReverseProxyTargetModal from "@/modules/reverse-proxy/targets/ReverseProxyTargetModal";
-import { usePermissions } from "@/contexts/PermissionsProvider";
 
 type ReverseProxiesContextValue = {
   reverseProxies: ReverseProxy[] | undefined;
@@ -54,9 +51,6 @@ type ReverseProxiesContextValue = {
     domain: string,
     targetCluster: string,
   ) => Promise<ReverseProxyDomain>;
-  clusters: ReverseProxyCluster[] | undefined;
-  isClustersLoading: boolean;
-  isSelfHostedCluster: (clusterAddress?: string) => boolean;
 };
 
 type OpenModalOptions = {
@@ -96,14 +90,10 @@ export default function ReverseProxiesProvider({
 }: Readonly<Props>) {
   const { mutate } = useSWRConfig();
   const { confirm } = useDialog();
-  const { permission } = usePermissions();
 
   // Reverse Proxies
   const { data: rawReverseProxies, isLoading } = useFetchApi<ReverseProxy[]>(
     "/reverse-proxies/services",
-    false,
-    true,
-    permission?.services.read,
   );
   const request = useApiCall<ReverseProxy>("/reverse-proxies/services", true);
 
@@ -111,9 +101,6 @@ export default function ReverseProxiesProvider({
   const { data: peers } = useFetchApi<Peer[]>("/peers");
   const { data: resources } = useFetchApi<NetworkResource[]>(
     "/networks/resources",
-    false,
-    true,
-    permission?.services.read,
   );
 
   const resolveDestination = useCallback(
@@ -138,25 +125,12 @@ export default function ReverseProxiesProvider({
   // Domains
   const { data: domains, isLoading: isLoadingDomains } = useFetchApi<
     ReverseProxyDomain[]
-  >("/reverse-proxies/domains", false, true, permission.services?.read);
+  >("/reverse-proxies/domains");
   const domainRequest = useApiCall<ReverseProxyDomain>(
     "/reverse-proxies/domains",
     true,
   );
 
-  // Clusters
-  const { data: clusters, isLoading: isClustersLoading } = useFetchApi<
-    ReverseProxyCluster[]
-  >("/reverse-proxies/clusters", false, true, permission.services?.read);
-
-  const isSelfHostedCluster = useCallback(
-    (clusterAddress?: string) => {
-      if (!clusterAddress) return false;
-      return !!clusters?.find((c) => c.address === clusterAddress)?.self_hosted;
-    },
-    [clusters],
-  );
-
   const [modalOpen, setModalOpen] = useState(false);
   const [currentProxy, setCurrentProxy] = useState<ReverseProxy | undefined>();
   const [initialTab, setInitialTab] = useState<string | undefined>();
@@ -509,9 +483,6 @@ export default function ReverseProxiesProvider({
         createDomain,
         validateDomain,
         deleteDomain,
-        clusters,
-        isClustersLoading,
-        isSelfHostedCluster,
       }}
     >
       {children}
@@ -633,7 +604,7 @@ function formatTargetDestination(
   target: ReverseProxyTarget,
   resolvedHost?: string,
 ): string {
-  const host = wrapIPv6(target.host || resolvedHost || "localhost");
+  const host = target.host || resolvedHost || "localhost";
   const isDefault =
     (target.protocol === "http" && target.port === 80) ||
     (target.protocol === "https" && target.port === 443) ||

src/interfaces/Account.ts

@@ -28,7 +28,6 @@ export interface Account {
     auto_update_version: string;
     auto_update_always: boolean;
     local_auth_disabled?: boolean;
-    local_mfa_enabled?: boolean;
     ipv6_enabled_groups?: string[];
     network_range_v6?: string;
   };

src/interfaces/ReverseProxy.ts

@@ -15,7 +15,6 @@ export interface ReverseProxy {
   proxy_cluster?: string;
   targets: ReverseProxyTarget[];
   enabled: boolean;
-  terminated?: boolean;
   pass_host_header?: boolean;
   rewrite_redirects?: boolean;
   auth?: ReverseProxyAuth;
@@ -163,24 +162,6 @@ export interface ReverseProxyEvent {
   metadata?: Record<string, string>;
 }
 
-export interface ReverseProxyCluster {
-  id?: string;
-  address: string;
-  connected_proxies: number;
-  self_hosted: boolean;
-}
-
-export interface ReverseProxyClusterToken {
-  id?: string;
-  name: string;
-  plain_token?: string;
-  expires_at?: string;
-  expires_in?: number;
-  created_at?: string;
-  last_used?: string;
-  revoked?: boolean;
-}
-
 export function isL4Event(event: ReverseProxyEvent): boolean {
   return (
     event.protocol === EventProtocol.TCP ||

src/layouts/Navigation.tsx

@@ -37,7 +37,6 @@ export default function Navigation({
 
   return (
     <div
-      data-navigation
       className={cn(
         "whitespace-nowrap md:border-r dark:border-zinc-700/40 bg-gray-50 dark:bg-nb-gray relative group/navigation transition-all",
         hideOnMobile ? "hidden md:block" : "",

src/modules/networks/resources/NetworkResourceModal.tsx

@@ -19,7 +19,6 @@ import { HelpTooltip } from "@components/HelpTooltip";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { useApiCall } from "@utils/api";
-import { normalizeHostCIDR } from "@utils/ip";
 import { useDialog } from "@/contexts/DialogProvider";
 import { usePolicies } from "@/contexts/PoliciesProvider";
 import { useNetworksContext } from "@/modules/networks/NetworkProvider";
@@ -173,7 +172,7 @@ export function ResourceModalContent({
     const promise = create({
       name,
       description,
-      address: normalizeHostCIDR(address),
+      address,
       groups: savedGroups ? savedGroups.map((g) => g.id) : undefined,
       enabled,
     }).then(async (r) => {
@@ -197,7 +196,7 @@ export function ResourceModalContent({
     const promise = update({
       name,
       description,
-      address: normalizeHostCIDR(address),
+      address,
       groups: savedGroups ? savedGroups.map((g) => g.id) : undefined,
       enabled,
     }).then(async (r) => {

src/modules/networks/resources/ResourceSingleAddressInput.tsx

@@ -58,7 +58,7 @@ export const ResourceSingleAddressInput = ({
 
     // Case 2: If it's not a valid domain, check if it's a valid CIDR
     if (!cidr.isValidAddress(value)) {
-      return "Please enter a valid IP or CIDR, e.g., 10.0.0.21, 192.168.1.0/24, 2001:db8::1 or 2001:db8::/64";
+      return "Please enter a valid IP or CIDR, e.g., 10.0.0.21, 192.168.1.0/24";
     }
 
     return ""; // Valid CIDR

src/modules/onboarding/networks/OnboardingAddResource.tsx

@@ -2,7 +2,6 @@ import Button from "@components/Button";
 import { notify } from "@components/Notification";
 import { RadioCard, RadioCardGroup } from "@components/RadioCard";
 import { useApiCall } from "@utils/api";
-import { normalizeHostCIDR } from "@utils/ip";
 import { GlobeIcon, NetworkIcon, WorkflowIcon } from "lucide-react";
 import * as React from "react";
 import { useMemo, useState } from "react";
@@ -68,7 +67,7 @@ export const OnboardingAddResource = ({
           {
             name: resourceType === "subnet" ? "My Subnet" : "My Resource",
             description: "Created during onboarding",
-            address: normalizeHostCIDR(resourceAddress),
+            address: resourceAddress,
             enabled: true,
             groups: [],
           },
@@ -179,15 +178,15 @@ export const OnboardingAddResource = ({
 
   const description = useMemo(() => {
     if (resourceType === "ip")
-      return "Enter a single IPv4 or IPv6 address of your resource";
+      return "Enter a single IPv4 address of your resource";
     if (resourceType === "subnet") return "Enter a CIDR range of your network";
     if (resourceType === "domain")
       return "Enter a domain name of your resource";
   }, [resourceType]);
 
   const placeholder = useMemo(() => {
-    if (resourceType === "ip") return "e.g., 192.168.31.45 or 2001:db8::1";
-    if (resourceType === "subnet") return "e.g., 192.168.1.0/24 or 2001:db8::/64";
+    if (resourceType === "ip") return "e.g., 192.168.31.45";
+    if (resourceType === "subnet") return "e.g., 192.168.1.0/24";
     if (resourceType === "domain")
       return "e.g., service.internal or *.services.internal";
   }, [resourceType]);
@@ -212,13 +211,13 @@ export const OnboardingAddResource = ({
             value={"ip"}
             title={"Single IP Address"}
             icon={<WorkflowIcon size={12} />}
-            description={"IPv4 or IPv6 address like 192.168.31.45"}
+            description={"IPv4 address like 192.168.31.45"}
           />
           <RadioCard
             value={"subnet"}
             title={"Entire Subnet"}
             icon={<NetworkIcon size={12} />}
-            description={"CIDR range like 192.168.0.0/24 or 2001:db8::/64"}
+            description={"CIDR range like 192.168.0.0/24"}
           />
           <RadioCard
             value={"domain"}

src/modules/onboarding/networks/OnboardingTestResource.tsx

@@ -32,9 +32,8 @@ export const OnboardingTestResource = ({
 
   const pingAddress = useMemo(() => {
     let a = resource?.address || "";
-    if (isHost) {
-      if (a.endsWith("/32")) a = a.slice(0, -3);
-      else if (a.endsWith("/128")) a = a.slice(0, -4);
+    if (isHost && a.endsWith("/32")) {
+      a = a.slice(0, -3);
     }
     if (isWildCard) return `(any subdomain of ${a})`;
     return isSubnet ? `(resource ip in your subnet)` : a;

src/modules/reverse-proxy/ReverseProxyAccessControlRules.tsx

@@ -4,7 +4,6 @@ import HelpText from "@components/HelpText";
 import Button from "@components/Button";
 import { Input } from "@components/Input";
 import cidr from "ip-cidr";
-import { isIPv6 } from "@utils/ip";
 import {
   FlagIcon,
   MinusCircleIcon,
@@ -181,17 +180,13 @@ type Props = {
 function validateRule(rule: AccessRule): string {
   if (rule.type === "country" || !rule.value) return "";
   if (rule.type === "ip") {
-    let val = rule.value;
-    if (!val.includes("/")) {
-      const suffix = isIPv6(val) ? 128 : 32;
-      val = `${val}/${suffix}`;
-    }
+    const val = rule.value.includes("/") ? rule.value : `${rule.value}/32`;
     if (!cidr.isValidAddress(val)) {
-      return "Please enter a valid IP address, e.g., 85.203.15.42 or 2001:db8::1";
+      return "Please enter a valid IP address, e.g., 85.203.15.42";
     }
   } else {
     if (!rule.value.includes("/") || !cidr.isValidAddress(rule.value)) {
-      return "Please enter a valid CIDR block, e.g., 74.125.0.0/16 or 2001:db8::/64";
+      return "Please enter a valid CIDR block, e.g., 74.125.0.0/16";
     }
   }
   return "";
@@ -317,8 +312,8 @@ export const ReverseProxyAccessControlRules = ({
                   <Input
                     placeholder={
                       rule.type === "ip"
-                        ? "e.g., 85.203.15.42 or 2001:db8::1"
-                        : "e.g., 74.125.0.0/16 or 2001:db8::/64"
+                        ? "e.g., 85.203.15.42"
+                        : "e.g., 74.125.0.0/16"
                     }
                     value={rule.value}
                     onChange={(e) =>

src/modules/reverse-proxy/domain/CustomDomainSelector.tsx

@@ -10,7 +10,6 @@ import { useMemo } from "react";
 import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
 import { ReverseProxyDomainType } from "@/interfaces/ReverseProxy";
 import { isNetBirdHosted } from "@utils/netbird";
-import TruncatedText from "@components/ui/TruncatedText";
 
 interface DomainSelectorProps {
   value: string;
@@ -26,7 +25,7 @@ export function CustomDomainSelector({
   className,
 }: DomainSelectorProps) {
   const router = useRouter();
-  const { domains, isSelfHostedCluster } = useReverseProxies();
+  const { domains } = useReverseProxies();
 
   const options: SelectOption[] = useMemo(() => {
     const opts: SelectOption[] = [];
@@ -35,20 +34,15 @@ export function CustomDomainSelector({
     domains
       ?.filter((d) => d.type === ReverseProxyDomainType.FREE)
       .forEach((domain) => {
-        const isSelfHosted = isSelfHostedCluster(
-          domain?.target_cluster ?? domain?.domain,
-        );
         opts.push({
           value: domain.domain,
           label: `.${domain.domain}`,
           renderItem: () => (
             <div className="flex items-center gap-2 w-full text-sm justify-between">
               <div className="flex items-center gap-2">
-                <TruncatedText text={`.${domain.domain}`} maxWidth={"260px"} />
+                <span>.{domain.domain}</span>
               </div>
-              {isSelfHosted ? (
-                <SmallBadge text="Self-hosted" variant="sky" size="md" />
-              ) : isNetBirdHosted() ? (
+              {isNetBirdHosted() ? (
                 <SmallBadge text="Free" variant="green" size="md" />
               ) : (
                 <SmallBadge text="Cluster" variant="green" size="md" />
@@ -89,7 +83,7 @@ export function CustomDomainSelector({
     });
 
     return opts;
-  }, [domains, isSelfHostedCluster]);
+  }, [domains]);
 
   const handleChange = (selectedValue: string) => {
     if (selectedValue === "add_custom") {
@@ -104,7 +98,7 @@ export function CustomDomainSelector({
       value={value}
       onChange={handleChange}
       options={options}
-      popoverWidth={380}
+      popoverWidth={335}
       showSearch={true}
       searchPlaceholder="Search domains..."
       disabled={disabled}

src/modules/reverse-proxy/domain/CustomDomainsTable.tsx

@@ -146,7 +146,7 @@ export default function CustomDomainsTable({ headingTarget }: Readonly<Props>) {
           <GetStartedTest
             icon={
               <SquareIcon
-                icon={<GlobeIcon className={"text-nb-gray-200"} size={20} />}
+                icon={<GlobeIcon className={"fill-nb-gray-200"} size={20} />}
                 color={"gray"}
                 size={"large"}
               />

src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx

@@ -1,6 +1,5 @@
 import CopyToClipboardText from "@components/CopyToClipboardText";
 import TruncatedText from "@components/ui/TruncatedText";
-import { wrapIPv6 } from "@utils/ip";
 import * as React from "react";
 import {
   isL4Event,
@@ -33,10 +32,9 @@ export const ReverseProxyEventsUrlCell = ({ event, service }: Props) => {
   const isL4 = isL4Event(event);
   const listenPort = service?.listen_port;
 
-  const wrappedHost = wrapIPv6(event.host || "");
   const hostWithPort =
-    isL4 && listenPort ? `${wrappedHost}:${listenPort}` : wrappedHost || "-";
-  const fullUrl = isL4 ? hostWithPort : `${wrappedHost}${event.path}`;
+    isL4 && listenPort ? `${event.host}:${listenPort}` : event.host || "-";
+  const fullUrl = isL4 ? hostWithPort : `${event.host}${event.path}`;
 
   return (
     <TruncatedText
@@ -53,7 +51,7 @@ export const ReverseProxyEventsUrlCell = ({ event, service }: Props) => {
     >
       <CopyToClipboardText message={"URL has been copied to your clipboard"}>
         <span className="font-mono text-[0.82rem] whitespace-nowrap">
-          <span className="text-nb-gray-200">{wrappedHost}</span>
+          <span className="text-nb-gray-200">{event.host}</span>
           {isL4 && listenPort && (
             <span className="text-nb-gray-300">:{listenPort}</span>
           )}

src/modules/reverse-proxy/self-hosted-proxies/SelfHostedProxiesActionCell.tsx

@@ -1,60 +0,0 @@
-import Button from "@components/Button";
-import { notify } from "@components/Notification";
-import { useApiCall } from "@utils/api";
-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 { ReverseProxyCluster } from "@/interfaces/ReverseProxy";
-
-type Props = {
-  cluster: ReverseProxyCluster;
-};
-
-export default function SelfHostedProxiesActionCell({
-  cluster,
-}: Readonly<Props>) {
-  const { confirm } = useDialog();
-  const request = useApiCall<ReverseProxyCluster>("/reverse-proxies/clusters");
-  const { mutate } = useSWRConfig();
-  const { permission } = usePermissions();
-
-  const handleDelete = async () => {
-    const choice = await confirm({
-      title: `Delete '${cluster.address}'?`,
-      description:
-        "Are you sure you want to delete this proxy cluster? This action cannot be undone.",
-      confirmText: "Delete",
-      cancelText: "Cancel",
-      type: "danger",
-      maxWidthClass: "max-w-md",
-    });
-    if (!choice) return;
-
-    notify({
-      title: cluster.address,
-      description: "Proxy cluster was successfully deleted",
-      promise: request
-        .del({}, `/${encodeURIComponent(cluster.address)}`)
-        .then(() => {
-          mutate("/reverse-proxies/clusters");
-        }),
-      loadingMessage: "Deleting the proxy cluster...",
-    });
-  };
-
-  return (
-    <div className={"flex justify-end pr-4"}>
-      <Button
-        variant={"danger-outline"}
-        size={"sm"}
-        onClick={handleDelete}
-        disabled={!permission?.services?.delete}
-      >
-        <Trash2 size={16} />
-        Delete
-      </Button>
-    </div>
-  );
-}

src/modules/reverse-proxy/self-hosted-proxies/SelfHostedProxiesConnectedCell.tsx

@@ -1,25 +0,0 @@
-import Badge from "@components/Badge";
-import { Server } from "lucide-react";
-import { ReverseProxyCluster } from "@/interfaces/ReverseProxy";
-
-type Props = {
-  cluster: ReverseProxyCluster;
-};
-
-export default function SelfHostedProxiesConnectedCell({
-  cluster,
-}: Readonly<Props>) {
-  const count = cluster.connected_proxies;
-  return (
-    <div className="flex items-center w-full">
-      <Badge variant={"gray"}>
-        <Server size={11} className={"relative -top-[0.5px]"} />
-        <div>
-          <span className="font-medium text-xs">
-            {count > 0 ? count : "No Proxies Connected"}
-          </span>
-        </div>
-      </Badge>
-    </div>
-  );
-}

src/modules/reverse-proxy/self-hosted-proxies/SelfHostedProxiesModal.tsx

@@ -1,339 +0,0 @@
-import Button from "@components/Button";
-import { Callout } from "@components/Callout";
-import { notify } from "@components/Notification";
-import CardTable from "@components/CardTable";
-import Code from "@components/Code";
-import HelpText from "@components/HelpText";
-import { Input } from "@components/Input";
-import { Label } from "@components/Label";
-import InlineLink from "@components/InlineLink";
-import {
-  Modal,
-  ModalClose,
-  ModalContent,
-  ModalFooter,
-} from "@components/modal/Modal";
-import Paragraph from "@components/Paragraph";
-import ModalHeader from "@components/modal/ModalHeader";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
-import {
-  ExternalLinkIcon,
-  GlobeIcon,
-  ListIcon,
-  Loader2,
-  ServerIcon,
-  SquareTerminalIcon,
-} from "lucide-react";
-import React, { useCallback, useMemo, useState } from "react";
-import { useSWRConfig } from "swr";
-import { useApiCall } from "@/utils/api";
-import { cn, validator } from "@utils/helpers";
-import { GRPC_API_ORIGIN, isNetBirdHosted } from "@/utils/netbird";
-import {
-  REVERSE_PROXY_CLUSTERS_DOCS_LINK,
-  ReverseProxyClusterToken,
-} from "@/interfaces/ReverseProxy";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-};
-
-export const SelfHostedProxiesModal = ({ open, onOpenChange }: Props) => {
-  const { mutate } = useSWRConfig();
-  const [tab, setTab] = useState("domain");
-  const [domain, setDomain] = useState("");
-  const [token, setToken] = useState("");
-  const [isGeneratingToken, setIsGeneratingToken] = useState(true);
-
-  const tokenRequest = useApiCall<ReverseProxyClusterToken>(
-    "/reverse-proxies/proxy-tokens",
-  );
-
-  const domainError = useMemo(() => {
-    if (!domain) return "";
-    const isValid = validator.isValidDomain(domain, {
-      allowWildcard: false,
-      allowOnlyTld: false,
-      preventLeadingAndTrailingDots: true,
-    });
-    if (!isValid) {
-      return "Please enter a valid TLD domain, e.g., company.com";
-    }
-    return "";
-  }, [domain]);
-
-  const managementUrl = isNetBirdHosted()
-    ? "https://api.netbird.io"
-    : GRPC_API_ORIGIN || "";
-
-  const dockerCommand = `docker run -d \\
- -v /var/lib/certs:/certs \\
- -e NB_PROXY_CERTIFICATE_DIRECTORY=/certs \\
- -e NB_PROXY_ALLOW_INSECURE=true \\
- -e NB_PROXY_MANAGEMENT_ADDRESS=${managementUrl} \\
- -e NB_PROXY_ACME_CERTIFICATES=true \\
- -e NB_PROXY_DOMAIN=${domain} \\
- -e NB_PROXY_LOG_LEVEL=info \\
- -e NB_PROXY_TOKEN=${token || "<TOKEN>"} \\
- -p 80:80 -p 443:443 \\
- netbirdio/reverse-proxy:latest`;
-
-  const generateToken = useCallback(async () => {
-    setIsGeneratingToken(true);
-    const promise = tokenRequest
-      .post({
-        name: domain,
-        expires_in: 0,
-      })
-      .then((res) => {
-        setToken(res?.plain_token ?? "");
-      })
-      .finally(() => {
-        setIsGeneratingToken(false);
-      });
-
-    notify({
-      title: "Proxy Token",
-      description: "Failed to generate proxy token",
-      promise,
-      loadingMessage: "Generating proxy token...",
-      showOnlyError: true,
-      preventSuccessToast: true,
-    });
-    return promise;
-  }, [domain, tokenRequest]);
-
-  const goToInstall = useCallback(() => {
-    setTab("install");
-    if (!token) generateToken();
-  }, [token, generateToken]);
-
-  const finishSetup = () => {
-    onOpenChange(false);
-    mutate("/reverse-proxies/clusters");
-  };
-
-  return (
-    <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent maxWidthClass={"relative max-w-[600px]"} showClose={true}>
-        <ModalHeader
-          icon={<ServerIcon size={16} />}
-          title={"Setup Proxy"}
-          description={"Setup a self-hosted reverse proxy"}
-          color={"netbird"}
-        />
-
-        <Tabs
-          value={tab}
-          onValueChange={(v) => (v === "install" ? goToInstall() : setTab(v))}
-        >
-          <TabsList justify={"start"} className={"px-8"}>
-            <TabsTrigger value={"domain"}>
-              <GlobeIcon size={14} />
-              Domain
-            </TabsTrigger>
-            <TabsTrigger
-              value={"dns"}
-              disabled={!domain.trim() || !!domainError}
-            >
-              <ListIcon size={14} />
-              DNS Records
-            </TabsTrigger>
-            <TabsTrigger
-              value={"install"}
-              disabled={!domain.trim() || !!domainError}
-            >
-              <SquareTerminalIcon size={14} />
-              Run the Proxy
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value={"domain"} className={"pb-8"}>
-            <div className={"px-8 flex flex-col gap-6"}>
-              <div>
-                <Label>Domain</Label>
-                <HelpText>
-                  Enter a domain name that will be used for your proxy.
-                </HelpText>
-                <Input
-                  autoFocus={true}
-                  placeholder={"e.g., proxy.company.com"}
-                  value={domain}
-                  error={domainError}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setDomain(e.target.value)
-                  }
-                />
-              </div>
-              <Callout variant={"info"}>
-                In order to run the proxy, please make sure your machine meets
-                the following requirements:
-                <ul className={"list-disc pl-4 mt-2 flex flex-col gap-1"}>
-                  <li>
-                    <span className={"text-white font-medium"}>
-                      Publicly accessible IP address
-                    </span>
-                  </li>
-                  <li>
-                    <span className={"text-white font-medium"}>Docker</span>{" "}
-                    installed and running
-                  </li>
-                  <li>
-                    <span className={"text-white font-medium"}>
-                      Port 80 and 443
-                    </span>{" "}
-                    open and not in use
-                  </li>
-                </ul>
-              </Callout>
-            </div>
-          </TabsContent>
-
-          <TabsContent value={"dns"} className={"pb-8"}>
-            <div className={"px-8 flex flex-col"}>
-              <div>
-                <Label>Configure DNS</Label>
-                <HelpText>
-                  Add the following DNS records pointing to your machine&apos;s
-                  public IP address.
-                </HelpText>
-              </div>
-              <CardTable>
-                <CardTable.Header>
-                  <CardTable.HeaderCell width={120}>Type</CardTable.HeaderCell>
-                  <CardTable.HeaderCell>Name</CardTable.HeaderCell>
-                  <CardTable.HeaderCell>Content</CardTable.HeaderCell>
-                </CardTable.Header>
-                <CardTable.Body>
-                  <CardTable.Row>
-                    <CardTable.Cell>A Record</CardTable.Cell>
-                    <CardTable.Cell copy copyText={domain}>
-                      {domain}
-                    </CardTable.Cell>
-                    <CardTable.Cell className={"italic"}>
-                      Your machine&apos;s IP
-                    </CardTable.Cell>
-                  </CardTable.Row>
-                  <CardTable.Row>
-                    <CardTable.Cell>A Record</CardTable.Cell>
-                    <CardTable.Cell copy copyText={`*.${domain}`}>
-                      {`*.${domain}`}
-                    </CardTable.Cell>
-                    <CardTable.Cell className={"italic"}>
-                      Your machine&apos;s IP
-                    </CardTable.Cell>
-                  </CardTable.Row>
-                </CardTable.Body>
-              </CardTable>
-            </div>
-          </TabsContent>
-
-          <TabsContent value={"install"} className={"pb-8"}>
-            <div className={"px-8 flex flex-col"}>
-              <div>
-                <Label>Run the Proxy with Docker</Label>
-                <HelpText>
-                  Run the following command on your machine to start the proxy.
-                </HelpText>
-              </div>
-              <Code
-                codeToCopy={dockerCommand}
-                className={cn(
-                  "overflow-hidden",
-                  isGeneratingToken && "!border-nb-gray-930",
-                )}
-                showCopyIcon={!isGeneratingToken}
-              >
-                {isGeneratingToken && (
-                  <div className="absolute inset-0 z-10 flex items-center justify-center gap-2 text-nb-gray-100 bg-nb-gray-950/90">
-                    <Loader2 size={16} className="animate-spin" />
-                    Generating proxy token...
-                  </div>
-                )}
-
-                <Code.Line>docker run -d \</Code.Line>
-                <Code.Line> -v /var/lib/certs:/certs \</Code.Line>
-                <Code.Line>
-                  {" "}
-                  -e NB_PROXY_CERTIFICATE_DIRECTORY=/certs \
-                </Code.Line>
-                <Code.Line> -e NB_PROXY_ALLOW_INSECURE=true \</Code.Line>
-                <Code.Line>
-                  {" "}
-                  -e NB_PROXY_MANAGEMENT_ADDRESS=
-                  <span className={"text-netbird"}>{managementUrl}</span> \
-                </Code.Line>
-                <Code.Line> -e NB_PROXY_ACME_CERTIFICATES=true \</Code.Line>
-                <Code.Line>
-                  {" "}
-                  -e NB_PROXY_DOMAIN=
-                  <span className={"text-netbird"}>{domain}</span> \
-                </Code.Line>
-                <Code.Line> -e NB_PROXY_LOG_LEVEL=info \</Code.Line>
-                <Code.Line>
-                  {" "}
-                  -e NB_PROXY_TOKEN=
-                  <span className={"text-netbird"}>{token || "<TOKEN>"}</span> \
-                </Code.Line>
-                <Code.Line> -p 80:80 -p 443:443 \</Code.Line>
-                <Code.Line> netbirdio/reverse-proxy:latest</Code.Line>
-              </Code>
-            </div>
-          </TabsContent>
-        </Tabs>
-
-        <ModalFooter className={"items-center"}>
-          <div className={"w-full"}>
-            <Paragraph className={"text-sm mt-auto"}>
-              Learn more about
-              <InlineLink
-                href={REVERSE_PROXY_CLUSTERS_DOCS_LINK}
-                target={"_blank"}
-              >
-                Self-Hosted Proxies
-                <ExternalLinkIcon size={12} />
-              </InlineLink>
-            </Paragraph>
-          </div>
-          <div className={"flex gap-3 w-full justify-end"}>
-            {tab === "domain" && (
-              <>
-                <ModalClose asChild={true}>
-                  <Button variant={"secondary"}>Cancel</Button>
-                </ModalClose>
-                <Button
-                  variant={"primary"}
-                  onClick={() => setTab("dns")}
-                  disabled={!domain.trim() || !!domainError}
-                >
-                  Continue
-                </Button>
-              </>
-            )}
-            {tab === "dns" && (
-              <>
-                <Button variant={"secondary"} onClick={() => setTab("domain")}>
-                  Back
-                </Button>
-                <Button variant={"primary"} onClick={goToInstall}>
-                  Continue
-                </Button>
-              </>
-            )}
-            {tab === "install" && (
-              <>
-                <Button variant={"secondary"} onClick={() => setTab("dns")}>
-                  Back
-                </Button>
-                <Button variant={"primary"} onClick={finishSetup}>
-                  Finish Setup
-                </Button>
-              </>
-            )}
-          </div>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};