feat(secret-approval): added auto naming policy and minor ux enhancements

frontend/src/components/navigation/NavHeader.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faAngleRight, faShield } from "@fortawesome/free-solid-svg-icons";
+import { faAngleRight, faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useOrganization, useWorkspace } from "@app/context";
@@ -17,6 +17,7 @@ type Props = {
   secretPath?: string;
   isFolderMode?: boolean;
   isProtectedBranch?: boolean;
+  protectionPolicyName?: string;
 };
 
 // TODO: make links clickable and clean up
@@ -44,7 +45,8 @@ export default function NavHeader({
   onEnvChange,
   isFolderMode,
   secretPath = "/",
-  isProtectedBranch = false
+  isProtectedBranch = false,
+  protectionPolicyName
 }: Props): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
@@ -153,7 +155,11 @@ export default function NavHeader({
             </div>
           );
         })}
-      {isProtectedBranch && <FontAwesomeIcon icon={faShield} className="text-primary" />}
+      {isProtectedBranch && (
+        <Tooltip content={`Protected by policy ${protectionPolicyName}`}>
+          <FontAwesomeIcon icon={faLock} className="text-primary ml-2" />
+        </Tooltip>
+      )}
     </div>
   );
 }

frontend/src/hooks/api/secretApproval/queries.tsx

@@ -52,7 +52,7 @@ const fetchApprovalPolicyOfABoard = async (
     "/api/v1/secret-approvals/board",
     { params: { workspaceId, environment, secretPath } }
   );
-  return data.policy;
+  return data.policy || "";
 };
 
 export const useGetSecretApprovalPolicyOfABoard = ({

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

@@ -1,6 +1,7 @@
 export type TSecretApprovalPolicy = {
   _id: string;
   workspace: string;
+  name: string;
   environment: string;
   secretPath?: string;
   approvers: string[];

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

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

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

@@ -87,6 +87,7 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
         <Table>
           <THead>
             <Tr>
+              <Th>Name</Th>
               <Th>Environment</Th>
               <Th>Secret Path</Th>
               <Th>Eligible Approvers</Th>

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

@@ -38,6 +38,7 @@ export const SecretApprovalPolicyRow = ({
 
   return (
     <Tr>
+      <Td>{policy.name}</Td>
       <Td>{policy.environment}</Td>
       <Td>{policy.secretPath || "*"}</Td>
       <Td>

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

@@ -33,12 +33,18 @@ type Props = {
   editValues?: TSecretApprovalPolicy;
 };
 
-const formSchema = z.object({
-  environment: z.string(),
-  secretPath: z.string().optional().nullable(),
-  approvals: z.number().min(1),
-  approvers: z.string().array().optional()
-});
+const formSchema = z
+  .object({
+    environment: z.string(),
+    name: z.string().optional(),
+    secretPath: z.string().optional().nullable(),
+    approvals: z.number().min(1),
+    approvers: z.string().array().min(1)
+  })
+  .refine((data) => data.approvals <= data.approvers.length, {
+    path: ["approvals"],
+    message: "Approvals should be lower than approvals"
+  });
 
 type TFormSchema = z.infer<typeof formSchema>;
 
@@ -126,6 +132,15 @@ export const SecretPolicyForm = ({
     <Modal isOpen={isOpen} onOpenChange={onToggle}>
       <ModalContent title={isEditMode ? "Edit policy" : "Create policy"}>
         <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <Controller
+            control={control}
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} value={field.value || ""} />
+              </FormControl>
+            )}
+          />
           <Controller
             control={control}
             name="environment"

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

@@ -6,6 +6,7 @@ import {
   faCodeBranch
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatDistance } from "date-fns";
 import { AnimatePresence, motion } from "framer-motion";
 
 import {
@@ -18,9 +19,9 @@ import {
   EmptyState,
   Skeleton
 } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { useUser, useWorkspace } from "@app/context";
 import { useGetSecretApprovalRequests, useGetWorkspaceUsers } from "@app/hooks/api";
-import { TSecretApprovalRequest, TWorkspaceUser } from "@app/hooks/api/types";
+import { ApprovalStatus, TSecretApprovalRequest, TWorkspaceUser } from "@app/hooks/api/types";
 
 import {
   generateCommitText,
@@ -50,11 +51,13 @@ export const SecretApprovalRequest = () => {
     environment: envFilter,
     committer: committerFilter
   });
+  const { user: presentUser } = useUser();
   const { data: members } = useGetWorkspaceUsers(workspaceId);
   const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>(
     (prev, curr) => ({ ...prev, [curr._id]: curr }),
     {}
   );
+  const myMembershipId = members?.find(({ user }) => user._id === presentUser._id)?._id;
   const isSecretApprovalScreen = Boolean(selectedApproval);
 
   const handleGoBackSecretRequestDetail = () => {
@@ -181,7 +184,21 @@ export const SecretApprovalRequest = () => {
             {secretApprovalRequests?.pages?.map((group, i) => (
               <Fragment key={`secret-approval-request-${i + 1}`}>
                 {group?.map((secretApproval) => {
-                  const { _id: reqId, commits, committer } = secretApproval;
+                  const {
+                    _id: reqId,
+                    commits,
+                    committer,
+                    createdAt,
+                    policy,
+                    reviewers,
+                    status
+                  } = secretApproval;
+                  const isApprover = policy?.approvers?.indexOf(myMembershipId || "") !== -1;
+                  const isReviewed =
+                    reviewers.findIndex(
+                      ({ member, status: reviewStatus }) =>
+                        member === myMembershipId && reviewStatus === ApprovalStatus.APPROVED
+                    ) !== -1;
                   return (
                     <div
                       key={reqId}
@@ -198,9 +215,11 @@ export const SecretApprovalRequest = () => {
                         {generateCommitText(commits)}
                       </div>
                       <span className="text-xs text-gray-500">
-                        Opened 2 hours ago by {membersGroupById?.[committer]?.user?.firstName}{" "}
+                        Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
+                        {membersGroupById?.[committer]?.user?.firstName}{" "}
                         {membersGroupById?.[committer]?.user?.lastName} (
-                        {membersGroupById?.[committer]?.user?.email}) - Review required
+                        {membersGroupById?.[committer]?.user?.email}){" "}
+                        {isApprover && !isReviewed && status === "open" && "- Review required"}
                       </span>
                     </div>
                   );

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -216,6 +216,7 @@ export const SecretMainPage = () => {
             isProjectRelated
             onEnvChange={handleEnvChange}
             isProtectedBranch={isProtectedBranch}
+            protectionPolicyName={boardPolicy?.name}
           />
         </div>
         {!isRollbackMode ? (

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

@@ -218,7 +218,7 @@ export const SecretListView = ({
             newKey: hasKeyChanged ? key : undefined,
             skipMultilineEncoding: modSecret.skipMultilineEncoding
           });
-          if (isProtectedBranch) cb();
+          if (cb) cb();
         }
 
         queryClient.invalidateQueries(