Add repository name to recent releases (#1274)

* wip

* fix type

---------

Co-authored-by: Arkadii Yakovets <arkadii.yakovets@owasp.org>

Author: aramattamara

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

@@ -13,6 +13,7 @@ class ReleaseNode(BaseNode):
 
     author = graphene.Field(UserNode)
     project_name = graphene.String()
+    repository_name = graphene.String()
     url = graphene.String()
 
     class Meta:
@@ -29,6 +30,10 @@ def resolve_project_name(self, info):
         """Return project name."""
         return self.repository.project.name.lstrip(OWASP_ORGANIZATION_NAME)
 
+    def resolve_repository_name(self, info):
+        """Return repository name."""
+        return self.repository.name
+
     def resolve_url(self, info):
         """Return release URL."""
         return self.url

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

@@ -24,6 +24,7 @@ def test_meta_configuration(self):
             "name",
             "project_name",
             "published_at",
+            "repository_name",
             "tag_name",
             "url",
         }

frontend/__tests__/e2e/data/mockHomeData.ts

@@ -146,15 +146,15 @@ export const mockHomeData = {
         isPreRelease: true,
         name: 'Release 1',
         publishedAt: '2025-02-22T10:15:00+00:00',
-        tagName: 'v1',
+        repositoryName: 'nest-repository-1',
         __typename: 'ReleaseNode',
       },
       {
         author: null,
         isPreRelease: false,
         name: 'Release 2',
         publishedAt: '2025-02-24T10:15:00+00:00',
-        tagName: 'v3',
+        repositoryName: 'owasp-repository-2',
         __typename: 'ReleaseNode',
       },
     ],

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

@@ -64,7 +64,7 @@ test.describe('Home Page', () => {
     await expect(page.getByRole('heading', { name: 'Recent Releases' })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Release 1' })).toBeVisible()
     await expect(page.getByText('Feb 22,')).toBeVisible()
-    await expect(page.getByText('v1', { exact: true })).toBeVisible()
+    await expect(page.getByText('nest-repository-1', { exact: true })).toBeVisible()
   })
 
   test('should be able to join OWASP', async ({ page }) => {

frontend/src/api/queries/homeQueries.ts

@@ -61,6 +61,7 @@ export const GET_MAIN_PAGE_DATA = gql`
       }
       name
       publishedAt
+      repositoryName
       tagName
       url
     }

frontend/src/api/queries/projectQueries.ts

@@ -32,6 +32,7 @@ export const GET_PROJECT_DATA = gql`
         }
         name
         publishedAt
+        repositoryName
         tagName
         url
       }

frontend/src/api/queries/repositoryQueries.ts

@@ -32,6 +32,7 @@ export const GET_REPOSITORY_DATA = gql`
         isPreRelease
         name
         publishedAt
+        repositoryName
         tagName
       }
       size

frontend/src/api/queries/userQueries.ts

@@ -17,6 +17,7 @@ export const GET_USER_DATA = gql`
       isPreRelease
       name
       publishedAt
+      repositoryName
       tagName
       url
     }

frontend/src/components/RecentReleases.tsx

@@ -1,4 +1,4 @@
-import { faCalendar, faTag } from '@fortawesome/free-solid-svg-icons'
+import { faCalendar, faFileCode } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { ProjectReleaseType } from 'types/project'
@@ -17,7 +17,7 @@ const RecentReleases: React.FC<RecentReleasesProps> = ({
   showSingleColumn = false,
 }) => {
   return (
-    <SecondaryCard icon={faTag} title="Recent Releases">
+    <SecondaryCard icon={faFileCode} title="Recent Releases">
       {data && data.length > 0 ? (
         <div
           className={`grid ${showSingleColumn ? 'grid-cols-1' : 'grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
@@ -53,8 +53,8 @@ const RecentReleases: React.FC<RecentReleasesProps> = ({
                   <div className="mt-2 flex items-center text-sm text-gray-600 dark:text-gray-400">
                     <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
                     <span>{formatDate(item.publishedAt)}</span>
-                    <FontAwesomeIcon icon={faTag} className="ml-4 mr-2 h-4 w-4" />
-                    <span>{item.tagName}</span>
+                    <FontAwesomeIcon icon={faFileCode} className="ml-4 mr-2 h-4 w-4" />
+                    <span>{item.repositoryName}</span>
                   </div>
                 </div>
               </div>

frontend/src/pages/UserDetails.tsx

@@ -149,6 +149,7 @@ const UserDetailsPage: React.FC = () => {
           key: user?.login || '',
           name: user?.name || user?.login || '',
         },
+        repositoryName: release.repositoryName,
         url: release.url,
       })) || []
     )