From a1585142b7beece14127aee5ba0f0cf0fd71c8a1 Mon Sep 17 00:00:00 2001 From: Pablo Lara Date: Wed, 9 Oct 2024 13:56:56 +0200 Subject: [PATCH] chore: refactor custom filters to be able to have two in the same page --- app/(prowler)/providers/page.tsx | 3 +- app/(prowler)/scans/page.tsx | 114 ++++++++++++------ components/filters/data-filters.ts | 14 ++- components/filters/filter-controls.tsx | 6 +- components/providers/table/index.ts | 1 - .../scans/table/data-table-filter-custom.tsx | 75 ------------ components/scans/table/index.ts | 1 - .../table/data-table-filter-custom.tsx | 0 components/ui/table/data-table.tsx | 8 +- components/ui/table/index.ts | 1 + 10 files changed, 106 insertions(+), 117 deletions(-) delete mode 100644 components/scans/table/data-table-filter-custom.tsx rename components/{providers => ui}/table/data-table-filter-custom.tsx (100%) diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx index abc0ccfa59..02860e2a0b 100644 --- a/app/(prowler)/providers/page.tsx +++ b/app/(prowler)/providers/page.tsx @@ -24,7 +24,7 @@ export default async function Providers({
- + @@ -60,6 +60,7 @@ const SSRDataTable = async ({ columns={ColumnProviders} data={providersData?.data || []} metadata={providersData?.meta} + customFilters={filterProviders} /> ); }; diff --git a/app/(prowler)/scans/page.tsx b/app/(prowler)/scans/page.tsx index f9cbb862cd..c0cc62a0af 100644 --- a/app/(prowler)/scans/page.tsx +++ b/app/(prowler)/scans/page.tsx @@ -1,54 +1,100 @@ import { Spacer } from "@nextui-org/react"; +import { Suspense } from "react"; -// import { Suspense } from "react"; -// import { getProviders } from "@/actions/providers"; -import { FilterControls, filterScans } from "@/components/filters"; -// import { ColumnScans, SkeletonTableScans } from "@/components/scans/table"; +import { getProviders } from "@/actions/providers"; +import { + FilterControls, + filterProviders, + filterScans, +} from "@/components/filters"; +import { ColumnScans, SkeletonTableScans } from "@/components/scans/table"; import { Header } from "@/components/ui"; -// import { DataTable } from "@/components/ui/table"; -// import { SearchParamsProps } from "@/types"; +import { DataTable } from "@/components/ui/table"; +import { SearchParamsProps } from "@/types"; -export default async function Scans() { - // const searchParamsKey = JSON.stringify(searchParams || {}); +export default async function Scans({ + searchParams, +}: { + searchParams: SearchParamsProps; +}) { + const searchParamsKey = JSON.stringify(searchParams || {}); return ( <>
- + - {/* }> - - */} +
+
+ }> + + +
+
+ }> + + +
+
); } -// const SSRDataTable = async ({ -// searchParams, -// }: { -// searchParams: SearchParamsProps; -// }) => { -// const page = parseInt(searchParams.page?.toString() || "1", 10); -// const sort = searchParams.sort?.toString(); +const SSRDataTableProviders = async ({ + searchParams, +}: { + searchParams: SearchParamsProps; +}) => { + const page = parseInt(searchParams.page?.toString() || "1", 10); + const sort = searchParams.sort?.toString(); -// // Extract all filter parameters -// const filters = Object.fromEntries( -// Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")), -// ); + // Extract all filter parameters + const filters = Object.fromEntries( + Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")), + ); -// // Extract query from filters -// const query = (filters["filter[search]"] as string) || ""; + // Extract query from filters + const query = (filters["filter[search]"] as string) || ""; -// const providersData = await getProviders({ query, page, sort, filters }); + const providersData = await getProviders({ query, page, sort, filters }); -// return ( -// -// ); -// }; + return ( + + ); +}; + +const SSRDataTableScans = async ({ + searchParams, +}: { + searchParams: SearchParamsProps; +}) => { + const page = parseInt(searchParams.page?.toString() || "1", 10); + const sort = searchParams.sort?.toString(); + + // Extract all filter parameters + const filters = Object.fromEntries( + Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")), + ); + + // Extract query from filters + const query = (filters["filter[search]"] as string) || ""; + + const providersData = await getProviders({ query, page, sort, filters }); + + return ( + + ); +}; diff --git a/components/filters/data-filters.ts b/components/filters/data-filters.ts index 81bbf0d852..d6d876b522 100644 --- a/components/filters/data-filters.ts +++ b/components/filters/data-filters.ts @@ -8,9 +8,21 @@ export const filterProviders = [ ]; export const filterScans = [ + { + key: "state", + labelCheckboxGroup: "State", + values: [ + "available", + "scheduled", + "executing", + "completed", + "failed", + "cancelled", + ], + }, { key: "trigger", - labelCheckboxGroup: "Scan Schedule", + labelCheckboxGroup: "Schedule", values: ["scheduled", "manual"], }, // Add more filter categories as needed diff --git a/components/filters/filter-controls.tsx b/components/filters/filter-controls.tsx index 19053cb62b..28c455ceea 100644 --- a/components/filters/filter-controls.tsx +++ b/components/filters/filter-controls.tsx @@ -6,8 +6,8 @@ import React, { useCallback, useEffect, useState } from "react"; import { FilterControlsProps } from "@/types"; import { CrossIcon } from "../icons"; -import { DataTableFilterCustom } from "../providers/table"; import { CustomButton } from "../ui/custom"; +import { DataTableFilterCustom } from "../ui/table"; import { CustomCheckboxMutedFindings } from "./custo-checkbox-muted-findings"; import { CustomAccountSelection } from "./custom-account-selection"; import { CustomDatePicker } from "./custom-date-picker"; @@ -22,7 +22,7 @@ export const FilterControls: React.FC = ({ regions = false, accounts = false, mutedFindings = false, - customFilters = [], + customFilters, }) => { const router = useRouter(); const searchParams = useSearchParams(); @@ -69,7 +69,7 @@ export const FilterControls: React.FC = ({ )} - + {customFilters && } ); }; diff --git a/components/providers/table/index.ts b/components/providers/table/index.ts index 7cee6919ed..eb6e772b49 100644 --- a/components/providers/table/index.ts +++ b/components/providers/table/index.ts @@ -1,4 +1,3 @@ export * from "./column-providers"; -export * from "./data-table-filter-custom"; export * from "./data-table-row-actions"; export * from "./skeleton-table-provider"; diff --git a/components/scans/table/data-table-filter-custom.tsx b/components/scans/table/data-table-filter-custom.tsx deleted file mode 100644 index 5dc2f94dc2..0000000000 --- a/components/scans/table/data-table-filter-custom.tsx +++ /dev/null @@ -1,75 +0,0 @@ -"use client"; - -import { useRouter, useSearchParams } from "next/navigation"; -import React, { useState } from "react"; -import { useCallback } from "react"; - -import { CustomFilterIcon } from "@/components/icons"; -import { CustomButton, CustomDropdownFilter } from "@/components/ui/custom"; -import { FilterOption } from "@/types"; - -export interface DataTableFilterCustomProps { - filters: FilterOption[]; -} - -export const DataTableFilterCustom = ({ - filters, -}: DataTableFilterCustomProps) => { - const router = useRouter(); - const searchParams = useSearchParams(); - const [showFilters, setShowFilters] = useState(false); - - const pushDropdownFilter = useCallback( - (key: string, values: string[]) => { - const params = new URLSearchParams(searchParams); - const filterKey = `filter[${key}]`; - - if (values.length === 0) { - params.delete(filterKey); - } else { - params.set(filterKey, values.join(",")); - } - - router.push(`?${params.toString()}`); - }, - [router, searchParams], - ); - - return ( -
- } - onPress={() => setShowFilters(!showFilters)} - > -

