add site column and filter to public resources

src/components/ClientResourcesTable.tsx

@@ -48,13 +48,12 @@ import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { useDebouncedCallback } from "use-debounce";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { cn } from "@app/lib/cn";
+import {
+    ResourceSitesStatusCell,
+    type ResourceSiteRow
+} from "@app/components/ResourceSitesStatusCell";
 
-export type InternalResourceSiteRow = {
-    siteId: number;
-    siteName: string;
-    siteNiceId: string;
-    online: boolean;
-};
+export type InternalResourceSiteRow = ResourceSiteRow;
 
 export type InternalResourceRow = {
     id: number;
@@ -119,109 +118,6 @@ function isSafeUrlForLink(href: string): boolean {
     }
 }
 
-type AggregateSitesStatus = "allOnline" | "partial" | "allOffline";
-
-function aggregateSitesStatus(
-    resourceSites: InternalResourceSiteRow[]
-): AggregateSitesStatus {
-    if (resourceSites.length === 0) {
-        return "allOffline";
-    }
-    const onlineCount = resourceSites.filter((rs) => rs.online).length;
-    if (onlineCount === resourceSites.length) return "allOnline";
-    if (onlineCount > 0) return "partial";
-    return "allOffline";
-}
-
-function aggregateStatusDotClass(status: AggregateSitesStatus): string {
-    switch (status) {
-        case "allOnline":
-            return "bg-green-500";
-        case "partial":
-            return "bg-yellow-500";
-        case "allOffline":
-        default:
-            return "bg-neutral-500";
-    }
-}
-
-function ClientResourceSitesStatusCell({
-    orgId,
-    resourceSites
-}: {
-    orgId: string;
-    resourceSites: InternalResourceSiteRow[];
-}) {
-    const t = useTranslations();
-
-    if (resourceSites.length === 0) {
-        return <span>-</span>;
-    }
-
-    const aggregate = aggregateSitesStatus(resourceSites);
-    const countLabel = t("multiSitesSelectorSitesCount", {
-        count: resourceSites.length
-    });
-
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    className="flex h-8 items-center gap-2 px-0 font-normal"
-                >
-                    <div
-                        className={cn(
-                            "h-2 w-2 shrink-0 rounded-full",
-                            aggregateStatusDotClass(aggregate)
-                        )}
-                    />
-                    <span className="text-sm tabular-nums">{countLabel}</span>
-                    <ChevronDown className="h-3 w-3 shrink-0" />
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="min-w-56">
-                {resourceSites.map((site) => {
-                    const isOnline = site.online;
-                    return (
-                        <DropdownMenuItem key={site.siteId} asChild>
-                            <Link
-                                href={`/${orgId}/settings/sites/${site.siteNiceId}`}
-                                className="flex cursor-pointer items-center justify-between gap-4"
-                            >
-                                <div className="flex min-w-0 items-center gap-2">
-                                    <div
-                                        className={cn(
-                                            "h-2 w-2 shrink-0 rounded-full",
-                                            isOnline
-                                                ? "bg-green-500"
-                                                : "bg-neutral-500"
-                                        )}
-                                    />
-                                    <span className="truncate">
-                                        {site.siteName}
-                                    </span>
-                                </div>
-                                <span
-                                    className={cn(
-                                        "shrink-0 capitalize",
-                                        isOnline
-                                            ? "text-green-600"
-                                            : "text-muted-foreground"
-                                    )}
-                                >
-                                    {isOnline ? t("online") : t("offline")}
-                                </span>
-                            </Link>
-                        </DropdownMenuItem>
-                    );
-                })}
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-}
-
 type ClientResourcesTableProps = {
     internalResources: InternalResourceRow[];
     orgId: string;
@@ -321,9 +217,7 @@ export default function ClientResourcesTable({
 
         if (siteNames.length === 1) {
             return (
-                <Link
-                    href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}
-                >
+                <Link href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}>
                     <Button variant="outline">
                         {siteNames[0]}
                         <ArrowUpRight className="ml-2 h-4 w-4" />
@@ -348,10 +242,7 @@ export default function ClientResourcesTable({
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start">
                     {siteNames.map((siteName, idx) => (
-                        <DropdownMenuItem
-                            key={siteNiceIds[idx]}
-                            asChild
-                        >
+                        <DropdownMenuItem key={siteNiceIds[idx]} asChild>
                             <Link
                                 href={`/${orgId}/settings/sites/${siteNiceIds[idx]}`}
                                 className="flex items-center gap-2 cursor-pointer"
@@ -470,7 +361,7 @@ export default function ClientResourcesTable({
             cell: ({ row }) => {
                 const resourceRow = row.original;
                 return (
-                    <ClientResourceSitesStatusCell
+                    <ResourceSitesStatusCell
                         orgId={resourceRow.orgId}
                         resourceSites={resourceRow.sites}
                     />