fix resources cell styling

messages/en-US.json

@@ -212,8 +212,9 @@
     "resourceAdd": "Add Resource",
     "resourceErrorDelte": "Error deleting resource",
     "resourcePoliciesTitle": "Manage Resource Policies",
-    "resourcePoliciesAttachedResourcesColumnTitle": "Attached resources",
+    "resourcePoliciesAttachedResourcesColumnTitle": "Resources",
     "resourcePoliciesAttachedResources": "{count} resource(s)",
+    "resourcePoliciesAttachedResourcesCount": "{count, plural, one {# resource} other {# resources}}",
     "resourcePoliciesAttachedResourcesEmpty": "no resources",
     "resourcePoliciesDescription": "Create and manage authentication policies to control access to your resources",
     "resourcePoliciesSearch": "Search policies...",

server/private/routers/policy/listResourcePolicies.ts

@@ -216,6 +216,7 @@ export async function listResourcePolicies(
                 : await db
                       .select({
                           resourceId: resources.resourceId,
+                          niceId: resources.niceId,
                           name: resources.name,
                           fullDomain: resources.fullDomain,
                           resourcePolicyId: resources.resourcePolicyId

server/routers/resource/types.ts

@@ -14,7 +14,7 @@ export type GetMaintenanceInfoResponse = {
 
 export type AttachedResource = Pick<
     Resource,
-    "resourceId" | "name" | "fullDomain"
+    "resourceId" | "niceId" | "name" | "fullDomain"
 >;
 
 export type ResourcePolicyWithResources = Pick<

src/components/ResourcePoliciesTable.tsx

@@ -8,12 +8,7 @@ import type {
     ListResourcePoliciesResponse
 } from "@server/routers/resource/types";
 import type { PaginationState } from "@tanstack/react-table";
-import {
+import { ArrowRight, ChevronDown, MoreHorizontal } from "lucide-react";
-    ArrowRight,
-    ChevronDown,
-    MoreHorizontal,
-    Waypoints
-} from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -98,55 +93,50 @@ export function ResourcePoliciesTable({
     };
 
     function ResourceListCell({
+        orgId,
         resources
     }: {
+        orgId: string;
         resources?: AttachedResource[];
     }) {
         if (!resources || resources.length === 0) {
-            return (
+            return <span>-</span>;
-                <div
-                    id="LOOK_FOR_ME"
-                    className="flex items-center gap-2 text-muted-foreground"
-                >
-                    <Waypoints className="size-4 flex-none" />
-                    <span className="text-sm">
-                        {t("resourcePoliciesAttachedResourcesEmpty")}
-                    </span>
-                </div>
-            );
         }
 
+        const countLabel = t("resourcePoliciesAttachedResourcesCount", {
+            count: resources.length
+        });
+
         return (
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                     <Button
                         variant="ghost"
                         size="sm"
-                        className="flex items-center gap-2 h-8 px-0 font-normal"
+                        className="flex h-8 items-center gap-2 px-0 font-normal"
                     >
-                        <Waypoints className="size-4 flex-none" />
+                        <span className="text-sm tabular-nums">
-                        <span className="text-sm">
+                            {countLabel}
-                            {t("resourcePoliciesAttachedResources", {
-                                count: resources.length
-                            })}
                         </span>
-                        <ChevronDown className="h-3 w-3" />
+                        <ChevronDown className="h-3 w-3 shrink-0" />
                     </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="min-w-70">
+                <DropdownMenuContent align="start" className="min-w-56">
                     {resources.map((resource) => (
-                        <DropdownMenuItem
+                        <DropdownMenuItem key={resource.resourceId} asChild>
-                            key={resource.resourceId}
+                            <Link
-                            className="flex items-center justify-between gap-4"
+                                href={`/${orgId}/settings/resources/public/${resource.niceId}`}
-                        >
+                                className="flex cursor-pointer items-center justify-between gap-4"
-                            <div className="flex items-center gap-2">
-                                {resource.name}
-                            </div>
-                            <span
-                                className={`capitalize text-muted-foreground`}
                             >
-                                {resource.fullDomain}
+                                <div className="flex min-w-0 items-center gap-2">
-                            </span>
+                                    <span className="truncate">
+                                        {resource.name}
+                                    </span>
+                                </div>
+                                <span className="shrink-0 text-muted-foreground">
+                                    {resource.fullDomain}
+                                </span>
+                            </Link>
                         </DropdownMenuItem>
                     ))}
                 </DropdownMenuContent>
@@ -182,7 +172,12 @@ export function ResourcePoliciesTable({
                 </span>
             ),
             cell: ({ row }) => {
-                return <ResourceListCell resources={row.original.resources} />;
+                return (
+                    <ResourceListCell
+                        orgId={row.original.orgId}
+                        resources={row.original.resources}
+                    />
+                );
             }
         },
         {