refactor: nested ternary operators into independent statements

[ishanBahuguna]

Proposed change

Resolves #2520

Tasks

• Exclude valid JSX conditional rendering patterns (if not nested)
• Refactor each nested ternary into independent statements
• Use descriptive variable names for intermediate values
• Update unit tests if necessary
• Verify no breaking changes in functionality

Checklist

• I've read and followed the contributing guidelines.
• I've run make check-test locally; all checks and tests passed.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

• Tests

  • Added comprehensive unit tests for milestone progress utilities.
  • Enhanced test coverage for component alignment and icon rendering behaviors.

• Improvements

  • Standardized milestone progress indicators using centralized utilities for consistent text and icon display.
  • Refactored internal component logic for improved code readability and maintainability.

Walkthrough

This pull request refactors multiple frontend files to extract inline conditional logic into explicit variables, constants, and helper functions for improved code clarity. It introduces a new milestoneProgress utility module with helpers for milestone text and icon selection, and adds corresponding unit tests. Changes maintain existing behavior while enhancing readability.

Changes

Cohort / File(s)	Summary
Test Mock Refactoring frontend/__tests__/unit/components/ModuleList.test.tsx, frontend/__tests__/unit/components/ProgramCard.test.tsx	Refactors FontAwesomeIcon test mocks by replacing inline ternary logic with explicit if/else blocks to determine icon names and data-testid mappings. Behavior remains functionally equivalent.
New Test Coverage frontend/__tests__/unit/pages/ProjectsHealthDashboardMetrics.test.tsx, frontend/__tests__/unit/utils/milestoneProgress.test.ts	Adds unit tests for SortableColumnHeader alignment classes and new milestoneProgress helper functions (getMilestoneProgressText and getMilestoneProgressIcon with various progress values).
Milestone Progress Utility frontend/src/utils/milestoneProgress.ts	Introduces new utility module exporting getMilestoneProgressText() and getMilestoneProgressIcon() helpers to centralize milestone progress representation logic with FontAwesome icon mappings.
Utility Usage & Component Refactoring frontend/src/app/about/page.tsx	Replaces hard-coded milestone icon (faUserGear) and tooltip text with dynamic calls to milestoneProgress helpers; updates imports accordingly.
Conditional Logic Extraction frontend/src/app/global-error.tsx, frontend/src/app/projects/dashboard/metrics/page.tsx, frontend/src/components/CardDetailsPage.tsx, frontend/src/components/ProgramCard.tsx, frontend/src/hooks/useSearchPage.ts	Extracts inline ternary expressions and conditionals into named constants/variables (alignmentClass, textAlignClass, fontAwesomeIconType, secondaryCardStyles, dateInfo, computedIndexName) for improved readability.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Multiple files with consistent refactoring patterns (reduces per-file complexity)
• New utility module with straightforward conditional logic requires validation of correctness
• Test additions need verification of coverage completeness
• New test in ProjectsHealthDashboardMetrics requires understanding of the component's HTML structure
• Refactored files spread across different domains (hooks, components, pages) requiring context-switching

Possibly related PRs

• UI/ux mentorship program update #2244: Modifies frontend/src/components/ProgramCard.tsx alongside this PR; main PR centralizes date rendering via dateInfo constant while related PR overhauls layout/tooltip behavior in same file.
• Improve roadmap visualization #1514: Both PRs modify milestone/roadmap rendering in frontend/src/app/about/page.tsx; related PR adds recentMilestones inline logic while main PR extracts that logic into milestoneProgress helpers.
• Implement the detailed metrics dashboard page #1748: Both PRs modify frontend/src/app/projects/dashboard/metrics/page.tsx; related PR affects same metrics dashboard code with overlapping concerns.

Suggested labels

frontend, frontend-tests, refactoring

Suggested reviewers

• arkid15r
• kasya

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f86ed08 and 623b972.

📒 Files selected for processing (11)

• frontend/__tests__/unit/components/ModuleList.test.tsx (1 hunks)
• frontend/__tests__/unit/components/ProgramCard.test.tsx (1 hunks)
• frontend/__tests__/unit/pages/ProjectsHealthDashboardMetrics.test.tsx (2 hunks)
• frontend/__tests__/unit/utils/milestoneProgress.test.ts (1 hunks)
• frontend/src/app/about/page.tsx (2 hunks)
• frontend/src/app/global-error.tsx (1 hunks)
• frontend/src/app/projects/dashboard/metrics/page.tsx (2 hunks)
• frontend/src/components/CardDetailsPage.tsx (2 hunks)
• frontend/src/components/ProgramCard.tsx (2 hunks)
• frontend/src/hooks/useSearchPage.ts (1 hunks)
• frontend/src/utils/milestoneProgress.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

The PR must be linked to an issue assigned to the PR author.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud