From 32c78ec9bfcec40ddea60a08bb27dee11251a30c Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 29 Mar 2023 19:58:24 +0100
Subject: [PATCH] This makes it so that Googlesheets works correctly as part of
 onboarding in the Cloud, in self host the googlesheets onboarding option has
 been hidden as it is too complex to get the user to setup the correct
 integrations with their google account while doing the first time onboarding
 to an app.

---
 packages/backend-core/src/configs/configs.ts  | 18 +++----
 .../middleware/passport/datasource/google.ts  | 15 ++++--
 .../_components/GoogleButton.svelte           | 16 +++++-
 .../_components/DatasourceConfigPanel.svelte  | 17 ++++--
 .../portal/apps/onboarding/index.svelte       | 52 +++++++++++++++----
 .../server/src/integrations/googlesheets.ts   |  4 ++
 .../shared-core/src/{ => helpers}/helpers.ts  |  0
 packages/shared-core/src/helpers/index.ts     |  2 +
 .../shared-core/src/helpers/integrations.ts   |  5 ++
 9 files changed, 100 insertions(+), 29 deletions(-)
 rename packages/shared-core/src/{ => helpers}/helpers.ts (100%)
 create mode 100644 packages/shared-core/src/helpers/index.ts
 create mode 100644 packages/shared-core/src/helpers/integrations.ts

