type fixes

apps/studio/components/interfaces/DiskManagement/BillingMangementForm.loading.tsx

@@ -1,64 +1,64 @@
-import { ScaffoldContainer } from 'components/layouts/Scaffold'
-import { Form_Shadcn_, Separator, Skeleton } from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+// import { ScaffoldContainer } from 'components/layouts/Scaffold'
+// import { Form_Shadcn_, Separator, Skeleton } from 'ui'
+// import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
-export function DiskManagementFormLoading() {
-  return (
-    <Form_Shadcn_>
-      <form className="flex flex-col gap-8">
-        <ScaffoldContainer className="relative flex flex-col gap-10" bottomPadding>
-          <Separator />
+// export function DiskManagementFormLoading() {
+//   return (
+//     <Form_Shadcn_>
+//       <form className="flex flex-col gap-8">
+//         <ScaffoldContainer className="relative flex flex-col gap-10" bottomPadding>
+//           <Separator />
 
-          <FormItemLayout
-            label="Compute size"
-            layout="horizontal"
-            isReactForm={false}
-            labelOptional={<p>Hardware resources allocated to your postgres database</p>}
-          >
-            <div className="grid grid-cols-3 flex-wrap gap-3">
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-              <Skeleton className="bg-surface-300 block w-full h-[110px]" />
-            </div>
-          </FormItemLayout>
+//           <FormItemLayout
+//             label="Compute size"
+//             layout="horizontal"
+//             isReactForm={false}
+//             labelOptional={<p>Hardware resources allocated to your postgres database</p>}
+//           >
+//             <div className="grid grid-cols-3 flex-wrap gap-3">
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//               <Skeleton className="bg-surface-300 block w-full h-[110px]" />
+//             </div>
+//           </FormItemLayout>
 
-          <Separator />
+//           <Separator />
 
-          <FormItemLayout label="Storage type" layout="horizontal" isReactForm={false}>
-            <div className="grid grid-cols-2 flex-wrap gap-3">
-              <Skeleton className="bg-surface-300 block w-full h-21" />
-              <Skeleton className="bg-surface-300 block w-full h-21" />
-            </div>
-          </FormItemLayout>
+//           <FormItemLayout label="Storage type" layout="horizontal" isReactForm={false}>
+//             <div className="grid grid-cols-2 flex-wrap gap-3">
+//               <Skeleton className="bg-surface-300 block w-full h-21" />
+//               <Skeleton className="bg-surface-300 block w-full h-21" />
+//             </div>
+//           </FormItemLayout>
 
-          {/* <FormItemLayout
-          label="Compute size"
-          layout="horizontal"
-          isReactForm={false}
-          labelOptional="hardware resources allocated to your postgres database"
-        >
-          <Skeleton className="bg-surface-300 w-100 h-12" />
-          <Skeleton className="bg-surface-300 w-100 h-12" />
-          <Skeleton className="bg-surface-300 w-100 h-12" />
-        </FormItemLayout>
+//           {/* <FormItemLayout
+//           label="Compute size"
+//           layout="horizontal"
+//           isReactForm={false}
+//           labelOptional="hardware resources allocated to your postgres database"
+//         >
+//           <Skeleton className="bg-surface-300 w-100 h-12" />
+//           <Skeleton className="bg-surface-300 w-100 h-12" />
+//           <Skeleton className="bg-surface-300 w-100 h-12" />
+//         </FormItemLayout>
 
-        <FormItemLayout
-          label="Compute size"
-          layout="horizontal"
-          isReactForm={false}
-          labelOptional="hardware resources allocated to your postgres database"
-        >
-          <Skeleton className="bg-surface-300 w-100 h-10" />
-        </FormItemLayout> */}
-        </ScaffoldContainer>
-      </form>
-    </Form_Shadcn_>
-  )
-}
+//         <FormItemLayout
+//           label="Compute size"
+//           layout="horizontal"
+//           isReactForm={false}
+//           labelOptional="hardware resources allocated to your postgres database"
+//         >
+//           <Skeleton className="bg-surface-300 w-100 h-10" />
+//         </FormItemLayout> */}
+//         </ScaffoldContainer>
+//       </form>
+//     </Form_Shadcn_>
+//   )
+// }

apps/studio/components/interfaces/DiskManagement/DiskManagement.utils.ts

@@ -53,12 +53,15 @@ export const calculateComputeSizePrice = ({
   oldComputeSize: string
   newComputeSize: string
 }) => {
-  const oldPrice = availableOptions?.find((x) => x.identifier === oldComputeSize)?.price * 720
-  const newPrice = availableOptions?.find((x) => x.identifier === newComputeSize)?.price * 720
+  const oldPrice = availableOptions?.find((x) => x.identifier === oldComputeSize)?.price ?? 0
+  const newPrice = availableOptions?.find((x) => x.identifier === newComputeSize)?.price ?? 0
+
+  const oldPriceMonthly = oldPrice * 720
+  const newPriceMonthly = newPrice * 720
 
   return {
-    oldPrice,
-    newPrice,
+    oldPrice: oldPriceMonthly.toFixed(2),
+    newPrice: newPriceMonthly.toFixed(2),
   }
 }
 
