Project settings redesign #1014
Conversation
|
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 Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. ✨ 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Greptile OverviewGreptile SummaryRedesigned the project settings page with performance optimizations using React.memo, useMemo, and useCallback. Introduced a new Major changes:
Issue found:
Confidence Score: 3/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant PageClient
participant SettingCard
participant SettingCopyableText
participant CopyableText
participant SettingSwitch
participant Project
participant Toast
User->>PageClient: View Project Settings
PageClient->>PageClient: useMemo to compute URLs
PageClient->>SettingCard: Render Project Information
SettingCard->>SettingCopyableText: Display Project ID, JWKS URLs
SettingCopyableText->>CopyableText: Render copyable text
User->>CopyableText: Click copy button
CopyableText->>CopyableText: navigator.clipboard.writeText()
CopyableText->>User: Show check icon (2s)
User->>SettingSwitch: Toggle API key setting
SettingSwitch->>SettingSwitch: setCheckedState (optimistic update)
SettingSwitch->>PageClient: onCheckedChange callback
PageClient->>Project: project.update()
Project-->>Toast: Error (if update fails)
Toast-->>User: Show error alert
User->>PageClient: Transfer project to new team
PageClient->>PageClient: Check transferInProgressRef
PageClient->>Project: user.transferProject()
Project-->>PageClient: Success
PageClient->>Toast: Show success message
Toast->>User: Display success toast
PageClient->>PageClient: window.location.reload()
|
| const onCheckedChange = useCallback(async (checked: boolean) => { | ||
| setCheckedState(checked); | ||
| await props.onCheckedChange(checked); | ||
| }; | ||
| await propOnCheckedChange(checked); | ||
| }, [propOnCheckedChange]); |
There was a problem hiding this comment.
logic: async callback should use runAsynchronouslyWithAlert to handle errors and show alerts
| const onCheckedChange = useCallback(async (checked: boolean) => { | |
| setCheckedState(checked); | |
| await props.onCheckedChange(checked); | |
| }; | |
| await propOnCheckedChange(checked); | |
| }, [propOnCheckedChange]); | |
| const onCheckedChange = useCallback((checked: boolean) => { | |
| setCheckedState(checked); | |
| runAsynchronouslyWithAlert(propOnCheckedChange(checked)); | |
| }, [propOnCheckedChange]); |
Context Used: Rule from dashboard - Use runAsynchronouslyWithAlert from @stackframe/stack-shared/dist/utils/promises for async butto... (source)
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/dashboard/src/components/settings.tsx
Line: 66:69
Comment:
**logic:** async callback should use `runAsynchronouslyWithAlert` to handle errors and show alerts
```suggestion
const onCheckedChange = useCallback((checked: boolean) => {
setCheckedState(checked);
runAsynchronouslyWithAlert(propOnCheckedChange(checked));
}, [propOnCheckedChange]);
```
**Context Used:** Rule from `dashboard` - Use `runAsynchronouslyWithAlert` from `@stackframe/stack-shared/dist/utils/promises` for async butto... ([source](https://app.greptile.com/review/custom-context?memory=5e671275-7493-402a-93a8-969537ec4d63))
How can I resolve this? If you propose a fix, please make it concise.There was a problem hiding this comment.
Pull Request Overview
This PR redesigns the project settings UI with improved styling, better component organization, and enhanced user experience. The changes focus on modernizing the settings components with consistent design patterns, adding new copyable text functionality, and improving error handling throughout.
- Refactored settings components with React.memo for performance optimization and consistent styling
- Added new
SettingCopyableTextcomponent for easy copying of project IDs and URLs - Improved error handling in form submissions and project transfers with toast notifications
- Enhanced component callbacks with useCallback and useMemo for better performance
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/dashboard/src/components/settings.tsx | Refactored settings components with React.memo, added new SettingCopyableText component, improved styling with better spacing and borders, enhanced error handling in forms |
| apps/dashboard/src/components/copyable-text.tsx | New component for displaying copyable text with visual feedback, includes clipboard API integration and timeout cleanup |
| apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx | Optimized with useMemo and useCallback for expensive computations, fixed race condition in project transfer with ref, improved error handling with toast notifications, extracted TeamMemberItem into memoized component |
| apps/dashboard/DESIGN_GUIDE.md | Removed extensive dark mode section from table of contents and best practices, streamlined documentation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| className="h-6 w-6 p-0" | ||
| onClick={handleCopy} | ||
| title={copied ? "Copied!" : "Copy to clipboard"} | ||
| > | ||
| {copied ? ( | ||
| <Check className="h-4 w-4 text-emerald-500" /> | ||
| ) : ( | ||
| <Copy className="h-4 w-4 text-muted-foreground" /> | ||
| )} | ||
| </Button> |
There was a problem hiding this comment.
The copy button lacks accessible text for screen readers. While it has a title attribute for tooltips, screen reader users would benefit from an aria-label or visually hidden text describing the button's purpose. Consider adding aria-label={copied ? "Copied!" : "Copy to clipboard"} to the Button component.
https://www.loom.com/share/988d39ac1296486abb9c0fd264c9c015