feat: refactor settings page into tabbed layout with dedicated integr… - #365
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 23 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (10)
📝 WalkthroughWalkthroughProject settings now use URL-controlled General and Integrations & Services tabs. A dedicated integrations component contains database, authentication, mail, and storage configuration. Social authentication adds direct navigation to the integrations tab. ChangesProject settings integrations
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
apps/web-dashboard/src/components/Settings/IntegrationsSettings.jsx (1)
10-32: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
inputStyleandFormFieldare copied verbatim fromProjectSettings.jsx(lines 16-39).Extract them into a shared module (e.g.
components/Settings/formPrimitives.jsx) and import in both files to avoid divergence.🤖 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 `@apps/web-dashboard/src/components/Settings/IntegrationsSettings.jsx` around lines 10 - 32, Extract the duplicated inputStyle constant and FormField component into a shared Settings module such as formPrimitives.jsx, then remove their local definitions from IntegrationsSettings.jsx and ProjectSettings.jsx and import the shared symbols in both files, preserving their existing behavior and styling.apps/web-dashboard/src/pages/ProjectSettings.jsx (2)
89-92: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win
setSearchParams({ tab })discards any other query params and pushes a history entry per tab click.Preserve existing params and replace the entry so the back button leaves the page rather than cycling tabs.
♻️ Proposed refactor
const handleTabChange = (tab) => { setActiveTab(tab); - setSearchParams({ tab }); + setSearchParams((prev) => { + const next = new URLSearchParams(prev); + next.set('tab', tab); + return next; + }, { replace: true }); };🤖 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 `@apps/web-dashboard/src/pages/ProjectSettings.jsx` around lines 89 - 92, Update handleTabChange to retain all existing search parameters when changing the tab, while replacing the current history entry instead of pushing a new one. Use the existing search-parameter state/API to merge the new tab value and enable replace behavior.
352-370: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winForm components are plumbed through props instead of imported.
DatabaseConfigForm,StorageConfigForm, andMailTemplatesFormremain declared insideProjectSettings.jsxand are handed toIntegrationsSettingsas props, coupling the new component to its parent.
apps/web-dashboard/src/pages/ProjectSettings.jsx#L352-L370: move these three form components into their own modules undercomponents/Settings/and drop theDatabaseConfigForm/StorageConfigForm/MailTemplatesFormprops.apps/web-dashboard/src/components/Settings/IntegrationsSettings.jsx#L60-L76: import the three form components directly instead of destructuring them fromprops.🤖 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 `@apps/web-dashboard/src/pages/ProjectSettings.jsx` around lines 352 - 370, Decouple the integration forms from ProjectSettings: in apps/web-dashboard/src/pages/ProjectSettings.jsx lines 352-370, move DatabaseConfigForm, StorageConfigForm, and MailTemplatesForm into separate modules under components/Settings/ and remove their props from IntegrationsSettings; in apps/web-dashboard/src/components/Settings/IntegrationsSettings.jsx lines 60-76, import those form components directly and stop destructuring them from props.
🤖 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 `@apps/web-dashboard/src/components/Settings/IntegrationsSettings.jsx`:
- Around line 257-264: Add accessible aria-label attributes to the icon-only
copy buttons in the integrations settings UI, including the GitHub button near
the copyToClipboard call and the corresponding Google copy button. Use clear
provider-specific labels that describe the button’s copy action, while leaving
the existing click behavior and icons unchanged.
- Around line 79-92: Update the social OAuth callback URL flow in
IntegrationsSettings, including githubCallbackUrl and googleCallbackUrl, to use
the backend-generated, read-only callback values returned by the API rather than
assembling them in the dashboard. Ensure the backend generates these URLs from
the public API base (VITE_PUBLIC_API_URL), and have the dashboard only display
the returned values instead of relying on API_URL or client-side concatenation.
- Around line 136-141: Update copyToClipboard to guard clipboard availability
and handle writeText failures before updating copied state or showing the
success toast. Only setCopiedUrl and display “Callback URL copied!” after a
successful write; catch rejected writes and avoid unhandled errors while
preserving the existing timeout behavior.
---
Nitpick comments:
In `@apps/web-dashboard/src/components/Settings/IntegrationsSettings.jsx`:
- Around line 10-32: Extract the duplicated inputStyle constant and FormField
component into a shared Settings module such as formPrimitives.jsx, then remove
their local definitions from IntegrationsSettings.jsx and ProjectSettings.jsx
and import the shared symbols in both files, preserving their existing behavior
and styling.
In `@apps/web-dashboard/src/pages/ProjectSettings.jsx`:
- Around line 89-92: Update handleTabChange to retain all existing search
parameters when changing the tab, while replacing the current history entry
instead of pushing a new one. Use the existing search-parameter state/API to
merge the new tab value and enable replace behavior.
- Around line 352-370: Decouple the integration forms from ProjectSettings: in
apps/web-dashboard/src/pages/ProjectSettings.jsx lines 352-370, move
DatabaseConfigForm, StorageConfigForm, and MailTemplatesForm into separate
modules under components/Settings/ and remove their props from
IntegrationsSettings; in
apps/web-dashboard/src/components/Settings/IntegrationsSettings.jsx lines 60-76,
import those form components directly and stop destructuring them from props.
🪄 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 Plus
Run ID: 97154c83-5fd3-4dbc-9e92-42a9764430a2
📒 Files selected for processing (3)
apps/web-dashboard/src/components/Auth/SocialAuthConfig.jsxapps/web-dashboard/src/components/Settings/IntegrationsSettings.jsxapps/web-dashboard/src/pages/ProjectSettings.jsx
Render
Destroyed
1 participant
UPDTED PER PROJECT SETTINGS PAGE
Summary by CodeRabbit