feat(ui): add resource group label formatter to resources view (#9820)

ui/CHANGELOG.md

@@ -6,6 +6,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 ### 🚀 Added
 
+- Resource group label filter to Resources page [(#9820)](https://github.com/prowler-cloud/prowler/pull/9820)
 - Add search bar when adding a provider [(#9634)](https://github.com/prowler-cloud/prowler/pull/9634)
 - New findings table UI with new design system components, improved filtering UX, and enhanced table interactions [(#9699)](https://github.com/prowler-cloud/prowler/pull/9699)
 - Add gradient background to Risk Plot for visual risk context [(#9664)](https://github.com/prowler-cloud/prowler/pull/9664)

ui/app/(prowler)/resources/page.tsx

@@ -8,10 +8,11 @@ import {
   getResources,
 } from "@/actions/resources";
 import { FilterControls } from "@/components/filters";
+import { ResourcesFilters } from "@/components/resources/resources-filters";
 import { SkeletonTableResources } from "@/components/resources/skeleton/skeleton-table-resources";
 import { ColumnResources } from "@/components/resources/table/column-resources";
 import { ContentLayout } from "@/components/ui";
-import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
+import { DataTable } from "@/components/ui/table";
 import {
   createDict,
   extractFiltersAndQuery,
@@ -63,30 +64,12 @@ export default async function Resources({
     <ContentLayout title="Resources" icon="lucide:warehouse">
       <FilterControls search date />
       <div className="flex flex-col gap-6">
-        <DataTableFilterCustom
+        <ResourcesFilters
-          filters={[
+          providerIds={providerIds}
-            {
+          providerDetails={providerDetails}
-              key: "provider__in",
+          uniqueRegions={uniqueRegions}
-              labelCheckboxGroup: "Provider",
+          uniqueServices={uniqueServices}
-              values: providerIds,
+          uniqueGroups={uniqueGroups}
-              valueLabelMapping: providerDetails,
-            },
-            {
-              key: "region__in",
-              labelCheckboxGroup: "Region",
-              values: uniqueRegions,
-            },
-            {
-              key: "service__in",
-              labelCheckboxGroup: "Service",
-              values: uniqueServices,
-            },
-            {
-              key: "groups__in",
-              labelCheckboxGroup: "Group",
-              values: uniqueGroups,
-            },
-          ]}
         />
         <Suspense key={searchParamsKey} fallback={<SkeletonTableResources />}>
           <SSRDataTable searchParams={resolvedSearchParams} />

ui/components/resources/resources-filters.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { DataTableFilterCustom } from "@/components/ui/table";
+import { getGroupLabel } from "@/lib/categories";
+import { FilterEntity } from "@/types";
+
+interface ResourcesFiltersProps {
+  providerIds: string[];
+  providerDetails: { [id: string]: FilterEntity }[];
+  uniqueRegions: string[];
+  uniqueServices: string[];
+  uniqueGroups: string[];
+}
+
+export const ResourcesFilters = ({
+  providerIds,
+  providerDetails,
+  uniqueRegions,
+  uniqueServices,
+  uniqueGroups,
+}: ResourcesFiltersProps) => {
+  return (
+    <DataTableFilterCustom
+      filters={[
+        {
+          key: "provider__in",
+          labelCheckboxGroup: "Provider",
+          values: providerIds,
+          valueLabelMapping: providerDetails,
+        },
+        {
+          key: "region__in",
+          labelCheckboxGroup: "Region",
+          values: uniqueRegions,
+        },
+        {
+          key: "service__in",
+          labelCheckboxGroup: "Service",
+          values: uniqueServices,
+        },
+        {
+          key: "groups__in",
+          labelCheckboxGroup: "Resource Group",
+          values: uniqueGroups,
+          labelFormatter: getGroupLabel,
+        },
+      ]}
+    />
+  );
+};