- Heatmap: {Object.keys(contributionData).length} days from {startDate} to {endDate}
-
- ),
-}))
-
-jest.mock('components/ContributionStats', () => ({
- __esModule: true,
- default: ({
- title,
- stats,
- ...props
- }: {
- title: string
- stats?: { commits: number; pullRequests: number; issues: number; total: number }
- [key: string]: unknown
- }) => (
-
-
- ),
-}))
-
-jest.mock('components/InfoBlock', () => ({
- __esModule: true,
- default: ({
- icon: _icon,
- pluralizedName,
- unit,
- value,
- className,
- ...props
- }: {
- _icon: unknown
- pluralizedName?: string
- unit?: string
- value: number
- className?: string
- [key: string]: unknown
- }) => (
- {title}
- {stats && ( - <> -{stats.commits}
-{stats.pullRequests}
-{stats.issues}
-{stats.total}
- - )} -
- {value} {unit} {pluralizedName}
-
- ),
-}))
-
-jest.mock('components/LeadersList', () => ({
- __esModule: true,
- default: ({
- leaders,
- entityKey: _entityKey,
- ...props
- }: {
- leaders: string
- entityKey: string
- [key: string]: unknown
- }) => (
-
- {leaders}
-
- ),
-}))
-
-jest.mock('components/MetricsScoreCircle', () => ({
- __esModule: true,
- default: ({
- score,
- clickable,
- onClick: _onClick,
- ...props
- }: {
- score: number
- clickable?: boolean
- onClick?: () => void
- [key: string]: unknown
- }) =>
- clickable ? (
-
- ) : (
-
- Score: {score}
-
- ),
-}))
-
-jest.mock('components/Milestones', () => ({
- __esModule: true,
- default: ({
- data,
- showAvatar,
- ...props
- }: {
- data: unknown[]
- showAvatar: boolean
- [key: string]: unknown
- }) => (
-
- Milestones ({data?.length || 0} items) {showAvatar ? 'with avatars' : 'no avatars'}
-
- ),
-}))
-
-jest.mock('components/RecentIssues', () => ({
- __esModule: true,
- default: ({
- data,
- showAvatar,
- ...props
- }: {
- data: unknown[]
- showAvatar: boolean
- [key: string]: unknown
- }) => (
-
- Recent Issues ({data?.length || 0} items) {showAvatar ? 'with avatars' : 'no avatars'}
-
- ),
-}))
-
-jest.mock('components/RecentPullRequests', () => ({
- __esModule: true,
- default: ({
- data,
- showAvatar,
- ...props
- }: {
- data: unknown[]
- showAvatar: boolean
- [key: string]: unknown
- }) => (
-
- Recent Pull Requests ({data?.length || 0} items) {showAvatar ? 'with avatars' : 'no avatars'}
-
- ),
-}))
-
-jest.mock('components/MentorshipPullRequest', () => ({
- __esModule: true,
- default: ({ pr, ...props }: { pr: PullRequest; [key: string]: unknown }) => (
-
- MentorshipPullRequest: {pr.title}
-
- ),
-}))
-
-jest.mock('components/RecentReleases', () => ({
- __esModule: true,
- default: ({
- data,
- showAvatar,
- showSingleColumn,
- ...props
- }: {
- data: unknown[]
- showAvatar: boolean
- showSingleColumn?: boolean
- [key: string]: unknown
- }) => (
-
- Recent Releases ({data?.length || 0} items) {showAvatar ? 'with avatars' : 'no avatars'}
- {showSingleColumn ? ' (single column)' : ''}
-
- ),
-}))
-
-jest.mock('components/RepositoryCard', () => ({
- __esModule: true,
- default: ({
- repositories,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- maxInitialDisplay,
- ...props
- }: {
- repositories: unknown[]
- maxInitialDisplay?: number
- [key: string]: unknown
- }) => (
-
- Repositories ({repositories.length} items)
-
- ),
-}))
-
-jest.mock('components/SecondaryCard', () => ({
- __esModule: true,
- default: ({
- title,
- children,
- className,
- icon: _icon,
- ...props
- }: {
- _icon?: unknown
- title: React.ReactNode
- children: React.ReactNode
- className?: string
- [key: string]: unknown
- }) => (
-
-
- ),
-}))
-
-jest.mock('components/SponsorCard', () => ({
- __esModule: true,
- default: ({
- target,
- title,
- type,
- ...props
- }: {
- target: string
- title: string
- type: string
- [key: string]: unknown
- }) => (
- {title}
-{children}
-
- Sponsor Card - Target: {target}, Title: {title}, Type: {type}
-
- ),
-}))
-
-jest.mock('components/ToggleableList', () => ({
- __esModule: true,
- default: ({
- items,
- icon: _icon,
- label,
- entityKey: _entityKey,
- isDisabled: _isDisabled,
- ...props
- }: {
- items: string[]
- _icon: unknown
- label: React.ReactNode
- entityKey: string
- isDisabled?: boolean
- [key: string]: unknown
- }) => (
-
- {label}: {items.join(', ')}
-
- ),
-}))
-
-jest.mock('components/ContributorsList', () => ({
- __esModule: true,
- default: ({
- contributors,
- maxInitialDisplay,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- icon,
- title = 'Contributors',
-
- getUrl,
- ...props
- }: {
- contributors: (Partial
- {title} ({contributors.length} items, max display: {maxInitialDisplay})
- {contributors.map((c) => (
-
- {c.name || c.login || 'Unknown'}
-
- ))}
-
- ),
-}))
-
-jest.mock('components/EntityActions', () => ({
- __esModule: true,
- default: ({
- type,
- programKey,
- moduleKey,
- status: _status,
- setStatus: _setStatus,
- isAdmin,
- isMentor: _isMentor,
- ...props
- }: {
- type: string
- programKey?: string
- moduleKey?: string
- status?: string
- setStatus?: (status: string) => void
- isAdmin?: boolean
- isMentor?: boolean
- [key: string]: unknown
- }) => (
-
- EntityActions: type={type}, programKey={programKey}, moduleKey={moduleKey}
-
- ),
-}))
-
-jest.mock('components/Leaders', () => {
- return {
- __esModule: true,
- default: ({ users, ...props }: { users: unknown[]; [key: string]: unknown }) => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const usersList = users as any[]
- return (
-
-
- )
- },
- }
-})
-
-jest.mock('components/StatusBadge', () => ({
- __esModule: true,
- default: ({
- status,
- _size,
- ...props
- }: {
- status: string
- _size?: string
- [key: string]: unknown
- }) => (
-
- {status.charAt(0).toUpperCase() + status.slice(1)}
-
- ),
-}))
-
-jest.mock('components/MarkdownWrapper', () => ({
- __esModule: true,
- default: ({ content, ...props }: { content: string; [key: string]: unknown }) => (
- Leaders
- {Array.isArray(usersList) && - // eslint-disable-next-line @typescript-eslint/no-explicit-any - usersList.map((user: any, index: number) => { - const uniqueKey = `leader-${index}-${user.login || 'unknown'}` - return ( -
-
- )
- })}
- {user.member?.name || user.memberName || 'Unknown'}
- {user.description || ''}
-
- {content}
-
- ),
-}))
-
-jest.mock('components/ModuleCard', () => ({
- __esModule: true,
- default: ({
- modules,
- accessLevel: _accessLevel,
- admins: _admins,
- programKey: _programKey,
- ...props
- }: {
- modules: unknown[]
- accessLevel: string
- admins?: unknown[]
- programKey?: string
- [key: string]: unknown
- }) => (
-
- ModuleCard ({modules?.length || 0} modules)
-
- ),
-}))
-
-jest.mock('components/ShowMoreButton', () => {
- function ShowMoreButtonMock({
- onToggle,
- ...props
- }: Readonly<{
- onToggle: () => void
- [key: string]: unknown
- }>) {
- const [isExpanded, setIsExpanded] = React.useState(false)
- return (
-
- )
- }
- return {
- __esModule: true,
- default: ShowMoreButtonMock,
- }
-})
-
-jest.mock('components/TruncatedText', () => ({
- __esModule: true,
- TruncatedText: ({ text }: { text: string }) => {text},
-}))
-
-describe('CardDetailsPage', () => {
- const createMalformedData = Custom user summary content
- render(
- Nested Content
-
- ),
- },
- ],
- userSummary: (
-
-
- ),
- }
-
- render(Complex user summary
--
-
- Item 1 -
- Item 2 -
User summary content
,
- socialLinks: ['https://github.com/test', 'https://twitter.com/test'],
- entityKey: 'test-entity',
- projectName: 'Test Project Name',
- geolocationData: mockChapterGeoData,
- healthMetricsData: mockHealthMetricsData,
- topContributors: mockContributors,
- repositories: mockRepositories,
- recentIssues: mockRecentIssues,
- recentMilestones: mockRecentMilestones,
- recentReleases: mockRecentReleases,
- pullRequests: mockPullRequests,
- }
-
- render(Heatmap: {JSON.stringify(contributionData)}
+ ),
+}))
+
+jest.mock('components/ContributionStats', () => ({
+ __esModule: true,
+ default: ({ stats }: { stats: object }) => (
+ Stats: {JSON.stringify(stats)}
+ ),
+}))
+
+describe('CardDetailsContributions', () => {
+ afterEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('renders nothing when hasContributions is false', () => {
+ const { container } = render(
+
+ ),
+}))
+
+jest.mock('next/link', () => {
+ return ({ children, href }: { children: React.ReactNode; href: string }) => (
+ {children}
+ )
+})
+
+jest.mock('utils/urlFormatter', () => ({
+ getMemberUrl: (login: string) => `/members/${login}`,
+ getMenteeUrl: (programKey: string, entityKey: string, login: string) =>
+ `/programs/${programKey}/mentees/${login}`,
+}))
+
+describe('CardDetailsContributors', () => {
+ const mockContributor: Contributor = {
+ id: '1',
+ name: 'John Doe',
+ avatarUrl: 'https://example.com/avatar.jpg',
+ login: 'john_doe',
+ contributionsCount: 42,
+ }
+
+ const mockContributor2: Contributor = {
+ id: '2',
+ name: 'Jane Smith',
+ avatarUrl: 'https://example.com/avatar2.jpg',
+ login: 'jane_smith',
+ contributionsCount: 35,
+ }
+
+ it('renders nothing when no contributors provided', () => {
+ const { container } = render({title}
+-
+ {contributors.map((c) => (
+
- {getUrl ? {c.name} : c.name} + ))} +
+ EntityActions: type={type}, programKey={programKey}, moduleKey={moduleKey}
+
+ ),
+}))
+
+jest.mock('components/StatusBadge', () => ({
+ __esModule: true,
+ default: ({ status }: { status: string }) => (
+
+ {status.charAt(0).toUpperCase() + status.slice(1)}
+
+ ),
+}))
+
+jest.mock('components/MetricsScoreCircle', () => ({
+ __esModule: true,
+ default: ({
+ score,
+ clickable,
+ onClick,
+ }: {
+ score: number
+ clickable?: boolean
+ onClick?: () => void
+ }) =>
+ clickable ? (
+
+ ) : (
+ Score: {score}
+ ),
+}))
+
+describe('CardDetailsHeader', () => {
+ const defaultProps: CardDetailsHeaderProps = {
+ title: 'Test Title',
+ }
+
+ it('renders title correctly', () => {
+ render(Issues: {data.map((i) => i.title).join(', ')}
+ ),
+}))
+
+jest.mock('components/Milestones', () => ({
+ __esModule: true,
+ default: ({ data }: { data: Milestone[] }) => (
+ Milestones: {data.map((m) => m.title).join(', ')}
+ ),
+}))
+
+jest.mock('components/RecentPullRequests', () => ({
+ __esModule: true,
+ default: ({ data }: { data: PullRequest[] }) => (
+ PRs: {data.map((pr) => pr.title).join(', ')}
+ ),
+}))
+
+jest.mock('components/RecentReleases', () => ({
+ __esModule: true,
+ default: ({ data }: { data: Release[] }) => (
+ Releases: {data.map((r) => r.name).join(', ')}
+ ),
+}))
+
+jest.mock('next/link', () => {
+ return ({ children, href }: { children: React.ReactNode; href: string }) => (
+ {children}
+ )
+})
+
+jest.mock('components/MentorshipPullRequest', () => ({
+ __esModule: true,
+ default: ({ pr }: { pr: PullRequest }) => (
+ {pr.title}
+ ),
+}))
+
+jest.mock('components/SecondaryCard', () => ({
+ __esModule: true,
+ default: ({ title, children }: { title: React.ReactNode; children: React.ReactNode }) => (
+
+
+ ),
+}))
+
+jest.mock('components/ShowMoreButton', () => ({
+ __esModule: true,
+ default: ({ onToggle }: { onToggle: () => void }) => (
+
+ ),
+}))
+
+jest.mock('components/AnchorTitle', () => ({
+ __esModule: true,
+ default: ({ title }: { title: string }) => {title},
+}))
+
+jest.mock('next/image', () => ({
+ __esModule: true,
+ default: ({ alt, ...props }: Record{title}
+ {children}
+ {children}
+ ),
+}))
+
+describe('CardDetailsIssuesMilestones', () => {
+ const mockIssue: Issue = {
+ id: '1',
+ title: 'Fix bug in parser',
+ url: 'https://github.com/issue/1',
+ state: 'open',
+ createdAt: '2024-01-01',
+ }
+
+ const mockMilestone: Milestone = {
+ id: '1',
+ title: 'v1.0.0',
+ url: 'https://github.com/milestone/1',
+ dueOn: '2024-02-01',
+ }
+
+ const mockPR: PullRequest = {
+ id: '1',
+ title: 'Add new feature',
+ url: 'https://github.com/pr/1',
+ state: 'open',
+ createdAt: '2024-01-05',
+ }
+
+ const mockRelease: Release = {
+ id: '1',
+ name: 'v1.0.0',
+ url: 'https://github.com/releases/v1.0.0',
+ publishedAt: '2024-01-15',
+ }
+
+ it('renders all sections together when provided', () => {
+ render(
+ Leaders: {users.map((u) => u.login).join(', ')}
+ ),
+}))
+
+describe('CardDetailsLeaders', () => {
+ const mockLeader: Leader = {
+ id: '1',
+ login: 'user1',
+ name: 'User One',
+ avatarUrl: 'https://example.com/avatar1.jpg',
+ }
+
+ it('renders nothing when entityLeaders is undefined', () => {
+ const { container } = render({geoLocData.length} locations
+ ),
+}))
+
+jest.mock('components/InfoBlock', () => ({
+ __esModule: true,
+ default: ({
+ value,
+ unit,
+ pluralizedName,
+ }: {
+ value: number
+ unit: string
+ pluralizedName: string
+ }) => (
+
+ {value} {unit} {pluralizedName}
+
+ ),
+}))
+
+jest.mock('components/LeadersList', () => ({
+ __esModule: true,
+ default: ({ leaders, entityKey }: { leaders: string; entityKey: string }) => (
+
+ {leaders} (key: {entityKey})
+
+ ),
+}))
+
+jest.mock('components/SecondaryCard', () => ({
+ __esModule: true,
+ default: ({
+ title,
+ children,
+ className,
+ }: {
+ title: React.ReactNode
+ children: React.ReactNode
+ className?: string
+ }) => (
+
+ {title}
+ {children}
+
+ ),
+}))
+
+const getSocialPlatformName = (url: string): string => {
+ if (url.includes('github')) {
+ return 'GitHub'
+ }
+ if (url.includes('twitter')) {
+ return 'Twitter'
+ }
+ return 'Link'
+}
+
+jest.mock('utils/urlIconMappings', () => ({
+ getSocialIcon: (url: string) => {
+ return () => {getSocialPlatformName(url)}
+ },
+}))
+
+describe('CardDetailsMetadata', () => {
+ const mockStats: Stats[] = [
+ {
+ value: 100,
+ unit: 'repositories',
+ pluralizedName: 'Repositories',
+ icon: 'FaGit',
+ },
+ {
+ value: 50,
+ unit: 'members',
+ pluralizedName: 'Members',
+ icon: 'FaUsers',
+ },
+ ]
+
+ const mockGeoData: Chapter[] = [
+ {
+ id: '1',
+ name: 'Chapter 1',
+ location: 'City 1',
+ },
+ {
+ id: '2',
+ name: 'Chapter 2',
+ location: 'City 2',
+ },
+ ]
+
+ it('renders Details card when details prop is provided', () => {
+ const details = [
+ { label: 'Name', value: 'Test Name' },
+ { label: 'Email', value: 'test@example.com' },
+ ]
+
+ render({modules.map((m) => m.name).join(', ')}
+ ),
+}))
+
+jest.mock('components/RepositoryCard', () => ({
+ __esModule: true,
+ default: ({ repositories }: { repositories: RepositoryCardProps[] }) => (
+ {repositories.map((r) => r.name).join(', ')}
+ ),
+}))
+
+jest.mock('components/SecondaryCard', () => ({
+ __esModule: true,
+ default: ({
+ title,
+ children,
+ additionalAction,
+ }: {
+ title?: string
+ children: React.ReactNode
+ additionalAction?: React.ReactNode
+ }) => (
+
+ {title &&
+ ),
+}))
+
+jest.mock('next-auth/react', () => ({
+ useSession: jest.fn(() => ({
+ data: {
+ user: { role: 'admin' },
+ },
+ })),
+}))
+
+jest.mock('next/link', () => {
+ return ({ children, href }: { children: React.ReactNode; href: string }) => (
+ {children}
+ )
+})
+
+describe('CardDetailsRepositoriesModules', () => {
+ const mockRepository: RepositoryCardProps = {
+ id: '1',
+ name: 'test-repo',
+ url: 'https://github.com/test-repo',
+ language: 'TypeScript',
+ stars: 100,
+ forks: 50,
+ }
+
+ const mockModule: Module = {
+ id: '1',
+ name: 'auth-module',
+ description: 'Authentication module',
+ programId: 'program-1',
+ }
+
+ it('renders nothing when no repositories or modules provided', () => {
+ const { container } = render({title}
} + {additionalAction &&{additionalAction}
}
+ {children}
+ {content}
+ ),
+}))
+
+jest.mock('components/SecondaryCard', () => ({
+ __esModule: true,
+ default: ({ title, children }: { title?: React.ReactNode; children: React.ReactNode }) => (
+
+ {title &&
+ ),
+}))
+
+jest.mock('components/AnchorTitle', () => ({
+ __esModule: true,
+ default: ({ title }: { title: string }) => {title},
+}))
+
+jest.mock('react-icons/fa6', () => ({
+ FaCircleInfo: () => ,
+}))
+
+describe('CardDetailsSummary', () => {
+ it('renders nothing when no summary or userSummary provided', () => {
+ const { container } = render({title}
} +{children}
+ Custom user summary content
+ render(User custom content
+ render(
+ {label}
+
+ )
+ }
+})
+
+describe('CardDetailsTags', () => {
+ it('should render null when no props provided', () => {
+ const { container } = render(-
+ {items.map((item) => (
+
- {item} + ))} +
LoadingSpinner
)
-jest.mock('components/CardDetailsPage', () => (props) => (
-
-
-))
+jest.mock('components/CardDetailsPage/CardDetailsHeader', () => {
+ return function MockHeader(props: { title: string }) {
+ return {props.title}
- {props.summary}
- {props.title}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsSummary', () => {
+ return function MockSummary(props: { summary: string }) {
+ return {props.summary}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsPageWrapper', () => {
+ return function MockWrapper({ children }: { children: React.ReactNode }) {
+ return <>{children}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsMetadata', () => {
+ return function MockMetadata() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsTags', () => {
+ return function MockTags() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsContributors', () => {
+ return function MockContributors() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsIssuesMilestones', () => {
+ return function MockIssuesMilestones() {
+ return
+ }
+})
describe('ModuleDetailsPage', () => {
const mockUseParams = useParams as jest.Mock
@@ -114,8 +150,8 @@ describe('ModuleDetailsPage', () => {
render(LoadingSpinner
)
-jest.mock('components/CardDetailsPage', () => (props) => (
-
-
-))
+jest.mock('components/CardDetailsPage/CardDetailsHeader', () => {
+ return function MockHeader(props: { title: string }) {
+ return {props.title}
- {props.summary}
- {props.onLoadMorePullRequests && (
-
- )}
- {props.title}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsSummary', () => {
+ return function MockSummary(props: { summary: string }) {
+ return {props.summary}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsPageWrapper', () => {
+ return function MockWrapper({ children }: { children: React.ReactNode }) {
+ return <>{children}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsMetadata', () => {
+ return function MockMetadata() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsTags', () => {
+ return function MockTags() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsContributors', () => {
+ return function MockContributors() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsIssuesMilestones', () => {
+ return function MockIssuesMilestones(props: { onLoadMorePullRequests?: () => void }) {
+ return (
+
+ {props.onLoadMorePullRequests && (
+
+ )}
+
+ )
+ }
+})
describe('ModuleDetailsPage', () => {
const mockUseParams = useParams as jest.Mock
@@ -80,8 +119,8 @@ describe('ModuleDetailsPage', () => {
render({props.title}
-{props.summary}
-
- {props.details?.map((detail: { label: string; value: string }) => (
-
{props.canUpdateStatus && (
- {detail.label}
- {detail.value}
-
- ))}
-
@@ -36,7 +32,46 @@ jest.mock('components/CardDetailsPage', () => {
)}
)
- })
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsSummary', () => {
+ return function MockSummary(props: { summary: string }) {
+ return {props.summary}
+ } +}) + +jest.mock('components/CardDetailsPage/CardDetailsMetadata', () => { + return function MockMetadata(props: { details?: Array<{ label: string; value: string }> }) { + return ( +
+ {props.details?.map((detail: { label: string; value: string }) => (
+
+ )
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsPageWrapper', () => {
+ return function MockWrapper({ children }: { children: React.ReactNode }) {
+ return
+ {detail.label}
+ {detail.value}
+
+ ))}
+ {children}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsRepositoriesModules', () => {
+ return function MockReposModules() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsTags', () => {
+ return function MockTags() {
+ return
+ }
})
jest.mock('@heroui/toast', () => ({
diff --git a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
index 7d0d18fe07..4afd72e511 100644
--- a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
@@ -302,4 +302,172 @@ describe('ProjectDetailsPage', () => {
expect(screen.getByText('Project Leader')).toBeInTheDocument()
})
})
+
+ test('renders contribution activity when contributionStats with total > 0 is provided', async () => {
+ ;(useQuery as unknown as jest.Mock).mockReturnValue({
+ data: {
+ ...mockProjectDetailsData,
+ project: {
+ ...mockProjectDetailsData.project,
+ contributionStats: {
+ commits: 50,
+ pullRequests: 20,
+ issues: 10,
+ releases: 5,
+ total: 85,
+ },
+ contributionData: undefined,
+ },
+ },
+ error: null,
+ loading: false,
+ })
+
+ render(LoadingSpinner
)
-jest.mock('components/CardDetailsPage', () => ({
- __esModule: true,
- default: function MockDetailsCard(props: {
- title?: string
- summary?: string
+jest.mock('components/CardDetailsPage/CardDetailsHeader', () => {
+ return function MockHeader(props: { title: string }) {
+ return {props.title}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsSummary', () => {
+ return function MockSummary(props: { summary: string }) {
+ return {props.summary}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsPageWrapper', () => {
+ return function MockWrapper({ children }: { children: React.ReactNode }) {
+ return {children}
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsMetadata', () => {
+ return function MockMetadata() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsTags', () => {
+ return function MockTags() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsContributors', () => {
+ return function MockContributors() {
+ return
+ }
+})
+
+jest.mock('components/CardDetailsPage/CardDetailsIssuesMilestones', () => {
+ return function MockIssuesMilestones(props: {
onLoadMorePullRequests?: () => void
onResetPullRequests?: () => void
- isFetchingMore?: boolean
}) {
return (
-
- {props.title}
- {props.summary}
+
+ 0) ||
+ (chapter.contributionData && Object.keys(chapter.contributionData).length > 0)
+ )
+ }
+ contributionStats={contributionStats}
+ contributionData={chapter.contributionData}
+ startDate={startDate}
+ endDate={endDate}
+ title="Chapter Contribution Activity"
+ />
+
+
)
}
diff --git a/frontend/src/app/committees/[committeeKey]/page.tsx b/frontend/src/app/committees/[committeeKey]/page.tsx
index ec937f14ef..dc44c49d9e 100644
--- a/frontend/src/app/committees/[committeeKey]/page.tsx
+++ b/frontend/src/app/committees/[committeeKey]/page.tsx
@@ -9,7 +9,11 @@ import { HiUserGroup } from 'react-icons/hi'
import { ErrorDisplay, handleAppError } from 'app/global-error'
import { GetCommitteeDataDocument } from 'types/__generated__/committeeQueries.generated'
import { formatDate } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsContributors from 'components/CardDetailsPage/CardDetailsContributors'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
import LoadingSpinner from 'components/LoadingSpinner'
export default function CommitteeDetailsPage() {
@@ -83,14 +87,20 @@ export default function CommitteeDetailsPage() {
]
return (
-
+
)
}
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index dabcbeca37..178274cd99 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -12,7 +12,14 @@ import { Badge } from 'types/badge'
import { User } from 'types/user'
import { formatDate } from 'utils/dateFormatter'
import Badges from 'components/Badges'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsContributions from 'components/CardDetailsPage/CardDetailsContributions'
+import CardDetailsContributors from 'components/CardDetailsPage/CardDetailsContributors'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsIssuesMilestones from 'components/CardDetailsPage/CardDetailsIssuesMilestones'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsRepositoriesModules from 'components/CardDetailsPage/CardDetailsRepositoriesModules'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
import ContributionHeatmap from 'components/ContributionHeatmap'
import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
@@ -194,27 +201,37 @@ const UserDetailsPage: React.FC = () => {
]
return (
-
+
)
}
diff --git a/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
index bb61608ba6..ac960340a7 100644
--- a/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
+++ b/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
@@ -10,7 +10,13 @@ import { GetProgramAdminsAndModulesDocument } from 'types/__generated__/moduleQu
import { Module } from 'types/mentorship'
import type { PullRequest } from 'types/pullRequest'
import { formatDate } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsContributors from 'components/CardDetailsPage/CardDetailsContributors'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsIssuesMilestones from 'components/CardDetailsPage/CardDetailsIssuesMilestones'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
+import CardDetailsTags from 'components/CardDetailsPage/CardDetailsTags'
import LoadingSpinner from 'components/LoadingSpinner'
import { getSimpleDuration } from 'components/ModuleCard'
@@ -87,64 +93,83 @@ const ModuleDetailsPage = () => {
return (
- visibleCount
- ? () => {
- if (isFetchingMore) return
- const currentLength = programModule.recentPullRequests?.length || 0
- if (hasMorePRs && currentLength < visibleCount + limit) {
- setIsFetchingMore(true)
- fetchMore({
- variables: {
- programKey,
- moduleKey,
- offset: currentLength,
- limit,
- },
- updateQuery: (prevResult, { fetchMoreResult }) => {
- if (!fetchMoreResult) return prevResult
- const newPRs = fetchMoreResult.getModule?.recentPullRequests || []
- if (newPRs.length < limit) setHasMorePRs(false)
- if (newPRs.length === 0) return prevResult
- return {
- ...prevResult,
- getModule: {
- ...prevResult.getModule!,
- recentPullRequests: [
- ...(prevResult.getModule?.recentPullRequests || []),
- ...newPRs,
- ],
- },
- }
- },
- })
- .catch((error) => handleAppError(error))
- .finally(() => setIsFetchingMore(false))
+
+ visibleCount
+ ? () => {
+ if (isFetchingMore) return
+ const currentLength = programModule.recentPullRequests?.length || 0
+ if (hasMorePRs && currentLength < visibleCount + limit) {
+ setIsFetchingMore(true)
+ fetchMore({
+ variables: {
+ programKey,
+ moduleKey,
+ offset: currentLength,
+ limit,
+ },
+ updateQuery: (prevResult, { fetchMoreResult }) => {
+ if (!fetchMoreResult) return prevResult
+ const newPRs = fetchMoreResult.getModule?.recentPullRequests || []
+ if (newPRs.length < limit) setHasMorePRs(false)
+ if (newPRs.length === 0) return prevResult
+ return {
+ ...prevResult,
+ getModule: {
+ ...prevResult.getModule!,
+ recentPullRequests: [
+ ...(prevResult.getModule?.recentPullRequests || []),
+ ...newPRs,
+ ],
+ },
+ }
+ },
+ })
+ .catch((error) => handleAppError(error))
+ .finally(() => setIsFetchingMore(false))
+ }
+ setVisibleCount((prev) => prev + limit)
}
- setVisibleCount((prev) => prev + limit)
- }
- : undefined
- }
- onResetPullRequests={
- visibleCount > limit && (programModule.recentPullRequests || []).length > limit
- ? () => setVisibleCount(limit)
- : undefined
- }
- />
+ : undefined
+ }
+ onResetPullRequests={
+ visibleCount > limit && (programModule.recentPullRequests || []).length > limit
+ ? () => setVisibleCount(limit)
+ : undefined
+ }
+ isFetchingMore={isFetchingMore}
+ />
+
)
}
diff --git a/frontend/src/app/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/page.tsx
index 113192332b..ede38a73a0 100644
--- a/frontend/src/app/mentorship/programs/[programKey]/page.tsx
+++ b/frontend/src/app/mentorship/programs/[programKey]/page.tsx
@@ -9,7 +9,12 @@ import { GetProgramAndModulesDocument } from 'types/__generated__/programsQuerie
import { titleCaseWord } from 'utils/capitalize'
import { formatDate } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsRepositoriesModules from 'components/CardDetailsPage/CardDetailsRepositoriesModules'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
+import CardDetailsTags from 'components/CardDetailsPage/CardDetailsTags'
import LoadingSpinner from 'components/LoadingSpinner'
const ProgramDetailsPage = () => {
@@ -68,20 +73,23 @@ const ProgramDetailsPage = () => {
return (
-
+
)
}
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
index c8c513195e..eb390450e6 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
@@ -8,7 +8,12 @@ import { ErrorDisplay, handleAppError } from 'app/global-error'
import { GetProgramAdminsAndModulesDocument } from 'types/__generated__/moduleQueries.generated'
import { Module } from 'types/mentorship'
import { formatDate } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsContributors from 'components/CardDetailsPage/CardDetailsContributors'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
+import CardDetailsTags from 'components/CardDetailsPage/CardDetailsTags'
import LoadingSpinner from 'components/LoadingSpinner'
import { getSimpleDuration } from 'components/ModuleCard'
@@ -63,21 +68,39 @@ const ModuleDetailsPage = () => {
return (
-
+
)
}
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
index bd2330609a..b19eb4c1d6 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx
@@ -13,7 +13,12 @@ import { GetProgramAndModulesDocument } from 'types/__generated__/programsQuerie
import type { ExtendedSession } from 'types/auth'
import { titleCaseWord } from 'utils/capitalize'
import { formatDate } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsRepositoriesModules from 'components/CardDetailsPage/CardDetailsRepositoriesModules'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
+import CardDetailsTags from 'components/CardDetailsPage/CardDetailsTags'
import LoadingSpinner from 'components/LoadingSpinner'
const ProgramDetailsPage = () => {
@@ -118,21 +123,35 @@ const ProgramDetailsPage = () => {
return (
-
+
)
}
diff --git a/frontend/src/app/organizations/[organizationKey]/page.tsx b/frontend/src/app/organizations/[organizationKey]/page.tsx
index 382314f9e0..a9dc324254 100644
--- a/frontend/src/app/organizations/[organizationKey]/page.tsx
+++ b/frontend/src/app/organizations/[organizationKey]/page.tsx
@@ -15,7 +15,13 @@ import type { RepositoryCardProps } from 'types/project'
import type { PullRequest } from 'types/pullRequest'
import type { Release } from 'types/release'
import { formatDate } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsContributors from 'components/CardDetailsPage/CardDetailsContributors'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsIssuesMilestones from 'components/CardDetailsPage/CardDetailsIssuesMilestones'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsRepositoriesModules from 'components/CardDetailsPage/CardDetailsRepositoriesModules'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
import OrganizationDetailsPageSkeleton from 'components/skeletons/OrganizationDetailsPageSkeleton'
const OrganizationDetailsPage = () => {
const { organizationKey } = useParams<{ organizationKey: string }>()
@@ -114,29 +120,41 @@ const OrganizationDetailsPage = () => {
]
return (
- ({
- ...release,
- publishedAt: release.publishedAt as string,
- })) as Release[]
- }
- recentMilestones={recentMilestones as Milestone[]}
- repositories={
- repositories?.map((repo) => ({
- ...repo,
- organization: repo.organization ? { login: repo.organization.login } : undefined,
- })) as RepositoryCardProps[]
- }
- stats={organizationStats}
- summary={organization.description}
- title={organization.name}
- topContributors={topContributors}
- type="organization"
- />
+
+ ({
+ ...release,
+ publishedAt: release.publishedAt as string,
+ })) as Release[]
+ }
+ showAvatar={true}
+ />
+
+ ({
+ ...repo,
+ organization: repo.organization ? { login: repo.organization.login } : undefined,
+ })) as RepositoryCardProps[]
+ }
+ />
+
)
}
diff --git a/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx b/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
index f1abaf8936..c3e179b211 100644
--- a/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
+++ b/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
@@ -9,8 +9,15 @@ import { HiUserGroup } from 'react-icons/hi'
import { handleAppError, ErrorDisplay } from 'app/global-error'
import { GetRepositoryDataDocument } from 'types/__generated__/repositoryQueries.generated'
import { formatDate } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import CardDetailsContributors from 'components/CardDetailsPage/CardDetailsContributors'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsIssuesMilestones from 'components/CardDetailsPage/CardDetailsIssuesMilestones'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
+import CardDetailsTags from 'components/CardDetailsPage/CardDetailsTags'
import LoadingSpinner from 'components/LoadingSpinner'
+import SponsorCard from 'components/SponsorCard'
const RepositoryDetailsPage = () => {
const { repositoryKey, organizationKey } = useParams<{
@@ -104,23 +111,42 @@ const RepositoryDetailsPage = () => {
},
]
return (
-
+
)
}
export default RepositoryDetailsPage
diff --git a/frontend/src/app/projects/[projectKey]/page.tsx b/frontend/src/app/projects/[projectKey]/page.tsx
index 456b060f16..36cadb03b0 100644
--- a/frontend/src/app/projects/[projectKey]/page.tsx
+++ b/frontend/src/app/projects/[projectKey]/page.tsx
@@ -17,8 +17,20 @@ import type { PullRequest } from 'types/pullRequest'
import type { Release } from 'types/release'
import { getContributionStats } from 'utils/contributionDataUtils'
import { formatDate, getDateRange } from 'utils/dateFormatter'
-import DetailsCard from 'components/CardDetailsPage'
+import { IS_PROJECT_HEALTH_ENABLED } from 'utils/env.client'
+import CardDetailsContributions from 'components/CardDetailsPage/CardDetailsContributions'
+import CardDetailsContributors from 'components/CardDetailsPage/CardDetailsContributors'
+import CardDetailsHeader from 'components/CardDetailsPage/CardDetailsHeader'
+import CardDetailsIssuesMilestones from 'components/CardDetailsPage/CardDetailsIssuesMilestones'
+import CardDetailsLeaders from 'components/CardDetailsPage/CardDetailsLeaders'
+import CardDetailsMetadata from 'components/CardDetailsPage/CardDetailsMetadata'
+import CardDetailsPageWrapper from 'components/CardDetailsPage/CardDetailsPageWrapper'
+import CardDetailsRepositoriesModules from 'components/CardDetailsPage/CardDetailsRepositoriesModules'
+import CardDetailsSummary from 'components/CardDetailsPage/CardDetailsSummary'
+import CardDetailsTags from 'components/CardDetailsPage/CardDetailsTags'
+import HealthMetrics from 'components/HealthMetrics'
import LoadingSpinner from 'components/LoadingSpinner'
+import SponsorCard from 'components/SponsorCard'
const ProjectDetailsPage = () => {
const { projectKey } = useParams<{ projectKey: string }>()
@@ -108,29 +120,64 @@ const ProjectDetailsPage = () => {
)
return (
-
+ 0) ||
+ (project.contributionData && Object.keys(project.contributionData).length > 0)
+ )
+ }
+ contributionStats={contributionStats}
+ contributionData={project.contributionData}
+ startDate={startDate}
+ endDate={endDate}
+ title="Project Contribution Activity"
+ />
+
+
)
}
diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
deleted file mode 100644
index 24a1d5d70c..0000000000
--- a/frontend/src/components/CardDetailsPage.tsx
+++ /dev/null
@@ -1,617 +0,0 @@
-import { Tooltip } from '@heroui/tooltip'
-import upperFirst from 'lodash/upperFirst'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useSession } from 'next-auth/react'
-import { useState } from 'react'
-import {
- FaCircleInfo,
- FaChartPie,
- FaFolderOpen,
- FaCode,
- FaTags,
- FaRectangleList,
- FaCalendar,
- FaCircleCheck,
- FaCircleExclamation,
- FaSignsPost,
- FaCodeBranch,
- FaChevronDown,
- FaChevronUp,
-} from 'react-icons/fa6'
-import { HiUserGroup } from 'react-icons/hi'
-import type { ExtendedSession } from 'types/auth'
-import type { DetailsCardProps } from 'types/card'
-import { formatDate } from 'utils/dateFormatter'
-import { IS_PROJECT_HEALTH_ENABLED } from 'utils/env.client'
-import { scrollToAnchor } from 'utils/scrollToAnchor'
-import { getMemberUrl, getMenteeUrl } from 'utils/urlFormatter'
-import { getSocialIcon } from 'utils/urlIconMappings'
-import AnchorTitle from 'components/AnchorTitle'
-import ChapterMapWrapper from 'components/ChapterMapWrapper'
-import ContributionHeatmap from 'components/ContributionHeatmap'
-import ContributionStats from 'components/ContributionStats'
-import ContributorsList from 'components/ContributorsList'
-import EntityActions from 'components/EntityActions'
-import HealthMetrics from 'components/HealthMetrics'
-import InfoBlock from 'components/InfoBlock'
-import Leaders from 'components/Leaders'
-import LeadersList from 'components/LeadersList'
-import Markdown from 'components/MarkdownWrapper'
-import MentorshipPullRequest from 'components/MentorshipPullRequest'
-import MetricsScoreCircle from 'components/MetricsScoreCircle'
-import Milestones from 'components/Milestones'
-import ModuleCard from 'components/ModuleCard'
-import RecentIssues from 'components/RecentIssues'
-import RecentPullRequests from 'components/RecentPullRequests'
-import RecentReleases from 'components/RecentReleases'
-import RepositoryCard from 'components/RepositoryCard'
-import SecondaryCard from 'components/SecondaryCard'
-import ShowMoreButton from 'components/ShowMoreButton'
-import SponsorCard from 'components/SponsorCard'
-import StatusBadge from 'components/StatusBadge'
-import ToggleableList from 'components/ToggleableList'
-
-import { TruncatedText } from 'components/TruncatedText'
-
-export type CardType =
- | 'chapter'
- | 'committee'
- | 'module'
- | 'organization'
- | 'program'
- | 'project'
- | 'repository'
- | 'user'
-
-const showStatistics = (type: CardType): boolean =>
- ['committee', 'organization', 'project', 'repository', 'user'].includes(type)
-
-const showIssuesAndMilestones = (type: CardType): boolean =>
- ['organization', 'project', 'repository', 'user'].includes(type)
-
-const showPullRequestsAndReleases = (type: CardType): boolean =>
- ['organization', 'project', 'repository', 'user'].includes(type)
-
-const MILESTONE_LIMIT = 4
-
-const DetailsCard = ({
- description,
- details,
- accessLevel,
- contributionData,
- contributionStats,
- endDate,
- startDate,
- status,
- setStatus,
- canUpdateStatus,
- tags,
- domains,
- entityLeaders,
- labels,
- modules,
- mentors,
- mentees,
- admins,
- entityKey,
- geolocationData = [],
- healthMetricsData,
- isActive = true,
- isArchived = false,
- languages,
- onLoadMorePullRequests,
- onResetPullRequests,
- isFetchingMore,
- programKey,
- projectName,
- pullRequests,
- recentIssues,
- recentMilestones,
- recentReleases,
- repositories = [],
- showAvatar = true,
- socialLinks,
- stats,
- summary,
- title,
- topContributors,
- topics,
- type,
- userSummary,
-}: DetailsCardProps) => {
- const { data: session } = useSession() as { data: ExtendedSession | null }
- const [showAllPRs, setShowAllPRs] = useState(false)
- const [showAllMilestones, setShowAllMilestones] = useState(false)
-
- // compute styles based on type prop
- const typeStylesMap: Record = {
- chapter: 'gap-2 md:col-span-3',
- committee: 'gap-2 md:col-span-5',
- module: 'gap-2 md:col-span-7',
- organization: 'gap-2 md:col-span-5',
- program: 'gap-2 md:col-span-7',
- project: 'gap-2 md:col-span-5',
- repository: 'gap-2 md:col-span-5',
- user: 'gap-2 md:col-span-5',
- }
-
- const hasContributions =
- (contributionStats && contributionStats.total > 0) ||
- (contributionData && Object.keys(contributionData).length > 0)
-
- const secondaryCardStyles = typeStylesMap[type] ?? 'gap-2 md:col-span-5'
-
- const prDisplayLimit = onLoadMorePullRequests || onResetPullRequests || showAllPRs ? undefined : 4
-
- return (
-
+ startDate?: string
+ endDate?: string
+ title?: string
+}
+
+const CardDetailsContributions = ({
+ hasContributions,
+ contributionStats,
+ contributionData,
+ startDate,
+ endDate,
+ title = 'Contribution Activity',
+}: CardDetailsContributionsProps) => {
+ if (!hasContributions) {
+ return null
+ }
+
+ return (
+ getMenteeUrl(programKey || '', entityKey || '', login)}
+ />
+ )}
+
+ )
+}
+
+export default CardDetailsContributors
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsHeader.tsx b/frontend/src/components/CardDetailsPage/CardDetailsHeader.tsx
new file mode 100644
index 0000000000..c22b5a411d
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsHeader.tsx
@@ -0,0 +1,106 @@
+import { useSession } from 'next-auth/react'
+import type { ComponentProps } from 'react'
+import type { ExtendedSession } from 'types/auth'
+import { IS_PROJECT_HEALTH_ENABLED } from 'utils/env.client'
+import { scrollToAnchor } from 'utils/scrollToAnchor'
+import EntityActions from 'components/EntityActions'
+import MetricsScoreCircle from 'components/MetricsScoreCircle'
+import StatusBadge from 'components/StatusBadge'
+
+export interface CardDetailsHeaderProps {
+ title?: string
+ description?: string
+ status?: string
+ setStatus?: ComponentProps['setStatus']
+ canUpdateStatus?: boolean
+ programKey?: string
+ moduleKey?: string
+ entityKey?: string
+ accessLevel?: string
+ admins?: Array<{ login: string }>
+ mentors?: Array<{ login: string }>
+ isActive?: boolean
+ isArchived?: boolean
+ healthMetricsData?: Array<{ score?: number }>
+ showProgramActions?: boolean
+ showModuleActions?: boolean
+ showArchivedBadge?: boolean
+ showHealthMetrics?: boolean
+}
+
+const CardDetailsHeader = ({
+ title,
+ description,
+ status,
+ setStatus,
+ canUpdateStatus,
+ programKey,
+ moduleKey,
+ entityKey: _entityKey,
+ accessLevel,
+ admins,
+ mentors,
+ isActive = true,
+ isArchived = false,
+ healthMetricsData,
+ showProgramActions,
+ showModuleActions,
+ showArchivedBadge,
+ showHealthMetrics,
+}: CardDetailsHeaderProps) => {
+ const { data: session } = useSession() as { data: ExtendedSession | null }
+
+ return (
+ <>
+ setShowAllMilestones(!showAllMilestones)} />
+ )}
+
+ )}
+
+ )
+}
+
+export default CardDetailsIssuesMilestones
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsLeaders.tsx b/frontend/src/components/CardDetailsPage/CardDetailsLeaders.tsx
new file mode 100644
index 0000000000..76ce5726ac
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsLeaders.tsx
@@ -0,0 +1,18 @@
+import type { Leader } from 'types/leader'
+import Leaders from 'components/Leaders'
+
+interface CardDetailsLeadersProps {
+ entityLeaders?: Leader[] | null
+}
+
+export default function CardDetailsLeaders({ entityLeaders }: Readonly) {
+ if (!entityLeaders || entityLeaders.length === 0) {
+ return null
+ }
+
+ return (
+ = ({ children }) => {
+ return (
+ {userSummary} }
+
+ )
+}
+
+export default CardDetailsSummary
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsTags.tsx b/frontend/src/components/CardDetailsPage/CardDetailsTags.tsx
new file mode 100644
index 0000000000..5260e7cdb6
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsTags.tsx
@@ -0,0 +1,98 @@
+import { FaCode, FaTags, FaChartPie } from 'react-icons/fa6'
+import AnchorTitle from 'components/AnchorTitle'
+import ToggleableList from 'components/ToggleableList'
+
+interface CardDetailsTagsProps {
+ entityKey?: string
+ languages?: string[]
+ topics?: string[]
+ tags?: string[]
+ domains?: string[]
+ labels?: string[]
+}
+
+const CardDetailsTags = ({
+ entityKey,
+ languages,
+ topics,
+ tags,
+ domains,
+ labels,
+}: CardDetailsTagsProps) => {
+ const hasLanguagesOrTopics = (languages?.length || 0) > 0 || (topics?.length || 0) > 0
+ const hasTagsDomainsOrLabels =
+ (tags?.length || 0) > 0 || (domains?.length || 0) > 0 || (labels?.length || 0) > 0
+
+ // Languages and Topics section
+ if (hasLanguagesOrTopics) {
+ return (
+
{props.onLoadMorePullRequests && (
)
- },
-}))
+ }
+})
const createPullRequest = (index: number) => ({
id: `pr-${index}`,
@@ -151,8 +182,8 @@ describe('PublicMentorshipModulePage', () => {
})
render(
-
- )
-}
-
-export default DetailsCard
-
-const SocialLinks = ({ urls }: { urls: string[] }) => {
- if (!urls || urls.length === 0) return null
- return (
-
- {userSummary} }
- getMenteeUrl(programKey || '', entityKey || '', login)}
- />
- )}
- {showIssuesAndMilestones(type) && (
- setShowAllMilestones(!showAllMilestones)} />
- )}
-
- )}
- {IS_PROJECT_HEALTH_ENABLED &&
- type === 'project' &&
- healthMetricsData &&
- healthMetricsData.length > 0 &&
-
-
-
-
- {title}
-
- {type === 'program' && accessLevel === 'admin' && canUpdateStatus && programKey && (
- scrollToAnchor('issues-trend')}
- />
- )}
-
- {description}
- {summary && ( -
-
- {(type === 'project' || type === 'repository') && (languages || topics) && (
-
- {detail.label}:{' '}
-
- ) : (
-
- {detail.label}: {detail?.value || 'Unknown'}
-
- )
- )}
- {socialLinks && (type === 'chapter' || type === 'committee') && (
-
-
- ))}
-
- )}
- {type === 'chapter' && geolocationData && geolocationData.length > 0 && (
-
-
- )}
-
- {languages && languages.length !== 0 && (
-
- )}
- {(type === 'program' || type === 'module') && (
- <>
- {((tags?.length || 0) > 0 || (domains?.length || 0) > 0) && (
-
- {tags && tags.length > 0 && (
-
- )}
- {labels && labels.length > 0 && (
-
-
- )}
-
- )}
- {entityLeaders && entityLeaders.length > 0 &&
-
- )}
- {topContributors && (
-
- {contributionStats && (
-
-
-
- )}
-
-
-
- {recentIssues &&
- )}
- {showPullRequestsAndReleases(type) && (
-
- {pullRequests &&
- )}
-
- {type === 'module' && pullRequests && pullRequests.length > 0 && (
-
- {pullRequests.slice(0, prDisplayLimit).map((pr) => (
- setShowAllPRs(!showAllPRs)} />
- )}
-
-
- )}
- {(type === 'project' || type === 'user' || type === 'organization') &&
- repositories.length > 0 && (
-
- {onLoadMorePullRequests && (
-
- )}
-
- {onResetPullRequests && (
-
- )}
-
- )}
-
- {!onLoadMorePullRequests && !onResetPullRequests && pullRequests.length > 4 && (
-
-
- ) : (
-
- {recentMilestones
- .slice(0, showAllMilestones ? recentMilestones.length : MILESTONE_LIMIT)
- .map((milestone, index) => (
-
- {recentMilestones.length > MILESTONE_LIMIT && (
-
-
- ))}
-
-
-
- {showAvatar && milestone?.author?.login && milestone?.author?.avatarUrl && (
-
-
-
- )}
-
- {milestone?.url ? (
-
-
-
-
- {milestone?.url ? (
-
-
-
-
-
-
-
-
-
-
-
-
- {milestone?.repositoryName && milestone?.organizationName && (
-
-
- )}
-
- Social Links
-
- )
-}
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsContributions.tsx b/frontend/src/components/CardDetailsPage/CardDetailsContributions.tsx
new file mode 100644
index 0000000000..5706cdc83b
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsContributions.tsx
@@ -0,0 +1,47 @@
+import type { ContributionStats as ContributionStatsType } from 'utils/contributionDataUtils'
+import ContributionHeatmap from 'components/ContributionHeatmap'
+import ContributionStats from 'components/ContributionStats'
+
+interface CardDetailsContributionsProps {
+ hasContributions: boolean
+ contributionStats?: ContributionStatsType
+ contributionData?: Record
- {urls.map((url: string) => {
- const SocialIcon = getSocialIcon(url)
- return (
-
-
-
+
+ )
+}
+
+export default CardDetailsContributions
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsContributors.tsx b/frontend/src/components/CardDetailsPage/CardDetailsContributors.tsx
new file mode 100644
index 0000000000..c6bdbad54b
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsContributors.tsx
@@ -0,0 +1,65 @@
+import { HiUserGroup } from 'react-icons/hi'
+import type { Contributor } from 'types/contributor'
+import { getMemberUrl, getMenteeUrl } from 'utils/urlFormatter'
+import ContributorsList from 'components/ContributorsList'
+
+interface CardDetailsContributorsProps {
+ entityKey?: string
+ programKey?: string
+ topContributors?: Contributor[]
+ admins?: Contributor[]
+ mentors?: Contributor[]
+ mentees?: Contributor[]
+}
+
+const CardDetailsContributors = ({
+ entityKey,
+ programKey,
+ topContributors,
+ admins,
+ mentors,
+ mentees,
+}: CardDetailsContributorsProps) => {
+ return (
+ <>
+ {topContributors && (
+
+ {contributionStats &&
+
+
+ )}
+
+
+
+
+ {description &&
+
+ {title || ''}
+
+ {showProgramActions && canUpdateStatus && programKey && (
+ scrollToAnchor('issues-trend')}
+ />
+ )}
+
+ {description}
} + + ) +} + +export default CardDetailsHeader diff --git a/frontend/src/components/CardDetailsPage/CardDetailsIssuesMilestones.tsx b/frontend/src/components/CardDetailsPage/CardDetailsIssuesMilestones.tsx new file mode 100644 index 0000000000..8a906878ad --- /dev/null +++ b/frontend/src/components/CardDetailsPage/CardDetailsIssuesMilestones.tsx @@ -0,0 +1,208 @@ +import { Tooltip } from '@heroui/tooltip' +import Image from 'next/image' +import Link from 'next/link' +import { useState } from 'react' +import { + FaCalendar, + FaCircleCheck, + FaCircleExclamation, + FaFolderOpen, + FaSignsPost, + FaCodeBranch, + FaChevronDown, + FaChevronUp, +} from 'react-icons/fa6' +import type { Issue } from 'types/issue' +import type { Milestone } from 'types/milestone' +import type { PullRequest } from 'types/pullRequest' +import type { Release } from 'types/release' +import { formatDate } from 'utils/dateFormatter' +import AnchorTitle from 'components/AnchorTitle' +import MentorshipPullRequest from 'components/MentorshipPullRequest' +import Milestones from 'components/Milestones' +import RecentIssues from 'components/RecentIssues' +import RecentPullRequests from 'components/RecentPullRequests' +import RecentReleases from 'components/RecentReleases' +import SecondaryCard from 'components/SecondaryCard' +import ShowMoreButton from 'components/ShowMoreButton' +import { TruncatedText } from 'components/TruncatedText' + +interface CardDetailsIssuesMilestonesProps { + recentIssues?: Issue[] + recentMilestones?: Milestone[] + pullRequests?: PullRequest[] + recentReleases?: Release[] + showAvatar?: boolean + onLoadMorePullRequests?: () => void + onResetPullRequests?: () => void + isFetchingMore?: boolean + isMilestoneOnly?: boolean + isPullRequestOnly?: boolean +} + +const MILESTONE_LIMIT = 4 + +const CardDetailsIssuesMilestones = ({ + recentIssues, + recentMilestones, + pullRequests, + recentReleases, + showAvatar = true, + onLoadMorePullRequests, + onResetPullRequests, + isFetchingMore = false, + isMilestoneOnly = false, + isPullRequestOnly = false, +}: CardDetailsIssuesMilestonesProps) => { + const [showAllMilestones, setShowAllMilestones] = useState(false) + const [showAllPRs, setShowAllPRs] = useState(false) + + const prDisplayLimit = onLoadMorePullRequests || onResetPullRequests || showAllPRs ? undefined : 4 + + return ( + <> + {!isMilestoneOnly && !isPullRequestOnly && ( +
+ {recentIssues &&
+ )}
+ {!isMilestoneOnly && !isPullRequestOnly && (
+
+ {pullRequests &&
+ )}
+ {isPullRequestOnly && pullRequests && pullRequests.length > 0 && (
+
+ {pullRequests.slice(0, prDisplayLimit).map((pr) => (
+ setShowAllPRs(!showAllPRs)} />
+ )}
+
+
+ )}
+ {isMilestoneOnly && recentMilestones && recentMilestones.length > 0 && (
+
+ {onLoadMorePullRequests && (
+
+ )}
+
+ {onResetPullRequests && (
+
+ )}
+
+ )}
+
+ {!onLoadMorePullRequests && !onResetPullRequests && pullRequests.length > 4 && (
+
+ {recentMilestones
+ .slice(0, showAllMilestones ? recentMilestones.length : MILESTONE_LIMIT)
+ .map((milestone, index) => (
+
+ {recentMilestones.length > MILESTONE_LIMIT && (
+
+
+ ))}
+
+
+
+ {showAvatar && milestone?.author?.login && milestone?.author?.avatarUrl && (
+
+
+
+ )}
+
+ {milestone?.url ? (
+
+
+
+
+ {milestone?.url ? (
+
+
+
+
+
+
+
+
+
+
+
+
+ {milestone?.repositoryName && milestone?.organizationName && (
+
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsMetadata.tsx b/frontend/src/components/CardDetailsPage/CardDetailsMetadata.tsx
new file mode 100644
index 0000000000..24e0ac4803
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsMetadata.tsx
@@ -0,0 +1,124 @@
+import type { JSX } from 'react'
+import { FaChartPie, FaRectangleList } from 'react-icons/fa6'
+import type { Stats } from 'types/card'
+import type { Chapter } from 'types/chapter'
+import { getSocialIcon } from 'utils/urlIconMappings'
+import AnchorTitle from 'components/AnchorTitle'
+import ChapterMapWrapper from 'components/ChapterMapWrapper'
+import InfoBlock from 'components/InfoBlock'
+import LeadersList from 'components/LeadersList'
+import SecondaryCard from 'components/SecondaryCard'
+
+interface CardDetailsMetadataProps {
+ details?: Array<{ label: string; value: string | JSX.Element }>
+ entityKey?: string
+ stats?: Stats[]
+ geolocationData?: Chapter[]
+ socialLinks?: string[]
+ showStatistics?: boolean
+ showGeolocation?: boolean
+ showSocialLinks?: boolean
+ detailsTitle?: string
+}
+
+const CardDetailsMetadata = ({
+ details,
+ entityKey,
+ stats,
+ geolocationData = [],
+ socialLinks,
+ showStatistics = !!stats,
+ showGeolocation = false,
+ showSocialLinks = false,
+ detailsTitle = 'Details',
+}: CardDetailsMetadataProps) => {
+ return (
+
+
+ )
+}
+
+const SocialLinks = ({ urls }: { urls: string[] }) => {
+ if (!urls || urls.length === 0) return null
+ return (
+
+ {detail.label}:{' '}
+
+ ) : (
+
+ {detail.label}: {detail?.value || 'Unknown'}
+
+ )
+ )}
+ {showSocialLinks && socialLinks &&
+
+ ))}
+
+ )}
+ {showGeolocation && geolocationData && geolocationData.length > 0 && (
+
+
+ )}
+
+ Social Links
+
+ )
+}
+
+export default CardDetailsMetadata
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsPageWrapper.tsx b/frontend/src/components/CardDetailsPage/CardDetailsPageWrapper.tsx
new file mode 100644
index 0000000000..ff345a25e2
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsPageWrapper.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface CardDetailsPageWrapperProps {
+ children: React.ReactNode
+}
+
+const CardDetailsPageWrapper: React.FC
+ {urls.map((url: string) => {
+ const SocialIcon = getSocialIcon(url)
+ return (
+
+
+
+
+ )
+}
+
+export default CardDetailsPageWrapper
diff --git a/frontend/src/components/CardDetailsPage/CardDetailsRepositoriesModules.tsx b/frontend/src/components/CardDetailsPage/CardDetailsRepositoriesModules.tsx
new file mode 100644
index 0000000000..353d03be20
--- /dev/null
+++ b/frontend/src/components/CardDetailsPage/CardDetailsRepositoriesModules.tsx
@@ -0,0 +1,63 @@
+import { FaFolderOpen } from 'react-icons/fa6'
+import type { Module } from 'types/mentorship'
+import type { RepositoryCardProps } from 'types/project'
+import AnchorTitle from 'components/AnchorTitle'
+import ModuleCard from 'components/ModuleCard'
+import RepositoryCard from 'components/RepositoryCard'
+import SecondaryCard from 'components/SecondaryCard'
+
+interface CardDetailsRepositoriesModulesProps {
+ programKey?: string
+ accessLevel?: string
+ repositories?: RepositoryCardProps[]
+ modules?: Module[]
+ admins?: Array<{ login: string }>
+}
+
+const CardDetailsRepositoriesModules = ({
+ programKey,
+ accessLevel,
+ repositories = [],
+ modules,
+ admins,
+}: CardDetailsRepositoriesModulesProps) => {
+ return (
+ <>
+ {repositories.length > 0 && (
+ {children}
+
+
+ ) : (
+
+ {languages && languages.length !== 0 && (
+
+ )
+ }
+
+ // Tags, Domains, and Labels section
+ if (hasTagsDomainsOrLabels) {
+ return (
+ <>
+ {((tags?.length || 0) > 0 || (domains?.length || 0) > 0) && (
+
+ {tags && tags.length > 0 && (
+
+ )}
+ {labels && labels.length > 0 && (
+
+
+ )}
+
+ )
+ }
+
+ return null
+}
+
+export default CardDetailsTags
diff --git a/frontend/src/types/card.ts b/frontend/src/types/card.ts
index 4615a5f89d..7682167194 100644
--- a/frontend/src/types/card.ts
+++ b/frontend/src/types/card.ts
@@ -15,7 +15,6 @@ import type { RepositoryCardProps } from 'types/project'
import type { PullRequest } from 'types/pullRequest'
import type { Release } from 'types/release'
import type { ContributionStats } from 'utils/contributionDataUtils'
-import type { CardType } from 'components/CardDetailsPage'
export type CardProps = {
button: Button
@@ -38,7 +37,7 @@ export type CardProps = {
url: string
}
-type Stats = {
+export type Stats = {
icon: IconType
pluralizedName?: string
unit?: string
@@ -87,7 +86,6 @@ export interface DetailsCardProps {
topContributors?: Contributor[]
topics?: string[]
tags?: string[]
- type: CardType
userSummary?: JSX.Element
}