From 5326ffbcc9e067f324f1e2f88ae3e7dbf152df52 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Fri, 6 Sep 2024 11:10:14 +0200
Subject: [PATCH] feat: add CustomRegionSelection for the filters

---
 app/(prowler)/page.tsx                        |  2 +-
 app/(prowler)/providers/page.tsx              |  2 +-
 .../filters/CustomCheckboxMutedFindings.tsx   | 18 ++-----
 components/filters/CustomRegionSelection.tsx  | 50 +++++++++++++++++++
 components/filters/FilterControls.tsx         | 24 ++++++---
 components/filters/index.ts                   |  1 +
 6 files changed, 75 insertions(+), 22 deletions(-)
 create mode 100644 components/filters/CustomRegionSelection.tsx

diff --git a/app/(prowler)/page.tsx b/app/(prowler)/page.tsx
index 9577693ca8..b352170bd1 100644
--- a/app/(prowler)/page.tsx
+++ b/app/(prowler)/page.tsx
@@ -11,7 +11,7 @@ export default function Home() {
     <>
       <Header title="Scan Overview" icon="solar:pie-chart-2-outline" />
       <Spacer y={4} />
-      <FilterControls />
+      <FilterControls date accounts regions mutedFindings />
       <Spacer y={10} />
       <div className="grid grid-cols-12 gap-4">
         <CustomBox
diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index 0d86b9ff2f..0a7fdd0949 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -23,7 +23,7 @@ export default async function Providers({
     <>
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
       <Spacer y={4} />
-      <FilterControls mutedFindings={false} />
+      <FilterControls search providers />
       <Spacer y={4} />
       <div className="flex flex-col items-end w-full">
         <div className="flex space-x-6">
diff --git a/components/filters/CustomCheckboxMutedFindings.tsx b/components/filters/CustomCheckboxMutedFindings.tsx
index 62715403fe..0ebfcb7755 100644
--- a/components/filters/CustomCheckboxMutedFindings.tsx
+++ b/components/filters/CustomCheckboxMutedFindings.tsx
@@ -1,20 +1,10 @@
 import { Checkbox } from "@nextui-org/react";
 import React from "react";
 
-interface CustomCheckboxMutedFindingsProps {
-  mutedFindings?: boolean;
-}
-
-export const CustomCheckboxMutedFindings: React.FC<
-  CustomCheckboxMutedFindingsProps
-> = ({ mutedFindings }) => {
+export const CustomCheckboxMutedFindings = () => {
   return (
-    <>
-      {mutedFindings && (
-        <Checkbox className="xl:-mt-8" size="md" color="danger">
-          Include Muted Findings
-        </Checkbox>
-      )}
-    </>
+    <Checkbox className="xl:-mt-8" size="md" color="danger">
+      Include Muted Findings
+    </Checkbox>
   );
 };
diff --git a/components/filters/CustomRegionSelection.tsx b/components/filters/CustomRegionSelection.tsx
new file mode 100644
index 0000000000..9204da3d33
--- /dev/null
+++ b/components/filters/CustomRegionSelection.tsx
@@ -0,0 +1,50 @@
+"use client";
+import { Select, SelectItem } from "@nextui-org/react";
+
+const regions = [
+  { key: "af-south-1", label: "AF South 1" },
+  { key: "ap-east-1", label: "AP East 1" },
+  { key: "ap-northeast-1", label: "AP Northeast 1" },
+  { key: "ap-northeast-2", label: "AP Northeast 2" },
+  { key: "ap-northeast-3", label: "AP Northeast 3" },
+  { key: "ap-south-1", label: "AP South 1" },
+  { key: "ap-south-2", label: "AP South 2" },
+  { key: "ap-southeast-1", label: "AP Southeast 1" },
+  { key: "ap-southeast-2", label: "AP Southeast 2" },
+  { key: "ap-southeast-3", label: "AP Southeast 3" },
+  { key: "ap-southeast-4", label: "AP Southeast 4" },
+  { key: "ca-central-1", label: "CA Central 1" },
+  { key: "ca-west-1", label: "CA West 1" },
+  { key: "eu-central-1", label: "EU Central 1" },
+  { key: "eu-central-2", label: "EU Central 2" },
+  { key: "eu-north-1", label: "EU North 1" },
+  { key: "eu-south-1", label: "EU South 1" },
+  { key: "eu-south-2", label: "EU South 2" },
+  { key: "eu-west-1", label: "EU West 1" },
+  { key: "eu-west-2", label: "EU West 2" },
+  { key: "eu-west-3", label: "EU West 3" },
+  { key: "il-central-1", label: "IL Central 1" },
+  { key: "me-central-1", label: "ME Central 1" },
+  { key: "me-south-1", label: "ME South 1" },
+  { key: "sa-east-1", label: "SA East 1" },
+  { key: "us-east-1", label: "US East 1" },
+  { key: "us-east-2", label: "US East 2" },
+  { key: "us-west-1", label: "US West 1" },
+  { key: "us-west-2", label: "US West 2" },
+];
+
+export const CustomRegionSelection = () => {
+  return (
+    <Select
+      label="Region"
+      placeholder="Select a region"
+      selectionMode="multiple"
+      className="w-full"
+      size="sm"
+    >
+      {regions.map((acc) => (
+        <SelectItem key={acc.key}>{acc.label}</SelectItem>
+      ))}
+    </Select>
+  );
+};
diff --git a/components/filters/FilterControls.tsx b/components/filters/FilterControls.tsx
index cd70ca9c44..af76da5679 100644
--- a/components/filters/FilterControls.tsx
+++ b/components/filters/FilterControls.tsx
@@ -7,15 +7,26 @@ import React, { useCallback } from "react";
 import { CustomAccountSelection } from "./CustomAccountSelection";
 import { CustomCheckboxMutedFindings } from "./CustomCheckboxMutedFindings";
 import { CustomDatePicker } from "./CustomDatePicker";
+import { CustomRegionSelection } from "./CustomRegionSelection";
 import { CustomSearchInput } from "./CustomSearchInput";
 import { CustomSelectProvider } from "./CustomSelectProvider";
 
 interface FilterControlsProps {
+  search?: boolean;
+  providers?: boolean;
+  date?: boolean;
+  regions?: boolean;
+  accounts?: boolean;
   mutedFindings?: boolean;
 }
 
 export const FilterControls: React.FC<FilterControlsProps> = ({
-  mutedFindings = true,
+  search = false,
+  providers = false,
+  date = false,
+  regions = false,
+  accounts = false,
+  mutedFindings = false,
 }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -32,11 +43,12 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-4 items-center">
-      <CustomSearchInput />
-      <CustomSelectProvider />
-      <CustomDatePicker />
-      <CustomAccountSelection />
-      <CustomCheckboxMutedFindings mutedFindings={mutedFindings} />
+      {search && <CustomSearchInput />}
+      {providers && <CustomSelectProvider />}
+      {date && <CustomDatePicker />}
+      {regions && <CustomRegionSelection />}
+      {accounts && <CustomAccountSelection />}
+      {mutedFindings && <CustomCheckboxMutedFindings />}
       <Button
         className="w-full md:w-fit"
         onClick={clearAllFilters}
diff --git a/components/filters/index.ts b/components/filters/index.ts
index 0699cbd36a..7b437a7a63 100644
--- a/components/filters/index.ts
+++ b/components/filters/index.ts
@@ -2,5 +2,6 @@ export * from "../filters/CustomAccountSelection";
 export * from "../filters/CustomCheckboxMutedFindings";
 export * from "../filters/CustomDatePicker";
 export * from "../filters/CustomProviderInputs";
+export * from "../filters/CustomRegionSelection";
 export * from "../filters/CustomSelectProvider";
 export * from "../filters/FilterControls";