From 04e73515b811f4ca86680e3189a4049cd3e40a4e Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Thu, 4 Dec 2025 21:21:48 -0500
Subject: [PATCH] add alias to client resources table

---
 messages/en-US.json                     |  1 +
 src/components/ClientResourcesTable.tsx | 66 +++++++++----------------
 2 files changed, 23 insertions(+), 44 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index ee2a7b3d..4f8a2633 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1557,6 +1557,7 @@
     "resourcesTableNoProxyResourcesFound": "No proxy resources found.",
     "resourcesTableNoInternalResourcesFound": "No internal resources found.",
     "resourcesTableDestination": "Destination",
+    "resourcesTableAlias": "Alias",
     "resourcesTableClients": "Clients",
     "resourcesTableAndOnlyAccessibleInternally": "and are only accessible internally when connected with a client.",
     "resourcesTableNoTargets": "No targets",
diff --git a/src/components/ClientResourcesTable.tsx b/src/components/ClientResourcesTable.tsx
index 42625f5f..41afbc80 100644
--- a/src/components/ClientResourcesTable.tsx
+++ b/src/components/ClientResourcesTable.tsx
@@ -14,11 +14,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
-import {
-    ArrowUpDown,
-    ArrowUpRight,
-    MoreHorizontal
-} from "lucide-react";
+import { ArrowUpDown, ArrowUpRight, MoreHorizontal } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -206,52 +202,34 @@ export default function ClientResourcesTable({
             ),
             cell: ({ row }) => {
                 const resourceRow = row.original;
-                let displayText: string;
-                let copyText: string;
-
-                // if (
-                //     resourceRow.mode === "port" &&
-                //     // resourceRow.protocol &&
-                //     // resourceRow.proxyPort &&
-                //     // resourceRow.destinationPort
-                // ) {
-                //     // const protocol = resourceRow.protocol.toUpperCase();
-                //     // For port mode: site part uses alias or site address, destination part uses destination IP
-                //     // If site address has CIDR notation, extract just the IP address
-                //     let siteAddress = resourceRow.siteAddress;
-                //     if (siteAddress && siteAddress.includes("/")) {
-                //         siteAddress = siteAddress.split("/")[0];
-                //     }
-                //     const siteDisplay = resourceRow.alias || siteAddress;
-                //     // displayText = `${protocol} ${siteDisplay}:${resourceRow.proxyPort} -> ${resourceRow.destination}:${resourceRow.destinationPort}`;
-                //     // copyText = `${siteDisplay}:${resourceRow.proxyPort}`;
-                // } else if (resourceRow.mode === "host") {
-                if (resourceRow.mode === "host") {
-                    // For host mode: use alias if available, otherwise use destination
-                    const destinationDisplay =
-                        resourceRow.alias || resourceRow.destination;
-                    displayText = destinationDisplay;
-                    copyText = destinationDisplay;
-                } else if (resourceRow.mode === "cidr") {
-                    displayText = resourceRow.destination;
-                    copyText = resourceRow.destination;
-                } else {
-                    const destinationDisplay =
-                        resourceRow.alias || resourceRow.destination;
-                    displayText = destinationDisplay;
-                    copyText = destinationDisplay;
-                }
-
                 return (
                     <CopyToClipboard
-                        text={copyText}
+                        text={resourceRow.destination}
                         isLink={false}
-                        displayText={displayText}
+                        displayText={resourceRow.destination}
                     />
                 );
             }
         },
-
+        {
+            accessorKey: "alias",
+            friendlyName: t("resourcesTableAlias"),
+            header: () => (
+                <span className="p-3">{t("resourcesTableAlias")}</span>
+            ),
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return resourceRow.alias ? (
+                    <CopyToClipboard
+                        text={resourceRow.alias}
+                        isLink={false}
+                        displayText={resourceRow.alias}
+                    />
+                ) : (
+                    <span>"-"</span>
+                );
+            }
+        },
         {
             id: "actions",
             enableHiding: false,