From 260f007e5b44fc9c17adbc3fabb65b569299ffab Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Thu, 7 Nov 2024 17:02:23 +0100
Subject: [PATCH] chore: adding a select component to choose a provider to
 launch a scan

---
 app/(prowler)/scans/page.tsx                  | 12 ++--
 components/filters/data-filters.ts            |  5 ++
 components/scans/launch-workflow/index.ts     |  2 +
 .../launch-workflow/launch-scan-workflow.tsx  | 31 ++++++++
 .../launch-workflow/select-scan-provider.tsx  | 70 +++++++++++++++++++
 5 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 components/scans/launch-workflow/index.ts
 create mode 100644 components/scans/launch-workflow/launch-scan-workflow.tsx
 create mode 100644 components/scans/launch-workflow/select-scan-provider.tsx

diff --git a/app/(prowler)/scans/page.tsx b/app/(prowler)/scans/page.tsx
index be74f9a28a..44e5881609 100644
--- a/app/(prowler)/scans/page.tsx
+++ b/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">
diff --git a/components/filters/data-filters.ts b/components/filters/data-filters.ts
index 2b2d319783..673e4f0fff 100644
--- a/components/filters/data-filters.ts
+++ b/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",
diff --git a/components/scans/launch-workflow/index.ts b/components/scans/launch-workflow/index.ts
new file mode 100644
index 0000000000..4ccdef368b
--- /dev/null
+++ b/components/scans/launch-workflow/index.ts
@@ -0,0 +1,2 @@
+export * from "./launch-scan-workflow";
+export * from "./select-scan-provider";
diff --git a/components/scans/launch-workflow/launch-scan-workflow.tsx b/components/scans/launch-workflow/launch-scan-workflow.tsx
new file mode 100644
index 0000000000..4fb3f4f16b
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/components/scans/launch-workflow/select-scan-provider.tsx b/components/scans/launch-workflow/select-scan-provider.tsx
new file mode 100644
index 0000000000..9fcc2e70da
--- /dev/null
+++ b/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>
+  );
+};