fix(ui): check if retrieval mode is unknown

Author: Adrinlol

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

@@ -81,6 +81,7 @@ export const Configuration = observer(
     const stores = useStores()
     const {
       config,
+      isConfigurationLoading,
       updateConfig,
       getFullConfig,
       fullConfig,
@@ -294,7 +295,7 @@ export const Configuration = observer(
           }
           className={styles.snackbar}
         />
-        {!config || !dleEdition ? (
+        {!config && isConfigurationLoading ? (
           <div className={styles.spinnerContainer}>
             <Spinner size="lg" className={styles.spinner} />
           </div>

ui/packages/shared/pages/Configuration/utils/index.ts

@@ -114,3 +114,7 @@ export const postUniqueCustomOptions = (options: string) => {
   )
   return uniqueOptions
 }
+
+export const isRetrievalUnknown = (mode: string | undefined) => {
+  return mode === 'unknown' || mode === ''
+}

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

@@ -9,6 +9,7 @@ import { formatDateStd } from '@postgres.ai/shared/utils/date'
 import { Button } from '@postgres.ai/shared/components/Button2'
 import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
 import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+import { isRetrievalUnknown } from '@postgres.ai/shared/pages/Configuration/utils'
 
 import { Section } from '../components/Section'
 import { Property } from '../components/Property'
@@ -46,7 +47,7 @@ export const Retrieval = observer(() => {
 
   if (!instanceRetrieval) return null
   const { mode, status, activity } = instanceRetrieval
-  const isVisible = mode !== 'physical'
+  const isVisible = mode !== 'physical' && !isRetrievalUnknown(mode)
   const isActive = mode === 'logical' && status === 'refreshing'
 
   return (

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

@@ -50,12 +50,14 @@ type Props = {
   handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void
   hasLogs: boolean
   hideInstanceTabs?: boolean
+  isConfigActive?: boolean
 }
 
 export const Tabs = (props: Props) => {
   const classes = useStyles()
 
-  const { value, handleChange, hasLogs } = props
+  const { value, handleChange, hasLogs, isConfigActive, hideInstanceTabs } =
+    props
 
   return (
     <TabsComponent
@@ -74,14 +76,17 @@ export const Tabs = (props: Props) => {
         label="Logs"
         disabled={!hasLogs}
         classes={{
-          root: props.hideInstanceTabs ? classes.tabHidden : classes.tabRoot,
+          root: hideInstanceTabs ? classes.tabHidden : classes.tabRoot,
         }}
         value={1}
       />
       <TabComponent
         label="Configuration"
         classes={{
-          root: props.hideInstanceTabs ? classes.tabHidden : classes.tabRoot,
+          root:
+            props.hideInstanceTabs || !isConfigActive
+              ? classes.tabHidden
+              : classes.tabRoot,
         }}
         value={2}
       />

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

@@ -13,6 +13,7 @@ import { Button } from '@postgres.ai/shared/components/Button2'
 import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner'
 import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
+import { isRetrievalUnknown } from '@postgres.ai/shared/pages/Configuration/utils'
 
 import { Tabs } from './Tabs'
 import { Logs } from '../Logs'
@@ -73,12 +74,15 @@ export const Instance = observer((props: Props) => {
     load,
     isReloadingInstance,
   } = stores.main
-  const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
 
   useEffect(() => {
     load(instanceId)
   }, [instanceId])
 
+  const isConfigurationActive =
+    !isRetrievalUnknown(instanceRetrieval?.mode) &&
+    instanceRetrieval?.mode !== 'physical'
+
   useEffect(() => {
     if (
       instance &&
@@ -130,6 +134,7 @@ export const Instance = observer((props: Props) => {
               handleChange={switchTab}
               hasLogs={api.initWS != undefined}
               hideInstanceTabs={props?.hideInstanceTabs}
+              isConfigActive={!isRetrievalUnknown(instanceRetrieval?.mode)}
             />
           </SectionTitle>
 

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

@@ -25,6 +25,7 @@ import { GetFullConfig } from '@postgres.ai/shared/types/api/endpoints/getFullCo
 import { GetInstanceRetrieval } from '@postgres.ai/shared/types/api/endpoints/getInstanceRetrieval'
 import { InstanceRetrievalType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval'
 import { GetEngine } from '@postgres.ai/shared/types/api/endpoints/getEngine'
+import { isRetrievalUnknown } from '@postgres.ai/shared/pages/Configuration/utils'
 
 const POLLING_TIME = 2000
 
@@ -67,6 +68,7 @@ export class MainStore {
   readonly snapshots: SnapshotsStore
 
   isReloadingClones = false
+  isConfigurationLoading = false
   isReloadingInstance = false
   isReloadingInstanceRetrieval = false
 
@@ -89,8 +91,7 @@ export class MainStore {
     this.isReloadingInstance = true
     this.loadInstance(instanceId)
     this.loadInstanceRetrieval(instanceId).then(() => {
-    this.isReloadingInstance = false
-      if (this.instanceRetrieval?.mode !== 'physical') {
+      if (!isRetrievalUnknown(this.instanceRetrieval?.mode)) {
         this.getConfig()
       }
     })
@@ -170,8 +171,12 @@ export class MainStore {
   getConfig = async () => {
     if (!this.api.getConfig) return
 
+    this.isConfigurationLoading = true
+
     const { response, error } = await this.api.getConfig()
 
+    this.isConfigurationLoading = false
+
     if (response) {
       this.config = response
       this.configError = null