fix: UID Filter Improvement (#7741)

Co-authored-by: sumit_chaturvedi <chaturvedi.sumit@tftus.com>

ui/CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Add a new chart to show the split between passed and failed findings. [(#7680)](https://github.com/prowler-cloud/prowler/pull/7680)
 - Added `Accordion` component. [(#7700)](https://github.com/prowler-cloud/prowler/pull/7700)
+- Improve `Provider UID` filter by adding more context and enhancing the UI/UX. [(#7741)](https://github.com/prowler-cloud/prowler/pull/7741)
 - Added an AWS CloudFormation Quick Link to the IAM Role credentials step [(#7735)](https://github.com/prowler-cloud/prowler/pull/7735)
 
 ### 🐞 Fixes

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

@@ -14,7 +14,7 @@ import {
 import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { createDict } from "@/lib";
-import { ProviderProps } from "@/types";
+import { ProviderAccountProps, ProviderProps } from "@/types";
 import { FindingProps, ScanProps, SearchParamsProps } from "@/types/components";
 
 export default async function Findings({
@@ -73,14 +73,29 @@ export default async function Findings({
   // Get findings data
 
   // Extract provider UIDs
-  const providerUIDs = Array.from(
+  const providerUIDs: string[] = Array.from(
     new Set(
       providersData?.data
-        ?.map((provider: ProviderProps) => provider.attributes.uid)
+        ?.map((provider: ProviderProps) => provider.attributes?.uid)
         .filter(Boolean),
     ),
   );
 
+  const providerDetails: Array<{ [uid: string]: ProviderAccountProps }> =
+    providerUIDs.map((uid) => {
+      const provider = providersData.data.find(
+        (p: { attributes: { uid: string } }) => p.attributes?.uid === uid,
+      );
+
+      return {
+        [uid]: {
+          provider: provider?.attributes?.provider || "",
+          uid: uid,
+          alias: provider?.attributes?.alias ?? null,
+        },
+      };
+    });
+
   // Extract scan UUIDs with "completed" state and more than one resource
   const completedScans = scansData?.data
     ?.filter(
@@ -122,6 +137,7 @@ export default async function Findings({
             key: "provider_uid__in",
             labelCheckboxGroup: "Provider UID",
             values: providerUIDs,
+            valueLabelMapping: providerDetails,
           },
           {
             key: "scan__in",

ui/components/ui/custom/custom-dropdown-filter.tsx

@@ -18,6 +18,8 @@ import { PlusCircleIcon } from "@/components/icons";
 import { useUrlFilters } from "@/hooks/use-url-filters";
 import { CustomDropdownFilterProps } from "@/types";
 
+import { EntityInfoShort } from "../entities";
+
 const filterSelectedClass =
   "inline-flex items-center border py-1 text-xs transition-colors border-transparent bg-default-500 text-secondary-foreground hover:bg-default-500/80 rounded-md px-2 font-normal";
 
@@ -192,18 +194,35 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
                 hideScrollBar
                 className="flex max-h-96 max-w-56 flex-col gap-y-2 py-2"
               >
-                {memoizedFilterValues.map((value) => (
-                  <Checkbox
-                    classNames={{
-                      label: "text-small font-normal",
-                      wrapper: "checkbox-update",
-                    }}
-                    key={value}
-                    value={value}
-                  >
-                    {value}
-                  </Checkbox>
-                ))}
+                {memoizedFilterValues.map((value) => {
+                  // Find the corresponding entity from valueLabelMapping
+                  const matchingEntry = filter.valueLabelMapping?.find(
+                    (entry) => entry[value],
+                  );
+                  const entity = matchingEntry?.[value];
+
+                  return (
+                    <Checkbox
+                      classNames={{
+                        label: "text-small font-normal",
+                        wrapper: "checkbox-update",
+                      }}
+                      key={value}
+                      value={value}
+                    >
+                      {entity ? (
+                        <EntityInfoShort
+                          cloudProvider={entity.provider}
+                          entityAlias={entity.alias}
+                          entityId={entity.uid}
+                          hideCopyButton
+                        />
+                      ) : (
+                        value
+                      )}
+                    </Checkbox>
+                  );
+                })}
               </ScrollShadow>
             </CheckboxGroup>
           </div>

ui/types/filters.ts

@@ -1,7 +1,10 @@
+import { ProviderAccountProps } from "./providers";
+
 export interface FilterOption {
   key: string;
   labelCheckboxGroup: string;
   values: string[];
+  valueLabelMapping?: Array<{ [uid: string]: ProviderAccountProps }>;
 }
 
 export interface CustomDropdownFilterProps {

ui/types/providers.ts

@@ -45,6 +45,12 @@ export interface ProviderProps {
   groupNames?: string[];
 }
 
+export interface ProviderAccountProps {
+  provider: ProviderType;
+  uid: string;
+  alias: string;
+}
+
 export interface ProviderOverviewProps {
   data: {
     type: "provider-overviews";