feat(frontend): adding tooltip for labels

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) => (
   <Label.Root
     className={twMerge(
       "mb-0.5 ml-1 flex items-center text-sm font-normal text-mineshaft-400",
@@ -24,11 +27,20 @@ export const FormLabel = ({ id, label, isRequired, icon, className,isOptional }:
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
     {isOptional && <span className="ml-1 text-gray-500 italic text-xs">- Optional</span>}
-    {icon && (
+    {icon && !tooltipText && (
       <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
         {icon}
       </span>
     )}
+    {tooltipText && (
+      <Tooltip content={tooltipText}>
+          <FontAwesomeIcon
+            icon={faQuestionCircle}
+            size="1x"
+            className="ml-2"
+          />
+      </Tooltip>
+    )}
   </Label.Root>
 );
 
@@ -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 (
     <div className={twMerge("mb-4", className)}>
@@ -87,6 +101,7 @@ export const FormControl = ({
           isRequired={isRequired}
           id={id}
           icon={icon}
+          tooltipText={tooltipText}
         />
       ) : (
         label

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 = ({
 							</FormControl>
 						)}
 						/>
-						{enforcementLevel === EnforcementLevel.Soft && (
-							<Alert hideTitle variant="warning">
-								<AlertDescription>
-									Soft enforcement allows requesters to bypass approval, which may reduce system security and stability.
-								</AlertDescription>
-							</Alert>
-						)}
 						<div className="mt-8 flex items-center space-x-4">
 							<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
 								Save