From 67abff02fa4429971b21532900f77d844eca68e3 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martinmckeaveney@gmail.com>
Date: Tue, 18 Jan 2022 10:25:59 +0100
Subject: [PATCH] refactored middleware to be more generic

---
 .../modals/CreateDatasourceModal.svelte       |  7 ++++-
 .../modals/DatasourceConfigModal.svelte       | 18 ++++--------
 .../modals/GoogleDatasourceConfigModal.svelte | 29 +++++++++++++++++++
 3 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 074f05de62..71df33b967 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -6,6 +6,7 @@
   import { IntegrationNames, IntegrationTypes } from "constants/backend"
   import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
   import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
+  import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
   import { createRestDatasource } from "builderStore/datasource"
   import { goto } from "@roxi/routify"
   import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte"
@@ -80,7 +81,11 @@
 </Modal>
 
 <Modal bind:this={externalDatasourceModal}>
-  <DatasourceConfigModal {integration} {modal} />
+  {#if integration?.auth?.type === "google"}
+    <GoogleDatasourceConfigModal {integration} {modal} />
+  {:else}
+    <DatasourceConfigModal {integration} {modal} />
+  {/if}
 </Modal>
 
 <Modal bind:this={importModal}>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
index 8174a3deb4..97168358cf 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@@ -4,7 +4,6 @@
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import { IntegrationNames } from "constants/backend"
   import cloneDeep from "lodash/cloneDeepWith"
-  import GoogleButton from "../_components/GoogleButton.svelte"
   import { saveDatasource as save } from "builderStore/datasource"
   import { onMount } from "svelte"
 
@@ -52,16 +51,9 @@
       >Connect your database to Budibase using the config below.
     </Body>
   </Layout>
-  {#if datasource.auth?.type === "google"}
-    <GoogleButton preAuthStep={() => save(datasource, true)} />
-  {:else}
-    <IntegrationConfigForm
-      schema={datasource.schema}
-      bind:datasource
-      creating={true}
-    />
-  {/if}
+  <IntegrationConfigForm
+    schema={datasource.schema}
+    bind:datasource
+    creating={true}
+  />
 </ModalContent>
-
-<style>
-</style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
new file mode 100644
index 0000000000..7d03dafeb9
--- /dev/null
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { ModalContent, Body, Layout } from "@budibase/bbui"
+  import { IntegrationNames } from "constants/backend"
+  import cloneDeep from "lodash/cloneDeepWith"
+  import GoogleButton from "../_components/GoogleButton.svelte"
+  import { saveDatasource as save } from "builderStore/datasource"
+
+  export let integration
+  export let modal
+
+  // kill the reference so the input isn't saved
+  let datasource = cloneDeep(integration)
+</script>
+
+<ModalContent
+  title={`Connect to ${IntegrationNames[datasource.type]}`}
+  onCancel={() => modal.show()}
+  cancelText="Back"
+  size="L"
+>
+  <Layout noPadding>
+    <Body size="XS"
+      >Authenticate with your google account to use the {IntegrationNames[
+        datasource.type
+      ]} integration.</Body
+    >
+  </Layout>
+  <GoogleButton preAuthStep={() => save(datasource, true)} />
+</ModalContent>