✨ Add data export functionality for GitHub issues and PRs #184 #185
Conversation
- Add CSV and JSON export formats - Create reusable ExportButton component with dropdown menu - Implement export utilities with proper error handling - Add export options for current tab and all data - Support filtered data export (respects search, date, repo filters) - Include success/error notifications with react-hot-toast - Add automatic filename generation with timestamps - Enhance GitHub data hook to include user and labels info - Add comprehensive documentation and basic tests - Improve user experience with disabled states and item counts Fixes: Data export functionality for better data analysis and backup
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis change introduces a comprehensive data export feature for GitHub issues and pull requests. It adds a new export button UI, utility functions for CSV and JSON export, filename generation, error handling, and corresponding documentation and tests. The export options are integrated into the tracker page and support exporting filtered or all data. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TrackerPage
participant ExportButton
participant exportUtils
User->>TrackerPage: Clicks "Export" button
TrackerPage->>ExportButton: Renders with data, username, type
User->>ExportButton: Selects CSV or JSON
ExportButton->>exportUtils: Calls exportToCSV/exportToJSON(data, filename)
exportUtils->>ExportButton: Triggers file download or error
ExportButton->>User: Shows toast notification (success/error)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Possibly related issues
Suggested labels
Suggested reviewers
Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @manasdutta04 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (14)
src/utils/exportUtils.ts (2)
13-46: Improve repository name extraction for better clarity.The CSV export logic is well-implemented with proper quote escaping and error handling. However, consider including the repository owner in the repository name for better clarity.
Apply this diff to include the owner name:
- `"${item.repository_url.split('/').slice(-1)[0]}"`, + `"${item.repository_url.split('/').slice(-2).join('/')}"`,This will export repository names as "owner/repo" instead of just "repo", making them more informative and consistent with GitHub's standard naming convention.
48-67: Apply consistent repository name extraction.The JSON export function is well-structured with proper error handling and data transformation. Apply the same repository name improvement as suggested for the CSV function.
Apply this diff:
- repository: item.repository_url.split('/').slice(-1)[0], + repository: item.repository_url.split('/').slice(-2).join('/'),src/utils/__tests__/exportUtils.test.ts (1)
65-84: Consider enhancing test coverage.The current tests effectively verify error handling and basic success cases. Consider adding tests to verify the actual CSV/JSON content structure and data transformation logic.
Example additional test:
it('should generate correct CSV structure', () => { const consoleSpy = jest.spyOn(console, 'log').mockImplementation(); const csvContent = exportToCSV(mockData, 'test.csv'); // Verify CSV headers and data structure expect(csvContent).toContain('ID,Title,State,Type,Repository'); consoleSpy.mockRestore(); });src/components/ExportButton.tsx (1)
1-33: Consider consolidating interface definitions.The component imports and structure look good. However, the
GitHubIteminterface is duplicated fromexportUtils.ts. Consider creating a shared types file or importing the interface to maintain DRY principles.Create a shared
src/types/github.tsfile:export interface GitHubItem { id: number; title: string; state: string; created_at: string; pull_request?: { merged_at: string | null }; repository_url: string; html_url: string; user?: { login: string }; labels?: Array<{ name: string }>; }Then import it in both files:
import { GitHubItem } from '../types/github';docs/EXPORT_FEATURE.md (10)
20-29: Clarify CSV column semantics (state, repository, date, labels).
- “State” lists “merged” which GitHub’s Issues/PR API doesn’t return in the state field for PRs (it’s a separate merged flag). If you map merged PRs to “merged,” please document that mapping. Also note that Issues will only be open/closed.
- “Repository” says “Repository name”; consider using/clarifying “owner/repo” to avoid collisions across orgs/users.
- “Created Date” says “local format.” Localized strings are ambiguous in CSV. Please document the exact format and timezone, and note that JSON uses ISO-8601. If possible, prefer ISO-8601 for CSV too.
- “Labels” are comma-separated, which clashes with CSV’s delimiter. Confirm that label strings and titles are properly CSV-escaped (quotes, commas, newlines).
Apply this doc tweak for precision:
- - State: Current state (open, closed, merged) - - Repository: Repository name - - Created Date: Creation date in local format - - Labels: Comma-separated list of labels + - State: Current state. Issues: open/closed. PRs: open/closed; merged PRs are reported as "merged" via a custom mapping. + - Repository: Full repository identifier (owner/repo) to avoid name collisions. + - Created Date: Creation timestamp. CSV uses <document exact format/timezone here>; JSON uses ISO-8601 (UTC). + - Labels: Comma-separated; values are CSV-escaped to handle commas/quotes/newlines safely (RFC 4180).
31-45: Ensure field names and date formats match the actual export payload.The example uses “createdDate”. If utilities emit “createdAt” (GitHub-style) or a different casing, please align docs and code. Also state the timezone (example shows Z/UTC).
Proposed clarification:
- "createdDate": "2024-01-15T10:30:00Z", + "createdAt": "2024-01-15T10:30:00Z", // ISO-8601 UTC (Z)
49-56: Add required token scopes and a quick link.You mention entering a token; specify scopes so users don’t get empty exports due to insufficient permissions (e.g., private repos/orgs).
2. Enter your GitHub username and token + - Required scopes: public data needs no extra scopes; private repos/orgs may require `repo` and `read:org`. + - See: https://github.com/settings/tokens (create a fine-grained token with least privileges).
12-16: Clarify “Export All” structure for CSV.If “Export All” produces a single CSV containing both Issues and PRs, call out that the “Type” column disambiguates rows and that headers are unified.
- 2. **Export All**: Export both issues and pull requests in a single file + 2. **Export All**: Export both issues and pull requests in a single file. The "Type" column labels each row as Issue or Pull Request.
70-78: Align naming convention with “timestamps” claim; include timezone.PR summary mentions timestamps but examples only show dates. Recommend including time to prevent filename collisions and documenting timezone.
-Files are automatically named using the pattern: -`github-{username}-{type}-{date}.{format}` +Files are automatically named using the pattern: +`github-{username}-{type}-{timestamp}.{format}` +Where `{timestamp}` is `YYYY-MM-DD_HH-mm-ss` in UTC (e.g., 2025-08-10_14-30-05). @@ -- `github-johndoe-issues-2024-01-15.csv` -- `github-johndoe-prs-2024-01-15.json` -- `github-johndoe-all-2024-01-15.csv` +- `github-johndoe-issues-2025-08-10_14-30-05.csv` +- `github-johndoe-prs-2025-08-10_14-30-05.json` +- `github-johndoe-all-2025-08-10_14-30-05.csv`
81-90: Link directly to source for quick navigation.Add relative links to files to improve discoverability in the repo.
-- `ExportButton.tsx`: Main export component with dropdown menu -- `exportUtils.ts`: Utility functions for data processing and file generation +- [`src/components/ExportButton.tsx`](../src/components/ExportButton.tsx): Main export component with dropdown menu +- [`src/utils/exportUtils.ts`](../src/utils/exportUtils.ts): Utility functions for data processing and file generation
91-96: Document rate limits and large-export behavior.Exports over many pages may be impacted by GitHub API rate limits and pagination. Note how the UI handles partial data, retries, and user feedback.
- Empty data validation - Format-specific error handling - User-friendly error messages via toast notifications - Success confirmations + - Graceful handling of GitHub API rate limits (inform users and suggest retry) and large datasets (pagination status and progress).
97-101: Browser nuances (Safari/iOS) for downloads.Add a note about Safari/iOS download limitations and fallbacks for the anchor download attribute with Blob URLs.
- Modern browsers with Blob API support - File download functionality - No server-side processing required + - Note: iOS Safari has limited support for programmatic downloads; users may be prompted to preview before saving.
3-11: CSV format specification.State that CSV output follows RFC 4180 (commas as delimiter, CRLF line endings, quotes escaping) to set expectations for consumers.
## Features @@ - **CSV Format**: Spreadsheet-compatible format perfect for Excel, Google Sheets, or data analysis tools + - CSV adheres to RFC 4180 (commas as delimiters, quoted fields for commas/quotes/newlines). - **JSON Format**: Developer-friendly format ideal for programmatic processing or API integration
97-108: Add a Privacy & Security note.Explicitly confirm that no tokens or secrets are included in exports and remind users about sharing exported data.
## Future Enhancements +## Privacy & Security +- Exported files contain only issue/PR metadata (titles, labels, authors, URLs). Authentication tokens and secrets are never written to files. +- Be cautious when sharing exports that may contain organization-internal data.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/EXPORT_FEATURE.md(1 hunks)src/components/ExportButton.tsx(1 hunks)src/hooks/useGitHubData.ts(1 hunks)src/pages/Tracker/Tracker.tsx(4 hunks)src/utils/__tests__/exportUtils.test.ts(1 hunks)src/utils/exportUtils.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/utils/exportUtils.ts (1)
src/pages/ContributorProfile/ContributorProfile.tsx (1)
ContributorProfile(11-95)
🔇 Additional comments (13)
src/hooks/useGitHubData.ts (1)
22-31: LGTM! Good defensive programming for export compatibility.The enhancement ensures consistent data structure by providing default values for
userandlabelsproperties. This prevents potential runtime errors in the export utilities when these optional fields are missing from the GitHub API response.src/utils/exportUtils.ts (3)
1-11: Well-defined interface structure.The interface properly captures the GitHub API response structure with appropriate optional fields. The optional
userandlabelsproperties align with the defensive enhancements in the data hook.
69-81: LGTM! Proper file download implementation.The function correctly implements programmatic file download with proper cleanup of object URLs to prevent memory leaks.
83-86: LGTM! Clear filename generation.The filename format is descriptive and includes all relevant information with a timestamp for uniqueness.
src/utils/__tests__/exportUtils.test.ts (2)
3-50: Comprehensive test setup with proper mocking.The mock data structure accurately represents GitHub API responses, and the DOM API mocking is thorough and appropriate for testing file download functionality without side effects.
52-63: LGTM! Proper filename format validation.The tests effectively validate the filename generation using regex patterns that verify the expected format including username, type, timestamp, and file extension.
src/pages/Tracker/Tracker.tsx (4)
35-35: LGTM! Proper component import.
188-188: Good styling improvement for filter alignment.
218-227: LGTM! Well-implemented "Export All" functionality.The conditional rendering ensures the button only appears when data is available, and the data combination properly applies filters to both issues and PRs before merging.
252-286: Excellent integration of tab-specific export functionality.The layout restructuring maintains good UX with proper spacing and alignment. The export button correctly uses
currentFilteredDatato export only the active tab's filtered results, and the state filter remains properly positioned.src/components/ExportButton.tsx (3)
35-50: LGTM! Standard Material-UI menu pattern.The state management and event handlers follow Material-UI best practices for dropdown menus.
52-69: LGTM! Excellent error handling and user feedback.The export logic properly handles both success and error cases with appropriate toast notifications. The error logging will help with debugging while maintaining good user experience.
71-122: LGTM! User-friendly UI implementation.The component provides excellent UX with:
- Clear visual indicators (icons and descriptions)
- Helpful item count display
- Proper disabled states
- Intuitive menu layout
The Material-UI integration is clean and follows design system conventions.
1 participant
🎯 What's Changed #184
Added comprehensive data export functionality allowing users to export GitHub issues and pull requests in CSV and JSON formats.
✨ Features
🛠️ Technical Changes
ExportButtoncomponent with Material-UI dropdownexportUtils.tswith CSV/JSON conversion functions📁 Files Modified
src/components/ExportButton.tsx✨ Newsrc/utils/exportUtils.ts✨ Newsrc/pages/Tracker/Tracker.tsx🔧 Modifiedsrc/hooks/useGitHubData.ts🔧 Modifieddocs/EXPORT_FEATURE.md✨ Newsrc/utils/__tests__/exportUtils.test.ts✨ NewGSSoC 2025 Contribution 🌟
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Tests