feat(secret-approval): implemented the base

2026-10-13 02:29:26 +00:00 · 2023-10-05 20:33:48 +05:30
parent a995627815
commit fc43511f5d
22 changed files with 1467 additions and 49 deletions
@@ -8,6 +8,7 @@ export * from "./keys";
 export * from "./organization";
 export * from "./roles";
 export * from "./secretApproval";
+export * from "./secretApprovalRequest";
 export * from "./secretFolders";
 export * from "./secretImports";
 export * from "./secrets";
@@ -0,0 +1,2 @@
+export { useUpdateSecretApprovalRequestStatus } from "./mutation";
+export { useGetSecretApprovalRequestDetails, useGetSecretApprovalRequests } from "./queries";
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { secretApprovalRequestKeys } from "./queries";
+import { TUpdateSecretApprovalRequestStatusDTO } from "./types";
+
+export const useUpdateSecretApprovalRequestStatus = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TUpdateSecretApprovalRequestStatusDTO>({
+    mutationFn: async ({ id, status }) => {
+      const { data } = await apiRequest.post(`/api/v1/secret-approval-requests/${id}`, { status });
+      return data;
+    },
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries(secretApprovalRequestKeys.detail({ id }));
+    }
+  });
+};
@@ -0,0 +1,144 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import {
+  decryptAssymmetric,
+  decryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { apiRequest } from "@app/config/request";
+
+import { UserWsKeyPair } from "../keys/types";
+import { decryptSecrets } from "../secrets/queries";
+import { DecryptedSecret } from "../secrets/types";
+import {
+  TGetSecretApprovalRequestDetails,
+  TGetSecretApprovalRequestList,
+  TSecretApprovalRequest,
+  TSecretApprovalSecChange,
+  TSecretApprovalSecChangeData
+} from "./types";
+
+export const secretApprovalRequestKeys = {
+  list: ({ workspaceId, environment }: TGetSecretApprovalRequestList) =>
+    [{ workspaceId, environment }, "secret-approval-requests"] as const,
+  detail: ({ id }: Omit<TGetSecretApprovalRequestDetails, "decryptKey">) =>
+    [{ id }, "secret-approval-request-detail"] as const
+};
+
+export const decryptSecretApprovalSecret = (
+  encSecret: TSecretApprovalSecChangeData,
+  decryptFileKey: UserWsKeyPair
+) => {
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+  const key = decryptAssymmetric({
+    ciphertext: decryptFileKey.encryptedKey,
+    nonce: decryptFileKey.nonce,
+    publicKey: decryptFileKey.sender.publicKey,
+    privateKey: PRIVATE_KEY
+  });
+
+  const secretKey = decryptSymmetric({
+    ciphertext: encSecret.secretKeyCiphertext,
+    iv: encSecret.secretKeyIV,
+    tag: encSecret.secretKeyTag,
+    key
+  });
+
+  const secretValue = decryptSymmetric({
+    ciphertext: encSecret.secretValueCiphertext,
+    iv: encSecret.secretValueIV,
+    tag: encSecret.secretValueTag,
+    key
+  });
+
+  const secretComment = decryptSymmetric({
+    ciphertext: encSecret.secretCommentCiphertext,
+    iv: encSecret.secretCommentIV,
+    tag: encSecret.secretCommentTag,
+    key
+  });
+  return {
+    _id: encSecret._id,
+    version: encSecret.version,
+    secretKey,
+    secretValue,
+    secretComment,
+    tags: encSecret.tags
+  };
+};
+
+const fetchSecretApprovalRequestList = async ({
+  workspaceId,
+  environment
+}: TGetSecretApprovalRequestList) => {
+  const { data } = await apiRequest.get<{ approvals: TSecretApprovalRequest[] }>(
+    "/api/v1/secret-approval-requests",
+    {
+      params: {
+        workspaceId,
+        environment
+      }
+    }
+  );
+
+  return data.approvals;
+};
+
+export const useGetSecretApprovalRequests = ({
+  workspaceId,
+  environment,
+  options = {}
+}: TGetSecretApprovalRequestList & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretApprovalRequest[],
+      unknown,
+      TSecretApprovalRequest[],
+      ReturnType<typeof secretApprovalRequestKeys.list>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useQuery({
+    queryKey: secretApprovalRequestKeys.list({ workspaceId, environment }),
+    queryFn: () => fetchSecretApprovalRequestList({ workspaceId, environment }),
+    enabled: Boolean(workspaceId) && (options?.enabled ?? true)
+  });
+
+const fetchSecretApprovalRequestDetails = async ({
+  id
+}: Omit<TGetSecretApprovalRequestDetails, "decryptKey">) => {
+  const { data } = await apiRequest.get<{ approval: TSecretApprovalRequest }>(
+    `/api/v1/secret-approval-requests/${id}`
+  );
+
+  return data.approval;
+};
+
+export const useGetSecretApprovalRequestDetails = ({
+  id,
+  decryptKey,
+  options = {}
+}: TGetSecretApprovalRequestDetails & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretApprovalRequest,
+      unknown,
+      TSecretApprovalRequest<TSecretApprovalSecChange, DecryptedSecret>,
+      ReturnType<typeof secretApprovalRequestKeys.detail>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useQuery({
+    queryKey: secretApprovalRequestKeys.detail({ id }),
+    queryFn: () => fetchSecretApprovalRequestDetails({ id }),
+    select: (data) => ({
+      ...data,
+      commits: data.commits.map(({ secret, op, newVersion }) => ({
+        op,
+        secret: secret ? decryptSecrets([secret], decryptKey)[0] : undefined,
+        newVersion: newVersion ? decryptSecretApprovalSecret(newVersion, decryptKey) : undefined
+      }))
+    }),
+    enabled: Boolean(id && decryptKey) && (options?.enabled ?? true)
+  });
@@ -0,0 +1,83 @@
+import { UserWsKeyPair } from "../keys/types";
+import { TSecretApprovalPolicy } from "../secretApproval/types";
+import { EncryptedSecret } from "../secrets/types";
+import { WsTag } from "../tags/types";
+
+export enum ApprovalStatus {
+  PENDING = "pending",
+  APPROVED = "approved",
+  REJECTED = "rejected"
+}
+
+export enum CommitType {
+  DELETE = "delete",
+  UPDATE = "update",
+  CREATE = "create"
+}
+
+export type TSecretApprovalSecChangeData = {
+  _id: string;
+  version: number;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  secretCommentCiphertext: string;
+  skipMultilineEncoding?: boolean;
+  algorithm: "aes-256-gcm";
+  keyEncoding: "utf8" | "base64";
+  tags?: WsTag[];
+};
+
+export type TSecretApprovalSecChange = {
+  _id: string;
+  version: number;
+  secretKey: string;
+  secretValue: string;
+  secretComment: string;
+  tags?: string[];
+};
+
+export type TSecretApprovalRequest<
+  T extends unknown = TSecretApprovalSecChangeData,
+  J extends unknown = EncryptedSecret
+> = {
+  _id: string;
+  committer: string;
+  reviewers: {
+    member: string;
+    status: ApprovalStatus;
+  }[];
+  workspace: string;
+  environment: string;
+  folderId: string;
+  hasMerged: boolean;
+  status: "open" | "close";
+  policy: TSecretApprovalPolicy;
+  commits: {
+    // if there is no secret means it was creation
+    secret?: J;
+    // if there is no new version its for Delete
+    newVersion?: T;
+    op: CommitType;
+  }[];
+};
+
+export type TGetSecretApprovalRequestList = {
+  workspaceId: string;
+  environment?: string;
+};
+
+export type TGetSecretApprovalRequestDetails = {
+  id: string;
+  decryptKey: UserWsKeyPair;
+};
+
+export type TUpdateSecretApprovalRequestStatusDTO = {
+  status: ApprovalStatus;
+  id: string;
+};
@@ -26,7 +26,10 @@ export const secretKeys = {
  getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"] as const
 };

-const decryptSecrets = (encryptedSecrets: EncryptedSecret[], decryptFileKey: UserWsKeyPair) => {
+export const decryptSecrets = (
+  encryptedSecrets: EncryptedSecret[],
+  decryptFileKey: UserWsKeyPair
+) => {
  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
  const key = decryptAssymmetric({
    ciphertext: decryptFileKey.encryptedKey,
@@ -5,13 +5,19 @@ export type { TCloudIntegration, TIntegration } from "./integrations/types";
 export type { UserWsKeyPair } from "./keys/types";
 export type { Organization } from "./organization/types";
 export type { TSecretApprovalPolicy } from "./secretApproval/types";
+export type {
+  TGetSecretApprovalRequestDetails,
+  TSecretApprovalRequest,
+  TSecretApprovalSecChange
+} from "./secretApprovalRequest/types";
+export { ApprovalStatus, CommitType } from "./secretApprovalRequest/types";
 export type { TSecretFolder } from "./secretFolders/types";
 export type { TImportedSecrets, TSecretImports } from "./secretImports/types";
 export * from "./secrets/types";
 export type { CreateServiceTokenDTO, ServiceToken } from "./serviceTokens/types";
 export type { SubscriptionPlan } from "./subscriptions/types";
 export type { WsTag } from "./tags/types";
-export type { AddUserToWsDTO, AddUserToWsRes, OrgUser, User } from "./users/types";
+export type { AddUserToWsDTO, AddUserToWsRes, OrgUser, TWorkspaceUser, User } from "./users/types";
 export type { TWebhook } from "./webhooks/types";
 export type {
  CreateEnvironmentDTO,
@@ -2,6 +2,7 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useWorkspace } from "@app/context";

 import { SecretApprovalPolicyList } from "./components/SecretApprovalPolicyList";
+import { SecretApprovalRequest } from "./components/SecretApprovalRequest";

 enum TabSection {
  ApprovalRequests = "approval-requests",
@@ -22,6 +23,9 @@ export const SecretApprovalPage = () => {
          <Tab value={TabSection.ApprovalRequests}>Secret PRs</Tab>
          <Tab value={TabSection.Rules}>Policies</Tab>
        </TabList>
+        <TabPanel value={TabSection.ApprovalRequests}>
+          <SecretApprovalRequest />
+        </TabPanel>
        <TabPanel value={TabSection.Rules}>
          <SecretApprovalPolicyList workspaceId={workspaceId} />
        </TabPanel>
@@ -99,9 +99,11 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
              <TableSkeleton columns={4} innerKey="secret-policies" className="bg-mineshaft-700" />
            )}
            {!isPoliciesLoading && !policies?.length && (
-              <Td colSpan={5}>
-                <EmptyState title="No policies found" icon={faFileShield} />
-              </Td>
+              <Tr>
+                <Td colSpan={5}>
+                  <EmptyState title="No policies found" icon={faFileShield} />
+                </Td>
+              </Tr>
            )}
            {policies?.map((policy) => (
              <SecretApprovalPolicyRow
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { faCheck, faCodeBranch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { useWorkspace } from "@app/context";
+import { useGetSecretApprovalRequests, useGetWorkspaceUsers } from "@app/hooks/api";
+import { TSecretApprovalRequest, TWorkspaceUser } from "@app/hooks/api/types";
+
+import {
+  generateCommitText,
+  SecretApprovalRequestChanges
+} from "./components/SecretApprovalRequestChanges";
+
+export const SecretApprovalRequest = () => {
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?._id || "";
+  const [selectedApproval, setSelectedApproval] = useState<TSecretApprovalRequest | null>(null);
+
+  const { data: secretApprovalRequests } = useGetSecretApprovalRequests({ workspaceId });
+  const { data: members } = useGetWorkspaceUsers(workspaceId);
+  const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>(
+    (prev, curr) => ({ ...prev, [curr._id]: curr }),
+    {}
+  );
+
+  const isSecretApprovalScreen = Boolean(selectedApproval);
+
+  return (
+    <AnimatePresence exitBeforeEnter>
+      {isSecretApprovalScreen ? (
+        <motion.div
+          key="approval-changes-details"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: 30 }}
+        >
+          <SecretApprovalRequestChanges
+            workspaceId={workspaceId}
+            members={membersGroupById}
+            approvalRequestId={selectedApproval?._id || ""}
+            onGoBack={() => setSelectedApproval(null)}
+            committer={membersGroupById?.[selectedApproval?.committer || ""]}
+          />
+        </motion.div>
+      ) : (
+        <motion.div
+          key="approval-changes-list"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: -30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+          className="rounded-md bg-mineshaft-800 text-gray-300"
+        >
+          <div className="p-4 px-8 flex items-center space-x-8">
+            <div>
+              <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
+              27 Open
+            </div>
+            <div className="text-gray-500">
+              <FontAwesomeIcon icon={faCheck} className="mr-2" />
+              27 Closed
+            </div>
+          </div>
+          <div className="flex flex-col border-t border-mineshaft-600">
+            {secretApprovalRequests?.map((secretApproval) => {
+              const { _id: reqId, commits, committer } = secretApproval;
+              return (
+                <div
+                  key={reqId}
+                  className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setSelectedApproval(secretApproval)}
+                  onKeyDown={(evt) => {
+                    if (evt.key === "Enter") setSelectedApproval(secretApproval);
+                  }}
+                >
+                  <div className="mb-1">
+                    <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
+                    {generateCommitText(commits)}
+                  </div>
+                  <span className="text-xs text-gray-500">
+                    Opened 2 hours ago by {membersGroupById?.[committer]?.user?.firstName}{" "}
+                    {membersGroupById?.[committer]?.user?.lastName} (
+                    {membersGroupById?.[committer]?.user?.email}) - Review required
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
@@ -0,0 +1 @@
+type Props = {};
@@ -0,0 +1,356 @@
+import { ReactNode } from "react";
+import {
+  faArrowLeft,
+  faCheck,
+  faCheckCircle,
+  faCircle,
+  faClose,
+  faCodeBranch,
+  faXmarkCircle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  ContentLoader,
+  IconButton,
+  SecretInput,
+  Table,
+  TableContainer,
+  Tag,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import {
+  useGetSecretApprovalRequestDetails,
+  useGetUserWsKey,
+  useUpdateSecretApprovalRequestStatus
+} from "@app/hooks/api";
+import { ApprovalStatus, CommitType, TWorkspaceUser } from "@app/hooks/api/types";
+
+import { useNotificationContext } from "~/components/context/Notifications/NotificationProvider";
+
+export const generateCommitText = (commits: { op: CommitType }[] = []) => {
+  const score: Record<string, number> = {};
+  commits.forEach(({ op }) => {
+    score[op] = (score?.[op] || 0) + 1;
+  });
+  const text: ReactNode[] = [];
+  if (score[CommitType.CREATE])
+    text.push(
+      <span key="created-commit">
+        {score[CommitType.CREATE]} secret{score[CommitType.CREATE] !== 1 && "s"}
+        <span style={{ color: "#16a34a" }}> created</span>
+      </span>
+    );
+  if (score[CommitType.UPDATE])
+    text.push(
+      <span key="updated-commit">
+        {Boolean(text.length) && ","}
+        {score[CommitType.UPDATE]} secret{score[CommitType.UPDATE] !== 1 && "s"}
+        <span style={{ color: "#ea580c" }} className="text-orange-600">
+          {" "}
+          updated
+        </span>
+      </span>
+    );
+  if (score[CommitType.DELETE])
+    text.push(
+      <span className="deleted-commit">
+        {Boolean(text.length) && "and"}
+        {score[CommitType.DELETE]} secret{score[CommitType.UPDATE] !== 1 && "s"}
+        <span style={{ color: "#b91c1c" }}> deleted</span>
+      </span>
+    );
+
+  return text;
+};
+
+const getReviewedStatusSymbol = (status?: ApprovalStatus) => {
+  if (status === ApprovalStatus.APPROVED)
+    return <FontAwesomeIcon icon={faCheckCircle} size="xs" style={{ color: "#15803d" }} />;
+  if (status === ApprovalStatus.REJECTED)
+    return <FontAwesomeIcon icon={faXmarkCircle} size="xs" style={{ color: "#b91c1c" }} />;
+  return <FontAwesomeIcon icon={faCircle} size="xs" style={{ color: "#c2410c" }} />;
+};
+
+type Props = {
+  workspaceId: string;
+  approvalRequestId: string;
+  onGoBack: () => void;
+  committer?: TWorkspaceUser;
+  members?: Record<string, TWorkspaceUser>;
+};
+
+export const SecretApprovalRequestChanges = ({
+  approvalRequestId,
+  onGoBack,
+  committer,
+  workspaceId,
+  members = {}
+}: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+  const {
+    data: secretApprovalRequestDetails,
+    isSuccess: isSecretApprovalRequestSuccess,
+    isLoading: isSecretApprovalRequestLoading
+  } = useGetSecretApprovalRequestDetails({
+    id: approvalRequestId,
+    decryptKey: decryptFileKey!
+  });
+
+  const {
+    mutateAsync: updateSecretApprovalRequestStatus,
+    isLoading: isUpdatingRequestStatus,
+    variables
+  } = useUpdateSecretApprovalRequestStatus();
+  const isApproving = variables?.status === ApprovalStatus.APPROVED && isUpdatingRequestStatus;
+  const isRejecting = variables?.status === ApprovalStatus.REJECTED && isUpdatingRequestStatus;
+
+  const reviewedMembers = secretApprovalRequestDetails?.reviewers?.reduce<
+    Record<string, ApprovalStatus>
+  >(
+    (prev, curr) => ({
+      ...prev,
+      [curr.member]: curr.status
+    }),
+    {}
+  );
+
+  const handleSecretApprovalStatusUpdate = async (status: ApprovalStatus) => {
+    try {
+      await updateSecretApprovalRequestStatus({
+        id: approvalRequestId,
+        status
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to update the request status"
+      });
+    }
+  };
+
+  if (isSecretApprovalRequestLoading) {
+    <div>
+      <ContentLoader />
+    </div>;
+  }
+
+  if (!isSecretApprovalRequestSuccess) return <div>Failed</div>;
+
+  return (
+    <div className="flex space-x-6">
+      <div className="flex-grow">
+        <div className="flex items-center space-x-4 pt-2 pb-6 sticky top-0 z-20 bg-bunker-800">
+          <IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}>
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </IconButton>
+          <div className="bg-red-600 text-white flex items-center space-x-2 px-4 py-2 rounded-3xl">
+            <FontAwesomeIcon icon={faCodeBranch} size="sm" />
+            <span>{secretApprovalRequestDetails.status}</span>
+          </div>
+          <div className="flex flex-col flex-grow">
+            <div className="text-lg mb-1">
+              {generateCommitText(secretApprovalRequestDetails.commits)}
+            </div>
+            <div className="text-sm text-bunker-300">
+              {committer?.user?.firstName}
+              {committer?.user?.lastName} ({committer?.user?.email}) wants to change{" "}
+              {secretApprovalRequestDetails.commits.length} secret values in{" "}
+              <span className="text-blue-300 bg-blue-600/60 px-1">
+                {secretApprovalRequestDetails.environment}
+              </span>
+            </div>
+          </div>
+          <Button
+            size="xs"
+            leftIcon={<FontAwesomeIcon icon={faCheck} />}
+            onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.APPROVED)}
+            isLoading={isApproving}
+            isDisabled={isApproving}
+          >
+            Approve
+          </Button>
+          <Button
+            size="xs"
+            variant="outline_bg"
+            leftIcon={<FontAwesomeIcon icon={faClose} />}
+            onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.REJECTED)}
+            isLoading={isRejecting}
+            isDisabled={isRejecting}
+          >
+            Reject
+          </Button>
+        </div>
+        <div className="flex flex-col space-y-4">
+          {secretApprovalRequestDetails.commits.map(({ op, secret, newVersion }, index) => (
+            <div key={`commit-change-secret-${index + 1}`}>
+              <TableContainer>
+                <Table>
+                  <THead>
+                    <Tr>
+                      {op === CommitType.UPDATE && <Th className="w-12" />}
+                      <Th className="min-table-row">Secret</Th>
+                      <Th>Value</Th>
+                      <Th className="min-table-row">Comment</Th>
+                      <Th className="min-table-row">Tags</Th>
+                    </Tr>
+                  </THead>
+                  {op === CommitType.UPDATE ? (
+                    <TBody>
+                      <Tr>
+                        <Td className="text-red-600">OLD</Td>
+                        <Td>{secret?.key}</Td>
+                        <Td>
+                          <SecretInput isReadOnly value={secret?.value} />
+                        </Td>
+                        <Td>{secret?.comment}</Td>
+                        <Td>
+                          {secret?.tags?.map(({ name, _id: tagId, tagColor }) => (
+                            <Tag
+                              className="flex items-center space-x-2 w-min"
+                              key={`${secret._id}-${tagId}`}
+                            >
+                              <div
+                                className="w-3 h-3 rounded-full"
+                                style={{ backgroundColor: tagColor || "#bec2c8" }}
+                              />
+                              <div className="text-sm">{name}</div>
+                            </Tag>
+                          ))}
+                        </Td>
+                      </Tr>
+                      <Tr>
+                        <Td className="text-green-600">NEW</Td>
+                        <Td>{newVersion?.secretKey}</Td>
+                        <Td>
+                          <SecretInput isReadOnly value={newVersion?.secretValue} />
+                        </Td>
+                        <Td>{newVersion?.secretComment}</Td>
+                        <Td>
+                          {newVersion?.tags?.map(({ name, _id: tagId, tagColor }) => (
+                            <Tag
+                              className="flex items-center space-x-2 w-min"
+                              key={`${newVersion._id}-${tagId}`}
+                            >
+                              <div
+                                className="w-3 h-3 rounded-full"
+                                style={{ backgroundColor: tagColor || "#bec2c8" }}
+                              />
+                              <div className="text-sm">{name}</div>
+                            </Tag>
+                          ))}
+                        </Td>
+                      </Tr>
+                    </TBody>
+                  ) : (
+                    <TBody>
+                      <Tr>
+                        <Td>{op === CommitType.CREATE ? newVersion?.secretKey : secret?.key}</Td>
+                        <Td>
+                          <SecretInput
+                            isReadOnly
+                            value={
+                              op === CommitType.CREATE ? newVersion?.secretValue : secret?.value
+                            }
+                          />
+                        </Td>
+                        <Td>
+                          {op === CommitType.CREATE ? newVersion?.secretComment : secret?.comment}
+                        </Td>
+                        <Td>
+                          {(op === CommitType.CREATE ? newVersion?.tags : secret?.tags)?.map(
+                            ({ name, _id: tagId, tagColor }) => (
+                              <Tag
+                                className="flex items-center space-x-2 w-min"
+                                key={`${
+                                  op === CommitType.CREATE ? newVersion?._id : secret?._id
+                                }-${tagId}`}
+                              >
+                                <div
+                                  className="w-3 h-3 rounded-full"
+                                  style={{ backgroundColor: tagColor || "#bec2c8" }}
+                                />
+                                <div className="text-sm">{name}</div>
+                              </Tag>
+                            )
+                          )}
+                        </Td>
+                      </Tr>
+                    </TBody>
+                  )}
+                </Table>
+              </TableContainer>
+            </div>
+          ))}
+        </div>
+        <div className="flex items-center px-4 py-6 rounded-lg space-x-6 bg-mineshaft-800 mt-8">
+          <Button leftIcon={<FontAwesomeIcon icon={faCheck} />}>Merge</Button>
+          <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faClose} />}>
+            Close request
+          </Button>
+        </div>
+      </div>
+      <div className="w-1/5 pt-4 sticky top-0" style={{ minWidth: "240px" }}>
+        <div className="text-sm text-bunker-300">Reviewers</div>
+        <div className="mt-2 flex flex-col space-y-2 text-sm">
+          {secretApprovalRequestDetails?.policy?.approvers.map((requiredApproverId) => {
+            const userDetails = members?.[requiredApproverId]?.user;
+            const status = reviewedMembers?.[requiredApproverId];
+            return (
+              <div
+                className="flex items-center space-x-2 flex-nowrap bg-mineshaft-800 px-2 py-1 rounded"
+                key={`required-approver-${requiredApproverId}`}
+              >
+                <div className="flex-grow text-sm">
+                  <Tooltip content={`${userDetails.firstName} ${userDetails.lastName}`}>
+                    <span>{userDetails?.email} </span>
+                  </Tooltip>
+                  <span className="text-red">*</span>
+                </div>
+                <div>
+                  <Tooltip content={status || ApprovalStatus.PENDING}>
+                    {getReviewedStatusSymbol(status)}
+                  </Tooltip>
+                </div>
+              </div>
+            );
+          })}
+          {secretApprovalRequestDetails?.reviewers
+            .filter(
+              ({ member }) => !secretApprovalRequestDetails?.policy?.approvers?.includes(member)
+            )
+            .map((reviewer) => {
+              const userDetails = members?.[reviewer.member]?.user;
+              const status = reviewedMembers?.[reviewer.status];
+              return (
+                <div
+                  className="flex items-center space-x-2 flex-nowrap bg-mineshaft-800 px-2 py-1 rounded"
+                  key={`required-approver-${reviewer.member}`}
+                >
+                  <div className="flex-grow text-sm">
+                    <Tooltip content={`${userDetails.firstName} ${userDetails.lastName}`}>
+                      <span>{userDetails?.email} </span>
+                    </Tooltip>
+                    <span className="text-red">*</span>
+                  </div>
+                  <div>
+                    <Tooltip content={status || ApprovalStatus.PENDING}>
+                      {getReviewedStatusSymbol(status)}
+                    </Tooltip>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { SecretApprovalRequest } from "./SecretApprovalRequest";
				`@@ -0,0 +1 @@`
				`export { SecretApprovalRequest } from "./SecretApprovalRequest";`