552 lines
14 KiB
Svelte
552 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { workspaceStore } from '$lib/stores'
|
|
import IconedResourceType from './IconedResourceType.svelte'
|
|
import {
|
|
OauthService,
|
|
ResourceService,
|
|
VariableService,
|
|
type TokenResponse,
|
|
type ResourceType
|
|
} from '$lib/gen'
|
|
import { emptyString, truncateRev, urlize } from '$lib/utils'
|
|
import { createEventDispatcher } from 'svelte'
|
|
import Path from './Path.svelte'
|
|
import { Button, Skeleton } from './common'
|
|
import ApiConnectForm from './ApiConnectForm.svelte'
|
|
import SearchItems from './SearchItems.svelte'
|
|
import WhitelistIp from './WhitelistIp.svelte'
|
|
import { sendUserToast } from '$lib/toast'
|
|
import OauthScopes from './OauthScopes.svelte'
|
|
import Markdown from 'svelte-exmarkdown'
|
|
import autosize from '$lib/autosize'
|
|
import Required from './Required.svelte'
|
|
import Toggle from './Toggle.svelte'
|
|
import { Pen } from 'lucide-svelte'
|
|
import GfmMarkdown from './GfmMarkdown.svelte'
|
|
import { apiTokenApps, forceSecretValue, linkedSecretValue } from './app_connect'
|
|
|
|
export let step = 1
|
|
export let resourceType = ''
|
|
export let isGoogleSignin = false
|
|
export let disabled = false
|
|
export let manual = true
|
|
|
|
let isValid = true
|
|
|
|
const nativeLanguagesCategory = [
|
|
'postgresql',
|
|
'mysql',
|
|
'bigquery',
|
|
'snowflake',
|
|
'mssql',
|
|
'graphql'
|
|
]
|
|
|
|
let filter = ''
|
|
let value: string = ''
|
|
let valueToken: TokenResponse | undefined = undefined
|
|
let connects: string[] | undefined = undefined
|
|
let connectsManual:
|
|
| [string, { img?: string; instructions: string[]; key?: string }][]
|
|
| undefined = undefined
|
|
let args: any = {}
|
|
let renderDescription = true
|
|
|
|
$: linkedSecretCandidates = apiTokenApps[resourceType]?.linkedSecret
|
|
? ([apiTokenApps[resourceType]?.linkedSecret] as string[])
|
|
: args != undefined
|
|
? Object.keys(args).filter((x) =>
|
|
['token', 'secret', 'key', 'pass', 'private'].some((y) => x.toLowerCase().includes(y))
|
|
)
|
|
: undefined
|
|
|
|
$: linkedSecret =
|
|
forceSecretValue(resourceType) ??
|
|
linkedSecretCandidates?.sort((ua, ub) => linkedSecretValue(ub) - linkedSecretValue(ua))?.[0]
|
|
|
|
let scopes: string[] = []
|
|
let extra_params: [string, string][] = []
|
|
|
|
let path: string
|
|
let description = ''
|
|
|
|
let resourceTypeInfo: ResourceType | undefined = undefined
|
|
|
|
let pathError = ''
|
|
|
|
export async function open(rt?: string) {
|
|
if (!rt) {
|
|
loadResourceTypes()
|
|
}
|
|
step = 1
|
|
value = ''
|
|
description = ''
|
|
resourceType = rt ?? ''
|
|
valueToken = undefined
|
|
await loadConnects()
|
|
manual = !connects?.includes(resourceType)
|
|
if (rt) {
|
|
next()
|
|
}
|
|
}
|
|
|
|
async function loadConnects() {
|
|
if (!connects) {
|
|
connects = (await OauthService.listOauthConnects()).filter((x) => x != 'supabase_wizard')
|
|
}
|
|
}
|
|
|
|
const connectAndManual = ['gitlab']
|
|
|
|
$: isGoogleSignin =
|
|
step == 1 &&
|
|
(resourceType == 'google' ||
|
|
resourceType == 'gmail' ||
|
|
resourceType == 'gcal' ||
|
|
resourceType == 'gdrive' ||
|
|
resourceType == 'gsheets')
|
|
|
|
$: disabled =
|
|
(step == 1 && resourceType == '') ||
|
|
(step == 2 &&
|
|
value == '' &&
|
|
args &&
|
|
args['token'] == '' &&
|
|
args['password'] == '' &&
|
|
args['api_key'] == '' &&
|
|
args['key'] == '' &&
|
|
linkedSecret != undefined) ||
|
|
step == 3 ||
|
|
(step == 4 && pathError != '') ||
|
|
!isValid
|
|
|
|
export async function loadResourceTypes() {
|
|
if (connectsManual) {
|
|
return
|
|
}
|
|
const availableRts = await ResourceService.listResourceTypeNames({
|
|
workspace: $workspaceStore!
|
|
})
|
|
|
|
connectsManual = availableRts
|
|
.filter((x) => connectAndManual.includes(x) || !Object.keys(connects ?? {}).includes(x))
|
|
.map((x) => [
|
|
x,
|
|
apiTokenApps[x] ?? {
|
|
instructions: '',
|
|
img: undefined,
|
|
linkedSecret: undefined
|
|
}
|
|
])
|
|
const filteredNativeLanguages = filteredConnectsManual?.filter(
|
|
(o) => nativeLanguagesCategory?.includes(o[0]) ?? false
|
|
)
|
|
|
|
try {
|
|
filteredConnectsManual = [
|
|
...(filteredNativeLanguages ?? []),
|
|
...(filteredConnectsManual ?? []).filter(
|
|
([key, _]) => !nativeLanguagesCategory.includes(key)
|
|
)
|
|
]
|
|
} catch (e) {}
|
|
}
|
|
|
|
function popupListener(event) {
|
|
let data = event.data
|
|
if (event.origin !== window.location.origin) {
|
|
return
|
|
}
|
|
|
|
if (data.type === 'error') {
|
|
sendUserToast(event.data.error, true)
|
|
step = 2
|
|
} else if (data.type === 'success') {
|
|
resourceType = data.resource_type
|
|
value = data.res.access_token!
|
|
valueToken = data.res
|
|
step = 4
|
|
}
|
|
}
|
|
|
|
async function getScopesAndParams() {
|
|
const connect = await OauthService.getOauthConnect({ client: resourceType })
|
|
scopes = connect.scopes ?? []
|
|
extra_params = Object.entries(connect.extra_params ?? {}) as [string, string][]
|
|
}
|
|
|
|
async function getResourceTypeInfo() {
|
|
resourceTypeInfo = await ResourceService.getResourceType({
|
|
workspace: $workspaceStore!,
|
|
path: resourceType
|
|
})
|
|
}
|
|
export async function next() {
|
|
if (step == 1) {
|
|
if (manual) {
|
|
getResourceTypeInfo()
|
|
args = {}
|
|
} else {
|
|
getResourceTypeInfo()
|
|
getScopesAndParams()
|
|
}
|
|
step += 1
|
|
} else if (step == 2 && !manual) {
|
|
const url = new URL(`/api/oauth/connect/${resourceType}`, window.location.origin)
|
|
url.searchParams.append('scopes', scopes.join('+'))
|
|
if (extra_params.length > 0) {
|
|
extra_params.forEach(([key, value]) => url.searchParams.append(key, value))
|
|
}
|
|
// if (!newPageOAuth) {
|
|
// window.location.href = url.toString()
|
|
// } else {
|
|
window.addEventListener('message', popupListener, { once: true })
|
|
window.open(url.toString(), '_blank', 'popup=true')
|
|
step += 1
|
|
|
|
// dispatch('close')
|
|
// }
|
|
} else {
|
|
let exists = await VariableService.existsVariable({
|
|
workspace: $workspaceStore!,
|
|
path
|
|
})
|
|
if (exists) {
|
|
throw Error(`Variable at path ${path} already exists. Delete it or pick another path`)
|
|
}
|
|
exists = await ResourceService.existsResource({
|
|
workspace: $workspaceStore!,
|
|
path
|
|
})
|
|
|
|
if (exists) {
|
|
throw Error(`Resource at path ${path} already exists. Delete it or pick another path`)
|
|
}
|
|
|
|
let account: number | undefined = undefined
|
|
if (valueToken?.expires_in != undefined) {
|
|
account = Number(
|
|
await OauthService.createAccount({
|
|
workspace: $workspaceStore!,
|
|
requestBody: {
|
|
refresh_token: valueToken.refresh_token ?? '',
|
|
expires_in: valueToken.expires_in,
|
|
client: resourceType
|
|
}
|
|
})
|
|
)
|
|
}
|
|
|
|
const resourceValue = args
|
|
|
|
let saveVariable = false
|
|
if (!manual || linkedSecret != undefined) {
|
|
let v = manual ? args[linkedSecret ?? ''] : value
|
|
if (typeof v == 'string' && v != '' && !v.startsWith('$var:')) {
|
|
saveVariable = true
|
|
await VariableService.createVariable({
|
|
workspace: $workspaceStore!,
|
|
requestBody: {
|
|
path,
|
|
value: v,
|
|
is_secret: true,
|
|
description: emptyString(description)
|
|
? `${manual ? 'Token' : 'OAuth token'} for ${resourceType}`
|
|
: description,
|
|
is_oauth: !manual,
|
|
account: account
|
|
}
|
|
})
|
|
resourceValue[linkedSecret ?? 'token'] = `$var:${path}`
|
|
}
|
|
}
|
|
|
|
await ResourceService.createResource({
|
|
workspace: $workspaceStore!,
|
|
requestBody: {
|
|
resource_type: resourceType,
|
|
path,
|
|
value: resourceValue,
|
|
description
|
|
}
|
|
})
|
|
dispatch('refresh', path)
|
|
dispatch('close')
|
|
sendUserToast(`Saved resource${saveVariable ? ' and variable' : ''} path: ${path}`)
|
|
step = 1
|
|
resourceType = ''
|
|
}
|
|
}
|
|
|
|
export async function back() {
|
|
if (step == 4) {
|
|
step -= 2
|
|
} else if (step > 1) {
|
|
step -= 1
|
|
}
|
|
if (step == 1) {
|
|
loadConnects()
|
|
loadResourceTypes()
|
|
}
|
|
}
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
let filteredConnects: { key: string }[] = []
|
|
let filteredConnectsManual: [string, { img?: string; instructions: string[]; key?: string }][] =
|
|
[]
|
|
|
|
let editScopes = false
|
|
</script>
|
|
|
|
<SearchItems
|
|
{filter}
|
|
items={connects
|
|
? connects
|
|
.sort((a, b) => a.localeCompare(b))
|
|
.map((key) => ({
|
|
key
|
|
}))
|
|
: undefined}
|
|
bind:filteredItems={filteredConnects}
|
|
f={(x) => x.key}
|
|
/>
|
|
<SearchItems
|
|
{filter}
|
|
items={connectsManual?.sort((a, b) => a[0].localeCompare(b[0]))}
|
|
bind:filteredItems={filteredConnectsManual}
|
|
f={(x) => x[0]}
|
|
/>
|
|
|
|
{#if step == 1}
|
|
<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
|
|
<input
|
|
type="text"
|
|
placeholder="Search resource type"
|
|
bind:value={filter}
|
|
class="text-2xl grow"
|
|
/>
|
|
</div>
|
|
|
|
<h2 class="mb-4">OAuth APIs</h2>
|
|
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
|
|
{#if filteredConnects}
|
|
{#each filteredConnects as { key }}
|
|
<Button
|
|
size="sm"
|
|
variant="border"
|
|
color={key === resourceType ? 'blue' : 'light'}
|
|
btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
|
|
on:click={() => {
|
|
manual = false
|
|
resourceType = key
|
|
next()
|
|
}}
|
|
>
|
|
<IconedResourceType name={key} after={true} width="20px" height="20px" />
|
|
</Button>
|
|
{/each}
|
|
{:else}
|
|
{#each new Array(3) as _}
|
|
<Skeleton layout={[[2]]} />
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
{#if connects && connects.length == 0}
|
|
<div class="text-secondary text-sm w-full"
|
|
>No OAuth APIs has been setup on the instance. To add oauth APIs, first sync the resource
|
|
types with the hub, then add oauth configuration. See <a
|
|
href="https://www.windmill.dev/docs/misc/setup_oauth">documentation</a
|
|
>
|
|
</div>
|
|
{/if}
|
|
|
|
<h2 class="mt-8 mb-4">Others</h2>
|
|
|
|
{#if connectsManual && connectsManual?.length < 10}
|
|
<div class="text-secondary p-2">
|
|
Resource Types have not been synced with the hub. Go to the admins workspace to sync them (and
|
|
add a schedule to do daily):
|
|
<p class="mt-4"
|
|
>1. Go to the "admins" workspaces:
|
|
<img src="/sync_resource_types.png" alt="sync resource types" class="mt-2" />
|
|
</p>
|
|
<p class="mt-4">
|
|
2: Run the synchronization script:
|
|
<img src="/sync_resource_types2.png" alt="sync resource types" class="mt-2" />
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
|
|
{#if filteredConnectsManual}
|
|
{#each filteredConnectsManual as [key, _]}
|
|
{#if nativeLanguagesCategory.includes(key)}
|
|
<Button
|
|
size="sm"
|
|
variant="border"
|
|
color={key === resourceType ? 'blue' : 'light'}
|
|
btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
|
|
on:click={() => {
|
|
manual = true
|
|
resourceType = key
|
|
next()
|
|
}}
|
|
>
|
|
<IconedResourceType name={key} after={true} width="20px" height="20px" />
|
|
</Button>
|
|
{/if}
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="mt-8 mb-4" />
|
|
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
|
|
{#if filteredConnectsManual}
|
|
{#each filteredConnectsManual as [key, _]}
|
|
{#if !nativeLanguagesCategory.includes(key)}
|
|
<!-- Exclude specific items -->
|
|
<Button
|
|
size="sm"
|
|
variant="border"
|
|
color={key === resourceType ? 'blue' : 'light'}
|
|
btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
|
|
on:click={() => {
|
|
manual = true
|
|
resourceType = key
|
|
next()
|
|
}}
|
|
>
|
|
<IconedResourceType name={key} after={true} width="20px" height="20px" />
|
|
</Button>
|
|
{/if}
|
|
{/each}
|
|
{:else}
|
|
{#each new Array(9) as _}
|
|
<Skeleton layout={[[2]]} />
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
{:else if step == 2 && manual}
|
|
<Path
|
|
bind:error={pathError}
|
|
bind:path
|
|
initialPath=""
|
|
namePlaceholder={resourceType}
|
|
kind="resource"
|
|
/>
|
|
|
|
{#if apiTokenApps[resourceType]}
|
|
<h2 class="mt-4 mb-2">Instructions</h2>
|
|
<div class="pl-10">
|
|
<ol class="list-decimal">
|
|
{#each apiTokenApps[resourceType].instructions as step}
|
|
<li>
|
|
{@html step}
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
</div>
|
|
{#if apiTokenApps[resourceType].img}
|
|
<div class="mt-4 w-full overflow-hidden">
|
|
<img class="m-auto max-h-60" alt="connect" src={apiTokenApps[resourceType].img} />
|
|
</div>
|
|
{/if}
|
|
{:else if !emptyString(resourceTypeInfo?.description)}
|
|
<h4 class="mt-8 mb-2">{resourceTypeInfo?.name} description</h4>
|
|
<div class="text-sm">
|
|
<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
|
|
</div>
|
|
{/if}
|
|
{#if resourceType == 'postgresql' || resourceType == 'mysql' || resourceType == 'mongodb'}
|
|
<WhitelistIp />
|
|
{/if}
|
|
|
|
<h4 class="mt-8 inline-flex items-center gap-4"
|
|
>Resource description <Required required={false} />
|
|
<div class="flex gap-1 items-center">
|
|
<Toggle size="xs" bind:checked={renderDescription} />
|
|
<Pen size={14} />
|
|
</div>
|
|
</h4>
|
|
{#if renderDescription}
|
|
<div>
|
|
<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
|
|
<textarea use:autosize bind:value={description} placeholder={'Resource description'} />
|
|
</div>
|
|
{:else if description == undefined || description == ''}
|
|
<div class="text-sm text-tertiary">No description provided</div>
|
|
{:else}
|
|
<div class="mt-2" />
|
|
<GfmMarkdown md={description} />
|
|
{/if}
|
|
<div class="mt-12">
|
|
{#key resourceTypeInfo}
|
|
<ApiConnectForm
|
|
{linkedSecret}
|
|
{linkedSecretCandidates}
|
|
{resourceType}
|
|
{resourceTypeInfo}
|
|
bind:args
|
|
bind:isValid
|
|
/>
|
|
{/key}
|
|
</div>
|
|
{:else if step == 2 && !manual}
|
|
{#if manual == false && resourceType != ''}
|
|
<h1 class="mb-4">{resourceType}</h1>
|
|
<div class="my-4 text-secondary"
|
|
>Click connect to create a resource backed by an oauth connection, whose token is fetched from
|
|
the external services and refreshed automatically if needed before expiration (using its
|
|
refresh token)</div
|
|
>
|
|
<h4 class="mb-2">Description</h4>
|
|
<div class="text-sm mb-8">
|
|
<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
|
|
</div>
|
|
<h3 class="mb-4 flex gap-4"
|
|
>Scopes <button
|
|
on:click={() => {
|
|
editScopes = !editScopes
|
|
}}><Pen size={14} /></button
|
|
></h3
|
|
>
|
|
|
|
{#if editScopes}
|
|
<OauthScopes bind:scopes />
|
|
{:else}
|
|
<div class="flex flex-col gap-1">
|
|
{#each scopes as scope}
|
|
<div class="py-0.5 pl-2 text-xs">- {scope}</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
{:else if step == 3 && !manual}
|
|
Finish connection in popup window
|
|
{:else}
|
|
<Path
|
|
initialPath=""
|
|
namePlaceholder={resourceType}
|
|
bind:error={pathError}
|
|
bind:path
|
|
kind="resource"
|
|
/>
|
|
{#if apiTokenApps[resourceType] || !manual}
|
|
<ul class="mt-10">
|
|
<li>
|
|
1. A secret variable containing the {apiTokenApps[resourceType]?.linkedSecret ?? 'token'}
|
|
<span class="font-bold">{truncateRev(value, 5, '*****')}</span>
|
|
will be stored a
|
|
<span class="font-mono whitespace-nowrap">{path}</span>.
|
|
</li>
|
|
<li class="mt-4">
|
|
2. The resource containing that token will be stored at the same path <span
|
|
class="font-mono whitespace-nowrap">{path}</span
|
|
>. The Variable and Resource will be "linked together", they will be deleted and renamed
|
|
together.
|
|
</li></ul
|
|
>
|
|
{/if}
|
|
{/if}
|