feat(tracker): enhance UI improved header, filters, and dark-mode f…#335
Open
swati-204 wants to merge 2 commits into
Open
feat(tracker): enhance UI improved header, filters, and dark-mode f…#335swati-204 wants to merge 2 commits into
swati-204 wants to merge 2 commits into
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughRedesign of the Tracker page: adds StatCard, expanded Material UI components, memoized filter logic for issues/PRs, new filter UI state (status, title, repo, dates, hasFetched), themed hero/auth cards, alerts, tabs, filter bar, conditional content states, and an enhanced results table with chips, tooltips, and row navigation. ChangesTracker Page UI Redesign
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @swati-204 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
Contributor
There was a problem hiding this comment.
Pull request overview
This PR polishes the Tracker page UI in src/pages/Tracker/Tracker.tsx, introducing a new hero/header layout, improved auth card, richer filter bar/empty states, and enhanced table presentation (chips, badges, hover affordances).
Changes:
- Added a new header/overview panel with visibility progress, plus stat cards for open/closed/merged counts.
- Refined authentication and filter UI (helper link, clear actions, loading affordances, and empty states).
- Updated the table UI to be row-clickable (opens GitHub), with improved styling for title/repo/state/created cells.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+146
to
+147
| !!searchTitle || !!selectedRepo || !!startDate || !!endDate || | ||
| issueFilter !== "all" || prFilter !== "all"; |
| }, [tab, issueFilter, prFilter, searchTitle, selectedRepo, startDate, endDate]); | ||
|
|
||
| const activeFilterCount = activeFilterSummary.length; | ||
| const visibleShare = totalCount ? Math.round((currentFilteredData.length / totalCount) * 100) : 0; |
|
|
||
| const activeFilterCount = activeFilterSummary.length; | ||
| const visibleShare = totalCount ? Math.round((currentFilteredData.length / totalCount) * 100) : 0; | ||
| const progressValue = Math.max(8, visibleShare || 0); |
Comment on lines
400
to
+407
| <TextField | ||
| label="Personal Access Token" | ||
| value={token} | ||
| onChange={(e) => setToken(e.target.value)} | ||
| type="password" | ||
| sx={{ flex: 1, minWidth: 150 }} | ||
| // Helper link to guide users on generating a GitHub Personal Access Token | ||
| required | ||
| size="small" | ||
| sx={{ flex: 2, minWidth: 200, "& .MuiOutlinedInput-root": { borderRadius: "12px" } }} |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 459-463: The empty-filter "No results match your filters." message
is shown even after a fetch/auth error; update the empty-state rendering logic
to suppress that message when authError or dataError exist. Locate the
conditional that currently checks hasFetched and emptiness of the result arrays
(e.g., hasFetched && filteredRecords.length === 0 or similar) and add a guard so
it only renders when !authError && !dataError. Make the same change for the
second occurrence referenced (the block around the 634-657 range) so both
empty-state branches require no errors before displaying the "No results..."
message.
- Around line 200-201: The progress bar's hard minimum forces a non-zero display
even when visibleShare is 0; change the logic so progressValue uses the minimum
only when visibleShare > 0. Keep visibleShare as computed (from
currentFilteredData.length and totalCount), then compute progressValue with a
conditional: if visibleShare > 0 use Math.max(8, visibleShare) otherwise 0;
update the variable progressValue (referenced in the Tracker component)
accordingly.
- Around line 701-713: The row-level onClick (which calls
window.open(item.html_url, ...)) is being triggered when the nested Link is
clicked; update the Link component (and any clickable children inside the title
cell) to stop event propagation so the row handler doesn't also run —
specifically add an onClick handler on the Link (and any inner interactive
element) that calls event.stopPropagation() (you may optionally call
event.preventDefault() only if you want to suppress Link's default navigation
and handle it manually); locate the Link in the title cell near
getStatusIcon(item) and add the stopPropagation logic there.
- Around line 167-168: The current date filtering in Tracker.tsx uses new
Date(startDate)/new Date(endDate) which treats endDate as midnight and excludes
items later that day; update the end-date comparison used by the filtered array
(the lines that currently filter on new Date(i.created_at) <= new Date(endDate))
to make the end day inclusive by computing an endOfDay for endDate (e.g., set
hours to 23:59:59.999 or advance by one day and compare with <) and use that
endOfDay in the filtered.filter call so items created anytime on the selected
"To" date are included.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: eeae03c6-88c4-4753-9916-9d80e44abe1d
📒 Files selected for processing (1)
src/pages/Tracker/Tracker.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (3)
src/pages/Tracker/Tracker.tsx (3)
644-657:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDon't show the filter-empty state after a fetch error.
This issue was previously flagged and remains unresolved. After a failed auth/API request, the error alert renders correctly at lines 459-463, but this branch still displays
"No results match your filters."becausehasFetchedis alreadytrueand the arrays are empty. That message is misleading when nothing was successfully loaded.Add a guard to suppress this message when errors exist:
- ) : currentFilteredData.length === 0 ? ( + ) : !authError && !dataError && currentFilteredData.length === 0 ? (🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.tsx` around lines 644 - 657, The "No results match your filters." empty-state is shown even after a fetch error because hasFetched is true and arrays are empty; update the rendering condition around the currentFilteredData.length === 0 branch to also check that there is no fetch error (e.g., ensure error state is falsy) so the message only appears when data was fetched successfully; modify the conditional that renders the Box (referencing currentFilteredData, hasActiveFilters, and handleClearFilters) to require hasFetched && !error before showing the empty-filter UI.
689-734:⚠️ Potential issue | 🟠 Major | ⚡ Quick winStop the title link from triggering the row click handler too.
This issue was previously flagged and remains unresolved. Clicking the title Link at lines 709-732 currently fires both the nested
<Link>navigation and the row-levelwindow.openat line 701, which opens the same GitHub item in two separate tabs.Add stopPropagation to prevent the row handler from also running:
<Link href={item.html_url} target="_blank" rel="noopener noreferrer" + onClick={(e) => e.stopPropagation()} underline="none" sx={{🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.tsx` around lines 689 - 734, The nested Link inside the TableRow is propagating clicks to the row-level onClick (window.open) causing duplicate tabs; add an onClick handler to the Link (the Link rendering item.title / CallMadeIcon) that calls event.stopPropagation() so the Link navigation opens only once and the TableRow onClick does not run. Locate the map over currentFilteredData, the TableRow with onClick={() => window.open(...)} and the Link element and add the stopPropagation call on the Link's onClick (ensuring it doesn't interfere with target="_blank").
201-201:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winKeep the visibility bar at 0 when nothing is visible.
This issue was previously flagged and remains unresolved. When
visibleShareis0, the hard floor of8causes the progress bar to display 8% width while the text shows0%.Only apply the minimum when
visibleShare > 0:- const progressValue = Math.max(8, visibleShare || 0); + const progressValue = visibleShare > 0 ? Math.max(8, visibleShare) : 0;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.tsx` at line 201, The progressValue calculation uses a hard floor of 8 even when visibleShare is 0; change it so the minimum only applies when visibleShare > 0 by setting progressValue to 0 when visibleShare is 0 and otherwise to Math.max(8, visibleShare) (update the expression that assigns progressValue in Tracker.tsx to reference visibleShare and Math.max accordingly).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 644-657: The "No results match your filters." empty-state is shown
even after a fetch error because hasFetched is true and arrays are empty; update
the rendering condition around the currentFilteredData.length === 0 branch to
also check that there is no fetch error (e.g., ensure error state is falsy) so
the message only appears when data was fetched successfully; modify the
conditional that renders the Box (referencing currentFilteredData,
hasActiveFilters, and handleClearFilters) to require hasFetched && !error before
showing the empty-filter UI.
- Around line 689-734: The nested Link inside the TableRow is propagating clicks
to the row-level onClick (window.open) causing duplicate tabs; add an onClick
handler to the Link (the Link rendering item.title / CallMadeIcon) that calls
event.stopPropagation() so the Link navigation opens only once and the TableRow
onClick does not run. Locate the map over currentFilteredData, the TableRow with
onClick={() => window.open(...)} and the Link element and add the
stopPropagation call on the Link's onClick (ensuring it doesn't interfere with
target="_blank").
- Line 201: The progressValue calculation uses a hard floor of 8 even when
visibleShare is 0; change it so the minimum only applies when visibleShare > 0
by setting progressValue to 0 when visibleShare is 0 and otherwise to
Math.max(8, visibleShare) (update the expression that assigns progressValue in
Tracker.tsx to reference visibleShare and Math.max accordingly).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2609da9c-867e-4310-a1b2-61cf6ca142e7
📒 Files selected for processing (1)
src/pages/Tracker/Tracker.tsx
Author
|
Hi @mehul-m-prajapati |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Description
Polished the Tracker UI: hero/header with gradient, descriptive copy, and an overview panel showing loaded vs visible items.
Added a visibility progress bar and active-filter summary to help users understand filter impact.
Improved authentication card: helper link to GitHub PAT docs, rounded inputs, clearer fetch button state.
Refined filter bar and empty states clearer messaging and a prominent Clear action.
Table improvements: smoother hover affordance, row click opens item in GitHub, rounded repo chips, and clearer state badges.
Resolved upstream merge conflicts and fixed duplicate/garbled imports.
All functional logic (hooks, data fetching) remains unchanged; only src/pages/Tracker/Tracker.tsx was modified.
How Has This Been Tested?
Started dev server (npm run dev) and confirmed Vite serves the app without parse/build errors.
Visually inspected the Tracker page in both light and dark themes to confirm contrast and layout.
Exercised filters (search, repo, date range), tab switching (Issues / Pull Requests), and token helper link.
Verified no TypeScript/JSX diagnostics for the touched file.
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit
New Features
UI / Refactor