From a0014230f901d88aeba11834a2febf0817a4b49d Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Sat, 19 Apr 2025 00:19:57 +0400
Subject: [PATCH 1/2] improvement: include kms secret manager key ID on project
 response

---
 backend/src/server/routes/v2/project-router.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/src/server/routes/v2/project-router.ts b/backend/src/server/routes/v2/project-router.ts
index c8f68a926..521a7192b 100644
--- a/backend/src/server/routes/v2/project-router.ts
+++ b/backend/src/server/routes/v2/project-router.ts
@@ -29,7 +29,8 @@ import { SanitizedProjectSchema } from "../sanitizedSchemas";
 
 const projectWithEnv = SanitizedProjectSchema.extend({
   _id: z.string(),
-  environments: z.object({ name: z.string(), slug: z.string(), id: z.string() }).array()
+  environments: z.object({ name: z.string(), slug: z.string(), id: z.string() }).array(),
+  kmsSecretManagerKeyId: z.string().nullable().optional()
 });
 
 export const registerProjectRouter = async (server: FastifyZodProvider) => {

From 39ff7fddee96e036a7211877df397d4981da0a7c Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Sat, 19 Apr 2025 00:20:18 +0400
Subject: [PATCH 2/2] improvement: add ID to external KMS list and add copy
 button

---
 .../OrgEncryptionTab/ExternalKmsItem.tsx      | 152 ++++++++++++++++++
 .../OrgEncryptionTab/OrgEncryptionTab.tsx     |  89 ++--------
 2 files changed, 161 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx

diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx
new file mode 100644
index 000000000..d080b57c6
--- /dev/null
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx
@@ -0,0 +1,152 @@
+import { faAws, faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faCheck, faCopy, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions/OrgPermissionCan";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@app/components/v2/Dropdown";
+import { IconButton } from "@app/components/v2/IconButton";
+import { Td, Tr } from "@app/components/v2/Table";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context/OrgPermissionContext";
+import { useToggle } from "@app/hooks";
+import { ExternalKmsProvider, KmsListEntry } from "@app/hooks/api/kms/types";
+import { SubscriptionPlan } from "@app/hooks/api/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  kms: KmsListEntry;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["editExternalKms", "removeExternalKms", "upgradePlan"]>,
+    data?: {
+      kmsId?: string;
+      name?: string;
+      provider?: string;
+    }
+  ) => void;
+  subscription: SubscriptionPlan;
+};
+
+export const ExternalKmsItem = ({ kms, handlePopUpOpen, subscription }: Props) => {
+  const [isKmsIdCopied, { timedToggle: toggleKmsIdCopied }] = useToggle(false);
+  const [isKmsAliasCopied, { timedToggle: toggleKmsAliasCopied }] = useToggle(false);
+
+  return (
+    <Tr key={kms.id}>
+      <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+        {kms.externalKms.provider === ExternalKmsProvider.Aws && <FontAwesomeIcon icon={faAws} />}
+        {kms.externalKms.provider === ExternalKmsProvider.Gcp && (
+          <FontAwesomeIcon icon={faGoogle} />
+        )}
+        <div className="ml-2">{kms.externalKms.provider.toUpperCase()}</div>
+      </Td>
+      <Td>
+        <div className="group flex items-center gap-2">
+          {kms.name}
+          <IconButton
+            size="xs"
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="relative rounded-md opacity-0 group-hover:opacity-100"
+            onClick={() => {
+              if (isKmsAliasCopied) {
+                return;
+              }
+              navigator.clipboard.writeText(kms.name);
+              createNotification({
+                text: "KMS alias copied to clipboard",
+                type: "success"
+              });
+              toggleKmsAliasCopied(2000);
+            }}
+          >
+            <FontAwesomeIcon icon={isKmsAliasCopied ? faCheck : faCopy} />
+          </IconButton>
+        </div>
+      </Td>
+      <Td>
+        <div className="group flex items-center gap-2">
+          {kms.id}
+          <IconButton
+            size="xs"
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="relative rounded-md opacity-0 group-hover:opacity-100"
+            onClick={() => {
+              if (isKmsIdCopied) {
+                return;
+              }
+              navigator.clipboard.writeText(kms.id);
+              createNotification({
+                text: "KMS ID copied to clipboard",
+                type: "success"
+              });
+              toggleKmsIdCopied(2000);
+            }}
+          >
+            <FontAwesomeIcon icon={isKmsIdCopied ? faCheck : faCopy} />
+          </IconButton>
+        </div>
+      </Td>
+      <Td>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="rounded-lg">
+            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-1">
+            <OrgPermissionCan I={OrgPermissionActions.Edit} an={OrgPermissionSubjects.Kms}>
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  disabled={!isAllowed}
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (subscription && !subscription?.externalKms) {
+                      handlePopUpOpen("upgradePlan");
+                      return;
+                    }
+
+                    handlePopUpOpen("editExternalKms", {
+                      kmsId: kms.id
+                    });
+                  }}
+                >
+                  Edit
+                </DropdownMenuItem>
+              )}
+            </OrgPermissionCan>
+            <OrgPermissionCan I={OrgPermissionActions.Delete} an={OrgPermissionSubjects.Kms}>
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  disabled={!isAllowed}
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("removeExternalKms", {
+                      name: kms.name,
+                      kmsId: kms.id,
+                      provider: kms.externalKms.provider
+                    });
+                  }}
+                >
+                  Delete
+                </DropdownMenuItem>
+              )}
+            </OrgPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx
index dc25b40af..8f1bd8e79 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx
@@ -1,7 +1,5 @@
-import { faAws, faGoogle } from "@fortawesome/free-brands-svg-icons";
-import { faEllipsis, faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
@@ -9,10 +7,6 @@ import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
   EmptyState,
   Table,
   TableContainer,
@@ -31,9 +25,9 @@ import {
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useGetExternalKmsList, useRemoveExternalKms } from "@app/hooks/api";
-import { ExternalKmsProvider } from "@app/hooks/api/kms/types";
 
 import { AddExternalKmsForm } from "./AddExternalKmsForm";
+import { ExternalKmsItem } from "./ExternalKmsItem";
 import { UpdateExternalKmsForm } from "./UpdateExternalKmsForm";
 
 export const OrgEncryptionTab = withPermission(
@@ -102,6 +96,7 @@ export const OrgEncryptionTab = withPermission(
               <Tr>
                 <Td>Provider</Td>
                 <Td>Alias</Td>
+                <Td>ID</Td>
               </Tr>
             </THead>
             <TBody>
@@ -115,78 +110,12 @@ export const OrgEncryptionTab = withPermission(
               )}
               {!isExternalKmsListLoading &&
                 externalKmsList?.map((kms) => (
-                  <Tr key={kms.id}>
-                    <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
-                      {kms.externalKms.provider === ExternalKmsProvider.Aws && (
-                        <FontAwesomeIcon icon={faAws} />
-                      )}
-                      {kms.externalKms.provider === ExternalKmsProvider.Gcp && (
-                        <FontAwesomeIcon icon={faGoogle} />
-                      )}
-                      <div className="ml-2">{kms.externalKms.provider.toUpperCase()}</div>
-                    </Td>
-                    <Td>{kms.name}</Td>
-                    <Td>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                          </div>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            an={OrgPermissionSubjects.Kms}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                disabled={!isAllowed}
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  if (subscription && !subscription?.externalKms) {
-                                    handlePopUpOpen("upgradePlan");
-                                    return;
-                                  }
-
-                                  handlePopUpOpen("editExternalKms", {
-                                    kmsId: kms.id
-                                  });
-                                }}
-                              >
-                                Edit
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            an={OrgPermissionSubjects.Kms}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                disabled={!isAllowed}
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("removeExternalKms", {
-                                    name: kms.name,
-                                    kmsId: kms.id,
-                                    provider: kms.externalKms.provider
-                                  });
-                                }}
-                              >
-                                Delete
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </Td>
-                  </Tr>
+                  <ExternalKmsItem
+                    key={kms.id}
+                    kms={kms}
+                    handlePopUpOpen={handlePopUpOpen}
+                    subscription={subscription}
+                  />
                 ))}
             </TBody>
           </Table>