Merge pull request #6677 from supabase/hi/fix-upcoming-project-detail-loading

fix: upcoming project detail loading

studio/components/layouts/ProjectLayout/BuildingState.tsx

@@ -8,7 +8,7 @@ import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/H
 
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { useStore } from 'hooks'
-import { get, getWithTimeout } from 'lib/common/fetch'
+import { getWithTimeout } from 'lib/common/fetch'
 import { Project } from 'types'
 import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
 
@@ -23,17 +23,13 @@ const ProjectBuildingState: FC<ProjectBuildingState> = ({ project }) => {
     const projectStatus = await getWithTimeout(`${API_URL}/projects/${project.ref}/status`, {
       timeout: 2000,
     })
-
     if (projectStatus && !projectStatus.error) {
       const { status } = projectStatus
       if (status === PROJECT_STATUS.ACTIVE_HEALTHY) {
         clearInterval(checkServerInterval.current)
-
-        const res = await get(`${API_URL}/props/project/${project.ref}/connection-string`)
-        if (res && res.connectionString) {
-          app.onProjectConnectionStringUpdated(project.id, res.connectionString)
-        }
-        app.onProjectStatusUpdated(project.id, status)
+        // re-fetch project detail.
+        // This will also trigger UI state change to show project building completed
+        await app.projects.fetchDetail(project.ref)
       }
     }
   }

studio/stores/app/AppStore.ts

@@ -15,7 +15,6 @@ export interface IAppStore {
   onProjectCreated: (project: any) => void
   onProjectUpdated: (project: any) => void
   onProjectDeleted: (project: any) => void
-  onProjectConnectionStringUpdated: (projectId: number, value: string) => void
   onProjectStatusUpdated: (projectId: number, value: string) => void
   onProjectPostgrestStatusUpdated: (projectId: number, value: 'OFFLINE' | 'ONLINE') => void
   onOrgAdded: (org: any) => void
@@ -76,12 +75,6 @@ export default class AppStore implements IAppStore {
     }
   }
 
-  onProjectConnectionStringUpdated(projectId: number, value: string) {
-    const clone = cloneDeep(this.projects.data[projectId])
-    clone.connectionString = value
-    this.projects.data[projectId] = clone
-  }
-
   onProjectStatusUpdated(projectId: number, value: string) {
     const clone = cloneDeep(this.projects.data[projectId])
     clone.status = value

studio/stores/app/ProjectStore.ts

@@ -9,7 +9,7 @@ import PostgresMetaInterface, { IPostgresMetaInterface } from '../common/Postgre
 import pingPostgrest from 'lib/pingPostgrest'
 
 export interface IProjectStore extends IPostgresMetaInterface<Project> {
-  fetchDetail: (projectRef: string) => void
+  fetchDetail: (projectRef: string) => Promise<void>
 }
 
 export default class ProjectStore extends PostgresMetaInterface<Project> {
@@ -31,37 +31,47 @@ export default class ProjectStore extends PostgresMetaInterface<Project> {
 
     if (!response.error) {
       const project = response as Project
-      if (
-        project.status === PROJECT_STATUS.ACTIVE_HEALTHY &&
-        project.restUrl &&
-        project.internalApiKey
-      ) {
-        const success = await pingPostgrest(project.restUrl, project.internalApiKey, {
-          kpsVersion: project.kpsVersion,
-        })
-        project.postgrestStatus = success ? 'ONLINE' : 'OFFLINE'
-      }
+      // to improve UX, we wait for PingPostgrest result before continue
+      project.postgrestStatus = await this.pingPostgrest(project)
+      // update project detail by key id
       this.data[project.id] = project
 
-      // lazy fetchs
-      this.fetchSubscriptionTier(project.id, project.ref)
+      // lazy fetches
+      this.fetchSubscriptionTier(project)
     }
   }
 
-  async fetchSubscriptionTier(projectId: number, projectRef: string) {
-    const url = `${this.url}/${projectRef}/subscription`
-    const headers = constructHeaders(this.headers)
-    const response = await get(url, { headers })
-    if (!response.error) {
-      const subscriptionInfo = response as {
-        tier: {
-          supabase_prod_id: string
+  async pingPostgrest(project: Project): Promise<'ONLINE' | 'OFFLINE' | undefined> {
+    if (
+      project.status === PROJECT_STATUS.ACTIVE_HEALTHY &&
+      project.restUrl &&
+      project.internalApiKey
+    ) {
+      const success = await pingPostgrest(project.restUrl, project.internalApiKey, {
+        kpsVersion: project.kpsVersion,
+      })
+      return success ? 'ONLINE' : 'OFFLINE'
+    }
+    return undefined
+  }
+
+  async fetchSubscriptionTier(project: Project) {
+    const { id: projectId, ref: projectRef, status } = project
+    if (status === PROJECT_STATUS.ACTIVE_HEALTHY) {
+      const url = `${this.url}/${projectRef}/subscription`
+      const headers = constructHeaders(this.headers)
+      const response = await get(url, { headers })
+      if (!response.error) {
+        const subscriptionInfo = response as {
+          tier: {
+            supabase_prod_id: string
+          }
         }
+        // update subscription_tier key
+        const clone = cloneDeep(this.data[projectId])
+        clone.subscription_tier = subscriptionInfo.tier.supabase_prod_id
+        this.data[projectId] = clone
       }
-      // update subscription_tier key
-      const clone = cloneDeep(this.data[projectId])
-      clone.subscription_tier = subscriptionInfo.tier.supabase_prod_id
-      this.data[projectId] = clone
     }
   }
 }