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

frontend/src/hooks/api/secretApprovalRequest/types.ts

@@ -47,6 +47,7 @@ export type TSecretApprovalRequest<
   J extends unknown = EncryptedSecret
 > = {
   _id: string;
+  slug: string;
   createdAt: string;
   committer: string;
   reviewers: {

frontend/src/hooks/api/subscriptions/types.ts

@@ -11,12 +11,21 @@ export type SubscriptionPlan = {
   rbac: boolean;
   secretVersioning: boolean;
   slug: string;
+  secretApproval: string;
   tier: number;
   workspaceLimit: number;
   workspacesUsed: number;
   environmentLimit: number;
   samlSSO: boolean;
-  status: "incomplete" | "incomplete_expired" | "trialing" | "active" | "past_due" | "canceled" | "unpaid" | null;
+  status:
+    | "incomplete"
+    | "incomplete_expired"
+    | "trialing"
+    | "active"
+    | "past_due"
+    | "canceled"
+    | "unpaid"
+    | null;
   trial_end: number | null;
   has_used_trial: boolean;
 };

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

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

@@ -213,6 +213,7 @@ export const SecretApprovalRequest = () => {
                       <div className="mb-1">
                         <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
                         {generateCommitText(commits)}
+                        <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
                       </div>
                       <span className="text-xs text-gray-500">
                         Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -139,9 +139,11 @@ export const SecretApprovalRequestChanges = ({
   };
 
   if (isSecretApprovalRequestLoading) {
-    <div>
-      <ContentLoader />
-    </div>;
+    return (
+      <div>
+        <ContentLoader />
+      </div>
+    );
   }
 
   if (!isSecretApprovalRequestSuccess)

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -245,7 +245,7 @@ export const SecretListView = ({
         });
       }
     },
-    [environment, secretPath]
+    [environment, secretPath, isProtectedBranch]
   );
 
   const handleSecretDelete = useCallback(async () => {