Limit releases to only show most recent ones

frontend/__tests__/unit/components/SnapshotReleaseSection.test.tsx

@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { MAX_RELEASES_TO_SHOW } from 'utils/constants'
+import { ReleasesSection } from 'components/SnapshotReleaseSection'
+
+describe('ReleasesSection', () => {
+  const mockReleases = Array.from({ length: MAX_RELEASES_TO_SHOW + 1 }, (_, i) => ({
+    id: `release-${i}`,
+    name: `Release v${i}`,
+    publishedAt: new Date().toISOString(),
+    tagName: `v${i}`,
+  }))
+
+  it('renders only MAX_RELEASES_TO_SHOW items when showAll is false', () => {
+    render(<ReleasesSection releases={mockReleases} showAll={false} onToggle={jest.fn()} />)
+
+    const items = screen.getAllByText(/Release v/)
+    expect(items.length).toBe(MAX_RELEASES_TO_SHOW)
+  })
+
+  it('renders all releases when showAll is true', () => {
+    render(<ReleasesSection releases={mockReleases} showAll={true} onToggle={jest.fn()} />)
+
+    const items = screen.getAllByText(/Release v/)
+    expect(items.length).toBe(MAX_RELEASES_TO_SHOW + 1)
+  })
+
+  it('renders the show more button for releases > MAX_RELEASES_TO_SHOW', () => {
+    render(<ReleasesSection releases={mockReleases} showAll={false} onToggle={jest.fn()} />)
+    expect(screen.getByRole('button', { name: 'Show more' })).toBeInTheDocument()
+  })
+
+  it('calls onToggle when the show more button is clicked', () => {
+    const onToggle = jest.fn()
+
+    render(<ReleasesSection releases={mockReleases} showAll={false} onToggle={onToggle} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show more' }))
+    expect(onToggle).toHaveBeenCalledTimes(1)
+  })
+})

frontend/src/app/community/snapshots/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
 import { useRouter, useParams } from 'next/navigation'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FaCalendar, FaRightToBracket } from 'react-icons/fa6'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 import { GetSnapshotDetailsDocument } from 'types/__generated__/snapshotQueries.generated'
@@ -14,12 +14,14 @@ import { getFilteredIcons, handleSocialUrls } from 'utils/utility'
 import Card from 'components/Card'
 import ChapterMapWrapper from 'components/ChapterMapWrapper'
 import LoadingSpinner from 'components/LoadingSpinner'
-import Release from 'components/Release'
+import { ReleasesSection } from 'components/SnapshotReleaseSection'
 
 const SnapshotDetailsPage: React.FC = () => {
   const { id: snapshotKey } = useParams<{ id: string }>()
   const router = useRouter()
 
+  const [showAllReleases, setShowAllReleases] = useState(false)
+
   const {
     data,
     error: graphQLRequestError,
@@ -29,6 +31,9 @@ const SnapshotDetailsPage: React.FC = () => {
   })
 
   const snapshot = data?.snapshot
+  useEffect(() => {
+    setShowAllReleases(false)
+  }, [snapshot])
 
   useEffect(() => {
     if (graphQLRequestError) {
@@ -183,21 +188,13 @@ const SnapshotDetailsPage: React.FC = () => {
           <h2 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-200">
             New Releases
           </h2>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {snapshot.newReleases.map((release, index) => {
-              return (
-                <Release
-                  key={
-                    release.id ||
-                    `${release.tagName}-${release.repositoryName ?? 'unknown'}-${index}`
-                  }
-                  release={release as unknown as ReleaseType}
-                  showAvatar={true}
-                  index={index}
-                />
-              )
-            })}
-          </div>
+          {
+            <ReleasesSection
+              releases={snapshot.newReleases as ReleaseType[]}
+              showAll={showAllReleases}
+              onToggle={() => setShowAllReleases((p) => !p)}
+            />
+          }
         </div>
       )}
     </div>

frontend/src/components/SnapshotReleaseSection.tsx

@@ -0,0 +1,33 @@
+import type { Release as ReleaseType } from 'types/release'
+import { MAX_RELEASES_TO_SHOW } from 'utils/constants'
+import Release from 'components/Release'
+import ShowMoreButton from 'components/ShowMoreButton'
+
+type ReleasesSectionProps = {
+  releases: ReleaseType[]
+  showAll: boolean
+  onToggle: () => void
+}
+
+export const ReleasesSection = ({ releases, showAll, onToggle }: ReleasesSectionProps) => {
+  const visibleReleases = showAll ? releases : releases.slice(0, MAX_RELEASES_TO_SHOW)
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {visibleReleases.map((release, index) => {
+          return (
+            <Release
+              key={
+                release.id || `${release.tagName}-${release.repositoryName ?? 'unknown'}-${index}`
+              }
+              release={release}
+              showAvatar={true}
+              index={index}
+            />
+          )
+        })}
+      </div>
+      {releases.length > MAX_RELEASES_TO_SHOW && <ShowMoreButton onToggle={onToggle} />}
+    </>
+  )
+}

frontend/src/utils/constants.ts

@@ -119,6 +119,8 @@ export const themeToggleTooltip = {
 
 export const desktopViewMinWidth = 768
 
+export const MAX_RELEASES_TO_SHOW = 9
+
 export const userAuthStatus = {
   AUTHENTICATED: 'authenticated',
   LOADING: 'loading',