fix(ui): add missing alias and reload request on button click

Author: Adrinlol

ui/packages/platform/src/pages/Instance/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { Instance as InstancePage } from '@postgres.ai/shared/pages/Instance'
@@ -27,6 +28,7 @@ type Params = {
 
 export const Instance = () => {
   const params = useParams<Params>()
+  const [projectAlias, setProjectAlias] = useState<string>('')
 
   const routes = {
     createClone: () =>
@@ -73,6 +75,14 @@ export const Instance = () => {
     hideDeprecatedApiBanner: bannersStore.hideDeprecatedApi,
   }
 
+  const instanceTitle = `#${params.instanceId} ${
+    projectAlias
+      ? `(${projectAlias})`
+      : params.project
+      ? `(${params.project})`
+      : ''
+  }`
+
   const elements = {
     breadcrumbs: (
       <ConsoleBreadcrumbsWrapper
@@ -82,9 +92,7 @@ export const Instance = () => {
         breadcrumbs={[
           { name: 'Database Lab Instances', url: 'instances' },
           {
-            name: `Instance #${params.instanceId} ${
-              params.project ? `(${params.project})` : ''
-            }`,
+            name: `Instance ${instanceTitle}`,
             url: null,
           },
         ]}
@@ -95,9 +103,8 @@ export const Instance = () => {
   return (
     <InstancePage
       isPlatform
-      title={`Database Lab instance #${params.instanceId} ${
-        params.project ? `(${params.project})` : ''
-      }`}
+      setProjectAlias={setProjectAlias}
+      title={`Database Lab instance ${instanceTitle}`}
       instanceId={params.instanceId}
       routes={routes}
       api={api}

ui/packages/shared/pages/Instance/context.ts

@@ -27,6 +27,7 @@ export type Host = {
   }
   wsHost?: string
   isPlatform?: boolean
+  setProjectAlias?: (alias: string) => void
 }
 
 // Host context.

ui/packages/shared/pages/Instance/index.tsx

@@ -97,12 +97,17 @@ export const Instance = observer((props: Props) => {
     load(instanceId)
   }, [instanceId])
 
+  useEffect(() => {
+    if (props.setProjectAlias) props.setProjectAlias(instance?.projectAlias || '')
+  }, [instance])
+
   useEffect(() => {
     if (
       instance &&
       instance?.state?.retrieving?.status === 'pending' &&
       isConfigurationActive &&
-      !props.isPlatform && !hasBeenRedirected
+      !props.isPlatform &&
+      !hasBeenRedirected
     ) {
       setActiveTab(2)
       setHasBeenRedirected(true)

ui/packages/shared/pages/Instance/stores/Main.ts

@@ -106,6 +106,9 @@ export class MainStore {
     this.instance = null
     this.isReloadingInstance = true
     this.loadInstance(instanceId, false).then(() => {
+      if (this.api.refreshInstance)
+        this.api.refreshInstance({ instanceId: instanceId })
+
       if (this.instance?.url) {
         this.snapshots.load(instanceId)
       }