refactor(ui): address review feedback on provider group filter

- Restore Promise.all in scans page (getAll* never reject)
- Use FILTER_FIELD.PROVIDER_GROUPS instead of a hardcoded key
- Add id prop to ProviderGroupSelector to avoid DOM id collisions

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: Pablo F.G

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

@@ -181,18 +181,12 @@ export default async function Scans({
   const session = await auth();
   const resolvedSearchParams = await searchParams;
 
-  const [providersResult, providerGroupsResult] = await Promise.allSettled([
+  const [providersData, providerGroupsData] = await Promise.all([
     getAllProviders(),
     getAllProviderGroups(),
   ]);
-  const providers =
-    providersResult.status === "fulfilled"
-      ? (providersResult.value?.data ?? [])
-      : [];
-  const providerGroups =
-    providerGroupsResult.status === "fulfilled"
-      ? (providerGroupsResult.value?.data ?? [])
-      : [];
+  const providers = providersData?.data ?? [];
+  const providerGroups = providerGroupsData?.data ?? [];
 
   const connectedProviders = providers.filter(
     (provider: ProviderProps) =>

ui/components/filters/provider-group-selector.test.tsx

@@ -206,6 +206,24 @@ describe("ProviderGroupSelector", () => {
     expect(params.has("scanId")).toBe(false);
   });
 
+  it("defaults the control id and links the sr-only label to it", () => {
+    render(<ProviderGroupSelector groups={groups} />);
+
+    const label = screen.getByText(/Filter by Provider Group/i);
+    expect(label).toHaveAttribute("for", "provider-group-selector");
+    expect(label).toHaveAttribute("id", "provider-group-selector-label");
+  });
+
+  it("applies a custom id so multiple instances don't collide", () => {
+    render(
+      <ProviderGroupSelector groups={groups} id="resources-provider-group" />,
+    );
+
+    const label = screen.getByText(/Filter by Provider Group/i);
+    expect(label).toHaveAttribute("for", "resources-provider-group");
+    expect(label).toHaveAttribute("id", "resources-provider-group-label");
+  });
+
   it("does not navigate on clear when nothing is selected", () => {
     render(<ProviderGroupSelector groups={groups} />);
 

ui/components/filters/provider-group-selector.tsx

@@ -12,14 +12,17 @@ import {
 } from "@/components/shadcn/select/multiselect";
 import { useUrlFilters } from "@/hooks/use-url-filters";
 import type { ProviderGroup } from "@/types/components";
+import { FILTER_FIELD } from "@/types/filters";
 
-const PROVIDER_GROUP_FILTER_KEY = "provider_groups__in";
+const PROVIDER_GROUP_FILTER_KEY = FILTER_FIELD.PROVIDER_GROUPS;
 const URL_FILTER_KEY = `filter[${PROVIDER_GROUP_FILTER_KEY}]`;
 
 /** Common props shared by both batch and instant modes. */
 interface ProviderGroupSelectorBaseProps {
   groups: ProviderGroup[];
   search?: MultiSelectSearchProp;
+  /** DOM id for the control; pass a unique one when rendering more than one. */
+  id?: string;
   /**
    * Instant mode only: extra URL params to delete when the selection changes
    * (e.g. ["page", "scanId"]), mirroring ProviderAccountSelectors. Ignored in
@@ -61,6 +64,7 @@ export function ProviderGroupSelector({
   groups,
   onBatchChange,
   selectedValues,
+  id = "provider-group-selector",
   search = {
     placeholder: "Search Provider Groups...",
     emptyMessage: "No Provider Groups found.",
@@ -69,6 +73,7 @@ export function ProviderGroupSelector({
 }: ProviderGroupSelectorProps) {
   const searchParams = useSearchParams();
   const { navigateWithParams } = useUrlFilters();
+  const labelId = `${id}-label`;
 
   const current = searchParams.get(URL_FILTER_KEY) || "";
   const urlSelectedIds = current ? current.split(",").filter(Boolean) : [];
@@ -110,19 +115,12 @@ export function ProviderGroupSelector({
 
   return (
     <div className="relative">
-      <label
-        htmlFor="provider-group-selector"
-        className="sr-only"
-        id="provider-group-label"
-      >
+      <label htmlFor={id} className="sr-only" id={labelId}>
         Filter by Provider Group. Select one or more Provider Groups to filter
         results.
       </label>
       <MultiSelect values={selectedIds} onValuesChange={handleMultiValueChange}>
-        <MultiSelectTrigger
-          id="provider-group-selector"
-          aria-labelledby="provider-group-label"
-        >
+        <MultiSelectTrigger id={id} aria-labelledby={labelId}>
           {selectedLabel() || (
             <MultiSelectValue placeholder="All Provider Groups" />
           )}