chore: adding a select component to choose a provider to launch a scan

app/(prowler)/scans/page.tsx

@@ -3,8 +3,9 @@ import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
 import { getScans } from "@/actions/scans";
-import { FilterControls, filterScans } from "@/components/filters";
+import { filterScans } from "@/components/filters";
 import { InfoIcon } from "@/components/icons";
+import { LaunchScanWorkflow } from "@/components/scans/launch-workflow";
 import { SkeletonTableScans } from "@/components/scans/table";
 import { ColumnProviderScans } from "@/components/scans/table/provider-scans";
 import { ColumnGetScans } from "@/components/scans/table/scans";
@@ -24,7 +25,9 @@ export default async function Scans({
       <Header title="Scans" icon="lucide:scan-search" />
 
       <Spacer y={4} />
-      <FilterControls search date providers />
+      <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
+        <LaunchScanWorkflow />
+      </Suspense>
       <Spacer y={8} />
 
       <div className="grid grid-cols-12 items-start gap-4">
@@ -44,8 +47,9 @@ export default async function Scans({
 }
 
 const SSRDataTableProviders = async () => {
-  const filters = { "filter[connected]": "true" };
-  const providersData = await getProviders({ page: 1, filters });
+  const providersData = await getProviders({
+    filters: { "filter[connected]": "true" },
+  });
   return (
     <>
       <div className="mb-2 flex items-center gap-2">

components/filters/data-filters.ts

@@ -8,6 +8,11 @@ export const filterProviders = [
 ];
 
 export const filterScans = [
+  {
+    key: "provider_type__in",
+    labelCheckboxGroup: "Provider",
+    values: ["aws", "azure", "gcp", "kubernetes"],
+  },
   {
     key: "state",
     labelCheckboxGroup: "State",

components/scans/launch-workflow/index.ts

@@ -0,0 +1,2 @@
+export * from "./launch-scan-workflow";
+export * from "./select-scan-provider";

components/scans/launch-workflow/launch-scan-workflow.tsx

@@ -0,0 +1,31 @@
+import { getProviders } from "@/actions/providers/providers";
+import { ProviderProps } from "@/types";
+
+import { SelectScanProvider } from "./select-scan-provider";
+
+export const LaunchScanWorkflow = async () => {
+  // const providersData = await getProviders({
+  //   filters: { "filter[connected]": "true" },
+  // });
+  const providersData = await getProviders({});
+
+  const providerInfo = providersData?.data?.length
+    ? providersData.data.map((provider: ProviderProps) => ({
+        alias: provider.attributes.alias,
+        providerType: provider.attributes.provider,
+        uid: provider.attributes.uid,
+        connected: provider.attributes.connection.connected,
+      }))
+    : [];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-1 items-center gap-x-4 gap-y-4 md:grid-cols-2 xl:grid-cols-4">
+        <div className="flex flex-col gap-2">
+          <span className="text-sm text-default-500">Launch Scan</span>
+          <SelectScanProvider providers={providerInfo} />
+        </div>
+      </div>
+    </div>
+  );
+};

components/scans/launch-workflow/select-scan-provider.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Select, SelectItem } from "@nextui-org/react";
+import { useState } from "react";
+
+import { AWSProviderBadge } from "@/components/icons/providers-badge/AWSProviderBadge";
+import { AzureProviderBadge } from "@/components/icons/providers-badge/AzureProviderBadge";
+import { GCPProviderBadge } from "@/components/icons/providers-badge/GCPProviderBadge";
+import { KS8ProviderBadge } from "@/components/icons/providers-badge/KS8ProviderBadge";
+
+interface SelectScanProviderProps {
+  providers: {
+    alias: string;
+    providerType: string;
+    uid: string;
+    connected: boolean;
+  }[];
+}
+
+export const SelectScanProvider = ({ providers }: SelectScanProviderProps) => {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const renderBadge = (providerType: string) => {
+    switch (providerType) {
+      case "aws":
+        return <AWSProviderBadge width={25} height={25} />;
+      case "azure":
+        return <AzureProviderBadge width={25} height={25} />;
+      case "gcp":
+        return <GCPProviderBadge width={25} height={25} />;
+      case "kubernetes":
+        return <KS8ProviderBadge width={25} height={25} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Select
+      aria-label="Select a Provider"
+      placeholder="Choose a provider"
+      labelPlacement="outside"
+      size="sm"
+      selectedKeys={selectedKeys}
+      onSelectionChange={(keys) => setSelectedKeys(new Set(keys))}
+      renderValue={() => {
+        const selectedItem = providers.find(
+          (item) => item.uid === Array.from(selectedKeys)[0],
+        );
+        return selectedItem ? (
+          <div className="flex items-center gap-2">
+            {renderBadge(selectedItem.providerType)}
+            {selectedItem.alias}
+          </div>
+        ) : (
+          "Choose a provider"
+        );
+      }}
+    >
+      {providers.map((item) => (
+        <SelectItem key={item.uid} textValue={item.uid} aria-label={item.alias}>
+          <div className="flex items-center gap-2">
+            {renderBadge(item.providerType)}
+            {item.alias}
+          </div>
+        </SelectItem>
+      ))}
+    </Select>
+  );
+};