mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
82 lines
3.5 KiB
TypeScript
82 lines
3.5 KiB
TypeScript
import { useParams } from 'common'
|
|
import { AlertTriangleIcon, ExternalLinkIcon } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import { Alert, AlertDescription, AlertTitle, Button } from 'ui'
|
|
|
|
import ConfirmDisableReadOnlyModeModal from './DatabaseSettings/ConfirmDisableReadOnlyModal'
|
|
import { useResourceWarningsQuery } from '@/data/usage/resource-warnings-query'
|
|
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
|
|
import { DOCS_URL } from '@/lib/constants'
|
|
|
|
export const DatabaseReadOnlyAlert = () => {
|
|
const { ref: projectRef } = useParams()
|
|
const { data: organization } = useSelectedOrganizationQuery()
|
|
const [showConfirmationModal, setShowConfirmationModal] = useState(false)
|
|
|
|
const { data: resourceWarnings } = useResourceWarningsQuery({ ref: projectRef })
|
|
// [Joshen Cleanup] JFYI this can be cleaned up once BE changes are live which will only return the warnings based on the provided ref
|
|
// No longer need to filter by ref on the client side
|
|
const isReadOnlyMode =
|
|
(resourceWarnings ?? [])?.find((warning) => warning.project === projectRef)
|
|
?.is_readonly_mode_enabled ?? false
|
|
|
|
return (
|
|
<>
|
|
{isReadOnlyMode && (
|
|
<Alert variant="destructive">
|
|
<AlertTriangleIcon />
|
|
<AlertTitle>
|
|
Project is in read-only mode and database is no longer accepting write requests
|
|
</AlertTitle>
|
|
<AlertDescription>
|
|
You have reached 95% of your project's disk space, and read-only mode has been enabled
|
|
to preserve your database's stability and prevent your project from exceeding its
|
|
current billing plan. To resolve this, you may:
|
|
<ul className="list-disc pl-6 mt-1">
|
|
<li>
|
|
Temporarily disable read-only mode to free up space and reduce your database size
|
|
</li>
|
|
{organization?.plan.id === 'free' ? (
|
|
<li>
|
|
<Link
|
|
href={`/org/${organization?.slug}/billing?panel=subscriptionPlan&source=databaseReadOnlyAlertUpgradePlan`}
|
|
>
|
|
<a className="text underline">Upgrade to the Pro Plan</a>
|
|
</Link>{' '}
|
|
to increase your database size limit to 8GB.
|
|
</li>
|
|
) : organization?.plan.id === 'pro' && organization?.usage_billing_enabled ? (
|
|
<li>
|
|
<Link
|
|
href={`/org/${organization?.slug}/billing?panel=subscriptionPlan&source=databaseReadOnlyAlertSpendCap`}
|
|
>
|
|
<a className="text-foreground underline">Disable your Spend Cap</a>
|
|
</Link>{' '}
|
|
to allow your project to auto-scale and expand beyond the 8GB database size limit
|
|
</li>
|
|
) : null}
|
|
</ul>
|
|
</AlertDescription>
|
|
<div className="mt-4 flex items-center space-x-2">
|
|
<Button onClick={() => setShowConfirmationModal(true)}>Disable read-only mode</Button>
|
|
<Button asChild icon={<ExternalLinkIcon />}>
|
|
<a
|
|
href={`${DOCS_URL}/guides/platform/database-size#disabling-read-only-mode`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
<ConfirmDisableReadOnlyModeModal
|
|
visible={showConfirmationModal}
|
|
onClose={() => setShowConfirmationModal(false)}
|
|
/>
|
|
</>
|
|
)
|
|
}
|