refactor(platform): Added avatars on secret and variable accordions (#…

…751) Co-authored-by: kriptonian1 <[email protected]> Co-authored-by: Sawan Bhattacharya <[email protected]>
keyshade-xyz · Feb 21, 2025 · 5345925 · 5345925
1 parent 4682c28
commit 5345925
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 22 deletions.
diff --git a/apps/platform/src/components/common/avatar.tsx b/apps/platform/src/components/common/avatar.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+
+interface AvatarProps {
+  name: string
+  src: string | null
+  className?: string
+}
+
+export default function AvatarComponent({ name, className, src }: AvatarProps) {
+  return (
+    <Avatar className={className ?? 'h-6 w-6'}>
+      <AvatarImage src={src === null ? undefined : src} />
+      <AvatarFallback className="font-semibold">
+        {name.charAt(0).toUpperCase() + name.slice(1, 2).toLowerCase()}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/platform/src/components/dashboard/secret/secretCard/index.tsx b/apps/platform/src/components/dashboard/secret/secretCard/index.tsx
@@ -32,6 +32,8 @@ import {
   editSecretOpenAtom,
   selectedSecretAtom
 } from '@/store'
+
+import AvatarComponent from '@/components/common/avatar'
 import { copyToClipboard } from '@/lib/clipboard'
 
 interface SecretCardProps {
@@ -74,9 +76,17 @@ export default function SecretCard({
           <AccordionTrigger
             className="hover:no-underline"
             rightChildren={
-              <div className="text-xs text-white/50">
+              <div className="flex items-center gap-x-4 text-xs text-white/50">
                 {dayjs(secret.updatedAt).toNow(true)} ago by{' '}
-                <span className="text-white">{secret.lastUpdatedBy.name}</span>
+                <div className="flex items-center gap-x-2">
+                  <span className="text-white">
+                    {secret.lastUpdatedBy.name}
+                  </span>
+                  <AvatarComponent
+                    name={secret.lastUpdatedBy.name}
+                    src={secret.lastUpdatedBy.profilePictureUrl}
+                  />
+                </div>
               </div>
             }
           >

diff --git a/apps/platform/src/components/dashboard/variable/variableCard/index.tsx b/apps/platform/src/components/dashboard/variable/variableCard/index.tsx
@@ -32,6 +32,7 @@ import {
   AccordionItem,
   AccordionTrigger
 } from '@/components/ui/accordion'
+import AvatarComponent from '@/components/common/avatar'
 import { copyToClipboard } from '@/lib/clipboard'
 
 export default function VariableCard(
@@ -68,11 +69,17 @@ export default function VariableCard(
           <AccordionTrigger
             className="hover:no-underline"
             rightChildren={
-              <div className="text-xs text-white/50">
+              <div className="flex items-center gap-x-4 text-xs text-white/50">
                 {dayjs(variable.updatedAt).toNow(true)} ago by{' '}
-                <span className="text-white">
-                  {variable.lastUpdatedBy.name}
-                </span>
+                <div className="flex items-center gap-x-2">
+                  <span className="text-white">
+                    {variable.lastUpdatedBy.name}
+                  </span>
+                  <AvatarComponent
+                    name={variable.lastUpdatedBy.name}
+                    src={variable.lastUpdatedBy.profilePictureUrl}
+                  />
+                </div>
               </div>
             }
           >

diff --git a/apps/platform/src/components/shared/navbar/index.tsx b/apps/platform/src/components/shared/navbar/index.tsx
@@ -16,8 +16,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import LineTab from '@/components/ui/line-tab'
+import AvatarComponent from '@/components/common/avatar'
 import { selectedProjectAtom, userAtom } from '@/store'
 
 function Navbar(): React.JSX.Element {
@@ -120,12 +120,10 @@ function Navbar(): React.JSX.Element {
                     </>
                   ) : (
                     <>
-                      <Avatar>
-                        <AvatarImage src={user.profilePictureUrl ?? ''} />
-                        <AvatarFallback>
-                          {user.name ? user.name.slice(0, 2) : ''}
-                        </AvatarFallback>
-                      </Avatar>
+                      <AvatarComponent
+                        name={user.name}
+                        src={user.profilePictureUrl || ''}
+                      />
                       <span>{user.name}</span>
                     </>
                   )}

diff --git a/packages/schema/src/secret/index.ts b/packages/schema/src/secret/index.ts
@@ -17,7 +17,8 @@ export const SecretSchema = z.object({
     projectId: BaseProjectSchema.shape.id,
     lastUpdatedBy: z.object({
       id: z.string(),
-      name: z.string()
+      name: z.string(),
+      profilePictureUrl: z.string().nullable()
     })
   }),
   values: z.array(

diff --git a/packages/schema/src/variable/index.ts b/packages/schema/src/variable/index.ts
@@ -15,7 +15,8 @@ export const VariableSchema = z.object({
     projectId: BaseProjectSchema.shape.id,
     lastUpdatedBy: z.object({
       id: z.string(),
-      name: z.string()
+      name: z.string(),
+      profilePictureUrl: z.string().nullable()
     })
   }),
   values: z.array(

diff --git a/packages/schema/tests/secret.spec.ts b/packages/schema/tests/secret.spec.ts
@@ -31,7 +31,8 @@ describe('Secret Schema Tests', () => {
           projectId: 'project123',
           lastUpdatedBy: {
             id: 'user123',
-            name: 'John Doe'
+            name: 'John Doe',
+            profilePictureUrl: 'http://example.com/profile.jpg'
           }
         },
         values: [
@@ -70,6 +71,7 @@ describe('Secret Schema Tests', () => {
           lastUpdatedBy: {
             id: 'user123',
             name: 'John Doe'
+            // Missing profilePictureUrl
           }
         },
         values: [
@@ -87,7 +89,7 @@ describe('Secret Schema Tests', () => {
         ]
       })
       expect(result.success).toBe(false)
-      expect(result.error?.issues).toHaveLength(5)
+      expect(result.error?.issues).toHaveLength(6)
     })
   })
 
@@ -141,7 +143,8 @@ describe('Secret Schema Tests', () => {
           projectId: 'project123',
           lastUpdatedBy: {
             id: 'user123',
-            name: 'John Doe'
+            name: 'John Doe',
+            profilePictureUrl: 'http://example.com/profile.jpg'
           }
         },
         values: [
@@ -180,6 +183,7 @@ describe('Secret Schema Tests', () => {
           lastUpdatedBy: {
             id: 'user123',
             name: 'John Doe'
+            // Missing profilePictureUrl
           }
         },
         values: [
@@ -197,7 +201,7 @@ describe('Secret Schema Tests', () => {
         ]
       })
       expect(result.success).toBe(false)
-      expect(result.error?.issues).toHaveLength(5)
+      expect(result.error?.issues).toHaveLength(6)
     })
   })
 
@@ -380,7 +384,8 @@ describe('Secret Schema Tests', () => {
               projectId: 'project123',
               lastUpdatedBy: {
                 id: 'user123',
-                name: 'John Doe'
+                name: 'John Doe',
+                profilePictureUrl: null
               }
             },
             values: [

diff --git a/packages/schema/tests/variable.spec.ts b/packages/schema/tests/variable.spec.ts
@@ -104,6 +104,7 @@ describe('Variable Schema Tests', () => {
           lastUpdatedBy: {
             id: 'user123'
             // Missing name
+            // Missing profilePictureUrl
           }
         },
         values: [
@@ -121,7 +122,7 @@ describe('Variable Schema Tests', () => {
         ]
       })
       expect(result.success).toBe(false)
-      expect(result.error?.issues).toHaveLength(6)
+      expect(result.error?.issues).toHaveLength(7)
     })
   })
 
@@ -240,6 +241,7 @@ describe('Variable Schema Tests', () => {
           lastUpdatedBy: {
             id: 'user123',
             name: 'John Doe'
+            // Missing profilePicture
           }
         },
         values: [
@@ -255,7 +257,7 @@ describe('Variable Schema Tests', () => {
         ]
       })
       expect(result.success).toBe(false)
-      expect(result.error?.issues).toHaveLength(5)
+      expect(result.error?.issues).toHaveLength(6)
     })
   })