mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Joshen Lim
fcfb0f0222
## Context Replaces all usage of `form.watch()` to use `useWatch` instead + follows the "name what you watch" convention as specified in the react-hook-form skills. There's also a small refactor in `SmtpForm.tsx` which removes the unnecessary use of a `useState` to track if SMTP is enabled or not <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Updated many Studio forms to watch specific fields more precisely, improving live UI updates for previews, warnings, conditional sections, and validation messages. * Enhanced responsiveness across settings, authentication, billing, storage, integrations, and support flows while keeping save/update behavior the same. * **Refined Experiences** * Improved the analytics table creation flow with tighter, enum-based column type validation and structured, type-specific column options. * **Preserved Behavior** * Maintained existing permission checks, submission flows, and account-management workflows. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { AnimatePresence, motion } from 'framer-motion'
|
|
import { ReactNode } from 'react'
|
|
import { UseFormReturn, useWatch } from 'react-hook-form'
|
|
import { COMPUTE_BASELINE_IOPS, COMPUTE_MAX_IOPS } from 'shared-data'
|
|
import { Admonition } from 'ui-patterns/Admonition'
|
|
|
|
import { DiskStorageSchemaType } from '../DiskManagement.schema'
|
|
import {
|
|
calculateComputeSizeRequiredForIops,
|
|
calculateMaxIopsForComputeSize,
|
|
mapAddOnVariantIdToComputeSize,
|
|
} from '../DiskManagement.utils'
|
|
import { RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3 } from './DiskManagement.constants'
|
|
|
|
interface ComputeSizeRecommendationSectionProps {
|
|
actions?: ReactNode
|
|
form: UseFormReturn<DiskStorageSchemaType>
|
|
}
|
|
|
|
export function ComputeSizeRecommendationSection({
|
|
actions,
|
|
form,
|
|
}: ComputeSizeRecommendationSectionProps) {
|
|
const [computeSize, iops] = useWatch({
|
|
control: form.control,
|
|
name: ['computeSize', 'provisionedIOPS'],
|
|
})
|
|
|
|
const computeSizeRecommendedForIops = calculateComputeSizeRequiredForIops(iops)
|
|
const maxIopsForComputeSize = calculateMaxIopsForComputeSize(computeSize ?? 'ci_micro')
|
|
const isVisible =
|
|
iops > maxIopsForComputeSize &&
|
|
!RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3.includes(computeSize ?? 'ci_micro')
|
|
|
|
return (
|
|
<AnimatePresence initial={false}>
|
|
{isVisible && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
transition={{ duration: 0.15 }}
|
|
>
|
|
<Admonition
|
|
type="default"
|
|
title={`Your compute size baseline is ${COMPUTE_BASELINE_IOPS[computeSize ?? 'ci_micro']} IOPS (max ${COMPUTE_MAX_IOPS[computeSize ?? 'ci_micro'] ?? maxIopsForComputeSize} IOPS)`}
|
|
>
|
|
<div className="flex flex-col gap-2">
|
|
<div>
|
|
<p className="text-sm text-foreground-light">
|
|
To achieve higher IOPS performance we recommend using the{' '}
|
|
<span className="text-foreground">
|
|
{mapAddOnVariantIdToComputeSize(computeSizeRecommendedForIops)}
|
|
</span>{' '}
|
|
compute size.
|
|
</p>
|
|
</div>
|
|
{actions && <div>{actions}</div>}
|
|
</div>
|
|
</Admonition>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|