diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx index 35f85383d..9711e3e68 100644 --- a/frontend/src/components/v2/FormControl/FormControl.tsx +++ b/frontend/src/components/v2/FormControl/FormControl.tsx @@ -1,9 +1,11 @@ import { cloneElement, ReactNode } from "react"; -import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons"; +import { faExclamationTriangle, faQuestionCircle } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Label from "@radix-ui/react-label"; import { twMerge } from "tailwind-merge"; +import { Tooltip } from "../Tooltip"; + export type FormLabelProps = { id?: string; isRequired?: boolean; @@ -11,9 +13,10 @@ export type FormLabelProps = { label?: ReactNode; icon?: ReactNode; className?: string; + tooltipText?: string; }; -export const FormLabel = ({ id, label, isRequired, icon, className,isOptional }: FormLabelProps) => ( +export const FormLabel = ({ id, label, isRequired, icon, className,isOptional, tooltipText }: FormLabelProps) => ( *} {isOptional && - Optional} - {icon && ( + {icon && !tooltipText && ( {icon} )} + {tooltipText && ( + + + + )} ); @@ -64,6 +76,7 @@ export type FormControlProps = { children: JSX.Element; className?: string; icon?: ReactNode; + tooltipText?: string; }; export const FormControl = ({ @@ -76,7 +89,8 @@ export const FormControl = ({ id, isError, icon, - className + className, + tooltipText }: FormControlProps): JSX.Element => { return (
@@ -87,6 +101,7 @@ export const FormControl = ({ isRequired={isRequired} id={id} icon={icon} + tooltipText={tooltipText} /> ) : ( label diff --git a/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx b/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx index 54d88ed08..4be290827 100644 --- a/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx +++ b/frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx @@ -7,8 +7,6 @@ import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { - Alert, - AlertDescription, Button, DropdownMenu, DropdownMenuContent, @@ -94,7 +92,6 @@ export const AccessPolicyForm = ({ const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy(); const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy(); - const enforcementLevel = watch("enforcementLevel"); const policyName = policyDetails[watch("policyType")]?.name || "Policy"; const handleCreatePolicy = async (data: TFormSchema) => { @@ -330,6 +327,7 @@ export const AccessPolicyForm = ({ label="Enforcement Level" isError={Boolean(error)} errorText={error?.message} + tooltipText="Choose 'Hard' for required approval or 'Soft' for optional approval" helperText={ field.value === EnforcementLevel.Hard ? "Hard enforcement prevents any request from being deployed without prior approval" @@ -352,13 +350,6 @@ export const AccessPolicyForm = ({ )} /> - {enforcementLevel === EnforcementLevel.Soft && ( - - - Soft enforcement allows requesters to bypass approval, which may reduce system security and stability. - - - )}