Clean up import statements

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'
 
 /**

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<DiskStorageSchemaType>

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<DiskStorageSchemaType>

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'

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<DiskStorageSchemaType>

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 {

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<DiskStorageSchemaType>
 }) {
   const { watch } = form
@@ -43,7 +45,7 @@ export function ComputeSizeReccomendationSection({
             <div className="flex flex-col gap-2">
               <div>
                 <p className="text-sm text-foreground-light">
-                  To achieve sustained IOPS performance we recommend using{' '}
+                  To achieve sustained IOPS performance we recommend using the{' '}
                   <span className="text-foreground">
                     {mapAddOnVariantIdToComputeSize(computeSizeRecommendedForIops)}
                   </span>{' '}

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({

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
               </p>
             </div>
-            {/* <button
-              type="button"
-              className="text-foreground-lighter hover:text-foreground-light transition-colors self-start p-1"
-              onClick={() => setIsVisible(false)}
-            >
-              <X size={14} />
-            </button> */}
           </DialogSection>
         </motion.div>
       )}

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)

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<DiskStorageSchemaType>

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<DiskStorageSchemaType>
 }) {
   const { watch } = form

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
 }
 

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 (
     <AnimatePresence initial={false}>

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<ComponentProps<typeof Admonition>, 'description'> {

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,