Chore/update db connection string kaizen 2 (#20621)

* Add logic to determine if project resolves to ipv6, change badge text on use pooler connection checkbox based on that

* Fix text

* Fix type

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx

@@ -192,7 +192,7 @@ export const DatabaseConnectionString = () => {
                 <div className="flex flex-col gap-y-1 text-foreground-light">
                   <p className="text-sm">
                     You can use the following URI format to switch to a different database or user
-                    when using connection pooling.
+                    {usePoolerConnection ? ' when using connection pooling' : ''}.
                   </p>
                   <p className="text-sm font-mono tracking-tight text-foreground-lighter">
                     {poolerConnStringSyntax.map((x, idx) => {

apps/studio/components/interfaces/Settings/Database/UsePoolerCheckbox.tsx

@@ -3,6 +3,7 @@ import { Badge, Checkbox_Shadcn_ } from 'ui'
 
 import { Markdown } from 'components/interfaces/Markdown'
 import { usePoolingConfigurationQuery } from 'data/database/pooling-configuration-query'
+import { useProjectSettingsQuery } from 'data/config/project-settings-query'
 
 interface UsePoolerCheckboxInterface {
   id: string
@@ -13,9 +14,9 @@ interface UsePoolerCheckboxInterface {
 export const UsePoolerCheckbox = ({ id, checked, onCheckedChange }: UsePoolerCheckboxInterface) => {
   const { ref: projectRef } = useParams()
   const { data, isSuccess } = usePoolingConfigurationQuery({ projectRef })
+  const { data: settings, isSuccess: isSuccessSettings } = useProjectSettingsQuery({ projectRef })
 
-  // [Joshen] TODO this needs to be obtained from BE as 26th Jan is when we'll start - projects will be affected at different rates
-  const resolvesToIpV6 = !data?.supavisor_enabled && false // Number(new Date()) > Number(dayjs.utc('01-26-2024', 'MM-DD-YYYY').toDate())
+  const resolvesToIpV6 = !data?.supavisor_enabled && settings?.project.db_ip_addr_config === 'ipv6'
 
   return (
     <div className="flex gap-x-3">
@@ -32,13 +33,15 @@ export const UsePoolerCheckbox = ({ id, checked, onCheckedChange }: UsePoolerChe
               Supavisor
             </Badge>
           )}
-          <Badge color="scale" className="ml-2">
-            {checked
-              ? 'Resolves to IPv4'
-              : resolvesToIpV6
-              ? 'Resolves to IPv6'
-              : 'Resolves to IPv4'}
-          </Badge>
+          {isSuccessSettings && (
+            <Badge color="scale" className="ml-2">
+              {checked
+                ? 'Resolves to IPv4'
+                : resolvesToIpV6
+                ? 'Resolves to IPv6'
+                : 'Will resolve to IPv6'}
+            </Badge>
+          )}
         </label>
         <Markdown
           extLinks

apps/studio/data/api.d.ts

@@ -1764,13 +1764,8 @@ export interface components {
       actions?: components['schemas']['NotificationAction'][]
     }
     NotificationResponseV2: {
-      /** @enum {string} */
-      type:
-        | 'project.tier-limit-exceeded'
-        | 'postgresql.upgrade-available'
-        | 'postgresql.upgrade-completed'
-        | 'project.update-completed'
-        | 'project.informational'
+      /** @deprecated */
+      type: string | null
       /** @enum {string} */
       status: 'new' | 'seen' | 'archived'
       /** @enum {string} */
@@ -4550,7 +4545,7 @@ export interface components {
       ipv4_addresses: string[]
     }
     NetworkRestrictionsRequest: {
-      dbAllowedCidrs: string[]
+      dbAllowedCidrs?: string[]
       dbAllowedCidrsV6?: string[]
     }
     NetworkRestrictionsResponse: {
@@ -4815,15 +4810,16 @@ export interface components {
       is_physical_backup: boolean
       inserted_at: string
     }
+    PhysicalBackup: {
+      earliest_physical_backup_date_unix?: number
+      latest_physical_backup_date_unix?: number
+    }
     V1BackupsResponse: {
       region: string
       walg_enabled: boolean
       pitr_enabled: boolean
       backups: components['schemas']['V1Backup'][]
-      physical_backup_data: {
-        earliest_physical_backup_date_unix?: number
-        latest_physical_backup_date_unix?: number
-      }
+      physical_backup_data: components['schemas']['PhysicalBackup']
     }
     V1RestorePitrBody: {
       recovery_time_target_unix: number

apps/studio/data/config/project-settings-query.ts

@@ -1,79 +1,52 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { get } from 'lib/common/fetch'
+import { get } from 'data/fetchers'
 import { API_URL, DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
 import { configKeys } from './keys'
 import { ResponseError } from 'types'
+import { components } from 'data/api'
 
 export type ProjectSettingsVariables = {
   projectRef?: string
 }
 
-export type Project = {
-  id: number
-  name: string
-  ref: string
-  status: string
+// [Joshen] API typing needs to be fixed - this is completely wrong
+type ProjectSettingsInfo = components['schemas']['SettingsResponse']['project']
+interface ProjectSettingsInfoExtended extends ProjectSettingsInfo {
+  cloud_provider: string
   inserted_at: string
   db_dns_name: string
-  db_port: number
-  db_name: string
-  db_ssl: boolean
   db_host: string
+  db_name: string
+  db_port: number
+  db_ssl: boolean
   db_user: string
-  cloud_provider: string
-  region: string
-  services: Service[]
   jwt_secret: string
+  ref: string
+  status: string
+  // [Joshen] Based on the enums here
+  // https://github.com/supabase/infrastructure/blob/95dc09fe077dba7817bb112fa72b6814a620ecd3/shared/src/projects.ts#L177
+  db_ip_addr_config: 'legacy' | 'static-ipv4' | 'concurrent-ipv6' | 'ipv6'
 }
 
-export type Service = {
-  id: number
-  name: string
-  app_config: AppConfig
-  app: App
-  service_api_keys: ServiceApiKey[]
-}
-
-export type AppConfig = {
-  protocol: 'https' | 'http'
-  endpoint: string
-  db_schema: string
-  realtime_multitenant_enabled: boolean
-}
-
-export type App = {
-  id: number
-  name: string
-}
-
-export type ServiceApiKey = {
-  api_key_encrypted: string
-  tags: string
-  name: string
-  api_key: string
-}
-
-export type ProjectSettingsResponse = {
-  project: Project
-  services: Service[]
+export type ProjectSettings = {
+  project: ProjectSettingsInfoExtended
+  services: components['schemas']['SettingsResponse']['services']
 }
 
 export async function getProjectSettings(
   { projectRef }: ProjectSettingsVariables,
   signal?: AbortSignal
 ) {
-  if (!projectRef) {
-    throw new Error('projectRef is required')
-  }
+  if (!projectRef) throw new Error('projectRef is required')
 
-  const response = await get(`${API_URL}/props/project/${projectRef}/settings`, {
+  // [Joshen] API typing is wrong here
+  const { data, error } = await get('/platform/props/project/{ref}/settings', {
+    params: { path: { ref: projectRef } },
     signal,
   })
-  if (response.error) {
-    throw response.error
-  }
 
-  return response as ProjectSettingsResponse
+  if (error) throw error
+  return data as unknown as ProjectSettings
 }
 
 export type ProjectSettingsData = Awaited<ReturnType<typeof getProjectSettings>>
@@ -91,10 +64,10 @@ export const useProjectSettingsQuery = <TData = ProjectSettingsData>(
     ({ signal }) => getProjectSettings({ projectRef }, signal),
     {
       enabled: enabled && typeof projectRef !== 'undefined',
-      refetchInterval(data, query) {
-        const apiService = (
-          (data as unknown as ProjectSettingsData | undefined)?.services ?? []
-        ).find((x) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID)
+      refetchInterval(data) {
+        const apiService = ((data as ProjectSettings)?.services ?? []).find(
+          (x) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID
+        )
         const apiKeys = apiService?.service_api_keys ?? []
         const interval = apiKeys.length === 0 ? 2000 : 0