Merge branch 'private-site-ha' into private-http-ha

src/components/ClientResourcesTable.tsx

@@ -20,6 +20,7 @@ import {
     ArrowDown01Icon,
     ArrowUp10Icon,
     ArrowUpDown,
+    ArrowUpRight,
     ChevronDown,
     ChevronsUpDownIcon,
     MoreHorizontal
@@ -52,16 +53,16 @@ export type InternalResourceRow = {
     name: string;
     orgId: string;
     sites: InternalResourceSiteRow[];
-    siteName: string;
-    siteAddress: string | null;
+    siteNames: string[];
+    siteAddresses: (string | null)[];
+    siteIds: number[];
+    siteNiceIds: string[];
     // mode: "host" | "cidr" | "port";
     mode: "host" | "cidr" | "http";
     scheme: "http" | "https" | null;
     ssl: boolean;
     // protocol: string | null;
     // proxyPort: number | null;
-    siteId: number;
-    siteNiceId: string;
     destination: string;
     httpHttpsPort: number | null;
     alias: string | null;
@@ -284,6 +285,60 @@ export default function ClientResourcesTable({
         }
     };
 
+    function SiteCell({ resourceRow }: { resourceRow: InternalResourceRow }) {
+        const { siteNames, siteNiceIds, orgId } = resourceRow;
+
+        if (!siteNames || siteNames.length === 0) {
+            return <span>-</span>;
+        }
+
+        if (siteNames.length === 1) {
+            return (
+                <Link
+                    href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}
+                >
+                    <Button variant="outline">
+                        {siteNames[0]}
+                        <ArrowUpRight className="ml-2 h-4 w-4" />
+                    </Button>
+                </Link>
+            );
+        }
+
+        return (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className="flex items-center gap-2"
+                    >
+                        <span>
+                            {siteNames.length} {t("sites")}
+                        </span>
+                        <ChevronDown className="h-3 w-3" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                    {siteNames.map((siteName, idx) => (
+                        <DropdownMenuItem
+                            key={siteNiceIds[idx]}
+                            asChild
+                        >
+                            <Link
+                                href={`/${orgId}/settings/sites/${siteNiceIds[idx]}`}
+                                className="flex items-center gap-2 cursor-pointer"
+                            >
+                                {siteName}
+                                <ArrowUpRight className="h-3 w-3" />
+                            </Link>
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+    }
+
     const internalColumns: ExtendedColumnDef<InternalResourceRow>[] = [
         {
             accessorKey: "name",
@@ -334,8 +389,7 @@ export default function ClientResourcesTable({
         },
         {
             id: "sites",
-            accessorFn: (row) =>
-                row.sites.map((s) => s.siteName).join(", ") || row.siteName,
+            accessorFn: (row) => row.sites.map((s) => s.siteName).join(", "),
             friendlyName: t("sites"),
             header: () => <span className="p-3">{t("sites")}</span>,
             cell: ({ row }) => {
@@ -565,7 +619,7 @@ export default function ClientResourcesTable({
                     onConfirm={async () =>
                         deleteInternalResource(
                             selectedInternalResource!.id,
-                            selectedInternalResource!.siteId
+                            selectedInternalResource!.siteIds[0]
                         )
                     }
                     string={selectedInternalResource.name}
@@ -599,7 +653,11 @@ export default function ClientResourcesTable({
                 <EditInternalResourceDialog
                     open={isEditDialogOpen}
                     setOpen={setIsEditDialogOpen}
-                    resource={editingResource}
+                    resource={{
+                        ...editingResource,
+                        siteName: editingResource.siteNames[0] ?? "",
+                        siteId: editingResource.siteIds[0]
+                    }}
                     orgId={orgId}
                     onSuccess={() => {
                         // Delay refresh to allow modal to close smoothly