feat(pam): request access modal callout

frontend/src/components/v3/generic/Alert/Alert.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "cva";
 import { cn } from "../../utils";
 
 const alertVariants = cva(
-  "relative w-full border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full border px-4 rounded-md py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {

frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx

@@ -16,7 +16,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
-import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -251,13 +250,8 @@ export const PamAccountsTable = ({ projectId }: Props) => {
     });
 
     if (requiresApproval) {
-      createNotification({
-        text: "This account is protected by an approval policy, you must request access",
-        type: "info"
-      });
-
       // Open request access modal with pre-populated path
-      handlePopUpOpen("requestAccount", { accountPath: fullAccountPath });
+      handlePopUpOpen("requestAccount", { accountPath: fullAccountPath, accountAccessed: true });
       return;
     }
 
@@ -560,6 +554,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
         isOpen={popUp.requestAccount.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("requestAccount", isOpen)}
         accountPath={popUp.requestAccount.data?.accountPath}
+        accountAccessed={popUp.requestAccount.data?.accountAccessed}
       />
       <PamDeleteAccountModal
         isOpen={popUp.deleteAccount.isOpen}

frontend/src/pages/pam/PamAccountsPage/components/PamRequestAccountAccessModal.tsx

@@ -1,5 +1,6 @@
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { InfoIcon } from "lucide-react";
 import ms from "ms";
 import { z } from "zod";
 
@@ -17,9 +18,11 @@ import {
 import { useProject } from "@app/context";
 import { ApprovalPolicyType } from "@app/hooks/api/approvalPolicies";
 import { useCreateApprovalRequest } from "@app/hooks/api/approvalRequests/mutations";
+import { UnstableAlert, UnstableAlertDescription, UnstableAlertTitle } from "@app/components/v3";
 
 type Props = {
   accountPath?: string;
+  accountAccessed?: boolean;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
 };
@@ -45,7 +48,7 @@ const formSchema = z.object({
 
 type FormData = z.infer<typeof formSchema>;
 
-const Content = ({ onOpenChange, accountPath }: Props) => {
+const Content = ({ onOpenChange, accountPath, accountAccessed }: Props) => {
   const { projectId } = useProject();
   const { mutateAsync: createApprovalRequest, isPending: isSubmitting } =
     useCreateApprovalRequest();
@@ -94,6 +97,15 @@ const Content = ({ onOpenChange, accountPath }: Props) => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
+      {accountAccessed && (
+        <UnstableAlert variant="info" className="mb-3">
+          <InfoIcon />
+          <UnstableAlertTitle>This account is protected by an approval policy</UnstableAlertTitle>
+          <UnstableAlertDescription>
+            You must request access by filling out the fields below.
+          </UnstableAlertDescription>
+        </UnstableAlert>
+      )}
       <Controller
         name="accountPath"
         control={control}