From 759d11ff215ff94ef255f87ae190f802626918b0 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 31 Oct 2024 19:05:53 +0800
Subject: [PATCH] feat: added key id column

---
 .../src/views/Project/KmsPage/components/CmekTable.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Project/KmsPage/components/CmekTable.tsx b/frontend/src/views/Project/KmsPage/components/CmekTable.tsx
index 7a9d74082..78f6a32a6 100644
--- a/frontend/src/views/Project/KmsPage/components/CmekTable.tsx
+++ b/frontend/src/views/Project/KmsPage/components/CmekTable.tsx
@@ -220,7 +220,7 @@ export const CmekTable = () => {
           <Table>
             <THead>
               <Tr className="h-14">
-                <Th className="w-1/3">
+                <Th>
                   <div className="flex items-center">
                     Name
                     <IconButton
@@ -235,6 +235,7 @@ export const CmekTable = () => {
                     </IconButton>
                   </div>
                 </Th>
+                <Th>Key ID</Th>
                 <Th>Algorithm</Th>
                 <Th>Status</Th>
                 <Th>Version</Th>
@@ -242,7 +243,7 @@ export const CmekTable = () => {
               </Tr>
             </THead>
             <TBody>
-              {isLoading && <TableSkeleton columns={4} innerKey="project-keys" />}
+              {isLoading && <TableSkeleton columns={5} innerKey="project-keys" />}
               {!isLoading &&
                 keys.length > 0 &&
                 keys.map((cmek) => {
@@ -252,7 +253,7 @@ export const CmekTable = () => {
                   return (
                     <Tr className="group h-10 hover:bg-mineshaft-700" key={`st-v3-${id}`}>
                       <Td>
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2 ">
                           {name}
                           {description && (
                             <Tooltip content={description}>
@@ -264,6 +265,7 @@ export const CmekTable = () => {
                           )}
                         </div>
                       </Td>
+                      <Td>{id}</Td>
                       <Td className="uppercase">{encryptionAlgorithm}</Td>
                       <Td>
                         <Badge variant={variant}>{label}</Badge>