feat(secret-approval): conflict ui, request count and secret path in request detail

2026-09-22 13:39:35 +00:00 · 2023-10-05 15:20:19 +05:30
parent 80a3ea42ac
commit cb893f71ee
14 changed files with 227 additions and 42 deletions
--- a/backend/src/controllers/v1/secretApprovalRequestsController.ts
+++ b/backend/src/controllers/v1/secretApprovalRequestsController.ts
@@ -12,6 +12,54 @@ import { Types } from "mongoose";
 import { EEAuditLogService } from "../../ee/services";
 import { EventType } from "../../ee/models";

+export const getSecretApprovalRequestCount = async (req: Request, res: Response) => {
+  const {
+    query: { workspaceId }
+  } = await validateRequest(reqValidator.getSecretApprovalRequestCount, req);
+
+  const { membership } = await getUserProjectPermissions(req.user._id, workspaceId);
+  const approvalRequestCount = await SecretApprovalRequest.aggregate([
+    {
+      $match: {
+        workspace: new Types.ObjectId(workspaceId)
+      }
+    },
+    {
+      $lookup: {
+        from: SecretApprovalPolicy.collection.name,
+        localField: "policy",
+        foreignField: "_id",
+        as: "policy"
+      }
+    },
+    { $unwind: "$policy" },
+    ...(membership.role !== "admin"
+      ? [
+          {
+            $match: {
+              $or: [
+                { committer: new Types.ObjectId(membership.id) },
+                { "policy.approvers": new Types.ObjectId(membership.id) }
+              ]
+            }
+          }
+        ]
+      : []),
+    {
+      $group: {
+        _id: "$status",
+        count: { $sum: 1 }
+      }
+    }
+  ]);
+  const openRequests = approvalRequestCount.find(({ _id }) => _id === "open");
+  const closedRequests = approvalRequestCount.find(({ _id }) => _id === "close");
+
+  return res.send({
+    approvals: { open: openRequests?.count || 0, closed: closedRequests?.count || 0 }
+  });
+};
+
 export const getSecretApprovalRequests = async (req: Request, res: Response) => {
  const {
    query: { status, committer, workspaceId, environment, limit, offset }
@@ -95,7 +143,8 @@ export const getSecretApprovalRequestDetails = async (req: Request, res: Respons
      }
    })
    .populate("commits.secret", "version")
-    .populate("commits.newVersion.tags");
+    .populate("commits.newVersion.tags")
+    .lean();
  if (!secretApprovalRequest)
    throw BadRequestError({ message: "Secret approval request not found" });

@@ -114,8 +163,19 @@ export const getSecretApprovalRequestDetails = async (req: Request, res: Respons
    throw UnauthorizedRequestError({ message: "User has no access" });
  }

+  let secretPath = "/";
+  const approvalRootFolders = await Folder.findOne({
+    workspace: secretApprovalRequest.workspace,
+    environment: secretApprovalRequest.environment
+  }).lean();
+  if (approvalRootFolders) {
+    secretPath =
+      getFolderWithPathFromId(approvalRootFolders?.nodes, secretApprovalRequest.folderId)
+        ?.folderPath || "/";
+  }
+
  return res.send({
-    approval: secretApprovalRequest
+    approval: { ...secretApprovalRequest, secretPath }
  });
 };

--- a/backend/src/routes/v1/secretApprovalRequest.ts
+++ b/backend/src/routes/v1/secretApprovalRequest.ts
@@ -12,6 +12,14 @@ router.get(
  secretApprovalRequestController.getSecretApprovalRequests
 );

