From 96f44c0a863569fbf8050f0bd460a38a1ff98488 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 5 Jun 2023 17:40:12 +0100
Subject: [PATCH] Reworking implementation to a single modal, that changes
 content rather than progressing to a new modal.

---
 .../modals/DatasourceConfigModal.svelte       | 87 +++++++++++--------
 .../modals/FetchTablesModal.svelte            | 21 -----
 packages/frontend-core/src/api/datasources.js | 11 +++
 3 files changed, 61 insertions(+), 58 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DatasourceNavigator/modals/FetchTablesModal.svelte

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
index 52051fe134..e9d23ff0c7 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@@ -1,14 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
-  import {
-    ModalContent,
-    notifications,
-    Body,
-    Layout,
-    Modal,
-  } from "@budibase/bbui"
+  import { ModalContent, notifications, Body, Layout } from "@budibase/bbui"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
-  import FetchTablesModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
   import { IntegrationNames } from "constants/backend"
   import cloneDeep from "lodash/cloneDeepWith"
   import {
@@ -22,13 +15,22 @@
   // kill the reference so the input isn't saved
   let datasource = cloneDeep(integration)
   let isValid = false
-  let fetchTablesModal
+  let fetchTableStep = false
 
   $: name =
-    IntegrationNames[datasource.type] || datasource.name || datasource.type
+    IntegrationNames[datasource?.type] || datasource?.name || datasource?.type
   $: datasourcePlus = datasource?.plus
+  $: title = fetchTableStep ? "Fetch your tables" : `Connect to ${name}`
+  $: confirmText = fetchTableStep
+    ? "Continue"
+    : datasourcePlus
+    ? "Connect"
+    : "Save and continue to query"
 
   async function validateConfig() {
+    if (!integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
+      return true
+    }
     const displayError = message =>
       notifications.error(message ?? "Error validating datasource")
 
@@ -46,50 +48,61 @@
   }
 
   async function saveDatasource() {
-    if (integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
-      const valid = await validateConfig()
-      if (!valid) {
-        return false
-      }
-    }
     try {
       if (!datasource.name) {
         datasource.name = name
       }
       const resp = await save(datasource)
       $goto(`./datasource/${resp._id}`)
-      notifications.success(`Datasource created successfully.`)
+      notifications.success("Datasource created successfully.")
     } catch (err) {
       notifications.error(err?.message ?? "Error saving datasource")
       // prevent the modal from closing
       return false
     }
   }
+
+  async function nextStep() {
+    let connected = true
+    if (datasourcePlus) {
+      connected = await validateConfig()
+    }
+    if (!connected) {
+      return false
+    }
+    if (datasourcePlus) {
+      notifications.success("Connected to datasource successfully.")
+      fetchTableStep = true
+      return false
+    } else {
+      await saveDatasource()
+      return true
+    }
+  }
 </script>
 
-<Modal bind:this={fetchTablesModal}>
-  <FetchTablesModal {datasource} onConfirm={saveDatasource} />
-</Modal>
-
 <ModalContent
-  title={`Connect to ${name}`}
-  onConfirm={() =>
-    datasourcePlus ? saveDatasource() : fetchTablesModal.show()}
-  confirmText={datasourcePlus ? "Connect" : "Save and continue to query"}
-  cancelText="Back"
+  {title}
+  onConfirm={() => nextStep()}
+  {confirmText}
+  cancelText={fetchTableStep ? "Cancel" : "Back"}
   showSecondaryButton={datasourcePlus}
   size="L"
   disabled={!isValid}
 >
-  <Layout noPadding>
-    <Body size="XS"
-      >Connect your database to Budibase using the config below.
-    </Body>
-  </Layout>
-  <IntegrationConfigForm
-    schema={datasource.schema}
-    bind:datasource
-    creating={true}
-    on:valid={e => (isValid = e.detail)}
-  />
+  {#if !fetchTableStep}
+    <Layout noPadding>
+      <Body size="XS"
+        >Connect your database to Budibase using the config below.
+      </Body>
+    </Layout>
+    <IntegrationConfigForm
+      schema={datasource?.schema}
+      bind:datasource
+      creating={true}
+      on:valid={e => (isValid = e.detail)}
+    />
+  {:else}
+    <Body>Some stuff here</Body>
+  {/if}
 </ModalContent>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/FetchTablesModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/FetchTablesModal.svelte
deleted file mode 100644
index 41a1f2d2d0..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/FetchTablesModal.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { ModalContent, Body } from "@budibase/bbui"
-
-  export let datasource
-  export let onConfirm
-  export let prevModal
-
-  export let selected = []
-</script>
-
-<ModalContent
-  title={`Fetch your tables`}
-  {onConfirm}
-  onCancel={() => prevModal.show()}
-  confirmText="Continue"
-  cancelText="Back"
-  size="L"
-  disabled={selected.length === 0}
->
-  <Body>SOME TABLES HERE</Body>
-</ModalContent>
diff --git a/packages/frontend-core/src/api/datasources.js b/packages/frontend-core/src/api/datasources.js
index 16d19c512f..f7554f64b0 100644
--- a/packages/frontend-core/src/api/datasources.js
+++ b/packages/frontend-core/src/api/datasources.js
@@ -69,4 +69,15 @@ export const buildDatasourceEndpoints = API => ({
       body: { datasource },
     })
   },
+
+  /**
+   * Fetch table names available within the datasource, for filtering out undesired tables
+   * @param datasource the datasource configuration to use for fetching tables
+   */
+  fetchTablesForDatasource: async datasource => {
+    return await API.post({
+      url: `/api/datasources/tables`,
+      body: { datasource },
+    })
+  },
 })