Merge branch 'v5.25' into backport/v5.25/pr-10939

Author: HugoPBrito

ui/components/findings/table/column-finding-resources.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef, Row, RowSelectionState } from "@tanstack/react-table";
-import { Container, CornerDownRight, VolumeOff, VolumeX } from "lucide-react";
+import { CornerDownRight, VolumeOff, VolumeX } from "lucide-react";
 import { useContext, useState } from "react";
 
 import { MuteFindingsModal } from "@/components/findings/mute-findings-modal";
@@ -203,23 +203,6 @@ export function getColumnFindingResources({
       enableSorting: false,
       enableHiding: false,
     },
-    // Resource — name + uid (EntityInfo with resource icon)
-    {
-      id: "resource",
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Resource" />
-      ),
-      cell: ({ row }) => (
-        <div className="max-w-[240px]">
-          <EntityInfo
-            nameIcon={<Container className="size-4" />}
-            entityAlias={row.original.resourceName}
-            entityId={row.original.resourceUid}
-          />
-        </div>
-      ),
-      enableSorting: false,
-    },
     // Status
     {
       id: "status",
@@ -233,29 +216,35 @@ export function getColumnFindingResources({
       },
       enableSorting: false,
     },
-    // Service
+    // Resource — name + uid
     {
-      id: "service",
+      id: "resource",
       header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Service" />
+        <DataTableColumnHeader column={column} title="Resource" />
       ),
       cell: ({ row }) => (
-        <p className="text-text-neutral-primary max-w-[100px] truncate text-sm">
-          {row.original.service}
-        </p>
+        <div className="max-w-[240px]">
+          <EntityInfo
+            entityAlias={row.original.resourceName}
+            entityId={row.original.resourceUid}
+          />
+        </div>
       ),
       enableSorting: false,
     },
-    // Region
+    // Provider — alias + uid (same style as Resource)
     {
-      id: "region",
+      id: "provider",
       header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Region" />
+        <DataTableColumnHeader column={column} title="Provider" />
       ),
       cell: ({ row }) => (
-        <p className="text-text-neutral-primary max-w-[120px] truncate text-sm">
-          {row.original.region}
-        </p>
+        <div className="max-w-[240px]">
+          <EntityInfo
+            entityAlias={row.original.providerAlias}
+            entityId={row.original.providerUid}
+          />
+        </div>
       ),
       enableSorting: false,
     },
@@ -268,20 +257,29 @@ export function getColumnFindingResources({
       cell: ({ row }) => <SeverityBadge severity={row.original.severity} />,
       enableSorting: false,
     },
-    // Account — alias + uid (EntityInfo with provider logo)
+    // Service
     {
-      id: "account",
+      id: "service",
       header: ({ column }) => (
-        <DataTableColumnHeader column={column} title="Account" />
+        <DataTableColumnHeader column={column} title="Service" />
       ),
       cell: ({ row }) => (
-        <div className="max-w-[240px]">
-          <EntityInfo
-            cloudProvider={row.original.providerType}
-            entityAlias={row.original.providerAlias}
-            entityId={row.original.providerUid}
-          />
-        </div>
+        <InfoField label="Service" variant="compact">
+          {row.original.service || "-"}
+        </InfoField>
+      ),
+      enableSorting: false,
+    },
+    // Region
+    {
+      id: "region",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Region" />
+      ),
+      cell: ({ row }) => (
+        <InfoField label="Region" variant="compact">
+          {row.original.region || "-"}
+        </InfoField>
       ),
       enableSorting: false,
     },

ui/components/findings/table/inline-resource-container.tsx

@@ -70,27 +70,23 @@ function ResourceSkeletonRow({
           <div className="bg-bg-input-primary border-border-input-primary size-5 rounded-sm border shadow-[0_1px_2px_0_rgba(0,0,0,0.1)]" />
         </div>
       </TableCell>
-      {/* Resource: icon + name + uid */}
-      <TableCell className={cellClassName}>
-        <div className="flex items-center gap-2">
-          <Skeleton className="size-4 rounded" />
-          <div className="space-y-1.5">
-            <Skeleton className="h-4 w-32 rounded" />
-            <Skeleton className="h-3.5 w-20 rounded" />
-          </div>
-        </div>
-      </TableCell>
       {/* Status */}
       <TableCell className={cellClassName}>
         <Skeleton className="h-6 w-11 rounded-md" />
       </TableCell>
-      {/* Service */}
+      {/* Resource: name + uid */}
       <TableCell className={cellClassName}>
-        <Skeleton className="h-4.5 w-16 rounded" />
+        <div className="space-y-1.5">
+          <Skeleton className="h-4 w-32 rounded" />
+          <Skeleton className="h-3.5 w-20 rounded" />
+        </div>
       </TableCell>
-      {/* Region */}
+      {/* Provider: alias + uid */}
       <TableCell className={cellClassName}>
-        <Skeleton className="h-4.5 w-20 rounded" />
+        <div className="space-y-1.5">
+          <Skeleton className="h-4 w-24 rounded" />
+          <Skeleton className="h-3.5 w-16 rounded" />
+        </div>
       </TableCell>
       {/* Severity */}
       <TableCell className={cellClassName}>
@@ -99,15 +95,13 @@ function ResourceSkeletonRow({
           <Skeleton className="h-4.5 w-12 rounded" />
         </div>
       </TableCell>
-      {/* Account: provider icon + alias + uid */}
+      {/* Service */}
       <TableCell className={cellClassName}>
-        <div className="flex items-center gap-2">
-          <Skeleton className="size-4 rounded" />
-          <div className="space-y-1.5">
-            <Skeleton className="h-4 w-24 rounded" />
-            <Skeleton className="h-3.5 w-16 rounded" />
-          </div>
-        </div>
+        <Skeleton className="h-4.5 w-16 rounded" />
+      </TableCell>
+      {/* Region */}
+      <TableCell className={cellClassName}>
+        <Skeleton className="h-4.5 w-20 rounded" />
       </TableCell>
       {/* Last seen */}
       <TableCell className={cellClassName}>