fix(ui): clean up findings expanded resource row layout (#10949)

ui/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
+## [1.26.0] (Prowler UNRELEASED)
+
+### 🔄 Changed
+
+- Findings expanded resource rows now drop the redundant cube icons, render Service and Region with the same compact label style as Last seen and Failing for, and reorder columns to Status, Resource, Provider, Severity, then field labels [(#10949)](https://github.com/prowler-cloud/prowler/pull/10949)
+
+---
+
 ## [1.25.1] (Prowler v5.25.1)
 
 ### 🐞 Fixed

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}>