Check and update db list if not present (#320)

* check and update db list if not present

* Use trigger state update to trigger db load

---------

Co-authored-by: Sreejith <1743700+ppsreejith@users.noreply.github.com>

Author: nuwandavek

apps/src/base/appState.ts

@@ -35,6 +35,9 @@ export abstract class AppState<T extends InternalState, K> {
   public async getQuerySelectorMap() {
     return this.useStore().getState().querySelectorMap;
   }
+
+  public async triggerStateUpdate() {
+  }
 }
 
 export abstract class DefaultAppState<T> extends AppState<InternalState, T> {

apps/src/metabase/appState.ts

@@ -137,6 +137,19 @@ function minifyDbs(allDBs: any) {
   return Object.values(allDBs || {}).map((db: any) => ({ id: db.id, name: db.name }))
 }
 
+async function fetchAllDBsIfEmpty() {
+  let minifiedDBs = minifyDbs(await RPCs.getMetabaseState('entities.databases'))
+  let _tries = 0
+  while (isEmpty(minifiedDBs)) {
+    await new Promise(resolve => setTimeout(resolve, 500))
+    minifiedDBs = minifyDbs(await RPCs.getMetabaseState('entities.databases'))
+    if (_tries++ > 50) {
+      break
+    }
+  }
+  return minifiedDBs
+}
+
 export class MetabaseState extends DefaultAppState<MetabaseAppState> {
   initialInternalState = metabaseInternalState;
   actionController = new MetabaseController(this);
@@ -150,13 +163,8 @@ export class MetabaseState extends DefaultAppState<MetabaseAppState> {
 
     const getState = this.useStore().getState
     let minifiedDBs = minifyDbs(allDBs)
-    let _tries = 0
-    while (isEmpty(minifiedDBs)) {
-      await new Promise(resolve => setTimeout(resolve, 500))
-      minifiedDBs = minifyDbs(await RPCs.getMetabaseState('entities.databases'));
-      if (_tries++ > 50) {
-        break
-      }
+    if (isEmpty(minifiedDBs)) {
+      minifiedDBs = await fetchAllDBsIfEmpty()
     }
 
     let toolEnabledNew = shouldEnable(elements, url);

web/src/components/common/TaskUI.tsx

@@ -764,7 +764,19 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
                 <Text fontSize={"sm"} color={"gray.500"} mb={3}>We're unable to auto-select your Database. Pick one to get started</Text>
                 <Box display="flex" justifyContent="center">
                     <Menu placement="bottom">
-                        <MenuButton as={Button} rightIcon={<BiChevronDown />} size="xs" variant="solid" colorScheme='minusxGreen'>
+                        <MenuButton 
+                            as={Button} 
+                            rightIcon={<BiChevronDown />} 
+                            size="xs" 
+                            variant="solid" 
+                            colorScheme='minusxGreen'
+                            onClick={() => {
+                                const allDBs = get(toolContext, 'allDBs', [])
+                                if (isEmpty(allDBs)) {
+                                  app.triggerStateUpdate()
+                                }
+                            }}
+                        >
                             Choose a Database
                         </MenuButton>
                         <MenuList maxH="200px" overflowY="auto">