Added tooltip when hover && repository name

backend/apps/github/graphql/nodes/issue.py

@@ -1,12 +1,16 @@
 """GitHub issue GraphQL node."""
 
+import graphene
+
 from apps.common.graphql.nodes import BaseNode
 from apps.github.models.issue import Issue
 
 
 class IssueNode(BaseNode):
     """GitHub issue node."""
 
+    repository_name = graphene.String()
+
     class Meta:
         model = Issue
         fields = (
@@ -17,3 +21,7 @@ class Meta:
             "title",
             "url",
         )
+
+    def resolve_repository_name(self, info):
+        """Resolve the repository name."""
+        return self.repository.name

backend/apps/github/graphql/nodes/pull_request.py

@@ -9,6 +9,7 @@
 class PullRequestNode(BaseNode):
     """GitHub pull request node."""
 
+    repository_name = graphene.String()
     url = graphene.String()
 
     class Meta:
@@ -19,6 +20,10 @@ class Meta:
             "title",
         )
 
+    def resolve_repository_name(self, info):
+        """Resolve repository name."""
+        return self.repository.name
+
     def resolve_url(self, info):
         """Resolve URL."""
         return self.url

backend/tests/apps/github/graphql/nodes/issue_test.py

@@ -19,6 +19,7 @@ def test_meta_configuration(self):
             "author",
             "comments_count",
             "created_at",
+            "repository_name",
             "state",
             "title",
             "url",

frontend/__tests__/e2e/data/mockHomeData.ts

