ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2025-12-19 05:17:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade to React 19, Next.js 15, React Compiler, HeroUI and Tailwind 4 (#8748)

Browse Source 
Co-authored-by: Alan Buscaglia <alanbuscaglia@MacBook-Pro.local>
Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>
Co-authored-by: César Arroba <cesar@prowler.com>
Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
This commit is contained in:
Alan Buscaglia
2025-09-30 09:59:51 +02:00
committed by GitHub
parent 2a4b62527a
commit 4d5676f00e
261 changed files with 6339 additions and 6126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@@ -99,7 +99,7 @@ SENTRY_ENVIRONMENT=local
SENTRY_RELEASE=local
#### Prowler release version ####
NEXT_PUBLIC_PROWLER_RELEASE_VERSION=v5.10.0
NEXT_PUBLIC_PROWLER_RELEASE_VERSION=v5.12.2
# Social login credentials
SOCIAL_GOOGLE_OAUTH_CALLBACK_URL="${AUTH_URL}/api/auth/callback/google"

4
Makefile
View File

@@ -45,3 +45,7 @@ pypi-upload: ## Upload package
help: ## Show this help.
@echo "Prowler Makefile"
@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n make \033[36m<target>\033[0m\n"} /^[a-zA-Z_-]+:.*?##/ { printf " \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
##@ Development Environment
run-api-dev: ## Start development environment with API, PostgreSQL, Valkey, and workers
docker compose -f docker-compose-dev.yml up api-dev postgres valkey worker-dev worker-beat --build

1
ui/.eslintignore
View File

@@ -12,6 +12,7 @@ node_modules
coverage
.next
build
next-env.d.ts
!.commitlintrc.cjs
!.lintstagedrc.cjs
!jest.config.js

9
ui/CHANGELOG.md
View File

@@ -9,11 +9,18 @@ All notable changes to the **Prowler UI** are documented in this file.
- Support for Markdown and AdditionalURLs in findings detail page [(#8704)](https://github.com/prowler-cloud/prowler/pull/8704)
- `Prowler Hub` menu item with tooltip [(#8692)] (https://github.com/prowler-cloud/prowler/pull/8692)
- Copy link button to finding detail page [(#8685)] (https://github.com/prowler-cloud/prowler/pull/8685)
- React Compiler support for automatic optimization [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
- Turbopack support for faster development builds [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
- Add compliance name in compliance detail view [(#8775)](https://github.com/prowler-cloud/prowler/pull/8775)
### 🔄 Changed
### 🐞 Fixed
- Upgraded React to version 19.1.1 with async components support [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
- Upgraded Next.js to version 15.5.3 with enhanced App Router [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
- Updated from NextUI to HeroUI [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
- Updated LangChain to latest versions with API improvements [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
- Migrated all page components to async `params`/`searchParams` API [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
- Migrated from `useFormState` to `useActionState` for React 19 compatibility [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
---

5
ui/actions/compliances/compliances.ts
View File

@@ -1,6 +1,7 @@
"use server";
import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiResponse } from "@/lib/server-actions-helper";
export const getCompliancesOverview = async ({
scanId,
@@ -28,7 +29,7 @@ export const getCompliancesOverview = async ({
headers,
});
return handleApiResponse(response, "/compliance");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching providers:", error);
return undefined;

7
ui/actions/findings/findings.ts
View File

@@ -2,7 +2,8 @@
import { redirect } from "next/navigation";
import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiResponse } from "@/lib/server-actions-helper";
export const getFindings = async ({
page = 1,
@@ -32,7 +33,7 @@ export const getFindings = async ({
const findings = await fetch(url.toString(), {
headers,
});
return handleApiResponse(findings, "/findings");
return handleApiResponse(findings);
} catch (error) {
console.error("Error fetching findings:", error);
return undefined;
@@ -69,7 +70,7 @@ export const getLatestFindings = async ({
const findings = await fetch(url.toString(), {
headers,
});
return handleApiResponse(findings, "/findings");
return handleApiResponse(findings);
} catch (error) {
console.error("Error fetching findings:", error);
return undefined;

9
ui/actions/integrations/integrations.ts
View File

@@ -3,13 +3,8 @@
import { revalidatePath } from "next/cache";
import { pollTaskUntilSettled } from "@/actions/task/poll";
import {
apiBaseUrl,
getAuthHeaders,
handleApiError,
handleApiResponse,
parseStringify,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders, parseStringify } from "@/lib";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
import { IntegrationType } from "@/types/integrations";
import type { TaskState } from "@/types/tasks";

3
ui/actions/integrations/jira-dispatch.ts
View File

@@ -1,7 +1,8 @@
"use server";
import { pollTaskUntilSettled } from "@/actions/task/poll";
import { apiBaseUrl, getAuthHeaders, handleApiError } from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiError } from "@/lib/server-actions-helper";
import type {
IntegrationProps,
JiraDispatchRequest,

3
ui/actions/integrations/saml.ts
View File

@@ -2,7 +2,8 @@
import { revalidatePath } from "next/cache";
import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib/helper";
import { apiBaseUrl, getAuthHeaders } from "@/lib/helper";
import { handleApiResponse } from "@/lib/server-actions-helper";
import { samlConfigFormSchema } from "@/types/formSchemas";
export const createSamlConfig = async (_prevState: any, formData: FormData) => {

10
ui/actions/invitations/invitation.ts
View File

@@ -3,12 +3,8 @@
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import {
apiBaseUrl,
getAuthHeaders,
handleApiError,
handleApiResponse,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
export const getInvitations = async ({
page = 1,
@@ -40,7 +36,7 @@ export const getInvitations = async ({
headers,
});
return handleApiResponse(response, "/invitations");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching invitations:", error);
return undefined;

13
ui/actions/manage-groups/manage-groups.ts
View File

@@ -3,13 +3,8 @@
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import {
apiBaseUrl,
getAuthHeaders,
getErrorMessage,
handleApiError,
handleApiResponse,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders, getErrorMessage } from "@/lib";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
import { ManageGroupPayload, ProviderGroupsResponse } from "@/types/components";
export const getProviderGroups = async ({
@@ -48,7 +43,7 @@ export const getProviderGroups = async ({
headers,
});
return handleApiResponse(response, "/manage-groups");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching provider groups:", error);
return undefined;
@@ -161,7 +156,7 @@ export const updateProviderGroup = async (
body: JSON.stringify(payload),
});
return handleApiResponse(response, "/manage-groups");
return handleApiResponse(response);
} catch (error) {
handleApiError(error);
}

9
ui/actions/overview/overview.ts
View File

@@ -1,7 +1,8 @@
"use server";
import { redirect } from "next/navigation";
import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiResponse } from "@/lib/server-actions-helper";
export const getProvidersOverview = async ({
page = 1,
@@ -31,7 +32,7 @@ export const getProvidersOverview = async ({
headers,
});
return handleApiResponse(response, "/");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching providers overview:", error);
return undefined;
@@ -72,7 +73,7 @@ export const getFindingsByStatus = async ({
headers,
});
return handleApiResponse(response, "/");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching findings severity overview:", error);
return undefined;
@@ -108,7 +109,7 @@ export const getFindingsBySeverity = async ({
headers,
});
return handleApiResponse(response, "/");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching findings severity overview:", error);
return undefined;

14
ui/actions/providers/providers.ts
View File

@@ -3,16 +3,10 @@
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import {
apiBaseUrl,
getAuthHeaders,
getFormValue,
handleApiError,
handleApiResponse,
wait,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders, getFormValue, wait } from "@/lib";
import { buildSecretConfig } from "@/lib/provider-credentials/build-crendentials";
import { ProviderCredentialFields } from "@/lib/provider-credentials/provider-credential-fields";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
import { ProvidersApiResponse, ProviderType } from "@/types/providers";
export const getProviders = async ({
@@ -45,7 +39,7 @@ export const getProviders = async ({
headers,
});
return handleApiResponse(response, "/providers");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching providers:", error);
return undefined;
@@ -63,7 +57,7 @@ export const getProvider = async (formData: FormData) => {
headers,
});
return handleApiResponse(response, "/providers");
return handleApiResponse(response);
} catch (error) {
return handleApiError(error);
}

7
ui/actions/resources/resources.ts
View File

@@ -2,7 +2,8 @@
import { redirect } from "next/navigation";
import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiResponse } from "@/lib/server-actions-helper";
export const getResources = async ({
page = 1,
@@ -46,7 +47,7 @@ export const getResources = async ({
headers,
});
return handleApiResponse(response, "/resources");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching resources:", error);
return undefined;
@@ -95,7 +96,7 @@ export const getLatestResources = async ({
headers,
});
return handleApiResponse(response, "/resources");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching latest resources:", error);
return undefined;

10
ui/actions/roles/roles.ts
View File

@@ -3,12 +3,8 @@
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import {
apiBaseUrl,
getAuthHeaders,
handleApiError,
handleApiResponse,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
export const getRoles = async ({
page = 1,
@@ -40,7 +36,7 @@ export const getRoles = async ({
headers,
});
return handleApiResponse(response, "/roles");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching roles:", error);
return undefined;

11
ui/actions/scans/scans.ts
View File

@@ -2,13 +2,8 @@
import { redirect } from "next/navigation";
import {
apiBaseUrl,
getAuthHeaders,
getErrorMessage,
handleApiError,
handleApiResponse,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders, getErrorMessage } from "@/lib";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
export const getScans = async ({
page = 1,
@@ -44,7 +39,7 @@ export const getScans = async ({
try {
const response = await fetch(url.toString(), { headers });
return handleApiResponse(response, "/scans");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching scans:", error);
return undefined;

8
ui/actions/task/tasks.ts
View File

@@ -1,11 +1,7 @@
"use server";
import {
apiBaseUrl,
getAuthHeaders,
handleApiError,
handleApiResponse,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
export const getTask = async (taskId: string) => {
const headers = await getAuthHeaders({ contentType: false });

12
ui/actions/users/tenants.ts
View File

@@ -2,12 +2,8 @@
import { z } from "zod";
import {
apiBaseUrl,
getAuthHeaders,
handleApiError,
handleApiResponse,
} from "@/lib/helper";
import { apiBaseUrl, getAuthHeaders } from "@/lib/helper";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
export const getAllTenants = async () => {
const headers = await getAuthHeaders({ contentType: false });
@@ -23,7 +19,7 @@ export const getAllTenants = async () => {
throw new Error(`Failed to fetch tenants data: ${response.statusText}`);
}
return handleApiResponse(response, "/profile");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching tenants:", error);
return undefined;
@@ -41,7 +37,7 @@ const editTenantFormSchema = z
path: ["name"],
});
export async function updateTenantName(prevState: any, formData: FormData) {
export async function updateTenantName(_prevState: any, formData: FormData) {
const headers = await getAuthHeaders({ contentType: true });
const formDataObject = Object.fromEntries(formData);
const validatedData = editTenantFormSchema.safeParse(formDataObject);

12
ui/actions/users/users.ts
View File

@@ -3,12 +3,8 @@
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import {
apiBaseUrl,
getAuthHeaders,
handleApiError,
handleApiResponse,
} from "@/lib";
import { apiBaseUrl, getAuthHeaders } from "@/lib";
import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
export const getUsers = async ({
page = 1,
@@ -40,7 +36,7 @@ export const getUsers = async ({
headers,
});
return handleApiResponse(users, "/users");
return handleApiResponse(users);
} catch (error) {
console.error("Error fetching users:", error);
return undefined;
@@ -178,7 +174,7 @@ export const getUserInfo = async () => {
throw new Error(`Failed to fetch user data: ${response.statusText}`);
}
return handleApiResponse(response, "/profile");
return handleApiResponse(response);
} catch (error) {
console.error("Error fetching profile:", error);
return undefined;

2
ui/app/(auth)/layout.tsx
View File

@@ -47,7 +47,7 @@ export default async function RootLayout({
<body
suppressHydrationWarning
className={cn(
"min-h-screen bg-background font-sans antialiased",
"bg-background min-h-screen font-sans antialiased",
fontSans.variable,
)}
>

11
ui/app/(auth)/sign-up/page.tsx
View File

@@ -3,10 +3,15 @@ import { getAuthUrl, isGithubOAuthEnabled } from "@/lib/helper";
import { isGoogleOAuthEnabled } from "@/lib/helper";
import { SearchParamsProps } from "@/types";
const SignUp = ({ searchParams }: { searchParams: SearchParamsProps }) => {
const SignUp = async ({
searchParams,
}: {
searchParams: Promise<SearchParamsProps>;
}) => {
const resolvedSearchParams = await searchParams;
const invitationToken =
typeof searchParams?.invitation_token === "string"
? searchParams.invitation_token
typeof resolvedSearchParams?.invitation_token === "string"
? resolvedSearchParams.invitation_token
: null;
const GOOGLE_AUTH_URL = getAuthUrl("google");

27
ui/app/(prowler)/compliance/[compliancetitle]/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import Image from "next/image";
import React, { Suspense } from "react";
@@ -48,12 +48,12 @@ const ComplianceIconSmall = ({
title: string;
}) => {
return (
<div className="relative h-6 w-6 flex-shrink-0">
<div className="relative h-6 w-6 shrink-0">
<Image
src={logoPath}
alt={`${title} logo`}
fill
className="h-8 w-8 min-w-8 rounded-md border-1 border-gray-300 bg-white object-contain p-[2px]"
className="h-8 w-8 min-w-8 rounded-md border border-gray-300 bg-white object-contain p-[2px]"
/>
</div>
);
@@ -76,18 +76,19 @@ export default async function ComplianceDetail({
params,
searchParams,
}: {
params: { compliancetitle: string };
searchParams: ComplianceDetailSearchParams;
params: Promise<{ compliancetitle: string }>;
searchParams: Promise<ComplianceDetailSearchParams>;
}) {
const { compliancetitle } = params;
const { complianceId, version, scanId, scanData } = searchParams;
const regionFilter = searchParams["filter[region__in]"];
const cisProfileFilter = searchParams["filter[cis_profile_level]"];
const { compliancetitle } = await params;
const resolvedSearchParams = await searchParams;
const { complianceId, version, scanId, scanData } = resolvedSearchParams;
const regionFilter = resolvedSearchParams["filter[region__in]"];
const cisProfileFilter = resolvedSearchParams["filter[cis_profile_level]"];
const logoPath = getComplianceIcon(compliancetitle);
// Create a key that excludes pagination parameters to preserve accordion state avoiding reloads with pagination
const paramsForKey = Object.fromEntries(
Object.entries(searchParams).filter(
Object.entries(resolvedSearchParams).filter(
([key]) => key !== "page" && key !== "pageSize",
),
);
@@ -153,7 +154,7 @@ export default async function ComplianceDetail({
<Suspense
key={searchParamsKey}
fallback={
<div className="space-y-8">
<div className="flex flex-col gap-8">
<ChartsWrapper logoPath={logoPath}>
<PieChartSkeleton />
<BarChartSkeleton />
@@ -200,7 +201,7 @@ const SSRComplianceContent = async ({
if (!scanId || type === "tasks") {
return (
<div className="space-y-8">
<div className="flex flex-col gap-8">
<ChartsWrapper logoPath={logoPath}>
<PieChart pass={0} fail={0} manual={0} />
<BarChart sections={[]} />
@@ -231,7 +232,7 @@ const SSRComplianceContent = async ({
const topFailedSections = mapper.getTopFailedSections(data);
return (
<div className="space-y-8">
<div className="flex flex-col gap-8">
<ChartsWrapper logoPath={logoPath}>
<PieChart
pass={totalRequirements.pass}

19
ui/app/(prowler)/compliance/page.tsx
View File

@@ -22,12 +22,15 @@ import { ComplianceOverviewData } from "@/types/compliance";
export default async function Compliance({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
const filters = Object.fromEntries(
Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
Object.entries(resolvedSearchParams).filter(([key]) =>
key.startsWith("filter["),
),
);
const scansData = await getScans({
@@ -72,7 +75,7 @@ export default async function Compliance({
.filter(Boolean) as ExpandedScanData[];
const selectedScanId =
searchParams.scanId || expandedScansData[0]?.id || null;
resolvedSearchParams.scanId || expandedScansData[0]?.id || null;
const query = (filters["filter[search]"] as string) || "";
// Find the selected scan
@@ -103,7 +106,7 @@ export default async function Compliance({
const uniqueRegions = metadataInfoData?.data?.attributes?.regions || [];
return (
<ContentLayout title="Compliance" icon="fluent-mdl2:compliance-audit">
<ContentLayout title="Compliance" icon="lucide:shield-check">
{selectedScanId ? (
<>
<ComplianceHeader
@@ -112,7 +115,7 @@ export default async function Compliance({
/>
<Suspense key={searchParamsKey} fallback={<ComplianceSkeletonGrid />}>
<SSRComplianceGrid
searchParams={searchParams}
searchParams={resolvedSearchParams}
selectedScan={selectedScanData}
/>
</Suspense>
@@ -163,7 +166,7 @@ const SSRComplianceGrid = async ({
) {
return (
<div className="flex h-full items-center">
<div className="text-sm text-default-500">
<div className="text-default-500 text-sm">
No compliance data available for the selected scan.
</div>
</div>
@@ -174,7 +177,7 @@ const SSRComplianceGrid = async ({
if (compliancesData?.errors?.length > 0) {
return (
<div className="flex h-full items-center">
<div className="text-sm text-default-500">Provide a valid scan ID.</div>
<div className="text-default-500 text-sm">Provide a valid scan ID.</div>
</div>
);
}

19
ui/app/(prowler)/findings/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import React, { Suspense } from "react";
import {
@@ -33,13 +33,15 @@ import { FindingProps, SearchParamsProps } from "@/types/components";
export default async function Findings({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const { searchParamsKey, encodedSort } = extractSortAndKey(searchParams);
const { filters, query } = extractFiltersAndQuery(searchParams);
const resolvedSearchParams = await searchParams;
const { searchParamsKey, encodedSort } =
extractSortAndKey(resolvedSearchParams);
const { filters, query } = extractFiltersAndQuery(resolvedSearchParams);
// Check if the searchParams contain any date or scan filter
const hasDateOrScan = hasDateOrScanFilter(searchParams);
const hasDateOrScan = hasDateOrScanFilter(resolvedSearchParams);
const [metadataInfoData, providersData, scansData] = await Promise.all([
(hasDateOrScan ? getMetadataInfo : getLatestMetadataInfo)({
@@ -81,7 +83,7 @@ export default async function Findings({
) as { [uid: string]: ScanEntity }[];
return (
<ContentLayout title="Findings" icon="carbon:data-view-alt">
<ContentLayout title="Findings" icon="lucide:tag">
<FindingsFilters
providerUIDs={providerUIDs}
providerDetails={providerDetails}
@@ -94,7 +96,7 @@ export default async function Findings({
/>
<Spacer y={8} />
<Suspense key={searchParamsKey} fallback={<SkeletonTableFindings />}>
<SSRDataTable searchParams={searchParams} />
<SSRDataTable searchParams={resolvedSearchParams} />
</Suspense>
</ContentLayout>
);
@@ -157,12 +159,13 @@ const SSRDataTable = async ({
return (
<>
{findingsData?.errors && (
<div className="mb-4 flex rounded-lg border border-red-500 bg-red-100 p-2 text-small text-red-700">
<div className="text-small mb-4 flex rounded-lg border border-red-500 bg-red-100 p-2 text-red-700">
<p className="mr-2 font-semibold">Error:</p>
<p>{findingsData.errors[0].detail}</p>
</div>
)}
<DataTable
key={Date.now()}
columns={ColumnFindings}
data={expandedResponse?.data || []}
metadata={findingsData?.meta}

22
ui/app/(prowler)/integrations/amazon-s3/page.tsx
View File

@@ -6,19 +6,25 @@ import { S3IntegrationsManager } from "@/components/integrations/s3/s3-integrati
import { ContentLayout } from "@/components/ui";
interface S3IntegrationsProps {
searchParams: { [key: string]: string | string[] | undefined };
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function S3Integrations({
searchParams,
}: S3IntegrationsProps) {
const page = parseInt(searchParams.page?.toString() || "1", 10);
const pageSize = parseInt(searchParams.pageSize?.toString() || "10", 10);
const sort = searchParams.sort?.toString();
const resolvedSearchParams = await searchParams;
const page = parseInt(resolvedSearchParams.page?.toString() || "1", 10);
const pageSize = parseInt(
resolvedSearchParams.pageSize?.toString() || "10",
10,
);
const sort = resolvedSearchParams.sort?.toString();
// Extract all filter parameters
const filters = Object.fromEntries(
Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
Object.entries(resolvedSearchParams).filter(([key]) =>
key.startsWith("filter["),
),
);
const urlSearchParams = new URLSearchParams();
@@ -49,8 +55,8 @@ export default async function S3Integrations({
return (
<ContentLayout title="Amazon S3">
<div className="space-y-6">
<div className="space-y-4">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<p className="text-sm text-gray-600 dark:text-gray-300">
Configure Amazon S3 integration to automatically export your scan
results to S3 buckets.
@@ -60,7 +66,7 @@ export default async function S3Integrations({
<h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
Features:
</h3>
<ul className="grid grid-cols-1 gap-2 text-sm text-gray-600 dark:text-gray-300 md:grid-cols-2">
<ul className="grid grid-cols-1 gap-2 text-sm text-gray-600 md:grid-cols-2 dark:text-gray-300">
<li className="flex items-center gap-2">
<span className="h-1.5 w-1.5 rounded-full bg-green-500" />
Automated scan result exports

22
ui/app/(prowler)/integrations/aws-security-hub/page.tsx
View File

@@ -6,18 +6,24 @@ import { SecurityHubIntegrationsManager } from "@/components/integrations/securi
import { ContentLayout } from "@/components/ui";
interface SecurityHubIntegrationsProps {
searchParams: { [key: string]: string | string[] | undefined };
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function SecurityHubIntegrations({
searchParams,
}: SecurityHubIntegrationsProps) {
const page = parseInt(searchParams.page?.toString() || "1", 10);
const pageSize = parseInt(searchParams.pageSize?.toString() || "10", 10);
const sort = searchParams.sort?.toString();
const resolvedSearchParams = await searchParams;
const page = parseInt(resolvedSearchParams.page?.toString() || "1", 10);
const pageSize = parseInt(
resolvedSearchParams.pageSize?.toString() || "10",
10,
);
const sort = resolvedSearchParams.sort?.toString();
const filters = Object.fromEntries(
Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
Object.entries(resolvedSearchParams).filter(([key]) =>
key.startsWith("filter["),
),
);
const urlSearchParams = new URLSearchParams();
@@ -47,8 +53,8 @@ export default async function SecurityHubIntegrations({
return (
<ContentLayout title="AWS Security Hub">
<div className="space-y-6">
<div className="space-y-4">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<p className="text-sm text-gray-600 dark:text-gray-300">
Configure AWS Security Hub integration to automatically send your
security findings for centralized monitoring and compliance.
@@ -58,7 +64,7 @@ export default async function SecurityHubIntegrations({
<h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
Features:
</h3>
<ul className="grid grid-cols-1 gap-2 text-sm text-gray-600 dark:text-gray-300 md:grid-cols-2">
<ul className="grid grid-cols-1 gap-2 text-sm text-gray-600 md:grid-cols-2 dark:text-gray-300">
<li className="flex items-center gap-2">
<span className="h-1.5 w-1.5 rounded-full bg-green-500" />
Automated findings export

22
ui/app/(prowler)/integrations/jira/page.tsx
View File

@@ -3,19 +3,25 @@ import { JiraIntegrationsManager } from "@/components/integrations/jira/jira-int
import { ContentLayout } from "@/components/ui";
interface JiraIntegrationsProps {
searchParams: { [key: string]: string | string[] | undefined };
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function JiraIntegrations({
searchParams,
}: JiraIntegrationsProps) {
const page = parseInt(searchParams.page?.toString() || "1", 10);
const pageSize = parseInt(searchParams.pageSize?.toString() || "10", 10);
const sort = searchParams.sort?.toString();
const resolvedSearchParams = await searchParams;
const page = parseInt(resolvedSearchParams.page?.toString() || "1", 10);
const pageSize = parseInt(
resolvedSearchParams.pageSize?.toString() || "10",
10,
);
const sort = resolvedSearchParams.sort?.toString();
// Extract all filter parameters
const filters = Object.fromEntries(
Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
Object.entries(resolvedSearchParams).filter(([key]) =>
key.startsWith("filter["),
),
);
const urlSearchParams = new URLSearchParams();
@@ -42,8 +48,8 @@ export default async function JiraIntegrations({
return (
<ContentLayout title="Jira">
<div className="space-y-6">
<div className="space-y-4">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<p className="text-sm text-gray-600 dark:text-gray-300">
Configure Jira integration to automatically create issues for
security findings in your Jira projects.
@@ -53,7 +59,7 @@ export default async function JiraIntegrations({
<h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
Features:
</h3>
<ul className="grid grid-cols-1 gap-2 text-sm text-gray-600 dark:text-gray-300 md:grid-cols-2">
<ul className="grid grid-cols-1 gap-2 text-sm text-gray-600 md:grid-cols-2 dark:text-gray-300">
<li className="flex items-center gap-2">
<span className="h-1.5 w-1.5 rounded-full bg-green-500" />
Automated issue creation

4
ui/app/(prowler)/integrations/page.tsx
View File

@@ -10,8 +10,8 @@ import { ContentLayout } from "@/components/ui";
export default async function Integrations() {
return (
<ContentLayout title="Integrations" icon="lucide:puzzle">
<div className="space-y-6">
<div className="space-y-4">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<p className="text-sm text-gray-600 dark:text-gray-300">
Connect external services to enhance your security workflow and
automatically export your scan results.

7
ui/app/(prowler)/invitations/(send-invite)/check-details/page.tsx
View File

@@ -8,13 +8,14 @@ import { SearchParamsProps } from "@/types";
export default async function CheckDetailsPage({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
return (
<Suspense key={searchParamsKey} fallback={<SkeletonInvitationInfo />}>
<SSRDataInvitation searchParams={searchParams} />
<SSRDataInvitation searchParams={resolvedSearchParams} />
</Suspense>
);
}

6
ui/app/(prowler)/invitations/(send-invite)/layout.tsx
View File

@@ -1,6 +1,6 @@
import "@/styles/globals.css";
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import React from "react";
import { WorkflowSendInvite } from "@/components/invitations/workflow";
@@ -19,8 +19,8 @@ export default function InvitationLayout({ children }: InvitationLayoutProps) {
href="/invitations"
/>
<Spacer y={16} />
<div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
<div className="order-1 my-auto hidden h-full lg:col-span-4 lg:col-start-2 lg:block">
<div className="grid grid-cols-1 gap-8 px-4 lg:grid-cols-12 lg:px-0">
<div className="order-1 my-auto h-full lg:col-span-4 lg:col-start-2">
<WorkflowSendInvite />
</div>
<div className="order-2 my-auto lg:col-span-5 lg:col-start-6">

12
ui/app/(prowler)/invitations/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import React, { Suspense } from "react";
import { getInvitations } from "@/actions/invitations/invitation";
@@ -17,12 +17,13 @@ import { InvitationProps, Role, SearchParamsProps } from "@/types";
export default async function Invitations({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
return (
<ContentLayout title="Invitations" icon="ci:users">
<ContentLayout title="Invitations" icon="lucide:mail">
<FilterControls search />
<Spacer y={8} />
<SendInvitationButton />
@@ -31,7 +32,7 @@ export default async function Invitations({
<Spacer y={8} />
<Suspense key={searchParamsKey} fallback={<SkeletonTableInvitation />}>
<SSRDataTable searchParams={searchParams} />
<SSRDataTable searchParams={resolvedSearchParams} />
</Suspense>
</ContentLayout>
);
@@ -110,6 +111,7 @@ const SSRDataTable = async ({
return (
<DataTable
key={Date.now()}
columns={ColumnsInvitation}
data={expandedResponse?.data || []}
metadata={invitationsData?.meta}

2
ui/app/(prowler)/layout.tsx
View File

@@ -45,7 +45,7 @@ export default async function RootLayout({
<body
suppressHydrationWarning
className={cn(
"min-h-screen bg-background font-sans antialiased",
"bg-background min-h-screen font-sans antialiased",
fontSans.variable,
)}
>

5
ui/app/(prowler)/manage-groups/layout.tsx
View File

@@ -10,10 +10,7 @@ interface ProviderLayoutProps {
export default function ProviderLayout({ children }: ProviderLayoutProps) {
return (
<ContentLayout
title="Manage Groups"
icon="solar:users-group-two-rounded-outline"
>
<ContentLayout title="Manage Groups" icon="lucide:group">
{children}
</ContentLayout>
);

34
ui/app/(prowler)/manage-groups/page.tsx
View File

@@ -1,4 +1,5 @@
import { Divider, Spacer } from "@nextui-org/react";
import { Divider } from "@heroui/divider";
import { Spacer } from "@heroui/spacer";
import { redirect } from "next/navigation";
import React, { Suspense } from "react";
@@ -15,26 +16,27 @@ import { ColumnGroups } from "@/components/manage-groups/table";
import { DataTable } from "@/components/ui/table";
import { ProviderProps, Role, SearchParamsProps } from "@/types";
export default function ManageGroupsPage({
export default async function ManageGroupsPage({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams);
const providerGroupId = searchParams.groupId;
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams);
const providerGroupId = resolvedSearchParams.groupId;
return (
<div className="grid min-h-[70vh] grid-cols-1 items-center justify-center gap-4 md:grid-cols-12">
<div className="col-span-1 flex justify-end md:col-span-4">
<Suspense key={searchParamsKey} fallback={<SkeletonManageGroups />}>
{providerGroupId ? (
<SSRDataEditGroup searchParams={searchParams} />
<SSRDataEditGroup searchParams={resolvedSearchParams} />
) : (
<div className="flex flex-col">
<h1 className="mb-2 text-xl font-medium" id="getting-started">
Create a new provider group
</h1>
<p className="mb-5 text-small text-default-500">
<p className="text-small text-default-500 mb-5">
Create a new provider group to manage the providers and roles.
</p>
<SSRAddGroupForm />
@@ -50,7 +52,7 @@ export default function ManageGroupsPage({
<Spacer y={8} />
<h3 className="mb-4 text-sm font-bold uppercase">Provider Groups</h3>
<Suspense key={searchParamsKey} fallback={<SkeletonManageGroups />}>
<SSRDataTable searchParams={searchParams} />
<SSRDataTable searchParams={resolvedSearchParams} />
</Suspense>
</div>
</div>
@@ -143,7 +145,7 @@ const SSRDataEditGroup = async ({
<h1 className="mb-2 text-xl font-medium" id="getting-started">
Edit provider group
</h1>
<p className="mb-5 text-small text-default-500">
<p className="text-small text-default-500 mb-5">
Edit the provider group to manage the providers and roles.
</p>
<EditGroupForm
@@ -181,11 +183,15 @@ const SSRDataTable = async ({
filters,
pageSize,
});
return (
<DataTable
columns={ColumnGroups}
data={providerGroupsData?.data || []}
metadata={providerGroupsData?.meta}
/>
<>
<DataTable
key={`groups-${Date.now()}`}
columns={ColumnGroups}
data={providerGroupsData?.data || []}
metadata={providerGroupsData?.meta}
/>
</>
);
};

18
ui/app/(prowler)/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { Suspense } from "react";
import { getLatestFindings } from "@/actions/findings/findings";
@@ -37,14 +37,15 @@ function pickFilterParams(
);
}
export default function Home({
export default async function Home({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
return (
<ContentLayout title="Overview" icon="solar:pie-chart-2-outline">
<ContentLayout title="Overview" icon="lucide:square-chart-gantt">
<FilterControls providers mutedFindings showClearButton={false} />
<div className="grid grid-cols-12 gap-12 lg:gap-6">
@@ -56,13 +57,13 @@ export default function Home({
<div className="col-span-12 lg:col-span-4">
<Suspense fallback={<SkeletonFindingsBySeverityChart />}>
<SSRFindingsBySeverity searchParams={searchParams} />
<SSRFindingsBySeverity searchParams={resolvedSearchParams} />
</Suspense>
</div>
<div className="col-span-12 lg:col-span-4">
<Suspense fallback={<SkeletonFindingsByStatusChart />}>
<SSRFindingsByStatus searchParams={searchParams} />
<SSRFindingsByStatus searchParams={resolvedSearchParams} />
</Suspense>
</div>
@@ -72,7 +73,7 @@ export default function Home({
key={searchParamsKey}
fallback={<SkeletonTableNewFindings />}
>
<SSRDataNewFindingsTable searchParams={searchParams} />
<SSRDataNewFindingsTable searchParams={resolvedSearchParams} />
</Suspense>
</div>
</div>
@@ -205,6 +206,7 @@ const SSRDataNewFindingsTable = async ({
<LighthouseBanner />
<DataTable
key={`dashboard-${Date.now()}`}
columns={ColumnNewFindingsToDate}
data={expandedResponse?.data || []}
// metadata={findingsData?.meta}

8
ui/app/(prowler)/profile/page.tsx
View File

@@ -17,7 +17,7 @@ import {
export default async function Profile() {
return (
<ContentLayout title="User Profile" icon="ci:users">
<ContentLayout title="User Profile" icon="lucide:users">
<Suspense fallback={<SkeletonUserInfo />}>
<SSRDataUser />
</Suspense>
@@ -96,10 +96,10 @@ const SSRDataUser = async () => {
<div className="flex w-full flex-col gap-6">
<UserBasicInfoCard user={userData} tenantId={userTenantId || ""} />
<div className="flex flex-col gap-6 xl:flex-row">
<div className="w-full lg:w-2/3 xl:w-1/2">
<div className="w-full">
<RolesCard roles={roleDetails} roleDetails={roleDetailsMap} />
</div>
<div className="w-full lg:w-2/3 xl:w-1/2">
<div className="w-full">
<MembershipsCard
memberships={membershipsIncluded}
tenantsMap={tenantsMap}
@@ -108,7 +108,7 @@ const SSRDataUser = async () => {
</div>
</div>
{hasManageIntegrations && (
<div className="w-full pr-0 lg:w-2/3 xl:w-1/2 xl:pr-3">
<div className="w-full pr-0 xl:w-1/2 xl:pr-3">
<SamlIntegrationCard samlConfig={samlConfig?.data?.[0]} />
</div>
)}

13
ui/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx
View File

@@ -14,11 +14,12 @@ import { getProviderFormType } from "@/lib/provider-helpers";
import { ProviderType } from "@/types/providers";
interface Props {
searchParams: { type: ProviderType; id: string; via?: string };
searchParams: Promise<{ type: ProviderType; id: string; via?: string }>;
}
export default function AddCredentialsPage({ searchParams }: Props) {
const { type: providerType, via } = searchParams;
export default async function AddCredentialsPage({ searchParams }: Props) {
const resolvedSearchParams = await searchParams;
const { type: providerType, via } = resolvedSearchParams;
const formType = getProviderFormType(providerType, via);
switch (formType) {
@@ -30,13 +31,13 @@ export default function AddCredentialsPage({ searchParams }: Props) {
return null;
case "credentials":
return <AddViaCredentialsForm searchParams={searchParams} />;
return <AddViaCredentialsForm searchParams={resolvedSearchParams} />;
case "role":
return <AddViaRoleForm searchParams={searchParams} />;
return <AddViaRoleForm searchParams={resolvedSearchParams} />;
case "service-account":
return <AddViaServiceAccountForm searchParams={searchParams} />;
return <AddViaServiceAccountForm searchParams={resolvedSearchParams} />;
default:
return null;

2
ui/app/(prowler)/providers/(set-up-provider)/layout.tsx
View File

@@ -1,6 +1,6 @@
import "@/styles/globals.css";
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import React from "react";
import { WorkflowAddProvider } from "@/components/providers/workflow";

7
ui/app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx
View File

@@ -6,11 +6,12 @@ import { SkeletonProviderWorkflow } from "@/components/providers/workflow";
import { TestConnectionForm } from "@/components/providers/workflow/forms";
interface Props {
searchParams: { type: string; id: string; updated: string };
searchParams: Promise<{ type: string; id: string; updated: string }>;
}
export default async function TestConnectionPage({ searchParams }: Props) {
const providerId = searchParams.id;
const resolvedSearchParams = await searchParams;
const providerId = resolvedSearchParams.id;
if (!providerId) {
redirect("/providers/connect-account");
@@ -18,7 +19,7 @@ export default async function TestConnectionPage({ searchParams }: Props) {
return (
<Suspense fallback={<SkeletonProviderWorkflow />}>
<SSRTestConnection searchParams={searchParams} />
<SSRTestConnection searchParams={resolvedSearchParams} />
</Suspense>
);
}

17
ui/app/(prowler)/providers/(set-up-provider)/update-credentials/page.tsx
View File

@@ -10,16 +10,17 @@ import { getProviderFormType } from "@/lib/provider-helpers";
import { ProviderType } from "@/types/providers";
interface Props {
searchParams: {
searchParams: Promise<{
type: ProviderType;
id: string;
via?: string;
secretId?: string;
};
}>;
}
export default function UpdateCredentialsPage({ searchParams }: Props) {
const { type: providerType, via } = searchParams;
export default async function UpdateCredentialsPage({ searchParams }: Props) {
const resolvedSearchParams = await searchParams;
const { type: providerType, via } = resolvedSearchParams;
const formType = getProviderFormType(providerType, via);
switch (formType) {
@@ -29,13 +30,15 @@ export default function UpdateCredentialsPage({ searchParams }: Props) {
);
case "credentials":
return <UpdateViaCredentialsForm searchParams={searchParams} />;
return <UpdateViaCredentialsForm searchParams={resolvedSearchParams} />;
case "role":
return <UpdateViaRoleForm searchParams={searchParams} />;
return <UpdateViaRoleForm searchParams={resolvedSearchParams} />;
case "service-account":
return <UpdateViaServiceAccountForm searchParams={searchParams} />;
return (
<UpdateViaServiceAccountForm searchParams={resolvedSearchParams} />
);
default:
return null;

12
ui/app/(prowler)/providers/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { Suspense } from "react";
import { getProviders } from "@/actions/providers";
@@ -19,12 +19,13 @@ import { ProviderProps, SearchParamsProps } from "@/types";
export default async function Providers({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
return (
<ContentLayout title="Cloud Providers" icon="fluent:cloud-sync-24-regular">
<ContentLayout title="Cloud Providers" icon="lucide:cloud-cog">
<FilterControls search customFilters={filterProviders || []} />
<Spacer y={8} />
<Suspense
@@ -45,7 +46,7 @@ export default async function Providers({
</>
}
>
<ProvidersContent searchParams={searchParams} />
<ProvidersContent searchParams={resolvedSearchParams} />
</Suspense>
</ContentLayout>
);
@@ -106,6 +107,7 @@ const ProvidersContent = async ({
<div className="grid grid-cols-12 gap-4">
<div className="col-span-12">
<DataTable
key={`providers-${Date.now()}`}
columns={ColumnProviders}
data={enrichedProviders || []}
metadata={providersData?.meta}

19
ui/app/(prowler)/resources/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { Suspense } from "react";
import {
@@ -24,14 +24,16 @@ import { ResourceProps, SearchParamsProps } from "@/types";
export default async function Resources({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const { searchParamsKey, encodedSort } = extractSortAndKey(searchParams);
const { filters, query } = extractFiltersAndQuery(searchParams);
const resolvedSearchParams = await searchParams;
const { searchParamsKey, encodedSort } =
extractSortAndKey(resolvedSearchParams);
const { filters, query } = extractFiltersAndQuery(resolvedSearchParams);
const outputFilters = replaceFieldKey(filters, "inserted_at", "updated_at");
// Check if the searchParams contain any date or scan filter
const hasDateOrScan = hasDateOrScanFilter(searchParams);
const hasDateOrScan = hasDateOrScanFilter(resolvedSearchParams);
const metadataInfoData = await (
hasDateOrScan ? getMetadataInfo : getLatestMetadataInfo
@@ -47,7 +49,7 @@ export default async function Resources({
const uniqueResourceTypes = metadataInfoData?.data?.attributes?.types || [];
return (
<ContentLayout title="Resources" icon="carbon:data-view">
<ContentLayout title="Resources" icon="lucide:warehouse">
<FilterControls search date />
<DataTableFilterCustom
filters={[
@@ -71,7 +73,7 @@ export default async function Resources({
/>
<Spacer y={8} />
<Suspense key={searchParamsKey} fallback={<SkeletonTableResources />}>
<SSRDataTable searchParams={searchParams} />
<SSRDataTable searchParams={resolvedSearchParams} />
</Suspense>
</ContentLayout>
);
@@ -140,12 +142,13 @@ const SSRDataTable = async ({
return (
<>
{resourcesData?.errors && (
<div className="mb-4 flex rounded-lg border border-red-500 bg-red-100 p-2 text-small text-red-700">
<div className="text-small mb-4 flex rounded-lg border border-red-500 bg-red-100 p-2 text-red-700">
<p className="mr-2 font-semibold">Error:</p>
<p>{resourcesData.errors[0].detail}</p>
</div>
)}
<DataTable
key={`resources-${Date.now()}`}
columns={ColumnResources}
data={expandedResources || []}
metadata={resourcesData?.meta}

7
ui/app/(prowler)/roles/(add-role)/edit/page.tsx
View File

@@ -10,13 +10,14 @@ import { SearchParamsProps } from "@/types";
export default async function EditRolePage({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
return (
<Suspense key={searchParamsKey} fallback={<SkeletonRoleForm />}>
<SSRDataRole searchParams={searchParams} />
<SSRDataRole searchParams={resolvedSearchParams} />
</Suspense>
);
}

4
ui/app/(prowler)/roles/(add-role)/layout.tsx
View File

@@ -1,6 +1,6 @@
import "@/styles/globals.css";
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import React from "react";
import { WorkflowAddEditRole } from "@/components/roles/workflow";
@@ -19,7 +19,7 @@ export default function RoleLayout({ children }: RoleLayoutProps) {
href="/roles"
/>
<Spacer y={16} />
<div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
<div className="grid grid-cols-1 gap-8 px-4 sm:px-6 lg:grid-cols-12 lg:px-0">
<div className="order-1 my-auto hidden h-full lg:col-span-4 lg:col-start-2 lg:block">
<WorkflowAddEditRole />
</div>

12
ui/app/(prowler)/roles/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { Suspense } from "react";
import { getRoles } from "@/actions/roles";
@@ -14,12 +14,13 @@ import { SearchParamsProps } from "@/types";
export default async function Roles({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
return (
<ContentLayout title="Roles" icon="mdi:account-key-outline">
<ContentLayout title="Roles" icon="lucide:user-cog">
<FilterControls search />
<Spacer y={8} />
<AddRoleButton />
@@ -28,7 +29,7 @@ export default async function Roles({
<Spacer y={8} />
<Suspense key={searchParamsKey} fallback={<SkeletonTableRoles />}>
<SSRDataTable searchParams={searchParams} />
<SSRDataTable searchParams={resolvedSearchParams} />
</Suspense>
</ContentLayout>
);
@@ -55,6 +56,7 @@ const SSRDataTable = async ({
return (
<DataTable
key={`roles-${Date.now()}`}
columns={ColumnsRoles}
data={rolesData?.data || []}
metadata={rolesData?.meta}

17
ui/app/(prowler)/scans/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { Suspense } from "react";
import { getProviders } from "@/actions/providers";
@@ -26,12 +26,12 @@ import { ProviderProps, ScanProps, SearchParamsProps } from "@/types";
export default async function Scans({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const session = await auth();
const filteredParams = { ...searchParams };
const resolvedSearchParams = await searchParams;
const filteredParams = { ...resolvedSearchParams };
delete filteredParams.scanId;
const searchParamsKey = JSON.stringify(filteredParams);
const providersData = await getProviders({
pageSize: 50,
@@ -77,14 +77,14 @@ export default async function Scans({
if (thereIsNoProviders) {
return (
<ContentLayout title="Scans" icon="lucide:scan-search">
<ContentLayout title="Scans" icon="lucide:timer">
<NoProvidersAdded />
</ContentLayout>
);
}
return (
<ContentLayout title="Scans" icon="lucide:scan-search">
<ContentLayout title="Scans" icon="lucide:timer">
<AutoRefresh hasExecutingScan={hasExecutingScan} />
<>
{!hasManageScansPermission ? (
@@ -111,8 +111,8 @@ export default async function Scans({
<MutedFindingsConfigButton />
</div>
<Spacer y={8} />
<Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
<SSRDataTableScans searchParams={searchParams} />
<Suspense fallback={<SkeletonTableScans />}>
<SSRDataTableScans searchParams={resolvedSearchParams} />
</Suspense>
</>
</ContentLayout>
@@ -178,6 +178,7 @@ const SSRDataTableScans = async ({
return (
<DataTable
key={`scans-${Date.now()}`}
columns={ColumnGetScans}
data={expandedScansData || []}
metadata={scansData?.meta}

2
ui/app/(prowler)/services/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { FilterControls } from "@/components/filters";
import { ContentLayout } from "@/components/ui";

12
ui/app/(prowler)/users/page.tsx
View File

@@ -1,4 +1,4 @@
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { Suspense } from "react";
import { getUsers } from "@/actions/users/users";
@@ -13,12 +13,13 @@ import { Role, SearchParamsProps, UserProps } from "@/types";
export default async function Users({
searchParams,
}: {
searchParams: SearchParamsProps;
searchParams: Promise<SearchParamsProps>;
}) {
const searchParamsKey = JSON.stringify(searchParams || {});
const resolvedSearchParams = await searchParams;
const searchParamsKey = JSON.stringify(resolvedSearchParams || {});
return (
<ContentLayout title="Users" icon="ci:users">
<ContentLayout title="Users" icon="lucide:user">
<FilterControls search />
<Spacer y={8} />
<AddUserButton />
@@ -27,7 +28,7 @@ export default async function Users({
<Spacer y={8} />
<Suspense key={searchParamsKey} fallback={<SkeletonTableUser />}>
<SSRDataTable searchParams={searchParams} />
<SSRDataTable searchParams={resolvedSearchParams} />
</Suspense>
</ContentLayout>
);
@@ -91,6 +92,7 @@ const SSRDataTable = async ({
return (
<DataTable
key={`scans-${Date.now()}`}
columns={ColumnsUser}
data={expandedUsers || []}
metadata={usersData?.meta}

6
ui/app/providers.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { NextUIProvider } from "@nextui-org/system";
import { HeroUIProvider } from "@heroui/system";
import { useRouter } from "next/navigation";
import { SessionProvider } from "next-auth/react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
@@ -17,9 +17,9 @@ export function Providers({ children, themeProps }: ProvidersProps) {
return (
<SessionProvider>
<NextUIProvider navigate={router.push}>
<HeroUIProvider navigate={router.push}>
<NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
</NextUIProvider>
</HeroUIProvider>
</SessionProvider>
);
}

3
ui/auth.config.ts
View File

@@ -32,12 +32,13 @@ const refreshAccessToken = async (token: JwtPayload) => {
},
body: JSON.stringify(bodyData),
});
const newTokens = await response.json();
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const newTokens = await response.json();
return {
...token,
accessToken: newTokens.data.attributes.access,

3
ui/components/ThemeSwitch.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { SwitchProps, useSwitch } from "@nextui-org/react";
import type { SwitchProps } from "@heroui/switch";
import { useSwitch } from "@heroui/switch";
import { useIsSSR } from "@react-aria/ssr";
import { VisuallyHidden } from "@react-aria/visually-hidden";
import clsx from "clsx";

16
ui/components/auth/oss/auth-form.tsx
View File

@@ -1,8 +1,10 @@
"use client";
import { Button } from "@heroui/button";
import { Checkbox } from "@heroui/checkbox";
import { Divider } from "@heroui/divider";
import { zodResolver } from "@hookform/resolvers/zod";
import { Icon } from "@iconify/react";
import { Button, Checkbox, Divider } from "@nextui-org/react";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
@@ -190,9 +192,9 @@ export const AuthForm = ({
{/* Auth Form */}
<div className="relative flex w-full items-center justify-center lg:w-full">
{/* Background Pattern */}
<div className="absolute h-full w-full bg-[radial-gradient(#6af400_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_80%)]"></div>
<div className="absolute h-full w-full bg-[radial-gradient(#6af400_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_80%)] bg-size-[16px_16px]"></div>
<div className="relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-large border-1 border-divider bg-white/90 px-8 py-10 shadow-small dark:bg-background/85 md:max-w-md">
<div className="rounded-large border-divider shadow-small dark:bg-background/85 relative z-10 flex w-full max-w-sm flex-col gap-4 border bg-white/90 px-8 py-10 md:max-w-md">
{/* Prowler Logo */}
<div className="absolute -top-[100px] left-1/2 z-10 flex h-fit w-fit -translate-x-1/2">
<ProwlerExtended width={300} />
@@ -350,7 +352,7 @@ export const AuthForm = ({
<>
<div className="flex items-center gap-4 py-2">
<Divider className="flex-1" />
<p className="shrink-0 text-tiny text-default-500">OR</p>
<p className="text-tiny text-default-500 shrink-0">OR</p>
<Divider className="flex-1" />
</div>
<div className="flex flex-col gap-2">
@@ -387,7 +389,7 @@ export const AuthForm = ({
<>
<div className="flex items-center gap-4 py-2">
<Divider className="flex-1" />
<p className="shrink-0 text-tiny text-default-500">OR</p>
<p className="text-tiny text-default-500 shrink-0">OR</p>
<Divider className="flex-1" />
</div>
<div className="flex flex-col gap-2">
@@ -401,14 +403,14 @@ export const AuthForm = ({
</>
)}
{type === "sign-in" ? (
<p className="text-center text-small">
<p className="text-small text-center">
Need to create an account?&nbsp;
<CustomLink size="base" href="/sign-up" target="_self">
Sign up
</CustomLink>
</p>
) : (
<p className="text-center text-small">
<p className="text-small text-center">
Already have an account?&nbsp;
<CustomLink size="base" href="/sign-in" target="_self">
Log in

17
ui/components/auth/oss/password-validator.tsx
View File

@@ -69,25 +69,28 @@ export const PasswordRequirementsMessage = ({
{allRequirementsMet ? (
<div className="flex items-center gap-2">
<CheckCircle
className="h-4 w-4 flex-shrink-0 text-system-success"
className="text-system-success h-4 w-4 shrink-0"
aria-hidden="true"
/>
<p className="text-xs font-medium leading-tight text-system-success">
<p className="text-system-success text-xs leading-tight font-medium">
Password meets all requirements
</p>
</div>
) : (
<div className="space-y-1">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<AlertCircle
className="h-4 w-4 flex-shrink-0 text-red-600"
className="h-4 w-4 shrink-0 text-red-600"
aria-hidden="true"
/>
<p className="text-xs font-medium leading-tight text-red-700">
<p className="text-xs leading-tight font-medium text-red-700">
Password must include:
</p>
</div>
<ul className="ml-6 space-y-0.5" aria-label="Password requirements">
<ul
className="ml-6 flex flex-col gap-0.5"
aria-label="Password requirements"
>
{results.map((req) => (
<li
key={req.key}
@@ -95,7 +98,7 @@ export const PasswordRequirementsMessage = ({
>
<div className="flex items-center gap-2">
<div
className={`h-2 w-2 flex-shrink-0 rounded-full ${
className={`h-2 w-2 shrink-0 rounded-full ${
req.isMet ? "bg-system-success" : "bg-red-400"
}`}
aria-hidden="true"

7
ui/components/auth/oss/social-buttons.tsx
View File

@@ -1,5 +1,6 @@
import { Button } from "@heroui/button";
import { Tooltip } from "@heroui/tooltip";
import { Icon } from "@iconify/react";
import { Button, Tooltip } from "@nextui-org/react";
import { CustomLink } from "@/components/ui/custom/custom-link";
@@ -24,7 +25,7 @@ export const SocialButtons = ({
</CustomLink>
</div>
}
placement="right-start"
placement="top"
shadow="sm"
isDisabled={isGoogleOAuthEnabled}
className="w-96"
@@ -51,7 +52,7 @@ export const SocialButtons = ({
</CustomLink>
</div>
}
placement="right-start"
placement="top"
shadow="sm"
isDisabled={isGithubOAuthEnabled}
className="w-96"

8
ui/components/compliance/compliance-accordion/client-accordion-content.tsx
View File

@@ -116,7 +116,7 @@ export const ClientAccordionContent = ({
return (
<div className="w-full">
{renderDetails()}
<p className="mb-1 mt-3 text-sm font-medium text-gray-800 dark:text-gray-200">
<p className="mt-3 mb-1 text-sm font-medium text-gray-800 dark:text-gray-200">
⚠️ This requirement has no checks; therefore, there are no findings.
</p>
</div>
@@ -127,7 +127,7 @@ export const ClientAccordionContent = ({
const checksList = (
<div className="flex items-center px-2 text-sm">
<div className="w-full flex-col">
<div className="mb-1 mt-[-8px] h-1 w-full border-b border-gray-200 dark:border-gray-800" />
<div className="mt-[-8px] mb-1 h-1 w-full border-b border-gray-200 dark:border-gray-800" />
<span className="text-gray-600 dark:text-gray-200" aria-label="Checks">
{checks.join(", ")}
</span>
@@ -170,7 +170,7 @@ export const ClientAccordionContent = ({
}
return (
<div className="mb-1 mt-3 text-sm font-medium text-gray-800 dark:text-gray-200">
<div className="mt-3 mb-1 text-sm font-medium text-gray-800 dark:text-gray-200">
⚠️ There are no findings for these regions
</div>
);
@@ -186,7 +186,7 @@ export const ClientAccordionContent = ({
items={accordionChecksItems}
variant="light"
defaultExpandedKeys={[""]}
className="rounded-lg bg-gray-50 dark:bg-prowler-blue-400"
className="dark:bg-prowler-blue-400 rounded-lg bg-gray-50"
/>
</div>
)}

8
ui/components/compliance/compliance-accordion/compliance-accordion-title.tsx
View File

@@ -1,4 +1,4 @@
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
interface ComplianceAccordionTitleProps {
label: string;
@@ -24,7 +24,7 @@ export const ComplianceAccordionTitle = ({
<div className="flex flex-col items-start justify-between gap-1 md:flex-row md:items-center md:gap-2">
<div className="overflow-hidden md:min-w-0 md:flex-1">
<span
className="block max-w-[600px] overflow-hidden truncate text-ellipsis text-sm"
className="block max-w-[600px] truncate overflow-hidden text-sm text-ellipsis"
title={label}
>
{label.charAt(0).toUpperCase() + label.slice(1)}
@@ -33,7 +33,7 @@ export const ComplianceAccordionTitle = ({
<div className="mr-4 flex items-center gap-2">
<div className="hidden lg:block">
{total > 0 && isParentLevel && (
<span className="whitespace-nowrap text-xs font-medium text-gray-600">
<span className="text-xs font-medium whitespace-nowrap text-gray-600">
Requirements:
</span>
)}
@@ -127,7 +127,7 @@ export const ComplianceAccordionTitle = ({
size="sm"
placement="top"
>
<div className="min-w-[32px] text-center text-xs font-medium text-default-600">
<div className="text-default-600 min-w-[32px] text-center text-xs font-medium">
{total > 0 ? total : "—"}
</div>
</Tooltip>

52
ui/components/compliance/compliance-card.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { Card, CardBody, Progress } from "@nextui-org/react";
import { Card, CardBody } from "@heroui/card";
import { Progress } from "@heroui/progress";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useState } from "react";
@@ -94,6 +95,11 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
);
}
const regionFilter = searchParams.get("filter[region__in]");
if (regionFilter) {
params.set("filter[region__in]", regionFilter);
}
router.push(`${path}?${params.toString()}`);
};
const handleDownload = async () => {
@@ -106,22 +112,19 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
};
return (
<Card
fullWidth
isHoverable
shadow="sm"
isPressable
onPress={navigateToDetail}
>
<CardBody className="flex flex-row items-center justify-between space-x-4 dark:bg-prowler-blue-800">
<div className="flex w-full items-center space-x-4">
<Card fullWidth isHoverable shadow="sm">
<CardBody
className="dark:bg-prowler-blue-800 flex cursor-pointer flex-row items-center justify-between gap-4"
onClick={navigateToDetail}
>
<div className="flex w-full items-center gap-4">
<Image
src={getComplianceIcon(title)}
alt={`${title} logo`}
className="h-10 w-10 min-w-10 rounded-md border-1 border-gray-300 bg-white object-contain p-1"
className="h-10 w-10 min-w-10 rounded-md border border-gray-300 bg-white object-contain p-1"
/>
<div className="flex w-full flex-col">
<h4 className="mb-1 text-small font-bold leading-5">
<h4 className="text-small mb-1 leading-5 font-bold">
{formatTitle(title)}
{version ? ` - ${version}` : ""}
</h4>
@@ -146,13 +149,24 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
Passing Requirements
</small>
<DownloadIconButton
paramId={complianceId}
onDownload={handleDownload}
textTooltip="Download compliance CSV report"
isDisabled={hasRegionFilter}
isDownloading={isDownloading}
/>
<div
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.stopPropagation();
}
}}
role="button"
tabIndex={0}
>
<DownloadIconButton
paramId={complianceId}
onDownload={handleDownload}
textTooltip="Download compliance CSV report"
isDisabled={hasRegionFilter}
isDownloading={isDownloading}
/>
</div>
{/* <small>{getScanChange()}</small> */}
</div>
</div>

2
ui/components/compliance/compliance-charts/bar-chart.tsx
View File

@@ -43,7 +43,7 @@ interface FailedSectionsListProps {
}
const title = (
<h3 className="mb-2 whitespace-nowrap text-xs font-semibold uppercase tracking-wide">
<h3 className="mb-2 text-xs font-semibold tracking-wide whitespace-nowrap uppercase">
Top Failed Sections
</h3>
);

29
ui/components/compliance/compliance-charts/heatmap-chart.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { cn } from "@nextui-org/react";
import { cn } from "@heroui/theme";
import { useTheme } from "next-themes";
import { useState } from "react";
@@ -30,7 +30,7 @@ const capitalizeFirstLetter = (text: string): string => {
};
const title = (
<h3 className="mb-2 whitespace-nowrap text-xs font-semibold uppercase tracking-wide">
<h3 className="mb-2 text-xs font-semibold tracking-wide whitespace-nowrap uppercase">
Sections Failure Rate
</h3>
);
@@ -135,13 +135,30 @@ export const HeatmapChart = ({ categories = [] }: HeatmapChartProps) => {
color: theme === "dark" ? "white" : "black",
}}
>
<div className="mb-1 font-semibold">
<div
className="mb-1 font-semibold"
style={{ color: theme === "dark" ? "white" : "black" }}
>
{capitalizeFirstLetter(hoveredItem.name)}
</div>
<div>Failure Rate: {hoveredItem.failurePercentage}%</div>
<div>
Failed: {hoveredItem.failedRequirements}/
{hoveredItem.totalRequirements}
<span
style={{
color: getHeatmapColor(hoveredItem.failurePercentage),
}}
>
Failure Rate: {hoveredItem.failurePercentage}%
</span>
</div>
<div>
<span
style={{
color: getHeatmapColor(hoveredItem.failurePercentage),
}}
>
Failed: {hoveredItem.failedRequirements}/
{hoveredItem.totalRequirements}
</span>
</div>
</div>
)}

8
ui/components/compliance/compliance-charts/pie-chart.tsx
View File

@@ -113,7 +113,7 @@ export const PieChart = ({ pass, fail, manual }: PieChartProps) => {
return (
<div className="flex h-[320px] flex-col items-center justify-between">
<h3 className="whitespace-nowrap text-xs font-semibold uppercase tracking-wide">
<h3 className="text-xs font-semibold tracking-wide whitespace-nowrap uppercase">
Requirements Status
</h3>
@@ -176,15 +176,15 @@ export const PieChart = ({ pass, fail, manual }: PieChartProps) => {
<div className="mt-2 grid grid-cols-3 gap-4">
<div className="flex flex-col items-center">
<div className="text-muted-foreground text-sm">Pass</div>
<div className="font-semibold text-system-success-medium">{pass}</div>
<div className="text-system-success-medium font-semibold">{pass}</div>
</div>
<div className="flex flex-col items-center">
<div className="text-muted-foreground text-sm">Fail</div>
<div className="font-semibold text-system-error-medium">{fail}</div>
<div className="text-system-error-medium font-semibold">{fail}</div>
</div>
<div className="flex flex-col items-center">
<div className="text-muted-foreground text-sm">Manual</div>
<div className="font-semibold text-prowler-grey-light">{manual}</div>
<div className="text-prowler-grey-light font-semibold">{manual}</div>
</div>
</div>
</div>

2
ui/components/compliance/compliance-custom-details/cis-details.tsx
View File

@@ -117,7 +117,7 @@ export const CISCustomDetails = ({ requirement }: CISDetailsProps) => {
{requirement.references && (
<ComplianceDetailSection title="References">
<div className="space-y-1">
<div className="flex flex-col gap-1">
{processReferences(requirement.references).map(
(url: string, index: number) => (
<div key={index}>

7
ui/components/compliance/compliance-custom-details/mitre-details.tsx
View File

@@ -71,9 +71,12 @@ export const MITRECustomDetails = ({
{cloudServices && cloudServices.length > 0 && (
<ComplianceDetailSection title="Cloud Security Mappings">
<div className="space-y-4">
<div className="flex flex-col gap-4">
{cloudServices.map((service, index) => (
<div key={index} className="space-y-3 rounded-lg border p-4">
<div
key={index}
className="flex flex-col gap-3 rounded-lg border p-4"
>
<div className="flex flex-wrap items-center gap-3">
<ComplianceBadge
label="Service"

6
ui/components/compliance/compliance-custom-details/shared-components.tsx
View File

@@ -5,7 +5,7 @@ export const ComplianceDetailContainer = ({
}: {
children: React.ReactNode;
}) => {
return <div className="space-y-4">{children}</div>;
return <div className="flex flex-col gap-4">{children}</div>;
};
export const ComplianceDetailSection = ({
@@ -107,7 +107,7 @@ export const ComplianceBulletList = ({
return (
<ComplianceDetailSection title={title}>
<div className="space-y-2">
<div className="flex flex-col gap-2">
{items.map((item: string, index: number) => (
<div key={index} className="flex items-start gap-2">
<span className="text-muted-foreground mt-1 text-xs">•</span>
@@ -134,7 +134,7 @@ export const ComplianceChipContainer = ({
{items.map((item: string, index: number) => (
<span
key={index}
className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20"
className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20"
>
{item}
</span>

2
ui/components/compliance/compliance-header/compliance-header.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { FilterControls } from "@/components/filters";
import { DataTableFilterCustom } from "@/components/ui/table/data-table-filter-custom";

5
ui/components/compliance/compliance-header/compliance-scan-info.tsx
View File

@@ -1,4 +1,5 @@
import { Divider, Tooltip } from "@nextui-org/react";
import { Divider } from "@heroui/divider";
import { Tooltip } from "@heroui/tooltip";
import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
import { ProviderType } from "@/types";
@@ -34,7 +35,7 @@ export const ComplianceScanInfo = ({ scan }: ComplianceScanInfoProps) => {
placement="top"
size="sm"
>
<p className="text-xs text-default-500">
<p className="text-default-500 text-xs">
{scan.attributes.name || "- -"}
</p>
</Tooltip>

2
ui/components/compliance/compliance-header/scan-selector.tsx
View File

@@ -1,4 +1,4 @@
import { Select, SelectItem } from "@nextui-org/react";
import { Select, SelectItem } from "@heroui/select";
import { ProviderType, ScanProps } from "@/types";

4
ui/components/compliance/no-scans-available.tsx
View File

@@ -9,7 +9,7 @@ export const NoScansAvailable = () => {
return (
<div className="flex h-full min-h-[calc(100vh-56px)] items-center justify-center">
<div className="mx-auto w-full max-w-2xl">
<div className="flex items-center justify-start rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-prowler-blue-400">
<div className="dark:bg-prowler-blue-400 flex items-center justify-start rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700">
<div className="flex w-full items-center justify-between gap-6">
<div className="flex items-start gap-4">
<InfoIcon className="mt-1 h-5 w-5 text-gray-400 dark:text-gray-300" />
@@ -25,7 +25,7 @@ export const NoScansAvailable = () => {
</div>
<CustomButton
asLink="/scans"
className="flex-shrink-0"
className="shrink-0"
ariaLabel="Go to Scans page"
variant="solid"
color="action"

18
ui/components/compliance/skeletons/bar-chart-skeleton.tsx
View File

@@ -1,20 +1,20 @@
"use client";
import { Skeleton } from "@nextui-org/react";
import { Skeleton } from "@heroui/skeleton";
export const BarChartSkeleton = () => {
return (
<div className="flex w-[400px] flex-col items-center justify-between">
{/* Title skeleton */}
<Skeleton className="h-4 w-40 rounded-lg">
<div className="h-4 bg-default-200" />
<div className="bg-default-200 h-4" />
</Skeleton>
{/* Chart area skeleton */}
<div className="ml-24 flex h-full flex-col justify-center space-y-2 p-4">
<div className="ml-24 flex h-full flex-col justify-center gap-2 p-4">
{/* Bar chart skeleton - 5 horizontal bars */}
{Array.from({ length: 5 }).map((_, index) => (
<div key={index} className="flex items-center space-x-4">
<div key={index} className="flex items-center gap-4">
{/* Bar skeleton with varying widths */}
<Skeleton
className={`h-10 rounded-lg ${
@@ -29,20 +29,20 @@ export const BarChartSkeleton = () => {
: "w-16"
}`}
>
<div className="h-6 bg-default-200" />
<div className="bg-default-200 h-6" />
</Skeleton>
</div>
))}
{/* Legend skeleton */}
<div className="flex justify-center space-x-4 pt-2">
<div className="flex justify-center gap-4 pt-2">
{Array.from({ length: 3 }).map((_, index) => (
<div key={index} className="flex items-center space-x-1">
<div key={index} className="flex items-center gap-1">
<Skeleton className="h-3 w-3 rounded-full">
<div className="h-3 w-3 bg-default-200" />
<div className="bg-default-200 h-3 w-3" />
</Skeleton>
<Skeleton className="h-3 w-16 rounded-lg">
<div className="h-3 bg-default-200" />
<div className="bg-default-200 h-3" />
</Skeleton>
</div>
))}

4
ui/components/compliance/skeletons/compliance-accordion-skeleton.tsx
View File

@@ -1,4 +1,4 @@
import { Skeleton } from "@nextui-org/react";
import { Skeleton } from "@heroui/skeleton";
import React from "react";
interface SkeletonAccordionProps {
@@ -16,7 +16,7 @@ export const SkeletonAccordion = ({
return (
<div
className={`w-full space-y-2 ${className} rounded-xl border border-gray-300 p-2 dark:border-gray-700`}
className={`flex w-full flex-col gap-2 ${className} rounded-xl border border-gray-300 p-2 dark:border-gray-700`}
>
{[...Array(itemCount)].map((_, index) => (
<Skeleton key={index} className="rounded-lg">

9
ui/components/compliance/skeletons/compliance-grid-skeleton.tsx
View File

@@ -1,14 +1,15 @@
import { Card, Skeleton } from "@nextui-org/react";
import { Card } from "@heroui/card";
import { Skeleton } from "@heroui/skeleton";
import React from "react";
export const ComplianceSkeletonGrid = () => {
return (
<Card className="h-fit w-full p-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 3xl:grid-cols-4">
<div className="3xl:grid-cols-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
{[...Array(28)].map((_, index) => (
<div key={index} className="flex flex-col space-y-4">
<div key={index} className="flex flex-col gap-4">
<Skeleton className="h-28 rounded-lg">
<div className="h-full bg-default-300"></div>
<div className="bg-default-300 h-full"></div>
</Skeleton>
</div>
))}

6
ui/components/compliance/skeletons/heatmap-chart-skeleton.tsx
View File

@@ -1,13 +1,13 @@
"use client";
import { Skeleton } from "@nextui-org/react";
import { Skeleton } from "@heroui/skeleton";
export const HeatmapChartSkeleton = () => {
return (
<div className="flex h-[320px] w-[400px] flex-col items-center justify-between lg:w-[400px]">
{/* Title skeleton */}
<Skeleton className="h-4 w-36 rounded-lg">
<div className="h-4 bg-default-200" />
<div className="bg-default-200 h-4" />
</Skeleton>
{/* Heatmap area skeleton - 3x3 grid like the real component */}
@@ -18,7 +18,7 @@ export const HeatmapChartSkeleton = () => {
key={index}
className="flex items-center justify-center rounded border"
>
<div className="h-full w-full bg-default-200" />
<div className="bg-default-200 h-full w-full" />
</Skeleton>
))}
</div>

24
ui/components/compliance/skeletons/pie-chart-skeleton.tsx
View File

@@ -1,32 +1,32 @@
"use client";
import { Skeleton } from "@nextui-org/react";
import { Skeleton } from "@heroui/skeleton";
export const PieChartSkeleton = () => {
return (
<div className="flex h-[320px] flex-col items-center justify-between">
{/* Title skeleton */}
<Skeleton className="h-4 w-32 rounded-lg">
<div className="h-4 bg-default-200" />
<div className="bg-default-200 h-4" />
</Skeleton>
{/* Pie chart skeleton */}
<div className="relative flex aspect-square w-[200px] min-w-[200px] items-center justify-center">
{/* Outer circle */}
<Skeleton className="absolute h-[200px] w-[200px] rounded-full">
<div className="h-[200px] w-[200px] bg-default-200" />
<div className="bg-default-200 h-[200px] w-[200px]" />
</Skeleton>
{/* Inner circle (donut hole) */}
<div className="absolute h-[140px] w-[140px] rounded-full bg-background"></div>
<div className="bg-background absolute h-[140px] w-[140px] rounded-full"></div>
{/* Center text skeleton */}
<div className="absolute flex flex-col items-center">
<Skeleton className="h-6 w-8 rounded-lg">
<div className="h-6 bg-default-300" />
<div className="bg-default-300 h-6" />
</Skeleton>
<Skeleton className="mt-1 h-3 w-6 rounded-lg">
<div className="h-3 bg-default-300" />
<div className="bg-default-300 h-3" />
</Skeleton>
</div>
</div>
@@ -35,26 +35,26 @@ export const PieChartSkeleton = () => {
<div className="mt-2 grid grid-cols-3 gap-4">
<div className="flex flex-col items-center">
<Skeleton className="h-4 w-8 rounded-lg">
<div className="h-4 bg-default-200" />
<div className="bg-default-200 h-4" />
</Skeleton>
<Skeleton className="mt-1 h-5 w-6 rounded-lg">
<div className="h-5 bg-default-200" />
<div className="bg-default-200 h-5" />
</Skeleton>
</div>
<div className="flex flex-col items-center">
<Skeleton className="h-4 w-6 rounded-lg">
<div className="h-4 bg-default-200" />
<div className="bg-default-200 h-4" />
</Skeleton>
<Skeleton className="mt-1 h-5 w-6 rounded-lg">
<div className="h-5 bg-default-200" />
<div className="bg-default-200 h-5" />
</Skeleton>
</div>
<div className="flex flex-col items-center">
<Skeleton className="h-4 w-12 rounded-lg">
<div className="h-4 bg-default-200" />
<div className="bg-default-200 h-4" />
</Skeleton>
<Skeleton className="mt-1 h-5 w-6 rounded-lg">
<div className="h-5 bg-default-200" />
<div className="bg-default-200 h-5" />
</Skeleton>
</div>
</div>

4
ui/components/feeds/feeds-detail.tsx
View File

@@ -53,7 +53,7 @@ export const FeedsDetail = () => {
<Icon size={18} />
{/* TODO: Update this condition once the RSS data response structure is finalized */}
{feed.length > 0 && (
<span className="absolute right-0 top-0 h-2 w-2 rounded-full bg-red-500 dark:bg-gray-400"></span>
<span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 dark:bg-gray-400"></span>
)}
</Button>
</DropdownMenuTrigger>
@@ -72,7 +72,7 @@ export const FeedsDetail = () => {
target="_blank"
className="flex flex-col"
>
<h3 className="text-small font-medium leading-none">
<h3 className="text-small leading-none font-medium">
{item.title}
</h3>
<p className="text-sm text-gray-500">{item.description}</p>

2
ui/components/filters/custom-account-selection.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { Select, SelectItem } from "@nextui-org/react";
import { Select, SelectItem } from "@heroui/select";
const accounts = [
{ key: "audit-test-1", label: "740350143844" },

2
ui/components/filters/custom-checkbox-muted-findings.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Checkbox } from "@nextui-org/react";
import { Checkbox } from "@heroui/checkbox";
import { useSearchParams } from "next/navigation";
import { useState } from "react";

7
ui/components/filters/custom-date-picker.tsx
View File

@@ -1,12 +1,13 @@
"use client";
import { Button, ButtonGroup } from "@heroui/button";
import { DatePicker } from "@heroui/date-picker";
import {
getLocalTimeZone,
startOfMonth,
startOfWeek,
today,
} from "@internationalized/date";
import { Button, ButtonGroup, DatePicker } from "@nextui-org/react";
import { useLocale } from "@react-aria/i18n";
import { useSearchParams } from "next/navigation";
import React, { useCallback, useEffect, useRef } from "react";
@@ -66,10 +67,10 @@ export const CustomDatePicker = () => {
CalendarTopContent={
<ButtonGroup
fullWidth
className="bg-content1 px-3 pb-2 pt-3 dark:bg-prowler-blue-400 [&>button]:border-default-200/60 [&>button]:text-default-500"
className="bg-content1 dark:bg-prowler-blue-400 [&>button]:border-default-200/60 [&>button]:text-default-500 px-3 pt-3 pb-2"
radius="full"
size="sm"
variant="bordered"
variant="flat"
>
<Button onPress={() => handleDateChange(now)}>Today</Button>
<Button onPress={() => handleDateChange(nextWeek)}>

2
ui/components/filters/custom-region-selection.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Select, SelectItem } from "@nextui-org/react";
import { Select, SelectItem } from "@heroui/select";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useCallback, useMemo } from "react";

25
ui/components/filters/custom-search-input.tsx
View File

@@ -1,8 +1,7 @@
import { Input } from "@nextui-org/react";
import debounce from "lodash.debounce";
import { Input } from "@heroui/input";
import { SearchIcon, XCircle } from "lucide-react";
import { useSearchParams } from "next/navigation";
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useUrlFilters } from "@/hooks/use-url-filters";
@@ -10,6 +9,7 @@ export const CustomSearchInput: React.FC = () => {
const searchParams = useSearchParams();
const { updateFilter } = useUrlFilters();
const [searchQuery, setSearchQuery] = useState("");
const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const applySearch = useCallback(
(query: string) => {
@@ -24,7 +24,12 @@ export const CustomSearchInput: React.FC = () => {
const debouncedChangeHandler = useCallback(
(value: string) => {
debounce((val) => applySearch(val), 300)(value);
if (debounceTimeoutRef.current) {
clearTimeout(debounceTimeoutRef.current);
}
debounceTimeoutRef.current = setTimeout(() => {
applySearch(value);
}, 300);
},
[applySearch],
);
@@ -39,11 +44,19 @@ export const CustomSearchInput: React.FC = () => {
setSearchQuery(searchFromUrl);
}, [searchParams]);
useEffect(() => {
return () => {
if (debounceTimeoutRef.current) {
clearTimeout(debounceTimeoutRef.current);
}
};
}, []);
return (
<Input
variant="flat"
classNames={{
label: "tracking-tight font-light !text-default-600 text-sm !z-0 pb-1",
label: "tracking-tight font-light !text-default-600 text-sm z-0! pb-1",
}}
aria-label="Search"
label="Search"
@@ -59,7 +72,7 @@ export const CustomSearchInput: React.FC = () => {
endContent={
searchQuery && (
<button onClick={clearIconSearch} className="focus:outline-none">
<XCircle className="h-4 w-4 text-default-400" />
<XCircle className="text-default-400 h-4 w-4" />
</button>
)
}

4
ui/components/filters/custom-select-provider.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Select, SelectItem } from "@nextui-org/react";
import { Select, SelectItem } from "@heroui/select";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useCallback, useMemo } from "react";
@@ -85,7 +85,7 @@ export const CustomSelectProvider: React.FC = () => {
placeholder="Select a provider"
classNames={{
selectorIcon: "right-2",
label: "!z-0 mb-2",
label: "z-0! mb-2",
}}
label="Provider"
labelPlacement="inside"

2
ui/components/filters/filter-controls.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Spacer } from "@nextui-org/react";
import { Spacer } from "@heroui/spacer";
import { useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";

6
ui/components/findings/muted.tsx
View File

@@ -1,4 +1,4 @@
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import { MutedIcon } from "../icons";
@@ -15,8 +15,8 @@ export const Muted = ({
return (
<Tooltip content={mutedReason} className="text-xs">
<div className="w-fit rounded-full border border-system-severity-critical/40 p-1">
<MutedIcon className="h-4 w-4 text-system-severity-critical" />
<div className="border-system-severity-critical/40 w-fit rounded-full border p-1">
<MutedIcon className="text-system-severity-critical h-4 w-4" />
</div>
</Tooltip>
);

23
ui/components/findings/send-to-jira-modal.tsx
View File

@@ -1,7 +1,9 @@
"use client";
import { Input } from "@heroui/input";
import { Select, SelectItem } from "@heroui/select";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input, Select, type Selection, SelectItem } from "@nextui-org/react";
import type { Selection } from "@react-types/shared";
import { Search, Send } from "lucide-react";
import {
type Dispatch,
@@ -222,7 +224,10 @@ export const SendToJiraModal = ({
}
>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
<form
onSubmit={form.handleSubmit(handleSubmit)}
className="flex flex-col gap-4"
>
{/* Integration Selection */}
{integrations.length > 1 && (
<FormField
@@ -256,7 +261,7 @@ export const SendToJiraModal = ({
trigger: "min-h-12",
popoverContent: "dark:bg-gray-800",
label:
"tracking-tight font-light !text-default-500 text-xs !z-0",
"tracking-tight font-light !text-default-500 text-xs z-0!",
value: "text-default-500 text-small dark:text-gray-300",
}}
>
@@ -277,7 +282,7 @@ export const SendToJiraModal = ({
))}
</Select>
</FormControl>
<FormMessage className="text-xs text-system-error" />
<FormMessage className="text-system-error text-xs" />
</>
)}
/>
@@ -312,13 +317,13 @@ export const SendToJiraModal = ({
popoverContent: "dark:bg-gray-800",
listboxWrapper: "max-h-[300px] dark:bg-gray-800",
label:
"tracking-tight font-light !text-default-500 text-xs !z-0",
"tracking-tight font-light !text-default-500 text-xs z-0!",
value: "text-default-500 text-small dark:text-gray-300",
}}
listboxProps={{
topContent:
filteredProjects.length > 5 ? (
<div className="sticky top-0 z-10 bg-content1 py-2 dark:bg-gray-800">
<div className="bg-content1 sticky top-0 z-10 py-2 dark:bg-gray-800">
<Input
isClearable
placeholder="Search projects..."
@@ -350,7 +355,7 @@ export const SendToJiraModal = ({
<span className="text-tiny text-default-500">
-
</span>
<span className="truncate text-small">
<span className="text-small truncate">
{name}
</span>
</div>
@@ -361,7 +366,7 @@ export const SendToJiraModal = ({
))}
</Select>
</FormControl>
<FormMessage className="text-xs text-system-error" />
<FormMessage className="text-system-error text-xs" />
</>
)}
/>
@@ -393,7 +398,7 @@ export const SendToJiraModal = ({
popoverContent: "dark:bg-gray-800",
listboxWrapper: "max-h-[300px] dark:bg-gray-800",
label:
"tracking-tight font-light !text-default-500 text-xs !z-0",
"tracking-tight font-light !text-default-500 text-xs z-0!",
value: "text-default-500 text-small dark:text-gray-300",
}}
listboxProps={{

6
ui/components/findings/table/column-findings.tsx
View File

@@ -109,18 +109,18 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
const { delta } = row.original.attributes;
return (
<div className="relative flex max-w-[410px] flex-row items-center gap-2 3xl:max-w-[660px]">
<div className="3xl:max-w-[660px] relative flex max-w-[410px] flex-row items-center gap-2">
<div className="flex flex-row items-center gap-4">
{delta === "new" || delta === "changed" ? (
<DeltaIndicator delta={delta} />
) : (
<div className="w-2" />
)}
<p className="mr-7 whitespace-normal break-words text-sm">
<p className="mr-7 text-sm break-words whitespace-normal">
{checktitle}
</p>
</div>
<span className="absolute -right-2 top-1/2 -translate-y-1/2">
<span className="absolute top-1/2 -right-2 -translate-y-1/2">
<Muted isMuted={muted} mutedReason={muted_reason || ""} />
</span>
</div>

8
ui/components/findings/table/data-table-row-actions.tsx
View File

@@ -1,13 +1,13 @@
"use client";
import { Button } from "@heroui/button";
import {
Button,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownSection,
DropdownTrigger,
} from "@nextui-org/react";
} from "@heroui/dropdown";
import { Row } from "@tanstack/react-table";
import { useState } from "react";
@@ -38,7 +38,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
<div className="relative flex items-center justify-end gap-2">
<Dropdown
className="shadow-xl dark:bg-prowler-blue-800"
className="dark:bg-prowler-blue-800 shadow-xl"
placement="bottom"
>
<DropdownTrigger>
@@ -60,7 +60,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
startContent={
<JiraIcon
size={20}
className="pointer-events-none flex-shrink-0 text-default-500"
className="text-default-500 pointer-events-none shrink-0"
/>
}
onPress={() => setIsJiraModalOpen(true)}

4
ui/components/findings/table/delta-indicator.tsx
View File

@@ -1,4 +1,4 @@
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import { CustomButton } from "@/components/ui/custom/custom-button";
import { cn } from "@/lib/utils";
@@ -22,7 +22,7 @@ export const DeltaIndicator = ({ delta }: DeltaIndicatorProps) => {
ariaLabel="Learn more about findings"
color="transparent"
size="sm"
className="h-auto min-w-0 p-0 text-primary"
className="text-primary h-auto min-w-0 p-0"
asLink="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-8-analyze-the-findings"
target="_blank"
>

16
ui/components/findings/table/finding-detail.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Snippet } from "@nextui-org/react";
import { Snippet } from "@heroui/snippet";
import ReactMarkdown from "react-markdown";
import { CodeSnippet } from "@/components/ui/code-snippet/code-snippet";
@@ -20,7 +20,7 @@ import { DeltaIndicator } from "./delta-indicator";
const MarkdownContainer = ({ children }: { children: string }) => {
return (
<div className="prose prose-sm max-w-none whitespace-normal break-words dark:prose-invert">
<div className="prose prose-sm dark:prose-invert max-w-none break-words whitespace-normal">
<ReactMarkdown>{children}</ReactMarkdown>
</div>
);
@@ -65,7 +65,7 @@ export const FindingDetail = ({
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h2 className="line-clamp-2 text-lg font-medium leading-tight text-gray-800 dark:text-prowler-theme-pale/90">
<h2 className="dark:text-prowler-theme-pale/90 line-clamp-2 text-lg leading-tight font-medium text-gray-800">
{renderValue(attributes.check_metadata.checktitle)}
<CopyLinkButton url={url} />
</h2>
@@ -82,7 +82,7 @@ export const FindingDetail = ({
? "bg-green-100 text-green-600"
: attributes.status === "MANUAL"
? "bg-gray-100 text-gray-600"
: "bg-red-100 text-system-severity-critical"
: "text-system-severity-critical bg-red-100"
}`}
>
{renderValue(attributes.status)}
@@ -159,7 +159,7 @@ export const FindingDetail = ({
{attributes.check_metadata.remediation && (
<div className="flex flex-col gap-4">
<h4 className="text-sm font-bold text-gray-700 dark:text-prowler-theme-pale/90">
<h4 className="dark:text-prowler-theme-pale/90 text-sm font-bold text-gray-700">
Remediation Details
</h4>
@@ -189,7 +189,7 @@ export const FindingDetail = ({
{attributes.check_metadata.remediation.code.cli && (
<InfoField label="CLI Command" variant="simple">
<Snippet className="bg-gray-50 py-1 dark:bg-slate-800">
<span className="whitespace-pre-line text-xs">
<span className="text-xs whitespace-pre-line">
{attributes.check_metadata.remediation.code.cli}
</span>
</Snippet>
@@ -216,7 +216,7 @@ export const FindingDetail = ({
key={idx}
href={link}
size="sm"
className="!whitespace-normal break-all"
className="break-all whitespace-normal!"
>
{link}
</CustomLink>
@@ -237,7 +237,7 @@ export const FindingDetail = ({
<CustomSection title="Resource Details">
<InfoField label="Resource ID" variant="simple">
<Snippet className="bg-gray-50 py-1 dark:bg-slate-800" hideSymbol>
<span className="whitespace-pre-line text-xs">
<span className="text-xs whitespace-pre-line">
{renderValue(resource.uid)}
</span>
</Snippet>

4
ui/components/integrations/jira/jira-integration-card.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Card, CardBody, CardHeader } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { SettingsIcon } from "lucide-react";
import { JiraIcon } from "@/components/icons/services/IconServices";
@@ -19,7 +19,7 @@ export const JiraIntegrationCard = () => {
Jira
</h4>
<div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
<p className="text-nowrap text-xs text-gray-500 dark:text-gray-300">
<p className="text-xs text-nowrap text-gray-500 dark:text-gray-300">
Create and manage security issues in Jira.
</p>
<CustomLink

6
ui/components/integrations/jira/jira-integration-form.tsx
View File

@@ -222,11 +222,11 @@ export const JiraIntegrationForm = ({
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col space-y-6"
className="flex flex-col gap-6"
>
<div className="flex flex-col space-y-4">
<div className="flex flex-col gap-4">
<div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
<p className="flex items-center gap-2 text-sm text-default-500">
<p className="text-default-500 flex items-center gap-2 text-sm">
Need help configuring your Jira integration?
</p>
<CustomLink

6
ui/components/integrations/jira/jira-integrations-manager.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Card, CardBody, CardHeader } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { format } from "date-fns";
import { PlusIcon, Trash2Icon } from "lucide-react";
import { useState } from "react";
@@ -214,7 +214,7 @@ export const JiraIntegrationsManager = ({
title="Delete Jira Integration"
description="This action cannot be undone. This will permanently delete your Jira integration."
>
<div className="flex w-full justify-center space-x-6">
<div className="flex w-full justify-center gap-6">
<CustomButton
type="button"
ariaLabel="Cancel"
@@ -265,7 +265,7 @@ export const JiraIntegrationsManager = ({
/>
</CustomAlertModal>
<div className="space-y-6">
<div className="flex flex-col gap-6">
{/* Header with Add Button */}
<div className="flex items-center justify-between">
<div>

4
ui/components/integrations/s3/s3-integration-card.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Card, CardBody, CardHeader } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { SettingsIcon } from "lucide-react";
import { AmazonS3Icon } from "@/components/icons/services/IconServices";
@@ -19,7 +19,7 @@ export const S3IntegrationCard = () => {
Amazon S3
</h4>
<div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
<p className="text-nowrap text-xs text-gray-500 dark:text-gray-300">
<p className="text-xs text-nowrap text-gray-500 dark:text-gray-300">
Export security findings to Amazon S3 buckets.
</p>
<CustomLink

12
ui/components/integrations/s3/s3-integration-form.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { Divider } from "@heroui/divider";
import { zodResolver } from "@hookform/resolvers/zod";
import { Divider } from "@nextui-org/react";
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
import { useSession } from "next-auth/react";
import { useState } from "react";
@@ -275,7 +275,7 @@ export const S3IntegrationForm = ({
return (
<>
{/* Provider Selection */}
<div className="space-y-4">
<div className="flex flex-col gap-4">
<EnhancedProviderSelector
control={form.control}
name="providers"
@@ -291,7 +291,7 @@ export const S3IntegrationForm = ({
<Divider />
{/* S3 Configuration */}
<div className="space-y-4">
<div className="flex flex-col gap-4">
<CustomInput
control={form.control}
name="bucket_name"
@@ -386,11 +386,11 @@ export const S3IntegrationForm = ({
? handleNext
: form.handleSubmit(onSubmit)
}
className="flex flex-col space-y-6"
className="flex flex-col gap-6"
>
<div className="flex flex-col space-y-4">
<div className="flex flex-col gap-4">
<div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
<p className="flex items-center gap-2 text-sm text-default-500">
<p className="text-default-500 flex items-center gap-2 text-sm">
Need help configuring your Amazon S3 integration?
</p>
<CustomLink

6
ui/components/integrations/s3/s3-integrations-manager.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Card, CardBody, CardHeader } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { format } from "date-fns";
import { PlusIcon, Trash2Icon } from "lucide-react";
import { useState } from "react";
@@ -214,7 +214,7 @@ export const S3IntegrationsManager = ({
title="Delete S3 Integration"
description="This action cannot be undone. This will permanently delete your S3 integration."
>
<div className="flex w-full justify-center space-x-6">
<div className="flex w-full justify-center gap-6">
<CustomButton
type="button"
ariaLabel="Cancel"
@@ -271,7 +271,7 @@ export const S3IntegrationsManager = ({
/>
</CustomAlertModal>
<div className="space-y-6">
<div className="flex flex-col gap-6">
{/* Header with Add Button */}
<div className="flex items-center justify-between">
<div>

38
ui/components/integrations/saml/saml-config-form.tsx
View File

@@ -1,7 +1,13 @@
"use client";
import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
import { useFormState } from "react-dom";
import {
Dispatch,
SetStateAction,
useActionState,
useEffect,
useRef,
useState,
} from "react";
import { z } from "zod";
import { createSamlConfig, updateSamlConfig } from "@/actions/integrations";
@@ -110,7 +116,7 @@ export const SamlConfigForm = ({
setIsOpen: Dispatch<SetStateAction<boolean>>;
samlConfig?: any;
}) => {
const [state, formAction, isPending] = useFormState(
const [state, formAction, isPending] = useActionState(
samlConfig?.id ? updateSamlConfig : createSamlConfig,
null,
);
@@ -251,7 +257,7 @@ export const SamlConfigForm = ({
: `${apiBaseUrl}/accounts/saml/your-domain.com/acs/`;
return (
<form ref={formRef} action={formAction} className="flex flex-col space-y-2">
<form ref={formRef} action={formAction} className="flex flex-col gap-2">
<div className="py-1 text-xs">
Need help configuring SAML SSO?{" "}
<CustomLink
@@ -287,14 +293,14 @@ export const SamlConfigForm = ({
}}
/>
<div className="space-y-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
<div className="flex flex-col gap-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
<h3 className="text-lg font-semibold">
Identity Provider Configuration
</h3>
<div className="space-y-4">
<div className="flex flex-col gap-4">
<div>
<span className="mb-2 block text-sm font-medium text-default-500">
<span className="text-default-500 mb-2 block text-sm font-medium">
ACS URL:
</span>
<SnippetChip
@@ -305,7 +311,7 @@ export const SamlConfigForm = ({
</div>
<div>
<span className="mb-2 block text-sm font-medium text-default-500">
<span className="text-default-500 mb-2 block text-sm font-medium">
Audience:
</span>
<SnippetChip
@@ -316,19 +322,19 @@ export const SamlConfigForm = ({
</div>
<div>
<span className="mb-2 block text-sm font-medium text-default-500">
<span className="text-default-500 mb-2 block text-sm font-medium">
Name ID Format:
</span>
<span className="w-full text-sm text-default-600">
<span className="text-default-600 w-full text-sm">
urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress
</span>
</div>
<div>
<span className="mb-2 block text-sm font-medium text-default-500">
<span className="text-default-500 mb-2 block text-sm font-medium">
Supported Assertion Attributes:
</span>
<ul className="ml-4 space-y-1 text-sm text-default-600">
<ul className="text-default-600 ml-4 flex flex-col gap-1 text-sm">
<li>• firstName</li>
<li>• lastName</li>
<li>• userType</li>
@@ -347,8 +353,8 @@ export const SamlConfigForm = ({
</div>
</div>
</div>
<div className="flex flex-col items-start space-y-2">
<span className="text-xs text-default-500">
<div className="flex flex-col items-start gap-2">
<span className="text-default-500 text-xs">
Metadata XML File <span className="text-red-500">*</span>
</span>
<CustomButton
@@ -364,7 +370,7 @@ export const SamlConfigForm = ({
}
}}
startContent={<AddIcon size={20} />}
className={`h-10 justify-start rounded-medium border-2 text-default-500 ${
className={`rounded-medium text-default-500 h-10 justify-start border-2 ${
(
clientErrors.metadata_xml === null
? undefined
@@ -378,7 +384,7 @@ export const SamlConfigForm = ({
>
<span className="text-small">
{uploadedFile ? (
<span className="flex items-center space-x-2">
<span className="flex items-center gap-2">
<span className="max-w-36 truncate">{uploadedFile.name}</span>
</span>
) : (

2
ui/components/integrations/saml/saml-integration-card.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Card, CardBody, CardHeader } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { CheckIcon, Trash2Icon } from "lucide-react";
import { useState } from "react";

4
ui/components/integrations/security-hub/security-hub-integration-card.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Card, CardBody, CardHeader } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { SettingsIcon } from "lucide-react";
import { AWSSecurityHubIcon } from "@/components/icons/services/IconServices";
@@ -19,7 +19,7 @@ export const SecurityHubIntegrationCard = () => {
AWS Security Hub
</h4>
<div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
<p className="text-nowrap text-xs text-gray-500 dark:text-gray-300">
<p className="text-xs text-nowrap text-gray-500 dark:text-gray-300">
Send security findings to AWS Security Hub.
</p>
<CustomLink

14
ui/components/integrations/security-hub/security-hub-integration-form.tsx
View File

@@ -1,7 +1,9 @@
"use client";
import { Checkbox } from "@heroui/checkbox";
import { Divider } from "@heroui/divider";
import { Radio, RadioGroup } from "@heroui/radio";
import { zodResolver } from "@hookform/resolvers/zod";
import { Checkbox, Divider, Radio, RadioGroup } from "@nextui-org/react";
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
import { useSession } from "next-auth/react";
import { useEffect, useMemo, useState } from "react";
@@ -250,7 +252,7 @@ export const SecurityHubIntegrationForm = ({
if (isEditingCredentials) {
// When editing credentials, show the credential type selector first
return (
<div className="space-y-4">
<div className="flex flex-col gap-4">
<RadioGroup
size="sm"
aria-label="Credential type"
@@ -319,7 +321,7 @@ export const SecurityHubIntegrationForm = ({
<>
{!isEditingConfig && (
<>
<div className="space-y-4">
<div className="flex flex-col gap-4">
<EnhancedProviderSelector
control={form.control}
name="provider_id"
@@ -473,11 +475,11 @@ export const SecurityHubIntegrationForm = ({
? handleNext
: form.handleSubmit(onSubmit)
}
className="flex flex-col space-y-6"
className="flex flex-col gap-6"
>
<div className="flex flex-col space-y-4">
<div className="flex flex-col gap-4">
<div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
<p className="flex items-center gap-2 text-sm text-default-500">
<p className="text-default-500 flex items-center gap-2 text-sm">
Need help configuring your AWS Security Hub integration?
</p>
<CustomLink

7
ui/components/integrations/security-hub/security-hub-integrations-manager.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { Card, CardBody, CardHeader, Chip } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { Chip } from "@heroui/chip";
import { format } from "date-fns";
import { PlusIcon, Trash2Icon } from "lucide-react";
import { useState } from "react";
@@ -263,7 +264,7 @@ export const SecurityHubIntegrationsManager = ({
title="Delete Security Hub Integration"
description="This action cannot be undone. This will permanently delete your Security Hub integration."
>
<div className="flex w-full justify-center space-x-6">
<div className="flex w-full justify-center gap-6">
<CustomButton
type="button"
ariaLabel="Cancel"
@@ -321,7 +322,7 @@ export const SecurityHubIntegrationsManager = ({
/>
</CustomAlertModal>
<div className="space-y-6">
<div className="flex flex-col gap-6">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold">

2
ui/components/integrations/shared/integration-card-header.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Chip } from "@nextui-org/react";
import { Chip } from "@heroui/chip";
import { ExternalLink } from "lucide-react";
import { ReactNode } from "react";

5
ui/components/integrations/shared/integration-skeleton.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { Card, CardBody, CardHeader, Skeleton } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { Skeleton } from "@heroui/skeleton";
import { ReactNode } from "react";
interface IntegrationSkeletonProps {
@@ -75,7 +76,7 @@ export const IntegrationSkeleton = ({
<div className="flex flex-wrap gap-1">
<Skeleton className="h-6 w-16 rounded-full" />
<Skeleton className="h-6 w-20 rounded-full" />
<Skeleton className="w-18 h-6 rounded-full" />
<Skeleton className="h-6 w-18 rounded-full" />
</div>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<Skeleton className="h-3 w-32 rounded" />

2
ui/components/invitations/forms/delete-form.tsx
View File

@@ -62,7 +62,7 @@ export const DeleteForm = ({
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmitClient)}>
<input type="hidden" name="id" value={invitationId} />
<div className="flex w-full justify-center sm:space-x-6">
<div className="flex w-full justify-center sm:gap-6">
<CustomButton
type="button"
ariaLabel="Cancel"

Some files were not shown because too many files have changed in this diff Show More