diff --git a/frontend/src/views/Project/KmsPage/components/CmekTable.tsx b/frontend/src/views/Project/KmsPage/components/CmekTable.tsx index 78f6a32a6..8a56a75c1 100644 --- a/frontend/src/views/Project/KmsPage/components/CmekTable.tsx +++ b/frontend/src/views/Project/KmsPage/components/CmekTable.tsx @@ -4,7 +4,9 @@ import { faArrowUp, faArrowUpRightFromSquare, faCancel, + faCheck, faCheckCircle, + faCopy, faEdit, faEllipsis, faInfoCircle, @@ -50,7 +52,7 @@ import { useProjectPermission, useWorkspace } from "@app/context"; -import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; +import { usePagination, usePopUp, useResetPageHelper, useTimedReset } from "@app/hooks"; import { useGetCmeksByProjectId, useUpdateCmek } from "@app/hooks/api/cmeks"; import { CmekOrderBy, TCmek } from "@app/hooks/api/cmeks/types"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -113,6 +115,11 @@ export const CmekTable = () => { setPage }); + const [, isCopyingCiphertext, setCopyCipherText] = useTimedReset({ + initialState: "", + delay: 1000 + }); + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ "upsertKey", "deleteKey", @@ -251,7 +258,13 @@ export const CmekTable = () => { const { variant, label } = getStatusBadgeProps(isDisabled); return ( - + { + setCopyCipherText(""); + }} + >
{name} @@ -265,7 +278,22 @@ export const CmekTable = () => { )}
- {id} + +
+ {id} + { + navigator.clipboard.writeText(id); + setCopyCipherText("Copied"); + }} + > + + +
+ {encryptionAlgorithm} {label}