@@ -145,7 +148,7 @@ export function getAvailableComputeOptions(availableAddons: any[], projectCloudP
   const computeOptions =
     availableAddons
       .find((addon) => addon.type === 'compute_instance')
-      ?.variants.filter((option) => {
+      ?.variants.filter((option: { [key: string]: any }) => {
         if (!projectCloudProvider) {
           return true
         }

apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx

@@ -50,7 +50,7 @@ import { ComputeBadge } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { FormFooterChangeBadge } from '../DataWarehouse/FormFooterChangeBadge'
 import BillingChangeBadge from './BillingChangeBadge'
-import { DiskManagementFormLoading } from './BillingMangementForm.loading'
+// import { DiskManagementFormLoading } from './BillingMangementForm.loading'
 import { ComputeSizeReccomendationSection } from './ComputeSizeReccomendationSection'
 import { DiskCountdownRadial } from './DiskCountdownRadial'
 import {
@@ -74,7 +74,7 @@ import {
   calculateThroughputPrice,
   getAvailableComputeOptions,
 } from './DiskManagement.utils'
-import { CreateDiskStorageSchema, DiskStorageSchemaType } from './DiskManagementPanelSchema'
+import { CreateDiskStorageSchema, DiskStorageSchemaType } from './DiskManagementPanel.schema'
 import { DiskManagementPlanUpgradeRequired } from './DiskManagementPlanUpgradeRequired'
 import {
   DiskManagementDiskSizeReadReplicas,
@@ -292,6 +292,7 @@ export function DiskManagementForm() {
   useEffect(() => {
     // Initialize field values properly when data has been loaded
     if (isSuccess) form.reset(defaultValues)
+    // @ts-nocheck
   }, [isSuccess])
 
   // Watch storageType and allocatedStorage to adjust constraints dynamically
@@ -349,7 +350,8 @@ export function DiskManagementForm() {
   }
 
   if (isLoading) {
-    return <DiskManagementFormLoading />
+    // return <DiskManagementFormLoading />
+    return <div>loading...</div>
   }
 
   if (error) {
@@ -455,7 +457,7 @@ export function DiskManagementForm() {
                       defaultValue={field.value}
                       value={field.value}
                     >
-                      {availableOptions.map((compute) => {
+                      {availableOptions.map((compute: (typeof availableOptions)[number]) => {
                         const cpuArchitecture = getCloudProviderArchitecture(
                           project?.cloud_provider
                         )

apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx

@@ -60,7 +60,7 @@ import {
   calculateIOPSPrice,
   calculateThroughputPrice,
 } from './DiskManagement.utils'
-import { CreateDiskStorageSchema, DiskStorageSchemaType } from './DiskManagementPanelSchema'
+import { CreateDiskStorageSchema, DiskStorageSchemaType } from './DiskManagementPanel.schema'
 import { DiskManagementPlanUpgradeRequired } from './DiskManagementPlanUpgradeRequired'
 import {
   DiskManagementDiskSizeReadReplicas,
@@ -196,6 +196,12 @@ export function DiskManagementPanelForm() {
       ? Math.min(0.25 * watchedIOPS, THROUGHPUT_RANGE[DiskType.GP3].max)
       : undefined
 
+  const onSubmit = async (data: DiskStorageSchemaType) => {
+    console.log('submitting')
+    if (projectRef === undefined) return console.error('Project ref is required')
+    updateDiskConfigurationRQ({ ref: projectRef, ...data })
+  }
+
   // i hate typescript enums
   // gotta clean this up but it allows me to remove type casts for now
   function getEnumFromFormValue(value: string) {

apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog.tsx

@@ -35,7 +35,7 @@ import {
   getAvailableComputeOptions,
 } from './DiskManagement.utils'
 import { DiskMangementCoolDownSection } from './DiskManagementCoolDownSection'
-import { DiskStorageSchemaType } from './DiskManagementPanelSchema'
+import { DiskStorageSchemaType } from './DiskManagementPanel.schema'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useMemo } from 'react'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
@@ -250,8 +250,8 @@ export const DiskManagementReviewAndSubmitDialog = ({
                 defaultValue={form.formState.defaultValues?.computeSize ?? ''}
                 newValue={form.getValues('computeSize')}
                 unit="-"
-                beforePrice={computeSizePrice.oldPrice}
-                afterPrice={computeSizePrice.newPrice}
+                beforePrice={Number(computeSizePrice.oldPrice)}
+                afterPrice={Number(computeSizePrice.newPrice)}
               />
             )}
             {form.formState.defaultValues?.storageType !== form.getValues('storageType') && (