ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-24 04:51:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): addressed PR comments

Browse Source
This commit is contained in:
sumit_chaturvedi
2025-07-08 14:33:56 +05:30
parent ff691f1d37
commit fa11e98a55
18 changed files with 70 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/components/compliance/no-scans-available.tsx
+2 -1
View File
@@ -25,11 +25,12 @@ export const NoScansAvailable = () => {
</div>
</div>
<CustomLink
path="/scans"
href="/scans"
className="flex-shrink-0"
ariaLabel="Go to Scans page"
variant="solid"
color="action"
size="sm"
>
Go to Scans
</CustomLink>
ui/components/findings/table/delta-indicator.tsx
+3 -2
View File
@@ -21,8 +21,9 @@ export const DeltaIndicator = ({ delta }: DeltaIndicatorProps) => {
<CustomLink
ariaLabel="Learn more about findings"
color="transparent"
className="h-auto min-w-0 p-0 text-xs text-primary"
path="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-8-analyze-the-findings"
size="sm"
className="h-auto min-w-0 p-0 text-primary"
href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-8-analyze-the-findings"
target="_blank"
>
Learn more
ui/components/invitations/invitation-details.tsx
+2 -1
View File
@@ -110,10 +110,11 @@ export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
</Card>
<div className="flex w-full items-center justify-end">
<CustomLink
path={"/invitations/"}
href={"/invitations/"}
ariaLabel="Send Invitation"
variant="solid"
color="action"
size="md"
endContent={<AddIcon size={20} />}
>
Back to Invitations
ui/components/invitations/send-invitation-button.tsx
+2 -1
View File
@@ -8,10 +8,11 @@ export const SendInvitationButton = () => {
return (
<div className="flex w-full items-center justify-end">
<CustomLink
path={"/invitations/new"}
href={"/invitations/new"}
ariaLabel="Send Invitation"
variant="solid"
color="action"
size="md"
endContent={<AddIcon size={20} />}
>
Send Invitation
ui/components/manage-groups/manage-groups-button.tsx
+2 -2
View File
@@ -7,11 +7,11 @@ import { CustomLink } from "@/components/ui/custom";
export const ManageGroupsButton = () => {
return (
<CustomLink
path={"/manage-groups"}
href={"/manage-groups"}
ariaLabel="Manage Groups"
variant="dashed"
color="secondary"
className="rounded-md px-4 py-2 !font-bold hover:border-solid hover:bg-default-100"
size="md"
startContent={<SettingsIcon size={20} />}
>
Manage Groups
ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx
+2 -1
View File
@@ -6,10 +6,11 @@ export const LinkToFindings = () => {
return (
<div className="mt-4 flex w-full items-center justify-end">
<CustomLink
path="/findings?sort=severity,-inserted_at&filter[status__in]=FAIL&filter[delta__in]=new"
href="/findings?sort=severity,-inserted_at&filter[status__in]=FAIL&filter[delta__in]=new"
ariaLabel="Go to Findings page"
variant="solid"
color="action"
size="sm"
>
Check out on Findings
</CustomLink>
ui/components/overview/provider-overview/provider-overview.tsx
+2 -1
View File
@@ -179,10 +179,11 @@ export const ProvidersOverview = ({
</div>
<div className="mt-4 flex w-full items-center justify-end">
<CustomLink
path="/providers"
href="/providers"
ariaLabel="Go to Providers page"
variant="solid"
color="action"
size="sm"
endContent={<AddIcon size={20} />}
>
Add Provider
ui/components/providers/add-provider-button.tsx
+2 -1
View File
@@ -7,9 +7,10 @@ import { AddIcon } from "../icons";
export const AddProviderButton = () => {
return (
<CustomLink
path="/providers/connect-account"
href="/providers/connect-account"
ariaLabel="Add Cloud Provider"
variant="solid"
size="md"
color="action"
endContent={<AddIcon size={20} />}
>
ui/components/providers/link-to-scans.tsx
+2 -1
View File
@@ -9,10 +9,11 @@ interface LinkToScansProps {
export const LinkToScans = ({ providerUid }: LinkToScansProps) => {
return (
<CustomLink
path={`/scans?filter[provider_uid]=${providerUid}`}
href={`/scans?filter[provider_uid]=${providerUid}`}
ariaLabel="Go to Scans page"
variant="solid"
color="action"
size="sm"
>
View Scan Jobs
</CustomLink>
ui/components/providers/workflow/credentials-role-helper.tsx
+6 -6
View File
@@ -19,8 +19,8 @@ export const CredentialsRoleHelper = () => {
<CustomLink
ariaLabel="Use the following AWS CloudFormation Quick Link to deploy the IAM Role"
color="transparent"
className="h-auto w-fit min-w-0 p-0 text-blue-500"
path={`${getAWSCredentialsTemplateLinks().cloudformationQuickLink}${session?.tenantId}`}
variant="textLink"
href={`${getAWSCredentialsTemplateLinks().cloudformationQuickLink}${session?.tenantId}`}
target="_blank"
>
Use the following AWS CloudFormation Quick Link to deploy the IAM Role
@@ -41,8 +41,8 @@ export const CredentialsRoleHelper = () => {
<CustomLink
ariaLabel="CloudFormation Template"
color="transparent"
className="h-auto w-fit min-w-0 p-0 text-blue-500"
path={getAWSCredentialsTemplateLinks().cloudformation}
variant="textLink"
href={getAWSCredentialsTemplateLinks().cloudformation}
target="_blank"
>
CloudFormation Template
@@ -50,8 +50,8 @@ export const CredentialsRoleHelper = () => {
<CustomLink
ariaLabel="Terraform Code"
color="transparent"
className="h-auto w-fit min-w-0 p-0 text-blue-500"
path={getAWSCredentialsTemplateLinks().terraform}
variant="textLink"
href={getAWSCredentialsTemplateLinks().terraform}
target="_blank"
>
Terraform Code
ui/components/roles/add-role-button.tsx
+2 -1
View File
@@ -8,10 +8,11 @@ export const AddRoleButton = () => {
return (
<div className="flex w-full items-center justify-end">
<CustomLink
path="/roles/new"
href="/roles/new"
ariaLabel="Add Role"
variant="solid"
color="action"
size="md"
endContent={<AddIcon size={20} />}
>
Add Role
ui/components/scans/link-to-findings-from-scan.tsx
+3 -2
View File
@@ -13,10 +13,11 @@ export const LinkToFindingsFromScan = ({
}: LinkToFindingsProps) => {
return (
<CustomLink
path={`/findings?filter[scan__in]=${scanId}&filter[status__in]=FAIL`}
href={`/findings?filter[scan__in]=${scanId}&filter[status__in]=FAIL`}
ariaLabel="Go to Findings page"
color="muted"
className="w-[7rem] rounded-md border border-prowler-theme-green px-4 py-2 text-xs !font-bold text-default-500 hover:bg-prowler-theme-green hover:!text-black disabled:opacity-30"
variant="ghost"
size="sm"
isDisabled={isDisabled}
>
See Findings
ui/components/scans/no-providers-added.tsx
+2 -1
View File
@@ -27,11 +27,12 @@ export const NoProvidersAdded = () => {
</div>
<CustomLink
path="/providers/connect-account"
href="/providers/connect-account"
ariaLabel="Go to Add Cloud Provider page"
className="w-full max-w-xs justify-center"
variant="solid"
color="action"
size="md"
>
Get Started
</CustomLink>
ui/components/scans/no-providers-connected.tsx
+2 -1
View File
@@ -28,11 +28,12 @@ export const NoProvidersConnected = () => {
</div>
<div className="w-full md:w-auto md:flex-shrink-0">
<CustomLink
path="/providers"
href="/providers"
className="w-full justify-center md:w-fit"
ariaLabel="Go to Cloud providers page"
variant="solid"
color="action"
size="md"
>
Review Cloud Providers
</CustomLink>
ui/components/ui/custom/custom-link.tsx
+28 -12
View File
@@ -1,10 +1,11 @@
import clsx from "clsx";
import Link from "next/link";
import React from "react";
import { cn } from "@/lib";
interface CustomLinkProps
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
path: string;
href: string;
target?: "_self" | "_blank";
rel?: string;
className?: string;
@@ -12,11 +13,12 @@ interface CustomLinkProps
variant?:
| "default"
| "dashed"
| "underline"
| "ghost"
| "block"
| "solid"
| "unstyled";
| "unstyled"
| "iconButton"
| "textLink";
color?:
| "primary"
| "secondary"
@@ -25,6 +27,7 @@ interface CustomLinkProps
| "danger"
| "success"
| "muted";
size?: "md" | "sm" | "lg";
startContent?: React.ReactNode;
endContent?: React.ReactNode;
isIconOnly?: boolean;
@@ -40,34 +43,46 @@ const linkClasses = {
const variantClasses = {
default: "",
dashed: "border border-dashed border-current",
underline: "underline hover:opacity-80",
ghost: "bg-transparent text-inherit",
dashed:
"border border-default border-dashed bg-transparent justify-center whitespace-nowrap shadow-sm hover:border-solid hover:bg-default-100 active:bg-default-200 active:border-solid",
iconButton:
"whitespace-nowrap rounded-[14px] border-2 border-gray-200 bg-prowler-grey-medium p-3 bg-transparent",
ghost:
"whitespace-nowrap border border-prowler-theme-green text-default-500 hover:bg-prowler-theme-green hover:!text-black disabled:opacity-30",
solid: "whitespace-nowrap min-w-20",
textLink: "h-auto w-fit min-w-0 p-0 text-blue-500",
block: "block w-full text-left",
unstyled: "",
solid: "rounded-md px-4 py-2 !font-bold",
};
const colorClasses = {
primary: "text-prowler-theme-green",
secondary: "text-default-800 dark:text-white",
action: "bg-prowler-theme-green font-bold text-prowler-theme-midnight ",
action:
"bg-prowler-theme-green font-bold text-prowler-theme-midnight hover:opacity-80 transition-opacity duration-100",
transparent: "border-0 border-transparent bg-transparent",
danger: "text-red-600 dark:text-red-400",
success: "text-green-600 dark:text-green-400",
muted: "text-gray-500 dark:text-gray-400",
};
const sizeClasses = {
sm: "text-xs px-4 h-8 rounded-lg",
md: "text-sm px-4 py-2 h-10 rounded-lg",
lg: "text-lg px-5 py-3 h-12 rounded-xl",
};
export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
(
{
path,
href,
target = "_self",
rel,
className,
children,
variant = "default",
color = "primary",
size = "md",
startContent,
endContent,
isIconOnly = false,
@@ -88,9 +103,10 @@ export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
</>
);
const combinedClasses = clsx(
const combinedClasses = cn(
linkClasses.base,
colorClasses[color],
sizeClasses[size],
variantClasses[variant],
isIconOnly && linkClasses.iconOnly,
isDisabled && linkClasses.disabled,
@@ -107,7 +123,7 @@ export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
</span>
) : (
<Link
href={path}
href={href}
target={target}
rel={computedRel}
ref={ref}
ui/components/ui/headers/navigation-header.tsx
+2 -2
View File
@@ -19,8 +19,8 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
<>
<header className="flex items-center gap-3 border-b border-gray-200 px-6 py-4 dark:border-gray-800">
<CustomLink
path={href || ""}
className="rounded-xl border-2 border-gray-200 bg-prowler-grey-medium bg-transparent p-3"
href={href || ""}
variant="iconButton"
ariaLabel="Navigation button"
color="muted"
>
ui/components/ui/sidebar/menu.tsx
+4 -5
View File
@@ -29,13 +29,12 @@ export const Menu = ({ isOpen }: { isOpen: boolean }) => {
<>
<div className="px-2">
<CustomLink
path="/scans"
className={cn(
isOpen ? "w-full" : "w-fit",
"px justify-center rounded-md px-8 py-3 !font-bold",
)}
href="/scans"
className={cn(isOpen ? "w-full" : "w-fit", "justify-center")}
variant="solid"
ariaLabel="Launch Scan"
color="action"
size="md"
endContent={isOpen ? <AddIcon size={20} /> : null}
>
{isOpen ? "Launch Scan" : <AddIcon size={20} />}
ui/components/users/add-user-button.tsx
+2 -1
View File
@@ -8,10 +8,11 @@ export const AddUserButton = () => {
return (
<div className="flex w-full items-center justify-end">
<CustomLink
path="/invitations/new"
href="/invitations/new"
ariaLabel="Invite User"
variant="solid"
color="action"
size="md"
endContent={<AddIcon size={20} />}
>
Invite User