diff --git a/backend/src/server/routes/v2/project-router.ts b/backend/src/server/routes/v2/project-router.ts index 353c7525b..f7540591e 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) => { 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 ( + + + {kms.externalKms.provider === ExternalKmsProvider.Aws && } + {kms.externalKms.provider === ExternalKmsProvider.Gcp && ( + + )} +
{kms.externalKms.provider.toUpperCase()}
+ + +
+ {kms.name} + { + if (isKmsAliasCopied) { + return; + } + navigator.clipboard.writeText(kms.name); + createNotification({ + text: "KMS alias copied to clipboard", + type: "success" + }); + toggleKmsAliasCopied(2000); + }} + > + + +
+ + +
+ {kms.id} + { + if (isKmsIdCopied) { + return; + } + navigator.clipboard.writeText(kms.id); + createNotification({ + text: "KMS ID copied to clipboard", + type: "success" + }); + toggleKmsIdCopied(2000); + }} + > + + +
+ + + + +
+ +
+ + + + {(isAllowed) => ( + { + e.stopPropagation(); + if (subscription && !subscription?.externalKms) { + handlePopUpOpen("upgradePlan"); + return; + } + + handlePopUpOpen("editExternalKms", { + kmsId: kms.id + }); + }} + > + Edit + + )} + + + {(isAllowed) => ( + { + e.stopPropagation(); + handlePopUpOpen("removeExternalKms", { + name: kms.name, + kmsId: kms.id, + provider: kms.externalKms.provider + }); + }} + > + Delete + + )} + + + + + + ); +}; 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( Provider Alias + ID @@ -115,78 +110,12 @@ export const OrgEncryptionTab = withPermission( )} {!isExternalKmsListLoading && externalKmsList?.map((kms) => ( - - - {kms.externalKms.provider === ExternalKmsProvider.Aws && ( - - )} - {kms.externalKms.provider === ExternalKmsProvider.Gcp && ( - - )} -
{kms.externalKms.provider.toUpperCase()}
- - {kms.name} - - - -
- -
- - - - {(isAllowed) => ( - { - e.stopPropagation(); - if (subscription && !subscription?.externalKms) { - handlePopUpOpen("upgradePlan"); - return; - } - - handlePopUpOpen("editExternalKms", { - kmsId: kms.id - }); - }} - > - Edit - - )} - - - {(isAllowed) => ( - { - e.stopPropagation(); - handlePopUpOpen("removeExternalKms", { - name: kms.name, - kmsId: kms.id, - provider: kms.externalKms.provider - }); - }} - > - Delete - - )} - - - - - + ))}