mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +03:00
Joshen LimandJonathan Summers-Muir
07699ad76b
* init * moar * moat * moar * add read replica bar * moar * Update DiskMangementPanelForm.tsx * added temp state mang to test * moar * Prepare react queries + data from API for disk mgt * moat * moat * moar * Update DiskMangementReviewAndSubmitDialog.tsx * badge updates * Hook up actual endpoints for E2E testing, but commented out for now for local dev * Hook up real data + clean up files and add tests * Update APi types * Hook up E2E and fix all validation logic * Only show new disk mgt UI for orb billing * Add note on RRs 25% more disk size * Add state to handle free plan for disk mgt * Update increase disk size CTA in reports/database * Fix file spelling errors * Address feedback * Fix missing framer motion package in ui * Address comments * Address feedabck * Minor fix * Use new disk util endpoint * Remove unused import * Address feedback * More addressing of feedback * Update pricing details for IO2 - no included disk size --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { AnimatePresence, motion } from 'framer-motion'
|
|
import { Badge } from 'ui'
|
|
|
|
interface FormFooterChangeBadgeProps {
|
|
formState: {
|
|
dirtyFields: Record<string, boolean>
|
|
}
|
|
}
|
|
export const FormFooterChangeBadge = ({ formState }: FormFooterChangeBadgeProps) => {
|
|
return (
|
|
<AnimatePresence mode="wait">
|
|
{Object.keys(formState.dirtyFields).length > 0 && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.05, 1],
|
|
transition: { duration: 0.3 },
|
|
}}
|
|
>
|
|
<Badge variant={'default'}>
|
|
<motion.span
|
|
key={Object.keys(formState.dirtyFields).length}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
transition={{ duration: 0.1 }}
|
|
>
|
|
{Object.keys(formState.dirtyFields).length === 1
|
|
? '1 change to review'
|
|
: `${Object.keys(formState.dirtyFields).length} changes to review`}
|
|
</motion.span>
|
|
</Badge>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|