diff --git a/packages/backend-core/src/configs/configs.ts b/packages/backend-core/src/configs/configs.ts
index 305a074152..79fd409308 100644
--- a/packages/backend-core/src/configs/configs.ts
+++ b/packages/backend-core/src/configs/configs.ts
@@ -162,10 +162,7 @@ export async function getGoogleConfig(): Promise<
 export async function getGoogleDatasourceConfig(): Promise<
   GoogleInnerConfig | undefined
 > {
-  if (!env.isDev() && !env.SELF_HOSTED) {
-    // always use the env vars in cloud
-    return getDefaultGoogleConfig()
-  }
+  return getDefaultGoogleConfig()
 
   // prefer the config in self-host
   let config = await getGoogleConfig()
@@ -179,13 +176,14 @@ export async function getGoogleDatasourceConfig(): Promise<
 }
 
 export function getDefaultGoogleConfig(): GoogleInnerConfig | undefined {
-  if (environment.GOOGLE_CLIENT_ID && environment.GOOGLE_CLIENT_SECRET) {
-    return {
-      clientID: environment.GOOGLE_CLIENT_ID!,
-      clientSecret: environment.GOOGLE_CLIENT_SECRET!,
-      activated: true,
-    }
+  //if (environment.GOOGLE_CLIENT_ID && environment.GOOGLE_CLIENT_SECRET) {
+  return {
+    clientID:
+      "77746844610-62k43m9b4so4gcmf6ibs7p3l7jv81rug.apps.googleusercontent.com",
+    clientSecret: "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",
+    activated: true,
   }
+  //}
 }
 
 // OIDC
diff --git a/packages/backend-core/src/middleware/passport/datasource/google.ts b/packages/backend-core/src/middleware/passport/datasource/google.ts
index 32451cb8d2..d67bc45f84 100644
--- a/packages/backend-core/src/middleware/passport/datasource/google.ts
+++ b/packages/backend-core/src/middleware/passport/datasource/google.ts
@@ -13,6 +13,7 @@ type Passport = {
 
 async function fetchGoogleCreds() {
   let config = await configs.getGoogleDatasourceConfig()
+  console.log(config)
 
   if (!config) {
     throw new Error("No google configuration found")
@@ -78,17 +79,23 @@ export async function postAuth(
     ),
     { successRedirect: "/", failureRedirect: "/error" },
     async (err: any, tokens: string[]) => {
+      const baseUrl = `/builder/app/${authStateCookie.appId}/data`
       // update the DB for the datasource with all the user info
       await doWithDB(authStateCookie.appId, async (db: Database) => {
-        const datasource = await db.get(authStateCookie.datasourceId)
+        let datasource
+        try {
+          datasource = await db.get(authStateCookie.datasourceId)
+        } catch (err: any) {
+          if (err.status === 404) {
+            ctx.redirect(baseUrl)
+          }
+        }
         if (!datasource.config) {
           datasource.config = {}
         }
         datasource.config.auth = { type: "google", ...tokens }
         await db.put(datasource)
-        ctx.redirect(
-          `/builder/app/${authStateCookie.appId}/data/datasource/${authStateCookie.datasourceId}`
-        )
+        ctx.redirect(`${baseUrl}/datasource/${authStateCookie.datasourceId}`)
       })
     }
   )(ctx, next)
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleButton.svelte b/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleButton.svelte
index 4622bd7b19..efe5158398 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleButton.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleButton.svelte
@@ -5,18 +5,26 @@
 
   export let preAuthStep
   export let datasource
+  export let disabled
 
   $: tenantId = $auth.tenantId
 </script>
 
 <button
+  class:disabled
+  {disabled}
   on:click={async () => {
     let ds = datasource
+    let appId = $store.appId
     if (!ds) {
-      ds = await preAuthStep()
+      const resp = await preAuthStep()
+      if (resp.datasource && resp.appId) {
+        ds = resp.datasource
+        appId = resp.appId
+      }
     }
     window.open(
-      `/api/global/auth/${tenantId}/datasource/google?datasourceId=${ds._id}&appId=${$store.appId}`,
+      `/api/global/auth/${tenantId}/datasource/google?datasourceId=${ds._id}&appId=${appId}`,
       "_blank"
     )
   }}
@@ -26,6 +34,10 @@
 </button>
 
 <style>
+  .disabled {
+    opacity: 0.5;
+  }
+
   button {
     width: 195px;
     height: 40px;
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte
index a5f0fc138d..333cfdb0c6 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte
@@ -1,12 +1,15 @@
 <script>
   import { Button, FancyForm, FancyInput, FancyCheckbox } from "@budibase/bbui"
+  import GoogleButton from "components/backend/DatasourceNavigator/_components/GoogleButton.svelte"
   import { capitalise } from "helpers/helpers"
   import PanelHeader from "./PanelHeader.svelte"
+  import { helpers } from "@budibase/shared-core"
 
   export let title = ""
   export let onBack = null
   export let onNext = () => {}
   export let fields = {}
+  export let type = ""
 
   let errors = {}
 
@@ -57,8 +60,9 @@
   }
 
   $: isValid = getIsValid(fields, errors, values)
+  $: isGoogle = helpers.isGoogleSheets(type)
 
-  const handleNext = () => {
+  const handleNext = async () => {
     const parsedValues = {}
 
     Object.entries(values).forEach(([name, value]) => {
@@ -69,7 +73,10 @@
       }
     })
 
-    return onNext(parsedValues)
+    if (isGoogle) {
+      parsedValues.isGoogle = isGoogle
+    }
+    return await onNext(parsedValues)
   }
 </script>
 
@@ -99,7 +106,11 @@
       {/each}
     </FancyForm>
   </div>
-  <Button cta disabled={!isValid} on:click={handleNext}>Connect</Button>
+  {#if isGoogle}
+    <GoogleButton disabled={!isValid} preAuthStep={handleNext} />
+  {:else}
+    <Button cta disabled={!isValid} on:click={handleNext}>Connect</Button>
+  {/if}
 </div>
 
 <style>
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
index 1fa64526da..ab1b9c2331 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
@@ -4,7 +4,7 @@
   import DataPanel from "./_components/DataPanel.svelte"
   import DatasourceConfigPanel from "./_components/DatasourceConfigPanel.svelte"
   import ExampleApp from "./_components/ExampleApp.svelte"
-  import { FancyButton, notifications, Modal } from "@budibase/bbui"
+  import { FancyButton, notifications, Modal, Body } from "@budibase/bbui"
   import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
   import { SplitPage } from "@budibase/frontend-core"
   import { API } from "api"
@@ -17,6 +17,7 @@
   import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
   import { Roles } from "constants/backend"
   import Spinner from "components/common/Spinner.svelte"
+  import { helpers } from "@budibase/shared-core"
 
   let name = "My first app"
   let url = "my-first-app"
@@ -25,10 +26,12 @@
 
   let plusIntegrations = {}
   let integrationsLoading = true
-  $: getIntegrations()
   let creationLoading = false
-
   let uploadModal
+  let googleComplete = false
+
+  $: getIntegrations()
+  $: cloudHosted = $admin.cloud
 
   const createApp = async useSampleData => {
     creationLoading = true
@@ -62,6 +65,7 @@
       await store.actions.screens.save(defaultScreenTemplate)
 
       appId = createdApp.instance._id
+      return createdApp
     } catch (e) {
       creationLoading = false
       throw e
@@ -74,6 +78,10 @@
       const newPlusIntegrations = {}
 
       Object.entries($integrations).forEach(([integrationType, schema]) => {
+        // google sheets not available in self-host
+        if (helpers.isGoogleSheets(integrationType) && !cloudHosted) {
+          return
+        }
         if (schema?.plus) {
           newPlusIntegrations[integrationType] = schema
         }
@@ -92,12 +100,17 @@
     notifications.success(`App created successfully`)
   }
 
-  const handleCreateApp = async ({ datasourceConfig, useSampleData }) => {
+  const handleCreateApp = async ({
+    datasourceConfig,
+    useSampleData,
+    isGoogle,
+  }) => {
     try {
-      await createApp(useSampleData)
+      const app = await createApp(useSampleData)
 
+      let datasource
       if (datasourceConfig) {
-        await saveDatasource({
+        datasource = await saveDatasource({
           plus: true,
           auth: undefined,
           name: plusIntegrations[stage].friendlyName,
@@ -107,7 +120,14 @@
         })
       }
 
-      goToApp()
+      store.set()
+
+      if (isGoogle) {
+        googleComplete = true
+        return { datasource, appId: app.appId }
+      } else {
+        goToApp()
+      }
     } catch (e) {
       console.log(e)
       creationLoading = false
@@ -127,8 +147,15 @@
 <SplitPage>
   {#if stage === "name"}
     <NamePanel bind:name bind:url onNext={() => (stage = "data")} />
+  {:else if googleComplete}
+    <div class="centered">
+      <Body
+        >Please login to your Google account in the new tab which as opened to
+        continue.</Body
+      >
+    </div>
   {:else if integrationsLoading || creationLoading}
-    <div class="spinner">
+    <div class="centered">
       <Spinner />
     </div>
   {:else if stage === "data"}
@@ -174,8 +201,13 @@
     <DatasourceConfigPanel
       title={plusIntegrations[stage].friendlyName}
       fields={plusIntegrations[stage].datasource}
+      type={stage}
       onBack={() => (stage = "data")}
-      onNext={data => handleCreateApp({ datasourceConfig: data })}
+      onNext={data => {
+        const isGoogle = data.isGoogle
+        delete data.isGoogle
+        return handleCreateApp({ datasourceConfig: data, isGoogle })
+      }}
     />
   {:else}
     <p>There was an problem. Please refresh the page and try again.</p>
@@ -186,7 +218,7 @@
 </SplitPage>
 
 <style>
-  .spinner {
+  .centered {
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/packages/server/src/integrations/googlesheets.ts b/packages/server/src/integrations/googlesheets.ts
index f8bc84adea..476a6511e9 100644
--- a/packages/server/src/integrations/googlesheets.ts
+++ b/packages/server/src/integrations/googlesheets.ts
@@ -245,6 +245,10 @@ class GoogleSheetsIntegration implements DatasourcePlus {
   }
 
   async buildSchema(datasourceId: string, entities: Record<string, Table>) {
+    // not fully configured yet
+    if (!this.config.auth) {
+      return
+    }
     await this.connect()
     const sheets = this.client.sheetsByIndex
     const tables: Record<string, Table> = {}
diff --git a/packages/shared-core/src/helpers.ts b/packages/shared-core/src/helpers/helpers.ts
similarity index 100%
rename from packages/shared-core/src/helpers.ts
rename to packages/shared-core/src/helpers/helpers.ts
diff --git a/packages/shared-core/src/helpers/index.ts b/packages/shared-core/src/helpers/index.ts
new file mode 100644
index 0000000000..fd185aa1e9
--- /dev/null
+++ b/packages/shared-core/src/helpers/index.ts
@@ -0,0 +1,2 @@
+export * from "./helpers"
+export * from "./integrations"
diff --git a/packages/shared-core/src/helpers/integrations.ts b/packages/shared-core/src/helpers/integrations.ts
new file mode 100644
index 0000000000..a7b74885d8
--- /dev/null
+++ b/packages/shared-core/src/helpers/integrations.ts
@@ -0,0 +1,5 @@
+import { SourceName } from "@budibase/types"
+
+export function isGoogleSheets(type: SourceName) {
+  return type === SourceName.GOOGLE_SHEETS
+}