+router.get(
+  "/count",
+  requireAuth({
+    acceptedAuthModes: [AuthMode.JWT]
+  }),
+  secretApprovalRequestController.getSecretApprovalRequestCount
+);
+
 router.get(
  "/:id",
  requireAuth({
--- a/backend/src/services/SecretApprovalService.ts
+++ b/backend/src/services/SecretApprovalService.ts
@@ -355,7 +355,7 @@ export const performSecretApprovalRequestMerge = async (
  const environment = secretApprovalRequest.environment;
  const folderId = secretApprovalRequest.folderId;
  const postHogClient = await TelemetryService.getPostHogClient();
-  const conflicts: Array<{ id: string; op: CommitType }> = [];
+  const conflicts: Array<{ secretId: string; op: CommitType }> = [];

  const secretCreationCommits = secretApprovalRequest.commits.filter(
    ({ op }) => op === CommitType.CREATE
@@ -382,7 +382,7 @@ export const performSecretApprovalRequestMerge = async (
    secretCreationCommits
      .filter(({ newVersion }) => conflictGroupByBlindIndex[newVersion.secretBlindIndex || ""])
      .forEach((el) => {
-        conflicts.push({ op: CommitType.CREATE, id: el.newVersion._id.toString() });
+        conflicts.push({ op: CommitType.CREATE, secretId: el.newVersion._id.toString() });
      });

    // create secret
@@ -482,15 +482,20 @@ export const performSecretApprovalRequestMerge = async (
    );
    secretUpdationCommits
      .filter(
-        ({ newVersion }) =>
-          newVersion.secretBlindIndex && conflictGroupByBlindIndex[newVersion.secretBlindIndex]
+        ({ newVersion, secret }) =>
+          (newVersion.secretBlindIndex && conflictGroupByBlindIndex[newVersion.secretBlindIndex]) ||
+          !secret
      )
      .forEach((el) => {
-        conflicts.push({ op: CommitType.UPDATE, id: el.newVersion._id.toString() });
+        conflicts.push({ op: CommitType.UPDATE, secretId: el.newVersion._id.toString() });
      });

-    const nonConflictSecrets = secretUpdationCommits.filter(({ newVersion }) =>
-      newVersion?.secretBlindIndex ? !conflictGroupByBlindIndex[newVersion.secretBlindIndex] : true
+    const nonConflictSecrets = secretUpdationCommits.filter(
+      ({ newVersion, secret }) =>
+        Boolean(secret) &&
+        (newVersion?.secretBlindIndex
+          ? !conflictGroupByBlindIndex[newVersion.secretBlindIndex]
+          : true)
    );
    await Secret.bulkWrite(
      // id and version are stripped off
--- a/backend/src/validation/secretApprovalRequest.ts
+++ b/backend/src/validation/secretApprovalRequest.ts
@@ -12,6 +12,12 @@ export const getSecretApprovalRequests = z.object({
  })
 });

+export const getSecretApprovalRequestCount = z.object({
+  query: z.object({
+    workspaceId: z.string().trim()
+  })
+});
+
 export const getSecretApprovalRequestDetails = z.object({
  params: z.object({
    id: z.string().trim()
--- a/frontend/src/hooks/api/secretApprovalRequest/index.tsx
+++ b/frontend/src/hooks/api/secretApprovalRequest/index.tsx
@@ -3,4 +3,8 @@ export {
  useUpdateSecretApprovalRequestStatus,
  useUpdateSecretApprovalReviewStatus
 } from "./mutation";
-export { useGetSecretApprovalRequestDetails, useGetSecretApprovalRequests } from "./queries";
+export {
+  useGetSecretApprovalRequestCount,
+  useGetSecretApprovalRequestDetails,
+  useGetSecretApprovalRequests
+} from "./queries";
--- a/frontend/src/hooks/api/secretApprovalRequest/mutation.tsx
+++ b/frontend/src/hooks/api/secretApprovalRequest/mutation.tsx
@@ -35,8 +35,9 @@ export const useUpdateSecretApprovalRequestStatus = () => {
      });
      return data;
    },
-    onSuccess: (_, { id }) => {
+    onSuccess: (_, { id, workspaceId }) => {
      queryClient.invalidateQueries(secretApprovalRequestKeys.detail({ id }));
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    }
  });
 };
@@ -52,6 +53,7 @@ export const usePerformSecretApprovalRequestMerge = () => {
    onSuccess: (_, { id, workspaceId }) => {
      queryClient.invalidateQueries(secretApprovalRequestKeys.detail({ id }));
      queryClient.invalidateQueries(secretApprovalRequestKeys.list({ workspaceId }));
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    }
  });
 };
--- a/frontend/src/hooks/api/secretApprovalRequest/queries.tsx
+++ b/frontend/src/hooks/api/secretApprovalRequest/queries.tsx
@@ -15,9 +15,11 @@ import { UserWsKeyPair } from "../keys/types";
 import { decryptSecrets } from "../secrets/queries";
 import { DecryptedSecret } from "../secrets/types";
 import {
+  TGetSecretApprovalRequestCount,
  TGetSecretApprovalRequestDetails,
  TGetSecretApprovalRequestList,
  TSecretApprovalRequest,
+  TSecretApprovalRequestCount,
  TSecretApprovalSecChange,
  TSecretApprovalSecChangeData
 } from "./types";
@@ -36,7 +38,11 @@ export const secretApprovalRequestKeys = {
      "secret-approval-requests"
    ] as const,
  detail: ({ id }: Omit<TGetSecretApprovalRequestDetails, "decryptKey">) =>
-    [{ id }, "secret-approval-request-detail"] as const
+    [{ id }, "secret-approval-request-detail"] as const,
+  count: ({ workspaceId }: TGetSecretApprovalRequestCount) => [
+    { workspaceId },
+    "secret-approval-request-count"
+  ]
 };

 export const decryptSecretApprovalSecret = (
@@ -187,3 +193,32 @@ export const useGetSecretApprovalRequestDetails = ({
    }),
    enabled: Boolean(id && decryptKey) && (options?.enabled ?? true)
  });
+
+const fetchSecretApprovalRequestCount = async ({ workspaceId }: TGetSecretApprovalRequestCount) => {
+  const { data } = await apiRequest.get<{ approvals: TSecretApprovalRequestCount }>(
+    "/api/v1/secret-approval-requests/count",
+    { params: { workspaceId } }
+  );
+
+  return data.approvals;
+};
+
+export const useGetSecretApprovalRequestCount = ({
+  workspaceId,
+  options = {}
+}: TGetSecretApprovalRequestCount & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretApprovalRequestCount,
+      unknown,
+      TSecretApprovalRequestCount,
+      ReturnType<typeof secretApprovalRequestKeys.count>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useQuery({
+    queryKey: secretApprovalRequestKeys.count({ workspaceId }),
+    queryFn: () => fetchSecretApprovalRequestCount({ workspaceId }),
+    enabled: Boolean(workspaceId) && (options?.enabled ?? true)
+  });
--- a/frontend/src/hooks/api/secretApprovalRequest/types.ts
+++ b/frontend/src/hooks/api/secretApprovalRequest/types.ts
@@ -17,7 +17,6 @@ export enum CommitType {

 export type TSecretApprovalSecChangeData = {
  _id: string;
-  version: number;
  secretKeyCiphertext: string;
  secretKeyIV: string;
  secretKeyTag: string;
@@ -31,6 +30,7 @@ export type TSecretApprovalSecChangeData = {
  algorithm: "aes-256-gcm";
  keyEncoding: "utf8" | "base64";
  tags?: WsTag[];
+  version: number;
 };

 export type TSecretApprovalSecChange = {
@@ -57,10 +57,12 @@ export type TSecretApprovalRequest<
  workspace: string;
  environment: string;
  folderId: string;
+  secretPath: string;
  hasMerged: boolean;
  status: "open" | "close";
  policy: TSecretApprovalPolicy;
  statusChangeBy: string;
+  conflicts: Array<{ secretId: string; op: CommitType.UPDATE }>;
  commits: {
    // if there is no secret means it was creation
    secret?: { version: number };
@@ -71,6 +73,11 @@ export type TSecretApprovalRequest<
  }[];
 };

+export type TSecretApprovalRequestCount = {
+  open: number;
+  closed: number;
+};
+
 export type TGetSecretApprovalRequestList = {
  workspaceId: string;
  environment?: string;
@@ -80,6 +87,10 @@ export type TGetSecretApprovalRequestList = {
  offset?: number;
 };

+export type TGetSecretApprovalRequestCount = {
+  workspaceId: string;
+};
+
 export type TGetSecretApprovalRequestDetails = {
  id: string;
  decryptKey: UserWsKeyPair;
@@ -93,6 +104,7 @@ export type TUpdateSecretApprovalReviewStatusDTO = {
 export type TUpdateSecretApprovalRequestStatusDTO = {
  status: "open" | "close";
  id: string;
+  workspaceId: string;
 };

 export type TPerformSecretApprovalRequestMerge = {
--- a/frontend/src/hooks/api/secrets/mutations.tsx
+++ b/frontend/src/hooks/api/secrets/mutations.tsx
@@ -8,6 +8,7 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";

+import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
 import { secretKeys } from "./queries";
 import {
@@ -114,6 +115,7 @@ export const useCreateSecretV3 = ({
      queryClient.invalidateQueries(
        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
      );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    },
    ...options
  });
@@ -173,6 +175,7 @@ export const useUpdateSecretV3 = ({
      queryClient.invalidateQueries(
        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
      );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    },
    ...options
  });
@@ -209,6 +212,7 @@ export const useDeleteSecretV3 = ({
      queryClient.invalidateQueries(
        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
      );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    },
    ...options
  });
@@ -261,6 +265,7 @@ export const useCreateSecretBatch = ({
      queryClient.invalidateQueries(
        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
      );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    },
    ...options
  });
@@ -313,6 +318,7 @@ export const useUpdateSecretBatch = ({
      queryClient.invalidateQueries(
        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
      );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    },
    ...options
  });
@@ -349,6 +355,7 @@ export const useDeleteSecretBatch = ({
      queryClient.invalidateQueries(
        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
      );
+      queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
    },
    ...options
  });
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -66,6 +66,7 @@ import {
  useAddUserToWs,
  useCreateWorkspace,
  useGetOrgTrialUrl,
+  useGetSecretApprovalRequestCount,
  useLogoutUser,
  useUploadWsKey
 } from "@app/hooks/api";
@@ -114,7 +115,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
  const { orgs, currentOrg } = useOrganization();
  const { user } = useUser();
  const { subscription } = useSubscription();
+  const workspaceId = currentWorkspace?._id || "";
  // const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(true);
+  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });

  const isAddingProjectsAllowed = subscription?.workspaceLimit
    ? subscription.workspacesUsed < subscription.workspaceLimit
@@ -477,21 +480,24 @@ export const AppLayout = ({ children }: LayoutProps) => {
                          </MenuItem>
                        </a>
                      </Link>
-                      {process.env.NEXT_PUBLIC_SECRET_APPROVAL === "true" && (
-                        <Link href={`/project/${currentWorkspace?._id}/approval`} passHref>
-                          <a>
-                            <MenuItem
-                              isSelected={
-                                router.asPath === `/project/${currentWorkspace?._id}/approval`
-                              }
-                              icon="system-outline-189-domain-verification"
-                            >
-                              Secret Approval
-                            </MenuItem>
-                          </a>
-                        </Link>
-                      )}
-                      {/* <Link href={`/project/${currentWorkspace?._id}/allowlist`} passHref>
+                      <Link href={`/project/${currentWorkspace?._id}/approval`} passHref>
+                        <a className="relative">
+                          <MenuItem
+                            isSelected={
+                              router.asPath === `/project/${currentWorkspace?._id}/approval`
+                            }
+                            icon="system-outline-189-domain-verification"
+                          >
+                            Secret approval
+                            {Boolean(secretApprovalReqCount?.open) && (
+                              <span className="text-xs p-0.5 rounded ml-2 bg-primary text-black">
+                                {secretApprovalReqCount?.open}
+                              </span>
+                            )}
+                          </MenuItem>
+                        </a>
+                      </Link>
+                      <Link href={`/project/${currentWorkspace?._id}/allowlist`} passHref>
                        <a>
                          <MenuItem
                            isSelected={
--- a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx
@@ -20,7 +20,11 @@ import {
  Skeleton
 } from "@app/components/v2";
 import { useUser, useWorkspace } from "@app/context";
-import { useGetSecretApprovalRequests, useGetWorkspaceUsers } from "@app/hooks/api";
+import {
+  useGetSecretApprovalRequestCount,
+  useGetSecretApprovalRequests,
+  useGetWorkspaceUsers
+} from "@app/hooks/api";
 import { ApprovalStatus, TSecretApprovalRequest, TWorkspaceUser } from "@app/hooks/api/types";

 import {
@@ -51,6 +55,8 @@ export const SecretApprovalRequest = () => {
    environment: envFilter,
    committer: committerFilter
  });
+  const { data: secretApprovalRequestCount, isSuccess: isSecretApprovalReqCountSuccess } =
+    useGetSecretApprovalRequestCount({ workspaceId });
  const { user: presentUser } = useUser();
  const { data: members } = useGetWorkspaceUsers(workspaceId);
  const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>(
@@ -103,13 +109,17 @@ export const SecretApprovalRequest = () => {
              onKeyDown={(evt) => {
                if (evt.key === "Enter") setStatusFilter("open");
              }}
-              className={statusFilter === "close" ? "text-gray-500 hover:text-gray-400 duration-100" : ""}
+              className={
+                statusFilter === "close" ? "text-gray-500 hover:text-gray-400 duration-100" : ""
+              }
            >
              <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
-              Open
+              {isSecretApprovalReqCountSuccess && secretApprovalRequestCount?.open} Open
            </div>
            <div
-              className={statusFilter === "open" ? "text-gray-500 hover:text-gray-400 duration-100" : ""}
+              className={
+                statusFilter === "open" ? "text-gray-500 hover:text-gray-400 duration-100" : ""
+              }
              role="button"
              tabIndex={0}
              onClick={() => setStatusFilter("close")}
@@ -118,7 +128,7 @@ export const SecretApprovalRequest = () => {
              }}
            >
              <FontAwesomeIcon icon={faCheck} className="mr-2" />
-              Closed
+              {isSecretApprovalReqCountSuccess && secretApprovalRequestCount.closed} Closed
            </div>
            <div className="flex-grow flex justify-end space-x-8">
              <DropdownMenu>
--- a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
@@ -65,7 +65,8 @@ export const SecretApprovalRequestAction = ({
    try {
      await updateSecretStatusChange({
        id: approvalRequestId,
-        status: reqState
+        status: reqState,
+        workspaceId
      });
      createNotification({
        type: "success",
--- a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
@@ -1,4 +1,4 @@
-import { faFilePen } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationTriangle, faInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import {
@@ -10,6 +10,7 @@ import {
  Td,
  Th,
  THead,
+  Tooltip,
  Tr
 } from "@app/components/v2";
 import { CommitType, DecryptedSecret, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";
@@ -20,6 +21,7 @@ export type Props = {
  newVersion?: Omit<TSecretApprovalSecChange, "tags"> & { tags?: WsTag[] };
  presentSecretVersionNumber: number;
  hasMerged?: Boolean;
+  conflicts: Array<{ secretId: string; op: CommitType }>;
 };

 const generateItemTitle = (op: CommitType) => {
@@ -35,25 +37,44 @@ const generateItemTitle = (op: CommitType) => {
  );
 };

+const generateConflictText = (op: CommitType) => {
+  if (op === CommitType.CREATE) return <div>Secret already exist</div>;
+  if (op === CommitType.UPDATE) return <div>Secret not found</div>;
+  return null;
+};
+
 export const SecretApprovalRequestChangeItem = ({
  op,
  secretVersion,
  newVersion,
  presentSecretVersionNumber,
-  hasMerged
+  hasMerged,
+  conflicts
 }: Props) => {
  // meaning request has changed
-  const isStale = (secretVersion?.version || 1) < presentSecretVersionNumber && !hasMerged;
+  const isStale = (secretVersion?.version || 1) < presentSecretVersionNumber;
+  const itemConflict =
+    hasMerged && conflicts.find((el) => el.op === op && el.secretId === newVersion?._id);
+  const hasConflict = Boolean(itemConflict);
+
  return (
    <div className="bg-bunker-500 rounded-lg pt-2 pb-4 px-4">
      <div className="py-3 px-1 flex items-center">
        <div className="flex-grow">{generateItemTitle(op)}</div>
-        {isStale && (
+        {!hasMerged && isStale && (
          <div className="flex items-center">
-            <FontAwesomeIcon icon={faFilePen} className="text-primary-600 text-sm" />
+            <FontAwesomeIcon icon={faInfo} className="text-primary-600 text-sm" />
            <span className="text-xs ml-2">Secret has been changed(stale)</span>
          </div>
        )}
+        {hasMerged && hasConflict && (
+          <div className="flex items-center text-sm text-bunker-300 space-x-2">
+            <Tooltip content="Merge Conflict">
+              <FontAwesomeIcon icon={faExclamationTriangle} className="text-red-700" />
+            </Tooltip>
+            <div>{generateConflictText(op)}</div>
+          </div>
+        )}
      </div>
      <TableContainer>
        <Table>
--- a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
@@ -5,6 +5,7 @@ import {
  faCheckCircle,
  faCircle,
  faCodeBranch,
+  faFolder,
  faXmarkCircle
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -175,13 +176,19 @@ export const SecretApprovalRequestChanges = ({
            <div className="text-lg mb-1">
              {generateCommitText(secretApprovalRequestDetails.commits)}
            </div>
-            <div className="text-sm text-bunker-300">
+            <div className="text-sm text-bunker-300 flex items-center">
              {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.commits.length} secret values in
+              <span className="text-primary-300 bg-primary-600/60 px-1 mx-1 rounded">
                {secretApprovalRequestDetails.environment}
              </span>
+              <div className="flex items-center border border-mineshaft-500 pl-1 pr-2 rounded w-min">
+                <div className="border-r border-mineshaft-500 pr-1">
+                  <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                </div>
+                <div className="text-sm pl-2 pb-0.5">{secretApprovalRequestDetails.secretPath}</div>
+              </div>
            </div>
          </div>
          {!hasMerged && secretApprovalRequestDetails.status === "open" && (
@@ -213,6 +220,7 @@ export const SecretApprovalRequestChanges = ({
            ({ op, secretVersion, secret, newVersion }, index) => (
              <SecretApprovalRequestChangeItem
                op={op}
+                conflicts={secretApprovalRequestDetails.conflicts}
                hasMerged={hasMerged}
                secretVersion={secretVersion}
                presentSecretVersionNumber={secret?.version || 0}