Merge pull request #10747 from Budibase/feature/budi-6945-new_googlesheet_experience
BUDI-6945 - Setup url on wizard
This commit is contained in:
commit
b7749214d7
7 changed files with 154 additions and 60 deletions
|
@ -1,10 +1,10 @@
|
||||||
import * as google from "../sso/google"
|
import * as google from "../sso/google"
|
||||||
import { Cookie } from "../../../constants"
|
import { Cookie } from "../../../constants"
|
||||||
import { clearCookie, getCookie } from "../../../utils"
|
import { clearCookie, getCookie } from "../../../utils"
|
||||||
import { doWithDB } from "../../../db"
|
|
||||||
import * as configs from "../../../configs"
|
import * as configs from "../../../configs"
|
||||||
import { BBContext, Database, SSOProfile } from "@budibase/types"
|
import { BBContext, SSOProfile } from "@budibase/types"
|
||||||
import { ssoSaveUserNoOp } from "../sso/sso"
|
import { ssoSaveUserNoOp } from "../sso/sso"
|
||||||
|
import { cache, utils } from "../../../"
|
||||||
const GoogleStrategy = require("passport-google-oauth").OAuth2Strategy
|
const GoogleStrategy = require("passport-google-oauth").OAuth2Strategy
|
||||||
|
|
||||||
type Passport = {
|
type Passport = {
|
||||||
|
@ -36,8 +36,8 @@ export async function preAuth(
|
||||||
ssoSaveUserNoOp
|
ssoSaveUserNoOp
|
||||||
)
|
)
|
||||||
|
|
||||||
if (!ctx.query.appId || !ctx.query.datasourceId) {
|
if (!ctx.query.appId) {
|
||||||
ctx.throw(400, "appId and datasourceId query params not present.")
|
ctx.throw(400, "appId query param not present.")
|
||||||
}
|
}
|
||||||
|
|
||||||
return passport.authenticate(strategy, {
|
return passport.authenticate(strategy, {
|
||||||
|
@ -69,7 +69,7 @@ export async function postAuth(
|
||||||
(
|
(
|
||||||
accessToken: string,
|
accessToken: string,
|
||||||
refreshToken: string,
|
refreshToken: string,
|
||||||
profile: SSOProfile,
|
_profile: SSOProfile,
|
||||||
done: Function
|
done: Function
|
||||||
) => {
|
) => {
|
||||||
clearCookie(ctx, Cookie.DatasourceAuth)
|
clearCookie(ctx, Cookie.DatasourceAuth)
|
||||||
|
@ -79,23 +79,16 @@ export async function postAuth(
|
||||||
{ successRedirect: "/", failureRedirect: "/error" },
|
{ successRedirect: "/", failureRedirect: "/error" },
|
||||||
async (err: any, tokens: string[]) => {
|
async (err: any, tokens: string[]) => {
|
||||||
const baseUrl = `/builder/app/${authStateCookie.appId}/data`
|
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 id = utils.newid()
|
||||||
let datasource
|
await cache.store(
|
||||||
try {
|
`datasource:creation:${authStateCookie.appId}:google:${id}`,
|
||||||
datasource = await db.get(authStateCookie.datasourceId)
|
{
|
||||||
} catch (err: any) {
|
tokens,
|
||||||
if (err.status === 404) {
|
|
||||||
ctx.redirect(baseUrl)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if (!datasource.config) {
|
)
|
||||||
datasource.config = {}
|
|
||||||
}
|
ctx.redirect(`${baseUrl}/new?continue_google_setup=${id}`)
|
||||||
datasource.config.auth = { type: "google", ...tokens }
|
|
||||||
await db.put(datasource)
|
|
||||||
ctx.redirect(`${baseUrl}/datasource/${authStateCookie.datasourceId}`)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
)(ctx, next)
|
)(ctx, next)
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,6 @@
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import { auth } from "stores/portal"
|
import { auth } from "stores/portal"
|
||||||
|
|
||||||
export let preAuthStep
|
|
||||||
export let datasource
|
|
||||||
export let disabled
|
export let disabled
|
||||||
export let samePage
|
export let samePage
|
||||||
|
|
||||||
|
@ -15,18 +13,8 @@
|
||||||
class:disabled
|
class:disabled
|
||||||
{disabled}
|
{disabled}
|
||||||
on:click={async () => {
|
on:click={async () => {
|
||||||
let ds = datasource
|
|
||||||
let appId = $store.appId
|
let appId = $store.appId
|
||||||
if (!ds) {
|
const url = `/api/global/auth/${tenantId}/datasource/google?appId=${appId}`
|
||||||
const resp = await preAuthStep()
|
|
||||||
if (resp.datasource && resp.appId) {
|
|
||||||
ds = resp.datasource
|
|
||||||
appId = resp.appId
|
|
||||||
} else {
|
|
||||||
ds = resp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const url = `/api/global/auth/${tenantId}/datasource/google?datasourceId=${ds._id}&appId=${appId}`
|
|
||||||
if (samePage) {
|
if (samePage) {
|
||||||
window.location = url
|
window.location = url
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -1,43 +1,110 @@
|
||||||
<script>
|
<script>
|
||||||
import { ModalContent, Body, Layout, Link } from "@budibase/bbui"
|
import {
|
||||||
import { IntegrationNames } from "constants/backend"
|
ModalContent,
|
||||||
import cloneDeep from "lodash/cloneDeepWith"
|
Body,
|
||||||
|
Layout,
|
||||||
|
Link,
|
||||||
|
notifications,
|
||||||
|
} from "@budibase/bbui"
|
||||||
|
import { IntegrationNames, IntegrationTypes } from "constants/backend"
|
||||||
import GoogleButton from "../_components/GoogleButton.svelte"
|
import GoogleButton from "../_components/GoogleButton.svelte"
|
||||||
import { saveDatasource as save } from "builderStore/datasource"
|
|
||||||
import { organisation } from "stores/portal"
|
import { organisation } from "stores/portal"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
import { validateDatasourceConfig } from "builderStore/datasource"
|
||||||
|
import cloneDeep from "lodash/cloneDeepWith"
|
||||||
|
import IntegrationConfigForm from "../TableIntegrationMenu/IntegrationConfigForm.svelte"
|
||||||
|
import { goto } from "@roxi/routify"
|
||||||
|
|
||||||
|
import { saveDatasource } from "builderStore/datasource"
|
||||||
|
import { DatasourceFeature } from "@budibase/types"
|
||||||
|
|
||||||
export let integration
|
export let integration
|
||||||
|
export let continueSetupId = false
|
||||||
|
|
||||||
// kill the reference so the input isn't saved
|
|
||||||
let datasource = cloneDeep(integration)
|
let datasource = cloneDeep(integration)
|
||||||
|
datasource.config.continueSetupId = continueSetupId
|
||||||
|
|
||||||
$: isGoogleConfigured = !!$organisation.googleDatasourceConfigured
|
$: isGoogleConfigured = !!$organisation.googleDatasourceConfigured
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await organisation.init()
|
await organisation.init()
|
||||||
})
|
})
|
||||||
|
const integrationName = IntegrationNames[IntegrationTypes.GOOGLE_SHEETS]
|
||||||
|
|
||||||
|
export const GoogleDatasouceConfigStep = {
|
||||||
|
AUTH: "Auth",
|
||||||
|
SET_URL: "Set_url",
|
||||||
|
}
|
||||||
|
|
||||||
|
let step = continueSetupId
|
||||||
|
? GoogleDatasouceConfigStep.SET_URL
|
||||||
|
: GoogleDatasouceConfigStep.AUTH
|
||||||
|
|
||||||
|
let isValid = false
|
||||||
|
|
||||||
|
const modalConfig = {
|
||||||
|
[GoogleDatasouceConfigStep.AUTH]: {},
|
||||||
|
[GoogleDatasouceConfigStep.SET_URL]: {
|
||||||
|
confirmButtonText: "Connect",
|
||||||
|
onConfirm: async () => {
|
||||||
|
if (integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
|
||||||
|
const resp = await validateDatasourceConfig(datasource)
|
||||||
|
if (!resp.connected) {
|
||||||
|
notifications.error(`Unable to connect - ${resp.error}`)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp = await saveDatasource(datasource)
|
||||||
|
$goto(`./datasource/${resp._id}`)
|
||||||
|
notifications.success(`Datasource created successfully.`)
|
||||||
|
} catch (err) {
|
||||||
|
notifications.error(err?.message ?? "Error saving datasource")
|
||||||
|
// prevent the modal from closing
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ModalContent
|
<ModalContent
|
||||||
title={`Connect to ${IntegrationNames[datasource.type]}`}
|
title={`Connect to ${integrationName}`}
|
||||||
cancelText="Back"
|
cancelText="Cancel"
|
||||||
size="L"
|
size="L"
|
||||||
|
confirmText={modalConfig[step].confirmButtonText}
|
||||||
|
showConfirmButton={!!modalConfig[step].onConfirm}
|
||||||
|
onConfirm={modalConfig[step].onConfirm}
|
||||||
|
disabled={!isValid}
|
||||||
>
|
>
|
||||||
<!-- check true and false directly, don't render until flag is set -->
|
{#if step === GoogleDatasouceConfigStep.AUTH}
|
||||||
{#if isGoogleConfigured === true}
|
<!-- check true and false directly, don't render until flag is set -->
|
||||||
<Layout noPadding>
|
{#if isGoogleConfigured === true}
|
||||||
|
<Layout noPadding>
|
||||||
|
<Body size="S"
|
||||||
|
>Authenticate with your google account to use the {integrationName} integration.</Body
|
||||||
|
>
|
||||||
|
</Layout>
|
||||||
|
<GoogleButton samePage />
|
||||||
|
{:else if isGoogleConfigured === false}
|
||||||
<Body size="S"
|
<Body size="S"
|
||||||
>Authenticate with your google account to use the {IntegrationNames[
|
>Google authentication is not enabled, please complete Google SSO
|
||||||
datasource.type
|
configuration.</Body
|
||||||
]} integration.</Body
|
|
||||||
>
|
>
|
||||||
|
<Link href="/builder/portal/settings/auth">Configure Google SSO</Link>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
{#if step === GoogleDatasouceConfigStep.SET_URL}
|
||||||
|
<Layout noPadding no>
|
||||||
|
<Body size="S">Add the URL of the sheet you want to connect.</Body>
|
||||||
|
|
||||||
|
<IntegrationConfigForm
|
||||||
|
schema={datasource.schema}
|
||||||
|
bind:datasource
|
||||||
|
creating={true}
|
||||||
|
on:valid={e => (isValid = e.detail)}
|
||||||
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
<GoogleButton preAuthStep={() => save(datasource, true)} />
|
|
||||||
{:else if isGoogleConfigured === false}
|
|
||||||
<Body size="S"
|
|
||||||
>Google authentication is not enabled, please complete Google SSO
|
|
||||||
configuration.</Body
|
|
||||||
>
|
|
||||||
<Link href="/builder/portal/settings/auth">Configure Google SSO</Link>
|
|
||||||
{/if}
|
{/if}
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
|
import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
|
||||||
import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
|
import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
|
||||||
import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
|
import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
|
||||||
|
import { onMount } from "svelte"
|
||||||
|
|
||||||
let internalTableModal
|
let internalTableModal
|
||||||
let externalDatasourceModal
|
let externalDatasourceModal
|
||||||
|
@ -129,9 +130,19 @@
|
||||||
return integrationsArray
|
return integrationsArray
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let continueGoogleSetup
|
||||||
|
onMount(() => {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search)
|
||||||
|
continueGoogleSetup = urlParams.get("continue_google_setup")
|
||||||
|
})
|
||||||
|
|
||||||
const fetchIntegrations = async () => {
|
const fetchIntegrations = async () => {
|
||||||
const unsortedIntegrations = await API.getIntegrations()
|
const unsortedIntegrations = await API.getIntegrations()
|
||||||
integrations = sortIntegrations(unsortedIntegrations)
|
integrations = sortIntegrations(unsortedIntegrations)
|
||||||
|
|
||||||
|
if (continueGoogleSetup) {
|
||||||
|
handleIntegrationSelect(IntegrationTypes.GOOGLE_SHEETS)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: fetchIntegrations()
|
$: fetchIntegrations()
|
||||||
|
@ -141,9 +152,17 @@
|
||||||
<CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
|
<CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<Modal bind:this={externalDatasourceModal}>
|
<Modal
|
||||||
|
bind:this={externalDatasourceModal}
|
||||||
|
on:hide={() => {
|
||||||
|
continueGoogleSetup = null
|
||||||
|
}}
|
||||||
|
>
|
||||||
{#if integration?.auth?.type === "google"}
|
{#if integration?.auth?.type === "google"}
|
||||||
<GoogleDatasourceConfigModal {integration} />
|
<GoogleDatasourceConfigModal
|
||||||
|
continueSetupId={continueGoogleSetup}
|
||||||
|
{integration}
|
||||||
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<DatasourceConfigModal {integration} />
|
<DatasourceConfigModal {integration} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -11,7 +11,7 @@ import { BuildSchemaErrors, InvalidColumns } from "../../constants"
|
||||||
import { getIntegration } from "../../integrations"
|
import { getIntegration } from "../../integrations"
|
||||||
import { getDatasourceAndQuery } from "./row/utils"
|
import { getDatasourceAndQuery } from "./row/utils"
|
||||||
import { invalidateDynamicVariables } from "../../threads/utils"
|
import { invalidateDynamicVariables } from "../../threads/utils"
|
||||||
import { db as dbCore, context, events } from "@budibase/backend-core"
|
import { db as dbCore, context, events, cache } from "@budibase/backend-core"
|
||||||
import {
|
import {
|
||||||
UserCtx,
|
UserCtx,
|
||||||
Datasource,
|
Datasource,
|
||||||
|
@ -25,9 +25,11 @@ import {
|
||||||
FetchDatasourceInfoResponse,
|
FetchDatasourceInfoResponse,
|
||||||
IntegrationBase,
|
IntegrationBase,
|
||||||
DatasourcePlus,
|
DatasourcePlus,
|
||||||
|
SourceName,
|
||||||
} from "@budibase/types"
|
} from "@budibase/types"
|
||||||
import sdk from "../../sdk"
|
import sdk from "../../sdk"
|
||||||
import { builderSocket } from "../../websockets"
|
import { builderSocket } from "../../websockets"
|
||||||
|
import { setupCreationAuth as googleSetupCreationAuth } from "src/integrations/googlesheets"
|
||||||
|
|
||||||
function getErrorTables(errors: any, errorType: string) {
|
function getErrorTables(errors: any, errorType: string) {
|
||||||
return Object.entries(errors)
|
return Object.entries(errors)
|
||||||
|
@ -306,6 +308,12 @@ export async function update(ctx: UserCtx<any, UpdateDatasourceResponse>) {
|
||||||
builderSocket?.emitDatasourceUpdate(ctx, datasource)
|
builderSocket?.emitDatasourceUpdate(ctx, datasource)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const preSaveAction: Partial<Record<SourceName, any>> = {
|
||||||
|
[SourceName.GOOGLE_SHEETS]: async (datasource: Datasource) => {
|
||||||
|
await googleSetupCreationAuth(datasource.config as any)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
export async function save(
|
export async function save(
|
||||||
ctx: UserCtx<CreateDatasourceRequest, CreateDatasourceResponse>
|
ctx: UserCtx<CreateDatasourceRequest, CreateDatasourceResponse>
|
||||||
) {
|
) {
|
||||||
|
@ -327,6 +335,10 @@ export async function save(
|
||||||
setDefaultDisplayColumns(datasource)
|
setDefaultDisplayColumns(datasource)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (preSaveAction[datasource.source]) {
|
||||||
|
await preSaveAction[datasource.source](datasource)
|
||||||
|
}
|
||||||
|
|
||||||
const dbResp = await db.put(datasource)
|
const dbResp = await db.put(datasource)
|
||||||
await events.datasource.created(datasource)
|
await events.datasource.created(datasource)
|
||||||
datasource._rev = dbResp.rev
|
datasource._rev = dbResp.rev
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import {
|
import {
|
||||||
ConnectionInfo,
|
ConnectionInfo,
|
||||||
|
Datasource,
|
||||||
DatasourceFeature,
|
DatasourceFeature,
|
||||||
DatasourceFieldType,
|
DatasourceFieldType,
|
||||||
DatasourcePlus,
|
DatasourcePlus,
|
||||||
|
@ -19,13 +20,15 @@ import { OAuth2Client } from "google-auth-library"
|
||||||
import { buildExternalTableId, finaliseExternalTables } from "./utils"
|
import { buildExternalTableId, finaliseExternalTables } from "./utils"
|
||||||
import { GoogleSpreadsheet, GoogleSpreadsheetRow } from "google-spreadsheet"
|
import { GoogleSpreadsheet, GoogleSpreadsheetRow } from "google-spreadsheet"
|
||||||
import fetch from "node-fetch"
|
import fetch from "node-fetch"
|
||||||
import { configs, HTTPError } from "@budibase/backend-core"
|
import { cache, configs, context, HTTPError } from "@budibase/backend-core"
|
||||||
import { dataFilters } from "@budibase/shared-core"
|
import { dataFilters } from "@budibase/shared-core"
|
||||||
import { GOOGLE_SHEETS_PRIMARY_KEY } from "../constants"
|
import { GOOGLE_SHEETS_PRIMARY_KEY } from "../constants"
|
||||||
|
import sdk from "../sdk"
|
||||||
|
|
||||||
interface GoogleSheetsConfig {
|
interface GoogleSheetsConfig {
|
||||||
spreadsheetId: string
|
spreadsheetId: string
|
||||||
auth: OAuthClientConfig
|
auth: OAuthClientConfig
|
||||||
|
continueSetupId?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface OAuthClientConfig {
|
interface OAuthClientConfig {
|
||||||
|
@ -72,7 +75,7 @@ const SCHEMA: Integration = {
|
||||||
},
|
},
|
||||||
datasource: {
|
datasource: {
|
||||||
spreadsheetId: {
|
spreadsheetId: {
|
||||||
display: "Google Sheet URL",
|
display: "Spreadsheet URL",
|
||||||
type: DatasourceFieldType.STRING,
|
type: DatasourceFieldType.STRING,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
@ -147,6 +150,7 @@ class GoogleSheetsIntegration implements DatasourcePlus {
|
||||||
|
|
||||||
async testConnection(): Promise<ConnectionInfo> {
|
async testConnection(): Promise<ConnectionInfo> {
|
||||||
try {
|
try {
|
||||||
|
await setupCreationAuth(this.config)
|
||||||
await this.connect()
|
await this.connect()
|
||||||
return { connected: true }
|
return { connected: true }
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
|
@ -566,6 +570,18 @@ class GoogleSheetsIntegration implements DatasourcePlus {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function setupCreationAuth(datasouce: GoogleSheetsConfig) {
|
||||||
|
if (datasouce.continueSetupId) {
|
||||||
|
const appId = context.getAppId()
|
||||||
|
const tokens = await cache.get(
|
||||||
|
`datasource:creation:${appId}:google:${datasouce.continueSetupId}`
|
||||||
|
)
|
||||||
|
|
||||||
|
datasouce.auth = tokens.tokens
|
||||||
|
delete datasouce.continueSetupId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
schema: SCHEMA,
|
schema: SCHEMA,
|
||||||
integration: GoogleSheetsIntegration,
|
integration: GoogleSheetsIntegration,
|
||||||
|
|
|
@ -140,7 +140,6 @@ export const datasourcePreAuth = async (ctx: any, next: any) => {
|
||||||
{
|
{
|
||||||
provider,
|
provider,
|
||||||
appId: ctx.query.appId,
|
appId: ctx.query.appId,
|
||||||
datasourceId: ctx.query.datasourceId,
|
|
||||||
},
|
},
|
||||||
Cookie.DatasourceAuth
|
Cookie.DatasourceAuth
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue