Files
supabase/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
T
Danny White 0a96a5d0ce chore(studio): polish database settings (#42970)
## What kind of change does this PR introduce?

UI update

## What is the current behavior?

- Database settings uses an older, much wider, layout
- This will become problematic later on as more complex elements are
added to the page
- Titles and descriptions are inconsistently formatted

## What is the new behavior?

| Before | After |
| --- | --- |
| <img width="1728" height="994" alt="Oldie 2 Toolshed
Supabase-EE998752-3696-45E4-A842-9666049153D8"
src="https://github.com/user-attachments/assets/8f0004cf-3bb4-4b00-900a-b116b80371a6"
/> | <img width="1728" height="994" alt="Oldie 2 Toolshed
Supabase-7E86FD58-35BB-4912-8B2F-8C7AAA03B462"
src="https://github.com/user-attachments/assets/606b51b4-21a0-4b7b-870b-ac92ed363f3c"
/> |
2026-02-27 11:16:02 +11:00

46 lines
1.3 KiB
TypeScript

import Link from 'next/link'
import { useParams } from 'common'
import { DOCS_URL } from 'lib/constants'
import { Button } from 'ui'
import {
PageSection,
PageSectionContent,
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns'
import { DocsButton } from '../../ui/DocsButton'
import { Admonition } from 'ui-patterns/admonition'
// [Joshen] Only used for non AWS projects
export function DiskManagementPanelForm() {
const { ref: projectRef } = useParams()
return (
<PageSection id="disk-management">
<PageSectionMeta>
<PageSectionSummary>
<PageSectionTitle>Disk management</PageSectionTitle>
</PageSectionSummary>
<DocsButton href={`${DOCS_URL}/guides/platform/database-size#disk-management`} />
</PageSectionMeta>
<PageSectionContent>
<Admonition
type="default"
layout="responsive"
title="Disk Management has moved"
description="Disk configuration is now managed alongside Project Compute on the new Compute and Disk page."
actions={
<Button type="default" asChild>
<Link href={`/project/${projectRef}/settings/compute-and-disk`}>
Go to Compute and Disk
</Link>
</Button>
}
/>
</PageSectionContent>
</PageSection>
)
}