diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx index a9a0d2e1c67..fa765763bf1 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx @@ -1,25 +1,26 @@ +import { CpuIcon, Lock, Microchip } from 'lucide-react' +import { useMemo } from 'react' +import { UseFormReturn } from 'react-hook-form' + import { components } from 'api-types' import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' +import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' +import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils' -import { CpuIcon, DiamondPlus, Lock, Microchip, Sparkle, Sparkles } from 'lucide-react' -import { useMemo } from 'react' -import { UseFormReturn } from 'react-hook-form' import { cn, FormField_Shadcn_, RadioGroupCard, RadioGroupCardItem, Skeleton } from 'ui' import { ComputeBadge } from 'ui-patterns' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' -import { BillingChangeBadge } from '../ui/BillingChangeBadge' +import { DiskStorageSchemaType } from '../DiskManagement.schema' +import { ComputeInstanceAddonVariantId } from '../DiskManagement.types' import { calculateComputeSizePrice, getAvailableComputeOptions, showMicroUpgrade, } from '../DiskManagement.utils' -import { DiskStorageSchemaType } from '../DiskManagement.schema' +import { BillingChangeBadge } from '../ui/BillingChangeBadge' import FormMessage from '../ui/FormMessage' -import { ComputeInstanceAddonVariantId } from '../DiskManagement.types' -import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' -import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { NoticeBar } from '../ui/NoticeBar' /** diff --git a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx index e0c4b2bdff4..f29f86339b7 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx @@ -1,10 +1,12 @@ +import { UseFormReturn } from 'react-hook-form' + import { InputVariants } from '@ui/components/shadcn/ui/input' import { useParams } from 'common' +import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' import { useDiskUtilizationQuery } from 'data/config/disk-utilization-query' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { GB } from 'lib/constants' -import { UseFormReturn } from 'react-hook-form' import { Button, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, Skeleton, cn } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { DiskStorageSchemaType } from '../DiskManagement.schema' @@ -13,11 +15,10 @@ import { BillingChangeBadge } from '../ui/BillingChangeBadge' import { DiskType, PLAN_DETAILS } from '../ui/DiskManagement.constants' import { DiskManagementDiskSizeReadReplicas } from '../ui/DiskManagementReadReplicas' import DiskSpaceBar from '../ui/DiskSpaceBar' +import { DiskTypeReccomendationSection } from '../ui/DiskTypeReccomendationSection' +import FormMessage from '../ui/FormMessage' import { InputPostTab } from '../ui/InputPostTab' import { InputResetButton } from '../ui/InputResetButton' -import FormMessage from '../ui/FormMessage' -import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' -import { DiskTypeReccomendationSection } from '../ui/DiskTypeReccomendationSection' type DiskSizeFieldProps = { form: UseFormReturn diff --git a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx index 2711547192f..c77b0d77fe6 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx @@ -1,27 +1,26 @@ -import { components } from 'api-types' import { UseFormReturn } from 'react-hook-form' + +import { InputVariants } from '@ui/components/shadcn/ui/input' +import { useParams } from 'common' +import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' import { Button, cn, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, Skeleton } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' -import { BillingChangeBadge } from '../ui/BillingChangeBadge' -import { ComputeSizeReccomendationSection } from '../ui/ComputeSizeReccomendationSection' -import { - COMPUTE_BASELINE_IOPS, - DiskType, - IOPS_RANGE, - RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3, -} from '../ui/DiskManagement.constants' +import { DiskStorageSchemaType } from '../DiskManagement.schema' import { calculateComputeSizeRequiredForIops, calculateIOPSPrice, mapAddOnVariantIdToComputeSize, } from '../DiskManagement.utils' -import { DiskStorageSchemaType } from '../DiskManagement.schema' +import { BillingChangeBadge } from '../ui/BillingChangeBadge' +import { ComputeSizeReccomendationSection } from '../ui/ComputeSizeRecommendationSection' +import { + COMPUTE_BASELINE_IOPS, + DiskType, + RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3, +} from '../ui/DiskManagement.constants' import { DiskManagementIOPSReadReplicas } from '../ui/DiskManagementReadReplicas' -import { InputPostTab } from '../ui/InputPostTab' -import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' -import { useParams } from 'common' -import { InputVariants } from '@ui/components/shadcn/ui/input' import FormMessage from '../ui/FormMessage' +import { InputPostTab } from '../ui/InputPostTab' type IOPSFieldProps = { form: UseFormReturn diff --git a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx index dca7310624b..1b8430edbdd 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx @@ -1,8 +1,11 @@ +import { UseFormReturn } from 'react-hook-form' + import { useParams } from 'common' import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' -import { UseFormReturn } from 'react-hook-form' import { Badge, + buttonVariants, + cn, FormControl_Shadcn_, FormField_Shadcn_, Select_Shadcn_, @@ -11,8 +14,6 @@ import { SelectTrigger_Shadcn_, SelectValue_Shadcn_, Skeleton, - buttonVariants, - cn, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { DiskStorageSchemaType } from '../DiskManagement.schema' diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx index b23385944e0..1a9089bba5d 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx @@ -1,7 +1,14 @@ import { AnimatePresence, motion } from 'framer-motion' +import { useEffect } from 'react' import { UseFormReturn } from 'react-hook-form' + +import { InputVariants } from '@ui/components/shadcn/ui/input' +import { useParams } from 'common' +import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' import { cn, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, Skeleton } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { DiskStorageSchemaType } from '../DiskManagement.schema' +import { calculateThroughputPrice } from '../DiskManagement.utils' import { BillingChangeBadge } from '../ui/BillingChangeBadge' import { COMPUTE_BASELINE_THROUGHPUT, @@ -9,15 +16,9 @@ import { RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3, THROUGHPUT_RANGE, } from '../ui/DiskManagement.constants' -import { calculateThroughputPrice } from '../DiskManagement.utils' -import { DiskStorageSchemaType } from '../DiskManagement.schema' import { DiskManagementThroughputReadReplicas } from '../ui/DiskManagementReadReplicas' -import { InputPostTab } from '../ui/InputPostTab' -import { useEffect } from 'react' import FormMessage from '../ui/FormMessage' -import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' -import { useParams } from 'common' -import { InputVariants } from '@ui/components/shadcn/ui/input' +import { InputPostTab } from '../ui/InputPostTab' type ThroughputFieldProps = { form: UseFormReturn diff --git a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx index 29f80c84ecc..1e0f3c8c1db 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx @@ -1,6 +1,7 @@ import { AnimatePresence, motion } from 'framer-motion' -import { formatCurrency } from 'lib/helpers' import { ChevronRight } from 'lucide-react' + +import { formatCurrency } from 'lib/helpers' import { Badge, cn, Tooltip_Shadcn_, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_ } from 'ui' interface BillingChangeBadgeProps { diff --git a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeReccomendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx similarity index 96% rename from apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeReccomendationSection.tsx rename to apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx index 2fb4f8c1c74..532c6442cfa 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeReccomendationSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx @@ -1,5 +1,9 @@ import { AnimatePresence, motion } from 'framer-motion' +import { ReactNode } from 'react' +import { UseFormReturn } from 'react-hook-form' + import { Admonition } from 'ui-patterns/admonition' +import { DiskStorageSchemaType } from '../DiskManagement.schema' import { calculateComputeSizeRequiredForIops, calculateMaxIopsAllowedForComputeSize, @@ -9,14 +13,12 @@ import { COMPUTE_BASELINE_IOPS, RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3, } from './DiskManagement.constants' -import { UseFormReturn } from 'react-hook-form' -import { DiskStorageSchemaType } from '../DiskManagement.schema' export function ComputeSizeReccomendationSection({ actions, form, }: { - actions?: React.ReactNode + actions?: ReactNode form: UseFormReturn }) { const { watch } = form @@ -43,7 +45,7 @@ export function ComputeSizeReccomendationSection({

- To achieve sustained IOPS performance we recommend using{' '} + To achieve sustained IOPS performance we recommend using the{' '} {mapAddOnVariantIdToComputeSize(computeSizeRecommendedForIops)} {' '} diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx index 402671bc439..3f4b6389d2a 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx @@ -1,12 +1,13 @@ import { AnimatePresence, motion } from 'framer-motion' +import { useEffect, useState } from 'react' + +import { useParams } from 'common' +import CountdownTimerRadial from 'components/ui/CountdownTimer/CountdownTimerRadial' +import CountdownTimerSpan from 'components/ui/CountdownTimer/CountdownTimerSpan' +import { useRemainingDurationForDiskAttributeUpdate } from 'data/config/disk-attributes-query' import { COOLDOWN_DURATION } from 'data/config/disk-attributes-update-mutation' import { Card, CardContent } from 'ui' -import CountdownTimerRadial from '../../../ui/CountdownTimer/CountdownTimerRadial' -import CountdownTimerSpan from '../../../ui/CountdownTimer/CountdownTimerSpan' -import { useRemainingDurationForDiskAttributeUpdate } from 'data/config/disk-attributes-query' -import { useParams } from 'common' import FormMessage from './FormMessage' -import { useEffect, useState } from 'react' export function DiskCountdownRadial() { const { ref } = useParams() @@ -14,7 +15,6 @@ export function DiskCountdownRadial() { const { remainingDuration: initialRemainingTime, - isWithinCooldownWindow, error, isSuccess, } = useRemainingDurationForDiskAttributeUpdate({ diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementCoolDownSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementCoolDownSection.tsx index 80d4eb037b0..5bd20f76d57 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementCoolDownSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementCoolDownSection.tsx @@ -1,9 +1,10 @@ -import CountdownTimerRadial from 'components/ui/CountdownTimer/CountdownTimerRadial' import { AnimatePresence, motion } from 'framer-motion' -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' + +import CountdownTimerRadial from 'components/ui/CountdownTimer/CountdownTimerRadial' import { DialogSection } from 'ui' -export const DiskMangementCoolDownSection: React.FC = () => { +export const DiskMangementCoolDownSection = () => { const [progress, setProgress] = useState(100) const [showCountdown, setShowCountdown] = useState(false) const [isJumping, setIsJumping] = useState(false) @@ -78,13 +79,6 @@ export const DiskMangementCoolDownSection: React.FC = () => { There is a cooldown period enforced for any disk attribute modifications

- {/* */} )} diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx index 07c4c6887c2..ebb9d10ea07 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx @@ -1,16 +1,16 @@ +import { AnimatePresence, motion } from 'framer-motion' + import { useParams } from 'common' import { useReadReplicasQuery } from 'data/read-replicas/replicas-query' import { formatDatabaseID } from 'data/read-replicas/replicas.utils' -import { AnimatePresence, motion } from 'framer-motion' -import { useState } from 'react' import { Alert_Shadcn_ as Alert, AlertDescription_Shadcn_ as AlertDescription, AlertTitle_Shadcn_ as AlertTitle, InfoIcon, } from 'ui' -import { DISK_LIMITS, DISK_PRICING, DiskType } from './DiskManagement.constants' import { BillingChangeBadge } from './BillingChangeBadge' +import { DISK_LIMITS, DISK_PRICING, DiskType } from './DiskManagement.constants' interface DiskManagementDiskSizeReadReplicasProps { isDirty: boolean @@ -30,7 +30,6 @@ export const DiskManagementDiskSizeReadReplicas = ({ newStorageType, }: DiskManagementDiskSizeReadReplicasProps) => { const { ref: projectRef } = useParams() - const [isOpen, setIsOpen] = useState(false) const { data: databases } = useReadReplicasQuery({ projectRef }) const readReplicas = (databases ?? []).filter((db) => db.identifier !== projectRef) diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx index 6e0973bdf94..9af18b955b7 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx @@ -1,13 +1,14 @@ +import { AnimatePresence, motion } from 'framer-motion' +import { Info } from 'lucide-react' +import MotionNumber from 'motion-number' +import { UseFormReturn } from 'react-hook-form' + import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { useDiskUtilizationQuery } from 'data/config/disk-utilization-query' import { useDatabaseSizeQuery } from 'data/database/database-size-query' -import { AnimatePresence, motion } from 'framer-motion' import { GB } from 'lib/constants' import { formatBytes } from 'lib/helpers' -import { Info } from 'lucide-react' -import MotionNumber from 'motion-number' -import { UseFormReturn } from 'react-hook-form' import { badgeVariants, cn, @@ -15,8 +16,8 @@ import { TooltipContent_Shadcn_, TooltipTrigger_Shadcn_, } from 'ui' -import { AUTOSCALING_THRESHOLD } from './DiskManagement.constants' import { DiskStorageSchemaType } from '../DiskManagement.schema' +import { AUTOSCALING_THRESHOLD } from './DiskManagement.constants' interface DiskSpaceBarProps { form: UseFormReturn diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeReccomendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx similarity index 89% rename from apps/studio/components/interfaces/DiskManagement/ui/DiskTypeReccomendationSection.tsx rename to apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx index 1c88a541b0e..b637daf3489 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeReccomendationSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx @@ -1,14 +1,16 @@ import { AnimatePresence, motion } from 'framer-motion' +import { ReactNode } from 'react' import { UseFormReturn } from 'react-hook-form' + import { Admonition } from 'ui-patterns/admonition' import { DiskStorageSchemaType } from '../DiskManagement.schema' -import { DISK_LIMITS, DISK_TYPE_OPTIONS, DiskType, IOPS_RANGE } from './DiskManagement.constants' +import { DISK_LIMITS, DISK_TYPE_OPTIONS, DiskType } from './DiskManagement.constants' export function DiskTypeReccomendationSection({ actions, form, }: { - actions?: React.ReactNode + actions?: ReactNode form: UseFormReturn }) { const { watch } = form diff --git a/apps/studio/components/interfaces/DiskManagement/ui/FreeUpgradeToMicroSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/FreeUpgradeToMicroSection.tsx deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/apps/studio/components/interfaces/DiskManagement/ui/InputPostTab.tsx b/apps/studio/components/interfaces/DiskManagement/ui/InputPostTab.tsx index f8cadcab95a..a295b3c5efb 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/InputPostTab.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/InputPostTab.tsx @@ -1,7 +1,7 @@ -import React, { forwardRef } from 'react' +import { forwardRef, ReactNode } from 'react' interface InputPostTabProps { - children: React.ReactNode + children: ReactNode label: string } diff --git a/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx b/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx index dd3ed7470af..3833b286a73 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx @@ -1,7 +1,8 @@ import { AnimatePresence, motion } from 'framer-motion' -import { Button } from 'ui' import { RotateCcw } from 'lucide-react' +import { Button } from 'ui' + function InputResetButton({ isDirty, onClick }: { isDirty: boolean; onClick: () => void }) { return ( diff --git a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx index 77a22cc0427..89ce0071671 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx @@ -1,7 +1,7 @@ import { AnimatePresence, motion } from 'framer-motion' import { LucideIcon } from 'lucide-react' import { ComponentProps } from 'react' -import { Card, CardContent } from 'ui' + import { Admonition } from 'ui-patterns' interface NoticeBarProps extends Omit, 'description'> { diff --git a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx index 120268e9096..f9ccf2aac7d 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx @@ -1,7 +1,8 @@ -import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { AnimatePresence, motion } from 'framer-motion' -import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import Link from 'next/link' + +import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' +import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { AlertDescription_Shadcn_ as AlertDescription, AlertTitle_Shadcn_ as AlertTitle,