[Dashboard] Add ecosystem logo upload functionality #7113
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe changes introduce an image upload feature for the ecosystem logo within the dashboard's ecosystem header component. The header now requires authentication and team ID props, manages upload dialogs, validates file types, performs uploads, updates the ecosystem, and provides user feedback. The layout component fetches team details and redirects if not found. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EcosystemHeader
participant StorageUploadHook
participant UpdateEcosystemHook
participant Toast
participant Page
User->>EcosystemHeader: Clicks pencil icon on image
EcosystemHeader->>User: Opens upload dialog
User->>EcosystemHeader: Selects image file and clicks upload
EcosystemHeader->>EcosystemHeader: Validate file type
alt Valid file
EcosystemHeader->>StorageUploadHook: Upload image
StorageUploadHook-->>EcosystemHeader: Return image URL
EcosystemHeader->>UpdateEcosystemHook: Update ecosystem with new image
UpdateEcosystemHook-->>EcosystemHeader: Success
EcosystemHeader->>Toast: Show success notification
EcosystemHeader->>Page: Refresh page
else Invalid file
EcosystemHeader->>Toast: Show error notification
end
sequenceDiagram
participant EcosystemSlugLayout
participant Auth
participant EcosystemData
participant TeamData
participant Router
participant EcosystemHeader
EcosystemSlugLayout->>Auth: Retrieve auth token
EcosystemSlugLayout->>EcosystemData: Fetch ecosystem data
EcosystemSlugLayout->>TeamData: Fetch team by slug
alt Team found
EcosystemSlugLayout->>EcosystemHeader: Pass teamId and authToken as props
else Team not found
EcosystemSlugLayout->>Router: Redirect to ecosystem layout path
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. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7113 +/- ##
=======================================
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:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (2)
2-2: Consider removing the eslint-disable comment.Adding a blanket eslint-disable at the file level is generally not recommended. It's better to address specific issues or use more targeted disables.
-/* eslint-disable */
200-209: Improve error handling specificity.The catch block logs the error but gives a generic message to the user. Consider extracting and displaying more specific error information when possible.
try { const [uri] = await storageUpload.mutateAsync([selectedFile]); await updateEcosystem({ ...ecosystem, imageUrl: uri, }); } catch (err) { console.error(err); - toast.error("Failed to upload image"); + const errorMessage = err instanceof Error ? err.message : "Failed to upload image"; + toast.error(`Upload failed: ${errorMessage}`); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx(5 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx (1)
apps/dashboard/src/@/api/team.ts (1)
getTeamBySlug(11-30)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (3)
apps/dashboard/src/@/lib/DashboardRouter.tsx (1)
useDashboardRouter(22-45)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 (9)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx (3)
1-1: Good addition of the required import.The import of
getTeamBySlugis correctly added to support the new functionality for fetching team details.
29-35: Well-implemented team fetch with proper error handling.The code correctly fetches team details and includes appropriate redirection if the team is not found. The comment also explains the purpose clearly.
46-47: Proper prop passing for authentication.The
authTokenandteamIdprops are correctly passed to theEcosystemHeadercomponent, enabling the logo upload functionality.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx (6)
8-16: Well-organized import structure for Dialog components.The Dialog components are properly imported and structured for building the upload modal interface.
25-45: Complete set of required imports for the new functionality.All necessary components and hooks are imported to support the image upload functionality, including UI components, state management, and API integrations.
134-135: Added required props for authenticated uploads.The new props
authTokenandteamIdare correctly added to the component interface, enabling authenticated ecosystem updates.
158-161: Well-structured state management for the upload dialog.The state variables for dialog visibility and file selection are correctly defined and organized with a helpful comment section.
162-183: Well-implemented hooks with proper error handling.The upload and update hooks are well configured with appropriate success and error callbacks. The toast notifications provide good user feedback.
236-290: Well-structured dialog implementation with good UX considerations.The dialog implementation is comprehensive with appropriate triggers, content organization, and action buttons. The loading state is properly handled with a spinner during upload.
| async function handleUpload() { | ||
| if (!selectedFile) { | ||
| toast.error("Please select an image to upload"); | ||
| return; | ||
| } | ||
|
|
||
| // Validate file type | ||
| const validTypes = ["image/png", "image/jpeg", "image/webp"]; | ||
| if (!validTypes.includes(selectedFile.type)) { | ||
| toast.error("Only PNG, JPG or WEBP images are allowed"); | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| const [uri] = await storageUpload.mutateAsync([selectedFile]); | ||
| await updateEcosystem({ | ||
| ...ecosystem, | ||
| imageUrl: uri, | ||
| }); | ||
| } catch (err) { | ||
| console.error(err); | ||
| toast.error("Failed to upload image"); | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding file size validation.
The file type validation is good, but there's no check for file size limits, which could lead to issues with large files.
function handleUpload() {
if (!selectedFile) {
toast.error("Please select an image to upload");
return;
}
// Validate file type
const validTypes = ["image/png", "image/jpeg", "image/webp"];
if (!validTypes.includes(selectedFile.type)) {
toast.error("Only PNG, JPG or WEBP images are allowed");
return;
}
+ // Validate file size (e.g., max 5MB)
+ const maxSizeInBytes = 5 * 1024 * 1024; // 5MB
+ if (selectedFile.size > maxSizeInBytes) {
+ toast.error("Image size should be less than 5MB");
+ return;
+ }
try {
// rest of the function...📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function handleUpload() { | |
| if (!selectedFile) { | |
| toast.error("Please select an image to upload"); | |
| return; | |
| } | |
| // Validate file type | |
| const validTypes = ["image/png", "image/jpeg", "image/webp"]; | |
| if (!validTypes.includes(selectedFile.type)) { | |
| toast.error("Only PNG, JPG or WEBP images are allowed"); | |
| return; | |
| } | |
| try { | |
| const [uri] = await storageUpload.mutateAsync([selectedFile]); | |
| await updateEcosystem({ | |
| ...ecosystem, | |
| imageUrl: uri, | |
| }); | |
| } catch (err) { | |
| console.error(err); | |
| toast.error("Failed to upload image"); | |
| } | |
| } | |
| async function handleUpload() { | |
| if (!selectedFile) { | |
| toast.error("Please select an image to upload"); | |
| return; | |
| } | |
| // Validate file type | |
| const validTypes = ["image/png", "image/jpeg", "image/webp"]; | |
| if (!validTypes.includes(selectedFile.type)) { | |
| toast.error("Only PNG, JPG or WEBP images are allowed"); | |
| return; | |
| } | |
| // Validate file size (e.g., max 5MB) | |
| const maxSizeInBytes = 5 * 1024 * 1024; // 5MB | |
| if (selectedFile.size > maxSizeInBytes) { | |
| toast.error("Image size should be less than 5MB"); | |
| return; | |
| } | |
| try { | |
| const [uri] = await storageUpload.mutateAsync([selectedFile]); | |
| await updateEcosystem({ | |
| ...ecosystem, | |
| imageUrl: uri, | |
| }); | |
| } catch (err) { | |
| console.error(err); | |
| toast.error("Failed to upload image"); | |
| } | |
| } |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx
around lines 187 to 210, the handleUpload function lacks validation for the file
size of the selected image. Add a check after the file type validation to ensure
the selectedFile size does not exceed a defined limit (e.g., 5MB). If the file
is too large, show an error toast message and return early to prevent uploading
oversized files.
joaquim-verges
deleted the
_Dashboard_Add_ecosystem_logo_upload_functionality
branch
PR-Codex overview
This PR enhances the
EcosystemHeadercomponent by adding image upload functionality and fetching team details to ensure valid team IDs for updates. It also improves error handling and user notifications during the image upload process.Detailed summary
getTeamBySlug.isDialogOpen,selectedFile).toast.EcosystemHeaderprops to includeauthTokenandteamId.Summary by CodeRabbit
New Features
Bug Fixes