Dashboard: Team Overview page UI improvements #7400
Merged
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes refactor the Team dashboard UI, updating the layout, styling, and component structure for the team page, changelog, and projects list. The changelog and project list components receive enhanced layouts and new controls, while the main team page is reorganized to a single-column layout with improved section sequencing and styling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TeamPage
participant TeamProjectsPage
participant BillingPlanAlert
participant Changelog
User->>TeamPage: Visit team dashboard
TeamPage->>TeamProjectsPage: Render projects list
TeamProjectsPage-->>TeamPage: Projects UI (with new header, search, sort)
TeamPage->>BillingPlanAlert: Render billing alert (conditional)
BillingPlanAlert-->>TeamPage: Alert UI (if applicable)
TeamPage->>Changelog: Render changelog section
Changelog-->>TeamPage: Changelog UI (with new layout, images, header)
TeamPage-->>User: Display full dashboard (single-column, new layout)
sequenceDiagram
participant User
participant TeamProjectsPage
participant SortDropdown
User->>TeamProjectsPage: Interact with "Sort by" button
TeamProjectsPage->>SortDropdown: Open dropdown menu
User->>SortDropdown: Select sort option
SortDropdown->>TeamProjectsPage: Notify sort change
TeamProjectsPage->>TeamProjectsPage: Update project list order
sequenceDiagram
participant Changelog
participant ChangelogAPI
Changelog->>ChangelogAPI: Fetch changelog items (limit 12, include feature_image)
ChangelogAPI-->>Changelog: Return changelog items with images
Changelog->>Changelog: Render items in grid with images or fallback icon
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Member
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
MananTank
force-pushed
the
06-21-dashboard_team_overview_page_ui_improvements
branch
from
802bb7b to
9ee09a0
Compare
MananTank
force-pushed
the
06-21-dashboard_team_overview_page_ui_improvements
branch
from
9ee09a0 to
e338519
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7400 +/- ##
=======================================
Coverage 52.06% 52.06%
=======================================
Files 945 945
Lines 63565 63565
Branches 4208 4208
=======================================
Hits 33098 33098
Misses 30361 30361
Partials 106 106
🚀 New features to boost your workflow:
|
Contributor
size-limit report 📦
|
MananTank
force-pushed
the
06-21-dashboard_team_overview_page_ui_improvements
branch
from
e338519 to
22cf185
Compare
Merged
jnsdls
approved these changes
Jun 21, 2025
Contributor
Merge activity
|
graphite-app
bot
force-pushed
the
06-21-fix_lint_errors
branch
from
cf592a4 to
cd1da30
Compare
graphite-app bot
pushed a commit
that referenced
this pull request
Jun 21, 2025
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing UI components and fixing minor bugs in the dashboard application. It includes updates to pagination, buttons, and layout adjustments to improve user experience and accessibility.
### Detailed summary
- Updated `pagination-buttons.stories.tsx` to correct page labels.
- Enhanced `InviteTeamMembersButton` styling with `rounded-full` and `bg-card`.
- Adjusted layout in `page.tsx` for better responsiveness and spacing.
- Improved `Changelog` UI for better presentation of updates.
- Refined `TeamProjectsPage` with new sorting and filtering components.
- Modified pagination items to include `rounded-full` for better aesthetics.
- Changed `page.tsx` to reduce the default page size from 10 to 5.
- Updated `SearchInput` and `AddNewButton` components for improved usability.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Changelog section now displays feature images for each entry, with fallback icons if unavailable.
- Changelog items are shown in a responsive grid layout for improved readability.
- Changelog header includes a title, description, and "View All" button.
- **Enhancements**
- Team projects page features a redesigned search input, improved sorting with a dropdown menu, and a more prominent subtitle.
- "Create Project" and other action buttons have updated styling for better visibility.
- Invite Team Members button now has a rounded appearance and enhanced background styling.
- Dashboard layout is streamlined with sequential content flow and consistent maximum width for better usability.
- Pagination controls updated with fully rounded styling for a modern look.
- Pagination storybook examples corrected and expanded to accurately represent page counts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-21-dashboard_team_overview_page_ui_improvements
branch
from
ab48caf to
d9f9308
Compare
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on enhancing UI components in the dashboard application, including pagination buttons, team member invitations, and changelog displays. It also refines layout and styling for better user experience.
### Detailed summary
- Updated `pagination-buttons.stories.tsx` to correct page labels.
- Modified `InviteTeamMembersButton` styling for a more rounded appearance.
- Enhanced layout in `page.tsx` for better responsiveness and spacing.
- Changed `Changelog` component structure for improved visual hierarchy.
- Adjusted `TeamProjectsPage` to refine project display and sorting options.
- Replaced `Select` component with a `DropdownMenu` for sorting.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Changelog section now displays feature images for each entry, with fallback icons if unavailable.
- Changelog items are shown in a responsive grid layout for improved readability.
- Changelog header includes a title, description, and "View All" button.
- **Enhancements**
- Team projects page features a redesigned search input, improved sorting with a dropdown menu, and a more prominent subtitle.
- "Create Project" and other action buttons have updated styling for better visibility.
- Invite Team Members button now has a rounded appearance and enhanced background styling.
- Dashboard layout is streamlined with sequential content flow and consistent maximum width for better usability.
- Pagination controls updated with fully rounded styling for a modern look.
- Pagination storybook examples corrected and expanded to accurately represent page counts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-21-fix_lint_errors
branch
from
cd1da30 to
ea3c702
Compare
graphite-app
bot
force-pushed
the
06-21-dashboard_team_overview_page_ui_improvements
branch
from
d9f9308 to
c9b4730
Compare
graphite-app
bot
deleted the
06-21-dashboard_team_overview_page_ui_improvements
branch
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.
PR-Codex overview
This PR focuses on enhancing the UI components and layout of the dashboard, particularly in pagination buttons, team project management, and the changelog display. It introduces styling improvements and functional updates to improve user experience.
Detailed summary
pagination-buttons.stories.tsxto correct page labels.invite-team-members-button.tsxfor improved button appearance.page.tsxfor better responsiveness.Changelog.tsxfor improved presentation and added a feature image.TeamProjectsPage.tsxto implement a more user-friendly project creation flow and improved sorting options.pagination-buttons.tsxfor consistency.Summary by CodeRabbit
New Features
Enhancements