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.
-
-
- )}