improvement: add merge/closed status badge to closed secret change request table

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

@@ -43,6 +43,7 @@ export type TSecretApprovalRequest = {
   isReplicated?: boolean;
   slug: string;
   createdAt: string;
+  updatedAt: string;
   committerUserId: string;
   reviewers: {
     userId: string;

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx

@@ -6,16 +6,19 @@ import {
   faCheckCircle,
   faChevronDown,
   faCodeBranch,
+  faCodeMerge,
   faMagnifyingGlass,
-  faSearch
+  faSearch,
+  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSearch } from "@tanstack/react-router";
-import { formatDistance } from "date-fns";
+import { format, formatDistance } from "date-fns";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -25,7 +28,8 @@ import {
   EmptyState,
   Input,
   Pagination,
-  Skeleton
+  Skeleton,
+  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
@@ -308,7 +312,9 @@ export const SecretApprovalRequest = () => {
                   createdAt,
                   reviewers,
                   status,
-                  committerUser
+                  committerUser,
+                  hasMerged,
+                  updatedAt
                 } = secretApproval;
                 const isReviewed = reviewers.some(
                   ({ status: reviewStatus, userId }) =>
@@ -317,7 +323,7 @@ export const SecretApprovalRequest = () => {
                 return (
                   <div
                     key={reqId}
-                    className="flex flex-col border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
+                    className="flex border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
                     role="button"
                     tabIndex={0}
                     onClick={() => setSelectedApprovalId(secretApproval.id)}
@@ -325,6 +331,7 @@ export const SecretApprovalRequest = () => {
                       if (evt.key === "Enter") setSelectedApprovalId(secretApproval.id);
                     }}
                   >
+                    <div className="flex flex-col">
                       <div className="mb-1 text-sm">
                         <FontAwesomeIcon
                           icon={faCodeBranch}
@@ -349,6 +356,20 @@ export const SecretApprovalRequest = () => {
                         {!isReviewed && status === "open" && " - Review required"}
                       </span>
                     </div>
+                    {status === "close" && (
+                      <Tooltip content={format(updatedAt, "M/dd/yyyy h:mm a")}>
+                        <div className="my-auto ml-auto">
+                          <Badge
+                            variant={hasMerged ? "success" : "danger"}
+                            className="flex h-min items-center gap-1"
+                          >
+                            <FontAwesomeIcon icon={hasMerged ? faCodeMerge : faXmark} />
+                            {hasMerged ? "Merged" : "Closed"}
+                          </Badge>
+                        </div>
+                      </Tooltip>
+                    )}
+                  </div>
                 );
               })}
               {Boolean(