Improve project details top contributors block (#555)

* Show 6 items by default * Add links to user profiles * Fix trailing whitespace in ProjectDetails * Pre-commit Fixes * Pre-commit fixes * Test fixes --------- Co-authored-by: Arkadii Yakovets <[email protected]>
OWASP · Jan 21, 2025 · 309bceb · 309bceb
1 parent 8cc4ca6
commit 309bceb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/frontend/__tests__/src/pages/ProjectDetails.test.tsx b/frontend/__tests__/src/pages/ProjectDetails.test.tsx
@@ -38,7 +38,7 @@ describe('ProjectDetailsPage Component', () => {
     await waitFor(() => {
       expect(screen.getByText('Contributor 1')).toBeInTheDocument()
     })
-    expect(screen.queryByText('Contributor 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Contributor 7')).not.toBeInTheDocument()
   })
 
   test('handles contributors with missing names gracefully', async () => {

diff --git a/frontend/src/pages/ProjectDetails.tsx b/frontend/src/pages/ProjectDetails.tsx
@@ -13,7 +13,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { fetchAlgoliaData } from 'api/fetchAlgoliaData'
 import { useState, useEffect } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import { ErrorDisplay } from 'wrappers/ErrorWrapper'
 import LoadingSpinner from 'components/LoadingSpinner'
 
@@ -46,6 +46,8 @@ const ProjectDetailsPage = () => {
     fetchProjectData()
   }, [projectKey])
 
+  const navigate = useNavigate()
+
   if (isLoading)
     return (
       <div className="flex min-h-[60vh] items-center justify-center">
@@ -198,9 +200,15 @@ const ProjectDetailsPage = () => {
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
             {(showAllContributors
               ? project.top_contributors
-              : project.top_contributors.slice(0, 5)
+              : project.top_contributors.slice(0, 6)
             ).map((contributor, index) => (
-              <div key={index} className="flex items-center">
+              <div
+                key={index}
+                className="flex cursor-pointer items-center"
+                onClick={() => {
+                  navigate(`/community/users/${contributor.login}`)
+                }}
+              >
                 <img
                   src={contributor.avatar_url}
                   alt={contributor.name || contributor.login}