chore: db settings form pattern#41263
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
WalkthroughRefactors multiple database/settings UI components from legacy FormHeader/FormPanel layouts to PageSection and Card-based primitives, converts several static imports to dynamic Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx (1)
10-11: Remove unused imports.The
FormHeaderandFormPanelimports are no longer used after the migration to PageSection and Card patterns.Apply this diff:
-import { FormHeader } from 'components/ui/Forms/FormHeader' -import { FormPanel } from 'components/ui/Forms/FormPanel'
🧹 Nitpick comments (2)
apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx (1)
241-252: Avoid mixingFormField_Shadcn_withform.registerand prefer??over||for controlled valuesInside both
FormField_Shadcn_render blocks you’re:
- Spreading
...fieldand...form.register(...)onto the sameInput_Shadcn_.- For
default_pool_size, usingvalue={field.value || ''}.With Shadcn form primitives the recommended pattern is to rely on
FormField_Shadcn_’sfieldprops only, and not callform.registeragain. Also,||will treat0as falsy and replace it with'', which can be surprising even if0isn’t expected here.Consider simplifying to something like this for
default_pool_size:- <FormControl_Shadcn_> - <PrePostTab postTab="connections" className="uppercase"> - <Input_Shadcn_ - {...field} - type="number" - className="w-full" - value={field.value || ''} - placeholder={defaultPoolSize.toString()} - {...form.register('default_pool_size', { - setValueAs: setValueAsNullableNumber, - })} - /> - </PrePostTab> - </FormControl_Shadcn_> + <FormControl_Shadcn_> + <PrePostTab postTab="connections" className="uppercase"> + <Input_Shadcn_ + type="number" + className="w-full" + value={field.value ?? ''} + onChange={(event) => + field.onChange( + setValueAsNullableNumber(event.target.value) + ) + } + placeholder={defaultPoolSize.toString()} + /> + </PrePostTab> + </FormControl_Shadcn_>And for
max_client_conn, since the field is disabled and not submitted, you can dropform.register(and evenfield) entirely and just render a read-only value viaPrePostTab:- <FormControl_Shadcn_> - <PrePostTab postTab="clients" className="uppercase"> - <Input_Shadcn_ - {...field} - type="number" - className="w-full" - value={pgbouncerConfig?.max_client_conn || ''} - disabled={true} - placeholder={defaultMaxClientConn.toString()} - {...form.register('max_client_conn', { - setValueAs: setValueAsNullableNumber, - })} - /> - </PrePostTab> - </FormControl_Shadcn_> + <FormControl_Shadcn_> + <PrePostTab postTab="clients" className="uppercase"> + <Input_Shadcn_ + type="number" + className="w-full" + value={pgbouncerConfig?.max_client_conn ?? defaultMaxClientConn} + disabled + /> + </PrePostTab> + </FormControl_Shadcn_>This keeps the implementation closer to the standard Shadcn form pattern, avoids double-registration with react-hook-form, and handles controlled values more predictably. As per coding guidelines for Studio Shadcn forms.
Also applies to: 301-311
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx (1)
77-208: Consider removing nested Panel usage for consistency.The migration to PageSection is well-executed, but Line 87 still uses the old
Panelcomponent inside the new PageSectionContent. For full consistency with the new patterns, consider replacing Panel with Card throughout.Apply this pattern to remove the nested Panel:
- {organization?.usage_billing_enabled === true ? ( - <div className="flex flex-col gap-3"> - <Panel className="!m-0"> - <Panel.Content> + {organization?.usage_billing_enabled === true ? ( + <Card> + <CardContent> <div> ... </div> - </Panel.Content> - </Panel> - </div> + </CardContent> + </Card>Based on learnings, Card components should be used instead of Panel for grouping related information.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx(1 hunks)apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx(3 hunks)apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx(6 hunks)apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx(3 hunks)apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx(2 hunks)apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx(5 hunks)apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx(2 hunks)apps/studio/pages/project/[ref]/database/settings.tsx(3 hunks)packages/ui-patterns/src/form/Layout/FormLayout.tsx(1 hunks)packages/ui/src/components/shadcn/ui/card.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (22)
📓 Common learnings
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use related layout components (e.g., AuthLayout) when a page is within an existing section
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use _Shadcn_ form primitives (Form_Shadcn_, FormField_Shadcn_, FormControl_Shadcn_) and prefer FormItemLayout with layout='flex-row-reverse' for form controls
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use ScaffoldSection, ScaffoldSectionTitle, and ScaffoldSectionDescription for multi-section page layouts
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use PageLayout component for new page structures with props: children, title, subtitle, icon, breadcrumbs, primaryActions, secondaryActions, navigationItems, className, size, isCompact
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : UI components from packages/ui should be imported with _Shadcn_ suffix where applicable (e.g., Input_Shadcn_)
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use CardContent for card sections, CardFooter for actions, and CardHeader/CardTitle only when card content is not described by surrounding content or when using multiple Cards to group related pieces
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Wrap forms in a Card component unless specified otherwise
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Read packages/ui/index.tsx file for full list of available components before composing interfaces
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to packages/ui/**/*.{ts,tsx} : Do not introduce new UI components in packages/ui unless explicitly asked to; use existing shadcn/ui-based components
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Wrap forms in a Card component unless specified otherwise
Applied to files:
apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use CardContent for card sections, CardFooter for actions, and CardHeader/CardTitle only when card content is not described by surrounding content or when using multiple Cards to group related pieces
Applied to files:
apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use _Shadcn_ form primitives (Form_Shadcn_, FormField_Shadcn_, FormControl_Shadcn_) and prefer FormItemLayout with layout='flex-row-reverse' for form controls
Applied to files:
apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsxapps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsxpackages/ui-patterns/src/form/Layout/FormLayout.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use Card component to group related pieces of information
Applied to files:
apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
Applied to files:
apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use PageLayout component for new page structures with props: children, title, subtitle, icon, breadcrumbs, primaryActions, secondaryActions, navigationItems, className, size, isCompact
Applied to files:
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxpackages/ui-patterns/src/form/Layout/FormLayout.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use ScaffoldSection, ScaffoldSectionTitle, and ScaffoldSectionDescription for multi-section page layouts
Applied to files:
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/components/interfaces/**/*.{ts,tsx} : Studio-specific components related to individual pages should be placed in apps/studio/components/interfaces
Applied to files:
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use related layout components (e.g., AuthLayout) when a page is within an existing section
Applied to files:
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Read packages/ui/index.tsx file for full list of available components before composing interfaces
Applied to files:
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsxapps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T00:21:01.839Z
Learnt from: dnywh
Repo: supabase/supabase PR: 41215
File: apps/design-system/content/docs/accessibility.mdx:30-30
Timestamp: 2025-12-11T00:21:01.839Z
Learning: In apps/design-system/content/docs/, MDX files use different relative path formats based on their location: root-level docs use `components/button` format, while subdirectory docs (ui-patterns/, components/) use `../components/button` format for linking to components.
Applied to files:
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/components/interfaces/**/*.{ts,tsx} : Create a new component in apps/studio/components/interfaces for page contents
Applied to files:
apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : UI components from packages/ui should be imported with _Shadcn_ suffix where applicable (e.g., Input_Shadcn_)
Applied to files:
apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsxapps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsxapps/studio/pages/project/[ref]/database/settings.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use Sheet component to reveal complicated forms or information relating to an object without context switching to a new page
Applied to files:
apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : If a form's submit button is outside the form element, create a formId variable and set it as the id prop on the form and formId on the button
Applied to files:
apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use Admonition component to alert users of important actions or restrictions
Applied to files:
apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Build forms with react-hook-form + zod
Applied to files:
apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsxapps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use typography classes from apps/studio/styles/typography.scss instead of hard-coding Tailwind classes (e.g., use 'heading-default' instead of 'text-sm font-medium')
Applied to files:
packages/ui/src/components/shadcn/ui/card.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to packages/ui/**/*.{ts,tsx} : Do not introduce new UI components in packages/ui unless explicitly asked to; use existing shadcn/ui-based components
Applied to files:
packages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/components/ui/**/*.{ts,tsx} : Studio-specific generic UI components should be placed in apps/studio/components/ui
Applied to files:
apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/projects/[ref]/**/*.{ts,tsx} : Project-related pages should be organized in apps/studio/pages/projects/[ref]
Applied to files:
apps/studio/pages/project/[ref]/database/settings.tsx
🧬 Code graph analysis (4)
apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx (1)
packages/ui/src/components/shadcn/ui/card.tsx (2)
Card(70-70)CardContent(70-70)
apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx (4)
packages/ui-patterns/src/PageSection/index.tsx (4)
PageSectionMeta(204-204)PageSectionSummary(205-205)PageSectionTitle(206-206)PageSectionContent(202-202)apps/studio/lib/constants/index.ts (1)
DOCS_URL(48-48)apps/studio/lib/helpers.ts (1)
formatBytes(130-149)packages/ui/src/components/StatusIcon.tsx (1)
InfoIcon(195-195)
apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx (4)
packages/common/hooks/useDocsSearch.ts (1)
PageSection(297-297)packages/ui-patterns/src/PageSection/index.tsx (4)
PageSectionMeta(204-204)PageSectionSummary(205-205)PageSectionTitle(206-206)PageSectionContent(202-202)apps/studio/lib/constants/index.ts (1)
DOCS_URL(48-48)apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx (1)
NoticeBar(14-34)
apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx (5)
packages/ui-patterns/src/PageSection/index.tsx (5)
PageSectionMeta(204-204)PageSectionSummary(205-205)PageSectionTitle(206-206)PageSectionDescription(203-203)PageSectionContent(202-202)apps/studio/lib/constants/index.ts (1)
DOCS_URL(48-48)packages/ui/src/components/shadcn/ui/card.tsx (2)
Card(70-70)CardContent(70-70)apps/studio/components/ui/AlertError.tsx (1)
AlertError(46-89)packages/ui/src/components/shadcn/ui/badge.tsx (1)
Badge(39-39)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: test (1)
- GitHub Check: typecheck
- GitHub Check: format
🔇 Additional comments (13)
apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx (2)
141-173: Layout tweaks (PanelnoMargin, form gap, and full-width separator look consistent with the new patterns)Using
noMarginonPanel, tightening the form vertical gap (gap-y-4), and adding the full-widthSeparatorwith-mx-6 w-[calc(100%+3rem)]aligns this block with the newer card/section layout patterns and keeps the footerFormActionsvisually attached to the form. No functional concerns from these changes.Also applies to: 221-272
229-238:FormItemLayoutupdates match studio Shadcn form guidelinesSwitching both fields to
layout="flex-row-reverse"and constraining the control column with[&>div]:md:w-1/2 [&>div]:xl:w-2/5etc. matches the documented layout pattern for Shadcn-based forms in Studio and will keep labels/descriptions and controls aligned across breakpoints. Looks good as an alignment step with the standardized form pattern.Also applies to: 278-280
packages/ui-patterns/src/form/Layout/FormLayout.tsx (1)
85-85: LGTM! Layout enhancement aligns with the new form patterns.Adding
flex-growto the flex-row-reverse layout improves the label container's space utilization, which supports the standardized form patterns being adopted across this PR.apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx (1)
89-117: LGTM! Successfully migrated to standardized form pattern.The migration from Panel to Card/CardContent with FormLayout follows the established patterns. The flex-row-reverse layout properly places the action button on the right while maintaining the label and description on the left.
Based on learnings, this correctly uses Card to wrap forms and FormLayout with layout='flex-row-reverse' for form controls.
apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx (1)
21-46: LGTM! Clean migration to PageSection pattern.The component successfully adopts the PageSection-based layout with proper meta/content separation and integrated docs access via DocsButton. The NoticeBar functionality is preserved within the new structure.
Based on learnings, this correctly uses PageSection components for multi-section page layouts.
apps/studio/pages/project/[ref]/database/settings.tsx (2)
20-36: LGTM! Dynamic imports optimize page load performance.Converting static imports to dynamic imports for these settings components improves initial page load time by code-splitting. The proper typing with Next.js dynamic imports is maintained.
53-69: LGTM! Simplified page structure with improved spacing.The updated PageContainer structure with responsive spacing (
space-y-4 md:space-y-8) and direct component rendering creates a cleaner, more maintainable layout.apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx (1)
114-301: LGTM! Comprehensive migration to PageSection and Card patterns.The refactor successfully adopts the standardized layout patterns while preserving all functionality. The proper use of CardHeader (only when listing restrictions) and CardContent for different states aligns with the established guidelines. The PageSectionAside effectively groups action controls.
Based on learnings, this correctly uses CardHeader only when content is not described by surrounding content and CardContent for card sections.
apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx (3)
97-97: TODO comment indicates work in progress.The TODO comment mentions using mock data for UI testing. Ensure this is intentional for this PR or create a follow-up issue to address it.
Do you want me to create a follow-up issue to track the removal of mock data usage?
112-144: LGTM! Card-based content rendering with proper permission handling.The conditional rendering with Card components for different states (loading, error, content, empty) is well-structured. The per-IP Unban action with ButtonTooltip properly handles permissions and provides clear user feedback.
Based on learnings, this correctly uses Card to group related information and CardContent for card sections.
95-95: Empty PageSectionContent may be intentional but worth verifying.The PageSectionContent is empty, with actual content rendered below as sibling elements. This might be by design, but verify if content should be nested inside PageSectionContent instead.
#!/bin/bash # Description: Check PageSectionContent usage patterns in similar components # Search for PageSectionContent usage in other database settings files rg -n "PageSectionContent" apps/studio/components/interfaces/Settings/Database/ -A 5 -B 2packages/ui/src/components/shadcn/ui/card.tsx (1)
44-44: The CardDescription color change improves accessibility. Both light and dark themes now exceed WCAG AAA contrast requirements (light: 20.38:1, dark: 12.41:1), compared to the previous values. No accessibility concerns exist with this modification.Likely an incorrect or invalid review comment.
apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx (1)
19-37: Imports for new UI and layout primitives look consistentThe new imports from
uiandui-patterns(Card/CardContent, PageSection*, FormLayout, Tooltip bits, Switch, etc.) are all used and align with the standardized Card + PageSection form pattern. No issues here.
🎭 Playwright Test Results
Details
Skipped testsFeatures › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected |
|
Changes unknown |
Align the Database settings form to the new standardized form patterns.
Summary by CodeRabbit
Style
New Features
UX
✏️ Tip: You can customize this high-level summary in your review settings.