feat(filters): improve provider connection filter UX (#8520)

ui/CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🔄 Changed
 
 - Disable `See Compliance` button until scan completes [(#8487)](https://github.com/prowler-cloud/prowler/pull/8487)
+- Provider connection filter now shows "Connected/Disconnected" instead of "true/false" for better UX [(#8520)](https://github.com/prowler-cloud/prowler/pull/8520)
 
 ### 🐞 Fixed
 - DataTable column headers set to single-line [(#8480)](https://github.com/prowler-cloud/prowler/pull/8480)

ui/components/filters/data-filters.ts

@@ -1,11 +1,13 @@
-import { FilterType } from "@/types/filters";
+import { CONNECTION_STATUS_MAPPING } from "@/lib/helper-filters";
+import { FilterOption, FilterType } from "@/types/filters";
 import { PROVIDER_TYPES } from "@/types/providers";
 
-export const filterProviders = [
+export const filterProviders: FilterOption[] = [
   {
     key: "connected",
     labelCheckboxGroup: "Connection",
-    values: ["false", "true"],
+    values: ["true", "false"],
+    valueLabelMapping: CONNECTION_STATUS_MAPPING,
   },
   {
     key: "provider__in",

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

@@ -22,7 +22,7 @@ import React, {
 
 import { ComplianceScanInfo } from "@/components/compliance/compliance-header/compliance-scan-info";
 import { EntityInfoShort } from "@/components/ui/entities";
-import { isScanEntity } from "@/lib/helper-filters";
+import { isConnectionStatus, isScanEntity } from "@/lib/helper-filters";
 import {
   CustomDropdownFilterProps,
   FilterEntity,
@@ -189,6 +189,10 @@ export const CustomDropdownFilter = ({
       )?.[value];
       if (!entity) return value;
 
+      if (isConnectionStatus(entity)) {
+        return entity.label;
+      }
+
       if (isScanEntity(entity as ScanEntity)) {
         return (
           (entity as ScanEntity).attributes?.name ||
@@ -320,7 +324,9 @@ export const CustomDropdownFilter = ({
                         value={value}
                       >
                         {entity ? (
-                          isScanEntity(entity as ScanEntity) ? (
+                          isConnectionStatus(entity) ? (
+                            getDisplayLabel(value)
+                          ) : isScanEntity(entity as ScanEntity) ? (
                             <ComplianceScanInfo scan={entity as ScanEntity} />
                           ) : (
                             <EntityInfoShort
@@ -335,7 +341,7 @@ export const CustomDropdownFilter = ({
                             />
                           )
                         ) : (
-                          value
+                          getDisplayLabel(value)
                         )}
                       </Checkbox>
                     );

ui/lib/helper-filters.ts

@@ -1,4 +1,6 @@
 import { ProviderProps, ProvidersApiResponse, ScanProps } from "@/types";
+import { FilterEntity } from "@/types/filters";
+import { ProviderConnectionStatus } from "@/types/providers";
 import { ScanEntity } from "@/types/scans";
 
 /**
@@ -125,3 +127,28 @@ export const createScanDetailsMapping = (
 
   return scanMappings;
 };
+
+// Helper to check if entity is a ProviderConnectionStatus (simple label/value object)
+export const isConnectionStatus = (
+  entity: FilterEntity,
+): entity is ProviderConnectionStatus => {
+  return !!(entity && "label" in entity && "value" in entity);
+};
+
+/**
+ * Connection status mapping for provider filters.
+ * Maps boolean string values to user-friendly labels.
+ */
+export const CONNECTION_STATUS_MAPPING: Array<{
+  [key: string]: FilterEntity;
+}> = [
+  {
+    true: { label: "Connected", value: "true" } as ProviderConnectionStatus,
+  },
+  {
+    false: {
+      label: "Disconnected",
+      value: "false",
+    } as ProviderConnectionStatus,
+  },
+];

ui/types/filters.ts

@@ -1,7 +1,10 @@
-import { ProviderEntity } from "./providers";
+import { ProviderConnectionStatus, ProviderEntity } from "./providers";
 import { ScanEntity } from "./scans";
 
-export type FilterEntity = ProviderEntity | ScanEntity;
+export type FilterEntity =
+  | ProviderEntity
+  | ScanEntity
+  | ProviderConnectionStatus;
 
 export interface FilterOption {
   key: string;

ui/types/providers.ts

@@ -60,6 +60,11 @@ export interface ProviderEntity {
   alias: string | null;
 }
 
+export interface ProviderConnectionStatus {
+  label: string;
+  value: string;
+}
+
 export interface ProviderOverviewProps {
   data: {
     type: "provider-overviews";