- {showFilters ? "Hide Filters" : "Show Filters"} -

- - -
-
- {filters.map((filter) => ( - - ))} -
-
-
- ); -}; diff --git a/components/scans/table/index.ts b/components/scans/table/index.ts index 1d24d2e598..62300a2d96 100644 --- a/components/scans/table/index.ts +++ b/components/scans/table/index.ts @@ -1,4 +1,3 @@ export * from "./column-scans"; -export * from "./data-table-filter-custom"; export * from "./data-table-row-actions"; export * from "./skeleton-table-scans"; diff --git a/components/providers/table/data-table-filter-custom.tsx b/components/ui/table/data-table-filter-custom.tsx similarity index 100% rename from components/providers/table/data-table-filter-custom.tsx rename to components/ui/table/data-table-filter-custom.tsx diff --git a/components/ui/table/data-table.tsx b/components/ui/table/data-table.tsx index 3fc9b65dcc..30593a7cf9 100644 --- a/components/ui/table/data-table.tsx +++ b/components/ui/table/data-table.tsx @@ -14,6 +14,7 @@ import { import { useState } from "react"; import { + DataTableFilterCustom, Table, TableBody, TableCell, @@ -22,18 +23,20 @@ import { TableRow, } from "@/components/ui/table"; import { DataTablePagination } from "@/components/ui/table/data-table-pagination"; -import { MetaDataProps } from "@/types"; +import { FilterOption, MetaDataProps } from "@/types"; interface DataTableProviderProps { columns: ColumnDef[]; data: TData[]; metadata?: MetaDataProps; + customFilters?: FilterOption[]; } export function DataTable({ columns, data, metadata, + customFilters, }: DataTableProviderProps) { const [sorting, setSorting] = useState([]); const [columnFilters, setColumnFilters] = useState([]); @@ -55,6 +58,9 @@ export function DataTable({ return ( <> +
+ +
diff --git a/components/ui/table/index.ts b/components/ui/table/index.ts index 67cf0fab8b..a344b959de 100644 --- a/components/ui/table/index.ts +++ b/components/ui/table/index.ts @@ -1,5 +1,6 @@ export * from "./data-table"; export * from "./data-table-column-header"; +export * from "./data-table-filter-custom"; export * from "./data-table-pagination"; export * from "./severity-badge"; export * from "./status-badge";