feat(platform): Improved UI of secret listing (#655)

Co-authored-by: kriptonian1 <[email protected]>
keyshade-xyz · Jan 25, 2025 · b19de47 · b19de47
1 parent fbd6f3b
commit b19de47
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/apps/platform/src/app/(main)/project/[project]/@secret/page.tsx b/apps/platform/src/app/(main)/project/[project]/@secret/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { extend } from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { SecretLogoSVG } from '@public/svg/secret'
@@ -24,6 +24,10 @@ function SecretPage(): React.JSX.Element {
   const [secrets, setSecrets] = useAtom(secretsOfProjectAtom)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const selectedProject = useAtomValue(selectedProjectAtom)
+  const isDecrypted = useMemo(
+    () => selectedProject?.storePrivateKey === true || false,
+    [selectedProject]
+  )
 
   useEffect(() => {
     setIsLoading(true)
@@ -42,7 +46,7 @@ function SecretPage(): React.JSX.Element {
 
       const { success, error, data } =
         await ControllerInstance.getInstance().secretController.getAllSecretsOfProject(
-          { projectSlug: selectedProject.slug },
+          { projectSlug: selectedProject.slug, decryptValue: isDecrypted },
           {}
         )
 
@@ -57,7 +61,7 @@ function SecretPage(): React.JSX.Element {
     getAllSecretsByProjectSlug()
 
     setIsLoading(false)
-  }, [selectedProject, setSecrets])
+  }, [isDecrypted, selectedProject, setSecrets])
 
   if (isLoading) {
     return (
@@ -98,8 +102,12 @@ function SecretPage(): React.JSX.Element {
             collapsible
             type="single"
           >
-            {secrets.map(({ secret, values }) => (
-              <SecretCard key={secret.id} {...{ secret, values }} />
+            {secrets.map((secret) => (
+              <SecretCard
+                isDecrypted={isDecrypted}
+                key={secret.secret.id}
+                secretData={secret}
+              />
             ))}
           </Accordion>
         </ScrollArea>

diff --git a/apps/platform/src/components/dashboard/secret/secretCard/index.tsx b/apps/platform/src/components/dashboard/secret/secretCard/index.tsx
@@ -21,7 +21,17 @@ import {
   TooltipTrigger
 } from '@/components/ui/tooltip'
 
-export default function SecretCard({ secret, values }: Secret) {
+interface SecretCardProps {
+  secretData: Secret
+  isDecrypted: boolean
+}
+
+export default function SecretCard({
+  secretData,
+  isDecrypted
+}: SecretCardProps) {
+  const { secret, values } = secretData
+
   return (
     <AccordionItem
       className="rounded-xl bg-white/5 px-5"
@@ -33,7 +43,7 @@ export default function SecretCard({ secret, values }: Secret) {
         rightChildren={
           <div className="text-xs text-white/50">
             {dayjs(secret.updatedAt).toNow(true)} ago by{' '}
-            <span className="text-white">{secret.lastUpdatedById}</span>
+            <span className="text-white">{secret.lastUpdatedBy.name}</span>
           </div>
         }
       >
@@ -57,20 +67,31 @@ export default function SecretCard({ secret, values }: Secret) {
         </div>
       </AccordionTrigger>
       <AccordionContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Environment</TableHead>
-              <TableHead>Secret</TableHead>
+        <Table className="h-full w-full">
+          <TableHeader className="h-[3.125rem] w-full">
+            <TableRow className="h-[3.125rem] w-full hover:bg-[#232424]">
+              <TableHead className="h-full w-[10.25rem] border-2 border-white/30 text-base font-bold text-white">
+                Environment
+              </TableHead>
+              <TableHead className="h-full border-2 border-white/30 text-base font-normal text-white">
+                Value
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {values.map((value) => {
               return (
-                <TableRow key={value.environment.id}>
-                  <TableCell>{value.environment.slug}</TableCell>
-                  <TableCell className="max-w-40 overflow-auto">
-                    {value.value}
+                <TableRow
+                  className="h-[3.125rem] w-full hover:cursor-pointer hover:bg-[#232424]"
+                  key={value.environment.id}
+                >
+                  <TableCell className="h-full w-[10.25rem] border-2 border-white/30 text-base font-bold text-white">
+                    {value.environment.name}
+                  </TableCell>
+                  <TableCell className="h-full border-2 border-white/30 text-base font-normal text-white">
+                    {isDecrypted
+                      ? value.value
+                      : value.value.replace(/./g, '*').substring(0, 20)}
                   </TableCell>
                 </TableRow>
               )