[Dashboard] Add ecosystem name editing functionality #7115
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe update adds inline editing for the ecosystem name within the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EcosystemHeader
participant updateEcosystem
participant Router
participant Toast
User->>EcosystemHeader: Click edit (pencil icon)
EcosystemHeader->>EcosystemHeader: Open name edit dialog
User->>EcosystemHeader: Change input, click Save
EcosystemHeader->>EcosystemHeader: Validate and trim name
alt Name is valid and changed
EcosystemHeader->>updateEcosystem: Call with new name
updateEcosystem-->>EcosystemHeader: Success
EcosystemHeader->>EcosystemHeader: Close dialog
EcosystemHeader->>Router: Refresh
EcosystemHeader->>Toast: Show "Ecosystem updated."
else Name invalid or unchanged
EcosystemHeader->>EcosystemHeader: Do nothing / Close dialog
end
alt Error on update
EcosystemHeader->>Toast: Show error message
end
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 30th. To opt out, configure Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 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 (
|
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. |
size-limit report 📦
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7115 +/- ##
=======================================
Coverage 55.60% 55.60%
=======================================
Files 901 901
Lines 58121 58121
Branches 4067 4067
=======================================
Hits 32320 32320
Misses 25696 25696
Partials 105 105
🚀 New features to boost your workflow:
|
![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 (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (2)
217-234: Well-implemented save handler with proper validation.The
handleNameSavefunction includes good validation logic and error handling. It only updates when the name has actually changed and isn't empty.Consider adding validation for maximum name length to prevent overly long ecosystem names:
async function handleNameSave() { const trimmed = tempName.trim(); - if (!trimmed || trimmed === ecosystem.name) { + if (!trimmed || trimmed === ecosystem.name || trimmed.length > 50) { setIsNameDialogOpen(false); + if (trimmed.length > 50) { + toast.error("Ecosystem name must be 50 characters or less"); + } return; } // rest of the function... }
323-368: Well-structured dialog implementation.The dialog follows the same pattern as the existing image upload dialog, maintaining UI consistency. The pencil icon button is appropriately placed next to the ecosystem name, and the save button is correctly disabled when the name is empty or during update.
Consider these accessibility improvements:
<DialogContent className="max-w-[480px]"> <DialogHeader> <DialogTitle>Edit Ecosystem Name</DialogTitle> </DialogHeader> <div className="flex flex-col gap-4 py-2"> <Input value={tempName} onChange={(e) => setTempName(e.target.value)} + placeholder="Enter ecosystem name" + aria-label="Ecosystem name" + maxLength={50} + onKeyDown={(e) => { + if (e.key === 'Enter' && tempName.trim() && !isUpdating) { + handleNameSave(); + } + }} /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx(6 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (2)
apps/dashboard/src/@/components/ui/dialog.tsx (7)
Dialog(130-130)DialogTrigger(134-134)DialogContent(135-135)DialogHeader(136-136)DialogTitle(138-138)DialogFooter(137-137)DialogClose(133-133)apps/dashboard/src/@/components/ui/button.tsx (1)
Button(67-67)
🔇 Additional comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (4)
26-26: Good addition of the Input component import.The Input component import is correctly added to support the new name editing functionality.
163-165: Clear state management for name editing.The state variables are appropriately named and initialized. Using
ecosystem.nameas the initial value fortempNameensures the input starts with the current name.
178-178: Good generalization of the success message.Changing the success message to "Ecosystem updated" makes it reusable for both image and name updates.
379-379: Fixed typo in tooltip text.Corrected "Copy Ecosytem slug" to "Copy Ecosystem slug", improving user experience.
joaquim-verges
deleted the
_Dashboard_Add_ecosystem_name_editing_functionality
branch
PR-Codex overview
This PR adds functionality for editing the name of an ecosystem in the
EcosystemHeadercomponent. It introduces a dialog for name input and updates the ecosystem name upon saving.Detailed summary
Inputcomponent for name editing.isNameDialogOpenandtempName.handleNameSavefunction for updating the ecosystem name.Summary by CodeRabbit