feat(secret-approval): added new audit log and subscription on policy creation

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/SecretApprovalPolicyList.tsx

@@ -14,9 +14,15 @@ import {
   Td,
   Th,
   THead,
-  Tr
+  Tr,
+  UpgradePlanModal
 } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useSubscription
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
   useDeleteSecretApprovalPolicy,
@@ -35,9 +41,11 @@ type Props = {
 export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
   const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
     "secretPolicyForm",
-    "deletePolicy"
+    "deletePolicy",
+    "upgradePlan"
   ] as const);
   const permission = useProjectPermission();
+  const { subscription } = useSubscription();
   const { createNotification } = useNotificationContext();
 
   const { data: members } = useGetWorkspaceUsers(workspaceId);
@@ -87,7 +95,13 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
           >
             {(isAllowed) => (
               <Button
-                onClick={() => handlePopUpOpen("secretPolicyForm")}
+                onClick={() => {
+                  if (subscription && !subscription?.secretApproval) {
+                    handlePopUpOpen("upgradePlan");
+                    return;
+                  }
+                  handlePopUpOpen("secretPolicyForm");
+                }}
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 isDisabled={!isAllowed}
               >
@@ -147,6 +161,11 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
         onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
         onDeleteApproved={handleDeletePolicy}
       />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can add secret approval policy if you switch to Infisical's Team plan."
+      />
     </div>
   );
 };