@@ -115,6 +115,7 @@ export const mockHomeData = {
         commentsCount: 5,
         createdAt: '2025-03-20T14:03:10+00:00',
         title: 'Issue 1',
+        repositoryName: 'Dependency-Track',
         url: 'https://github.com/DependencyTrack/hyades/issues/1724',
         author: {
           avatarUrl: 'https://avatars.githubusercontent.com/u/5693141?v=4',
@@ -128,6 +129,7 @@ export const mockHomeData = {
         commentsCount: 2,
         createdAt: '2025-03-20T10:30:33+00:00',
         title: 'Issue 2',
+        repositoryName: 'BLT',
         url: 'https://github.com/OWASP-BLT/BLT/issues/4013',
         author: {
           avatarUrl: 'https://avatars.githubusercontent.com/u/24620264?v=4',
@@ -141,6 +143,7 @@ export const mockHomeData = {
         commentsCount: 3,
         createdAt: '2025-03-20T09:36:39+00:00',
         title: 'Troubleshooting the OWASP Dependency-Check Scanner',
+        repositoryName: 'Test repo 3',
         url: 'https://github.com/l3montree-dev/devguard/issues/336',
         author: {
           avatarUrl: 'https://avatars.githubusercontent.com/u/38261809?v=4',

frontend/__tests__/e2e/pages/Home.spec.ts

@@ -65,7 +65,7 @@ test.describe('Home Page', () => {
     await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Issue 1' })).toBeVisible()
     await expect(page.getByText('Mar 20, 2025').first()).toBeVisible()
-    await expect(page.getByText('5 comments')).toBeVisible()
+    await expect(page.getByText('Dependency-Track')).toBeVisible()
   })
 
   test('should have recent Releases', async ({ page }) => {

frontend/__tests__/e2e/pages/ProjectDetails.spec.ts

@@ -79,7 +79,7 @@ test.describe('Project Details Page', () => {
     await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Fix authentication bug' })).toBeVisible()
     await expect(page.getByText('Feb 5, 2025')).toBeVisible()
-    await expect(page.getByText('5 comments')).toBeVisible()
+    await expect(page.getByText('Test Repo')).toBeVisible()
   })
 
   test('should have project recent releases', async ({ page }) => {

frontend/__tests__/e2e/pages/RepositoryDetails.spec.ts

@@ -74,7 +74,7 @@ test.describe('Repository Details Page', () => {
     await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Bug fix required' })).toBeVisible()
     await expect(page.getByText('Jan 2, 2024')).toBeVisible()
-    await expect(page.getByText('4 comments')).toBeVisible()
+    await expect(page.getByText('Test Repo 2')).toBeVisible()
   })
 
   test('should have recent releases', async ({ page }) => {

frontend/__tests__/e2e/pages/UserDetails.spec.ts

@@ -40,7 +40,7 @@ test.describe('User Details Page', () => {
   test('should have user issues', async ({ page }) => {
     await expect(page.getByRole('heading', { name: 'Issues' })).toBeVisible()
     await expect(page.getByText('Test Issue')).toBeVisible()
-    await expect(page.getByText('5 Comments')).toBeVisible()
+    await expect(page.getByText('Test repo 1')).toBeVisible()
   })
 
   test('should have user releases', async ({ page }) => {
@@ -55,6 +55,6 @@ test.describe('User Details Page', () => {
 
   test('should have top repositories', async ({ page }) => {
     await expect(page.getByRole('heading', { name: 'Repositories' })).toBeVisible()
-    await expect(page.getByText('Test Repo')).toBeVisible()
+    await expect(page.getByText('Test Repo 2')).toBeVisible()
   })
 })

frontend/__tests__/unit/data/mockHomeData.ts

@@ -126,6 +126,7 @@ export const mockGraphQLData = {
         name: 'John Doe',
         avatarUrl: 'https://avatars.githubusercontent.com/u/58754215?v=4',
       },
+      repositoryName: 'Test Repo 1',
       url: 'https://github.com/example/repo/pull/1',
     },
     {
@@ -135,6 +136,7 @@ export const mockGraphQLData = {
         login: 'jane-smith',
         avatarUrl: 'https://avatars.githubusercontent.com/u/58754221?v=4',
       },
+      repositoryName: 'Test Repo 2',
       url: 'https://github.com/example/repo/pull/2',
     },
   ],

frontend/__tests__/unit/data/mockProjectDetailsData.ts

@@ -40,6 +40,7 @@ export const mockProjectDetailsData = {
         title: 'Fix authentication bug',
         commentsCount: 5,
         createdAt: '2025-02-05T15:20:30Z',
+        repositoryName: 'Test Repo',
         author: {
           avatarUrl: 'https://avatars.githubusercontent.com/avatar4.png',
           login: 'dave_debugger',

frontend/__tests__/unit/data/mockRepositoryData.ts

@@ -25,6 +25,7 @@ export const mockRepositoryData = {
         title: 'Bug fix required',
         commentsCount: 4,
         createdAt: '2024-01-02T10:00:00Z',
+        repositoryName: 'Test Repo 2',
         author: {
           avatarUrl: 'https://avatars.githubusercontent.com/avatar.jpg',
           name: 'Test User 1',

frontend/__tests__/unit/data/mockUserDetails.ts

@@ -18,6 +18,7 @@ export const mockUserDetailsData = {
       title: 'Test Issue',
       createdAt: 1723002473,
       commentsCount: 5,
+      repositoryName: 'Test Repo 1',
       url: 'https://github.com/OWASP/Nest/issues/798',
     },
   ],
@@ -26,13 +27,15 @@ export const mockUserDetailsData = {
       isPreRelease: false,
       name: 'v1.0.0',
       publishedAt: 1723002473,
+      repositoryName: 'Test Repo 2',
       tagName: '1.0.0',
       url: 'https://github.com/testuser/test-repo/releases/tag/1.0.0',
     },
   ],
   recentPullRequests: [
     {
       createdAt: 1723002473,
+      repositoryName: 'Test Repo 3',
       title: 'Test Pull Request',
       url: 'https://github.com/testuser/test-repo/pull/1',
     },

frontend/__tests__/unit/pages/Home.test.tsx

@@ -225,9 +225,7 @@ describe('Home', () => {
       expect(screen.getByText('Recent Pull Requests')).toBeInTheDocument()
       mockGraphQLData.recentPullRequests.forEach((pullRequest) => {
         expect(screen.getByText(pullRequest.title)).toBeInTheDocument()
-        expect(
-          screen.getByText(pullRequest.author.name || pullRequest.author.login)
-        ).toBeInTheDocument()
+        expect(screen.getByText(pullRequest.repositoryName)).toBeInTheDocument()
       })
     })
   })

frontend/__tests__/unit/pages/ProjectDetails.test.tsx

@@ -141,8 +141,7 @@ describe('ProjectDetailsPage', () => {
 
       issues.forEach((issue) => {
         expect(screen.getByText(issue.title)).toBeInTheDocument()
-
-        expect(screen.getByText(`${issue.commentsCount} comments`)).toBeInTheDocument()
+        expect(screen.getByText(issue.repositoryName)).toBeInTheDocument()
       })
     })
   })

frontend/__tests__/unit/pages/RepositoryDetails.test.tsx

@@ -143,8 +143,7 @@ describe('RepositoryDetailsPage', () => {
 
       issues.forEach((issue) => {
         expect(screen.getByText(issue.title)).toBeInTheDocument()
-
-        expect(screen.getByText(`${issue.commentsCount} comments`)).toBeInTheDocument()
+        expect(screen.getByText(issue.repositoryName)).toBeInTheDocument()
       })
     })
   })

frontend/__tests__/unit/pages/UserDetails.test.tsx

@@ -111,7 +111,7 @@ describe('UserDetailsPage', () => {
       const issueTitle = screen.getByText('Test Issue')
       expect(issueTitle).toBeInTheDocument()
 
-      const issueComments = screen.getByText('5 comments')
+      const issueComments = screen.getByText('Test Repo')
       expect(issueComments).toBeInTheDocument()
     })
   })

frontend/src/app/members/[memberKey]/page.tsx

@@ -113,15 +113,16 @@ const UserDetailsPage: React.FC = () => {
   const formattedIssues: ProjectIssuesType[] = useMemo(() => {
     return (
       issues?.map((issue) => ({
-        commentsCount: issue.commentsCount,
-        createdAt: issue.createdAt,
-        title: issue.title,
         author: {
-          login: user?.login || '',
           avatarUrl: user?.avatarUrl || '',
           key: user?.login || '',
+          login: user?.login || '',
           name: user?.name || user?.login || '',
         },
+        commentsCount: issue.commentsCount,
+        createdAt: issue.createdAt,
+        repositoryName: issue.repositoryName,
+        title: issue.title,
         url: issue.url,
       })) || []
     )
@@ -130,14 +131,15 @@ const UserDetailsPage: React.FC = () => {
   const formattedPullRequest: ItemCardPullRequests[] = useMemo(() => {
     return (
       pullRequests?.map((pullRequest) => ({
-        createdAt: pullRequest.createdAt,
-        title: pullRequest.title,
         author: {
-          login: user?.login || '',
           avatarUrl: user?.avatarUrl || '',
           key: user?.login || '',
+          login: user?.login || '',
           name: user?.name || user?.login || '',
         },
+        createdAt: pullRequest.createdAt,
+        repositoryName: pullRequest.repositoryName,
+        title: pullRequest.title,
         url: pullRequest.url,
       })) || []
     )
@@ -146,17 +148,17 @@ const UserDetailsPage: React.FC = () => {
   const formattedReleases: ProjectReleaseType[] = useMemo(() => {
     return (
       releases?.map((release) => ({
-        isPreRelease: release.isPreRelease,
-        name: release.name,
-        publishedAt: release.publishedAt,
-        tagName: release.tagName,
-        repositoryName: release.repositoryName,
         author: {
-          login: user?.login || '',
           avatarUrl: user?.avatarUrl || '',
           key: user?.login || '',
+          login: user?.login || '',
           name: user?.name || user?.login || '',
         },
+        isPreRelease: release.isPreRelease,
+        name: release.name,
+        publishedAt: release.publishedAt,
+        repositoryName: release.repositoryName,
+        tagName: release.tagName,
         url: release.url,
       })) || []
     )

frontend/src/app/page.tsx

@@ -277,7 +277,7 @@ export default function Home() {
         />
         <div className="grid-cols-2 gap-4 lg:grid">
           <RecentIssues data={data?.recentIssues} />
-          <RecentPullRequests data={data?.recentPullRequests} showAuthor={true} />
+          <RecentPullRequests data={data?.recentPullRequests} />
         </div>
         <RecentReleases data={data?.recentReleases} />
         <SecondaryCard icon={faNewspaper} title="News & Opinions" className="overflow-hidden">

frontend/src/components/ItemCardList.tsx

@@ -1,4 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { Tooltip } from '@heroui/tooltip'
 import Image from 'next/image'
 import Link from 'next/link'
 import { JSX } from 'react'
@@ -22,6 +23,7 @@ const ItemCardList = ({
     createdAt: string
     commentsCount: number
     publishedAt: string
+    repositoryName: string
     tagName: string
     author: {
       avatarUrl: string
@@ -38,18 +40,27 @@ const ItemCardList = ({
             <div className="flex w-full flex-col justify-between">
               <div className="flex w-full items-center">
                 {showAvatar && (
-                  <Link
-                    className="flex-shrink-0 text-blue-400 hover:underline"
-                    href={`/members/${item?.author?.login}`}
+                  <Tooltip
+                    closeDelay={100}
+                    content={item?.author?.name || item?.author?.login}
+                    id={`avatar-tooltip-${index}`}
+                    delay={100}
+                    placement="bottom"
+                    showArrow
                   >
-                    <Image
-                      height={24}
-                      width={24}
-                      src={item?.author?.avatarUrl}
-                      alt={item?.author?.name || ''}
-                      className="mr-2 rounded-full"
-                    />
-                  </Link>
+                    <Link
+                      className="flex-shrink-0 text-blue-400 hover:underline"
+                      href={`/members/${item?.author?.login}`}
+                    >
+                      <Image
+                        height={24}
+                        width={24}
+                        src={item?.author?.avatarUrl}
+                        alt={item?.author?.name || ''}
+                        className="mr-2 rounded-full"
+                      />
+                    </Link>
+                  </Tooltip>
                 )}
                 <h3 className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-semibold">
                   <Link

frontend/src/components/RecentIssues.tsx

@@ -1,9 +1,9 @@
 import { faCalendar, faFileCode, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
 import React from 'react'
 import { ProjectIssuesType } from 'types/project'
 import { formatDate } from 'utils/dateFormatter'
-import { pluralize } from 'utils/pluralize'
 import ItemCardList from './ItemCardList'
 
 interface RecentIssuesProps {
@@ -24,14 +24,17 @@ const RecentIssues: React.FC<RecentIssuesProps> = ({ data, showAvatar = true })
             <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
             <span>{formatDate(item.createdAt)}</span>
           </div>
-          {item?.commentsCount ? (
-            <div className="flex items-center">
-              <FontAwesomeIcon icon={faFileCode} className="mr-2 h-4 w-4" />
-              <span>
-                {item.commentsCount} {pluralize(item.commentsCount, 'comment')}
-              </span>
+          {item?.repositoryName && (
+            <div className="item-center flex">
+              <FontAwesomeIcon icon={faFileCode} className="ml-4 mr-2 h-4 w-4" />
+              <Link
+                className="text-gray-600 hover:underline dark:text-gray-400"
+                href={`/repositories/${item?.repositoryName ? item.repositoryName.toLowerCase() : ''}`}
+              >
+                <span>{item.repositoryName}</span>
+              </Link>{' '}
             </div>
-          ) : null}
+          )}
         </div>
       )}
     />