多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1344 lines
48 KiB

<script lang="ts" setup>
import { Form, message } from 'ant-design-vue'
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
import { diff } from 'deep-object-diff'
import { IntegrationsType, validateAndExtractSSLProp } from 'nocodb-sdk'
import {
type CertTypes,
ClientType,
type DatabricksConnection,
type DefaultConnection,
type ProjectCreateForm,
type SQLiteConnection,
SSLUsage,
type SnowflakeConnection,
clientTypes as _clientTypes,
} from '#imports'
const props = defineProps<{
open: boolean
connectionType?: ClientType
loadDatasourceInfo?: boolean
baseId?: string
}>()
const emit = defineEmits(['update:open'])
const vOpen = useVModel(props, 'open', emit)
const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL)
const {
isFromIntegrationPage,
pageMode,
IntegrationsPageMode,
activeIntegration,
saveIntegration,
updateIntegration,
integrationsIconMap,
} = useIntegrationStore()
const isEditMode = computed(() => pageMode.value === IntegrationsPageMode.EDIT)
const useForm = Form.useForm
const testSuccess = ref(false)
const testingConnection = ref(false)
const form = ref<typeof Form>()
const { api } = useApi()
const { $e } = useNuxtApp()
const { t } = useI18n()
const creatingSource = ref(false)
const _getDefaultConnectionConfig = (client = ClientType.MYSQL) => {
const config = getDefaultConnectionConfig(client)
if ('database' in config.connection) {
config.connection.database = ''
}
if (client === ClientType.SQLITE && config.connection?.connection?.filename) {
config.connection.connection.filename = ''
}
return config
}
const defaultFormState = (client = ClientType.MYSQL) => {
return {
title: '',
dataSource: { ..._getDefaultConnectionConfig(client) },
sslUse: SSLUsage.No,
extraParameters: [],
is_private: false,
}
}
const formState = ref<ProjectCreateForm>(defaultFormState())
const activeIntegrationformState = ref<ProjectCreateForm>(defaultFormState())
const isEnabledSaveChangesBtn = ref(false)
const easterEgg = ref(false)
const easterEggCount = ref(0)
const useSslExpansionPanel = ref<string[]>([])
const advancedOptionsExpansionPanel = ref<string[]>([])
const isLoading = ref<boolean>(false)
const isDisabledSubmitBtn = computed(() => {
if (isEditMode.value) {
return !testSuccess.value && !isEnabledSaveChangesBtn.value
}
return !testSuccess.value
})
const onEasterEgg = () => {
easterEggCount.value += 1
if (easterEggCount.value >= 2) {
easterEgg.value = true
}
}
const clientTypes = computed(() => {
return _clientTypes.filter((type) => {
return (
([ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(type.value) && easterEgg.value) ||
![ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(type.value)
)
})
})
const validators = computed(() => {
let clientValidations: Record<string, any[]> = {
'dataSource.connection.host': [fieldRequiredValidator()],
'dataSource.connection.port': [fieldRequiredValidator()],
'dataSource.connection.user': [fieldRequiredValidator()],
'dataSource.connection.password': [fieldRequiredValidator()],
}
switch (formState.value.dataSource.client) {
case ClientType.SQLITE:
clientValidations = {
'dataSource.connection.connection.filename': [fieldRequiredValidator()],
}
break
case ClientType.SNOWFLAKE:
clientValidations = {
'dataSource.connection.account': [fieldRequiredValidator()],
'dataSource.connection.username': [fieldRequiredValidator()],
'dataSource.connection.password': [fieldRequiredValidator()],
'dataSource.connection.warehouse': [fieldRequiredValidator()],
'dataSource.connection.database': [fieldRequiredValidator()],
'dataSource.connection.schema': [fieldRequiredValidator()],
}
break
case ClientType.DATABRICKS:
clientValidations = {
'dataSource.connection.token': [fieldRequiredValidator()],
'dataSource.connection.host': [fieldRequiredValidator()],
'dataSource.connection.path': [fieldRequiredValidator()],
}
break
case ClientType.PG:
case ClientType.MSSQL:
clientValidations['dataSource.searchPath.0'] = [fieldRequiredValidator()]
break
}
return {
'title': [
{
required: true,
message: 'Connection name is required',
},
baseTitleValidator('connection'),
],
'extraParameters': [extraParameterValidator],
'dataSource.client': [fieldRequiredValidator()],
...clientValidations,
}
})
const { validate, validateInfos } = useForm(formState, validators)
const onClientChange = () => {
formState.value.dataSource = { ..._getDefaultConnectionConfig(formState.value.dataSource.client) }
}
const onSSLModeChange = ((mode: SSLUsage) => {
if (formState.value.dataSource.client !== ClientType.SQLITE) {
const connection = formState.value.dataSource.connection as DefaultConnection
switch (mode) {
case SSLUsage.No:
connection.ssl = undefined
break
case SSLUsage.Allowed:
connection.ssl = 'true'
break
default:
connection.ssl = {
ca: '',
cert: '',
key: '',
}
break
}
}
}) as SelectHandler
const updateSSLUse = (updateActiveIntegrationFormState = false) => {
if (formState.value.dataSource.client !== ClientType.SQLITE) {
const connection = formState.value.dataSource.connection as DefaultConnection
if (connection.ssl) {
if (typeof connection.ssl === 'string') {
formState.value.sslUse = SSLUsage.Allowed
} else {
formState.value.sslUse = SSLUsage.Preferred
}
} else {
formState.value.sslUse = SSLUsage.No
}
if (updateActiveIntegrationFormState) {
activeIntegrationformState.value.sslUse = toRaw(formState.value.sslUse)
useSslExpansionPanel.value = formState.value.sslUse !== SSLUsage.No ? ['1'] : []
}
}
}
const addNewParam = () => {
formState.value.extraParameters.push({ key: '', value: '' })
}
const removeParam = (index: number) => {
formState.value.extraParameters.splice(index, 1)
}
const importURL = ref('')
const importURLDlg = ref(false)
const caFileInput = ref<HTMLInputElement>()
const keyFileInput = ref<HTMLInputElement>()
const certFileInput = ref<HTMLInputElement>()
const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
if (!el) return
readFile(el, (content) => {
if ('ssl' in formState.value.dataSource.connection && typeof formState.value.dataSource.connection.ssl === 'object')
formState.value.dataSource.connection.ssl[key] = content ?? ''
el.value = null
})
}
const sslFilesRequired = computed(
() => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed,
)
function getConnectionConfig() {
const extraParameters = Object.fromEntries(
new Map(formState.value.extraParameters.filter((object) => object.key?.trim()).map((object) => [object.key, object.value])),
)
const connection = {
...formState.value.dataSource.connection,
...extraParameters,
}
connection.ssl = validateAndExtractSSLProp(connection, formState.value.sslUse, formState.value.dataSource.client)
return connection
}
const focusInvalidInput = () => {
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
}
const createOrUpdateIntegration = async () => {
// if it is edit mode and activeIntegration id is not present then return
if (isEditMode.value && !activeIntegration.value?.id) return
try {
await validate()
} catch (e) {
focusInvalidInput()
return
}
try {
creatingSource.value = true
const connection = getConnectionConfig()
const config = { ...formState.value.dataSource, connection }
if (!isEditMode.value) {
await saveIntegration(
{
title: formState.value.title,
type: IntegrationsType.Database,
sub_type: formState.value.dataSource.client,
config,
is_private: formState.value.is_private,
},
'create',
props.loadDatasourceInfo,
props.baseId,
)
} else {
await updateIntegration({
id: activeIntegration.value.id,
title: formState.value.title,
type: IntegrationsType.Database,
sub_type: formState.value.dataSource.client,
config,
is_private: formState.value.is_private,
})
}
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
} finally {
creatingSource.value = false
}
}
// apply fix to config
function applyConfigFix(fix: any) {
if (!fix) return
formState.value.dataSource = {
...formState.value.dataSource,
...fix,
connection: {
...formState.value.dataSource.connection,
...fix.connection,
},
}
}
const testConnectionError = ref()
const testConnection = async (retry = 0, initialConfig = null) => {
try {
await validate()
} catch (e) {
if (e.errorFields?.length) {
focusInvalidInput()
return
}
}
$e('a:source:create:extdb:test-connection', [])
try {
testingConnection.value = true
if (formState.value.dataSource.client === ClientType.SQLITE) {
testSuccess.value = true
isEnabledSaveChangesBtn.value = true
} else {
const connection = getConnectionConfig()
connection.database = getTestDatabaseName(formState.value.dataSource)!
const testConnectionConfig = {
...formState.value.dataSource,
connection,
}
const result = await api.utils.testConnection(testConnectionConfig)
if (result.code === 0) {
testSuccess.value = true
isEnabledSaveChangesBtn.value = true
} else {
testSuccess.value = false
message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
}
}
} catch (e: any) {
// take a copy of the current config
const config = initialConfig || JSON.parse(JSON.stringify(formState.value.dataSource))
await handleConnectionError(e, retry, config)
} finally {
testingConnection.value = false
}
}
const MAX_CONNECTION_RETRIES = 3
async function handleConnectionError(e: any, retry: number, initialConfig: any): Promise<void> {
if (retry >= MAX_CONNECTION_RETRIES) {
testSuccess.value = false
testConnectionError.value = await extractSdkResponseErrorMsg(e)
// reset the connection config to initial state
formState.value.dataSource = initialConfig
return
}
const fix = generateConfigFix(e)
if (fix) {
applyConfigFix(fix)
// Retry the connection after applying the fix
return testConnection(retry + 1, initialConfig)
}
// If no fix is available, or fix did not resolve the issue
testSuccess.value = false
testConnectionError.value = await extractSdkResponseErrorMsg(e)
}
const handleImportURL = async () => {
if (!importURL.value || importURL.value === '') return
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value })
if (connectionConfig) {
formState.value.dataSource.client = connectionConfig.client
formState.value.dataSource.connection = {
...connectionConfig.connection,
}
// set filename only for sqlite connection
if (connectionConfig.client === ClientType.SQLITE) {
formState.value.dataSource.connection.connection = {
filename: connectionConfig?.connection?.filename || '',
}
}
} else {
message.error(t('msg.error.invalidURL'))
}
importURLDlg.value = false
updateSSLUse()
}
const customJsonFormState = computed({
get: () => ({ ...formState.value }),
set: (value) => {
if (value && typeof value === 'object') {
formState.value = { ...defaultFormState(), ...value }
} else {
formState.value = defaultFormState(formState.value?.dataSource?.client ? formState.value?.dataSource?.client : undefined)
}
updateSSLUse()
},
})
function checkDifference() {
const difference = diff(activeIntegrationformState.value, formState.value)
if (typeof difference === 'object' && Object.keys(difference).length === 1 && difference?.title !== undefined) {
return false
}
return true
}
const handleUpdateUseSslExpannsionPanel = (open: boolean) => {
if (open) {
useSslExpansionPanel.value = ['1']
} else {
useSslExpansionPanel.value = []
// reset only on collapse use ssl panel
formState.value.sslUse = SSLUsage.No
onSSLModeChange(formState.value.sslUse, {})
}
}
const handleUpdateAdvancedOptionsExpansionPanel = (open: boolean) => {
if (open) {
advancedOptionsExpansionPanel.value = ['1']
handleAutoScroll(true, 'nc-connection-advanced-options')
} else {
advancedOptionsExpansionPanel.value = []
}
}
let timer: any
function handleAutoScroll(scroll: boolean, className: string) {
if (scroll) {
if (timer) {
clearTimeout(timer)
}
nextTick(() => {
const el = document.querySelector(`.nc-edit-or-add-connection .${className}`)
console.log('className', className, el)
if (!el) return
// wait for transition complete
timer = setTimeout(() => {
el.scrollIntoView({ block: 'center', behavior: 'smooth' })
}, 400)
})
}
}
const activeIntegrationIcon = computed(() => {
const activeIntegrationType = isEditMode.value
? activeIntegration.value?.sub_type || activeIntegration.value?.config?.client
: activeIntegration.value?.type
return integrationsIconMap[activeIntegrationType]
})
// reset test status on config change
watch(
formState,
() => {
if (checkDifference()) {
testSuccess.value = false
testConnectionError.value = null
isEnabledSaveChangesBtn.value = false
} else {
isEnabledSaveChangesBtn.value = true
}
},
{ deep: true },
)
// select and focus title field on load
onMounted(async () => {
isLoading.value = true
if (pageMode.value === IntegrationsPageMode.ADD) {
formState.value.title = await generateUniqueName()
} else {
if (!activeIntegration.value) return
const definedParameters = ['host', 'port', 'user', 'password', 'database']
const tempParameters = Object.entries(activeIntegration.value.config.connection)
.filter(([key]) => !definedParameters.includes(key))
.map(([key, value]) => ({ key: key as string, value: value as string }))
formState.value = {
title: activeIntegration.value.title || '',
dataSource: activeIntegration.value.config,
extraParameters: tempParameters,
sslUse: SSLUsage.No,
is_private: activeIntegration.value?.is_private,
}
activeIntegrationformState.value = JSON.parse(JSON.stringify(formState.value))
updateSSLUse(true)
}
nextTick(() => {
// todo: replace setTimeout and follow better approach
setTimeout(() => {
const input = form.value?.$el?.querySelector('input[type=text]')
input?.setSelectionRange(0, formState.value.title.length)
input?.focus()
}, 500)
})
isLoading.value = false
})
watch(
connectionType,
(v) => {
formState.value.dataSource.client = v
onClientChange()
},
{ immediate: true },
)
</script>
<template>
<div v-if="activeIntegration" class="h-full">
<div class="p-4 w-full flex items-center justify-between gap-3 border-b-1 border-gray-200">
<div class="flex-1 flex items-center gap-3">
<NcButton
v-if="!isEditMode && !isFromIntegrationPage"
type="text"
size="small"
@click="pageMode = IntegrationsPageMode.LIST"
>
<GeneralIcon icon="arrowLeft" />
</NcButton>
<div
v-if="activeIntegrationIcon"
class="h-8 w-8 flex items-center justify-center children:flex-none bg-gray-200 rounded-lg"
>
<component :is="activeIntegrationIcon" class="!stroke-transparent w-4 h-4" />
</div>
<div class="flex-1 text-base font-weight-700">{{ activeIntegration?.title }}</div>
</div>
<div class="flex items-center gap-3">
<div class="w-[15px] h-[15px] cursor-pointer" @dblclick="onEasterEgg"></div>
<NcTooltip :disabled="!testConnectionError">
<template #title>
{{ testConnectionError }}
</template>
<NcButton
type="secondary"
size="small"
class="nc-extdb-btn-test-connection"
:class="{ 'pointer-events-none': testSuccess }"
:loading="testingConnection"
:disabled="isLoading"
icon-position="right"
@click="testConnection()"
>
<template #icon>
<GeneralIcon v-if="testSuccess" icon="circleCheckSolid" class="!text-green-700 w-4 h-4" />
<GeneralIcon v-else-if="testConnectionError" icon="alertTriangleSolid" class="!text-red-700 w-4 h-4" />
</template>
<span>
{{ testSuccess ? 'Test successful' : 'Test connection' }}
</span>
</NcButton>
</NcTooltip>
<NcButton
size="small"
type="primary"
:disabled="isDisabledSubmitBtn || isLoading"
:loading="creatingSource"
class="nc-extdb-btn-submit"
@click="createOrUpdateIntegration"
>
{{ pageMode === IntegrationsPageMode.ADD ? 'Create connection' : 'Update connection' }}
</NcButton>
<NcButton size="small" type="text" @click="vOpen = false">
<GeneralIcon icon="close" class="text-gray-600" />
</NcButton>
</div>
</div>
<div class="h-[calc(100%_-_66px)] flex">
<div class="nc-edit-or-add-integration-left-panel nc-scrollbar-thin relative">
<div class="w-full gap-8 max-w-[768px]">
<div class="nc-edit-or-add-connection bg-white relative flex flex-col justify-center gap-2 w-full">
<a-form
ref="form"
:model="formState"
hide-required-mark
name="external-base-create-form"
layout="vertical"
class="flex flex-col gap-8"
>
<div class="nc-form-section">
<div class="nc-form-section-title">General</div>
<div class="nc-form-section-body">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="Connection name" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" />
</a-form-item>
</a-col>
</a-row>
</div>
</div>
<div class="nc-form-section">
<div class="flex items-center justify-between">
<div class="nc-form-section-title">Connection details</div>
<!-- Use Connection URL -->
<NcDropdown
v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
v-model:visible="importURLDlg"
placement="bottomRight"
>
<NcButton
type="text"
size="small"
class="nc-extdb-btn-import-url !rounded-md !px-2 flex-none -my-1.5"
@click.stop="importURLDlg = true"
>
<div class="flex items-center gap-2">
<GeneralIcon icon="ncLink" class="flex-none" />
{{ $t('activity.useConnectionUrl') }}
</div>
</NcButton>
<template #overlay>
<div class="p-4 w-[448px] flex flex-col gap-3">
<div class="text-sm text-gray-700">
Auto populate connection configuration using database connection URL
</div>
<a-textarea
:ref="
(el) => {
el?.$el?.focus()
}
"
v-model:value="importURL"
class="!rounded-lg !min-h-[120px] !max-h-[250px] nc-scrollbar-thin"
></a-textarea>
<div class="flex items-center gap-2 justify-end">
<NcButton
size="small"
type="secondary"
@click="
() => {
importURLDlg = false
importURL = ''
}
"
>
{{ $t('general.cancel') }}</NcButton
>
<NcButton size="small" @click="handleImportURL"> Import</NcButton>
</div>
</div>
</template>
</NcDropdown>
</div>
<div class="nc-form-section-body">
<a-row v-if="easterEgg" :gutter="24">
<a-col :span="12">
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
<NcSelect
v-model:value="formState.dataSource.client"
class="nc-select-shadow nc-extdb-db-type"
dropdown-class-name="nc-dropdown-ext-db-type"
@change="onClientChange"
>
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
>{{ client.text }}
</a-select-option>
</NcSelect>
</a-form-item>
</a-col>
</a-row>
<!-- SQLite File -->
<template v-if="formState.dataSource.client === ClientType.SQLITE">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item
:label="$t('labels.sqliteFile')"
v-bind="validateInfos['dataSource.connection.connection.filename']"
>
<a-input
v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename"
placeholder="Enter absolute file path"
/>
</a-form-item>
</a-col>
</a-row>
</template>
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
<a-row :gutter="24">
<a-col :span="12">
<!-- Account -->
<a-form-item :label="$t('labels.account')" v-bind="validateInfos['dataSource.connection.account']">
<a-input
v-model:value="(formState.dataSource.connection as SnowflakeConnection).account"
class="nc-extdb-host-address"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<!-- Username -->
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']">
<a-input
v-model:value="(formState.dataSource.connection as SnowflakeConnection).username"
class="nc-extdb-host-user"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- Password -->
<a-form-item
:label="$t('labels.password')"
class="nc-form-item-connection-password"
v-bind="validateInfos['dataSource.connection.password']"
>
<a-input-password
v-model:value="(formState.dataSource.connection as SnowflakeConnection).password"
class="nc-extdb-host-password"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<!-- Warehouse -->
<a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']">
<a-input
v-model:value="(formState.dataSource.connection as SnowflakeConnection).warehouse"
class="nc-extdb-host-database"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- Database -->
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
<a-input
v-model:value="(formState.dataSource.connection as SnowflakeConnection).database"
class="nc-extdb-host-database"
:placeholder="`${$t('labels.database')} ${$t('general.name').toLowerCase()}`"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<!-- Schema -->
<a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
<a-input
v-model:value="(formState.dataSource.connection as SnowflakeConnection).schema"
class="nc-extdb-host-database"
/>
</a-form-item>
</a-col>
</a-row>
</template>
<template v-else-if="formState.dataSource.client === ClientType.DATABRICKS">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="Token" v-bind="validateInfos['dataSource.connection.token']">
<a-input
v-model:value="(formState.dataSource.connection as DatabricksConnection).token"
class="nc-extdb-host-token"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="Host" v-bind="validateInfos['dataSource.connection.host']">
<a-input
v-model:value="(formState.dataSource.connection as DatabricksConnection).host"
class="nc-extdb-host-address"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="Path" v-bind="validateInfos['dataSource.connection.path']">
<a-input
v-model:value="(formState.dataSource.connection as DatabricksConnection).path"
class="nc-extdb-host-path"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="Database" v-bind="validateInfos['dataSource.connection.database']">
<a-input
v-model:value="(formState.dataSource.connection as DatabricksConnection).database"
:placeholder="`${$t('labels.database')} ${$t('general.name').toLowerCase()}`"
class="nc-extdb-host-database"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
<a-input
v-model:value="(formState.dataSource.connection as DatabricksConnection).schema"
class="nc-extdb-host-schema"
/>
</a-form-item>
</a-col>
</a-row>
</template>
<template v-else>
<a-row :gutter="24">
<a-col :span="12">
<!-- Host Address -->
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
<a-input
v-model:value="(formState.dataSource.connection as DefaultConnection).host"
class="nc-extdb-host-address"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- Port Number -->
<a-form-item
:label="$t('labels.port')"
class="nc-form-item-connection-port"
v-bind="validateInfos['dataSource.connection.port']"
>
<a-input-number
v-model:value="(formState.dataSource.connection as DefaultConnection).port"
class="!w-full nc-extdb-host-port !rounded-md"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<!-- Username -->
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
<a-input
v-model:value="(formState.dataSource.connection as DefaultConnection).user"
class="nc-extdb-host-user"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- Password -->
<a-form-item :label="$t('labels.password')">
<a-input-password
v-model:value="(formState.dataSource.connection as DefaultConnection).password"
class="nc-extdb-host-password"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<!-- Database -->
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
<!-- Database : create if not exists -->
<a-input
v-model:value="formState.dataSource.connection.database"
:placeholder="`${$t('labels.database')} ${$t('general.name').toLowerCase()}`"
class="nc-extdb-host-database"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- Schema name -->
<a-form-item
v-if="
[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) &&
formState.dataSource.searchPath
"
:label="$t('labels.schemaName')"
v-bind="validateInfos['dataSource.searchPath.0']"
>
<a-input v-model:value="formState.dataSource.searchPath[0]" />
</a-form-item>
</a-col>
</a-row>
<a-row
v-if="
![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)
"
:gutter="24"
>
<a-col :span="24">
<!-- Extra connection parameters -->
<a-form-item
class="nc-form-extra-connectin-parameters mb-2"
label="Connection parameters"
v-bind="validateInfos.extraParameters"
>
<div class="flex flex-col gap-3">
<div v-for="(item, index) of formState.extraParameters" :key="index">
<a-row :gutter="24">
<a-col :span="12"><a-input v-model:value="item.key" placeholder="Key" /> </a-col>
<a-col :span="12">
<div class="flex gap-2">
<a-input v-model:value="item.value" placeholder="Value" />
<NcButton type="text" size="small" @click="removeParam(index)">
<GeneralIcon icon="delete" class="flex-none text-gray-500" />
</NcButton>
</div>
</a-col>
</a-row>
</div>
<div>
<NcButton size="small" type="secondary" class="" @click="addNewParam">
<div class="flex items-center">
<GeneralIcon icon="plus" />
Add
</div>
</NcButton>
</div>
</div>
</a-form-item>
</a-col>
</a-row>
</template>
</div>
</div>
<template
v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
>
<NcDivider />
<a-collapse v-model:active-key="useSslExpansionPanel" ghost class="!mt-4">
<template #expandIcon="{ isActive }">
<a-switch :checked="isActive" size="small" @change="handleUpdateUseSslExpannsionPanel($event)" />
</template>
<a-collapse-panel key="1" collapsible="disabled">
<template #header>
<div class="flex">
<div
class="nc-form-section-title cursor-pointer"
@click="handleUpdateUseSslExpannsionPanel(!useSslExpansionPanel.length)"
>
Use SSL
</div>
</div>
</template>
<div class="border-1 border-gray-200 rounded-lg p-3">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="SSL mode">
<NcSelect
v-model:value="formState.sslUse"
class="nc-select-shadow"
dropdown-class-name="nc-dropdown-ssl-mode"
@select="onSSLModeChange"
>
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">
<div class="w-full flex gap-2 items-center">
<div class="flex-1">
{{ opt }}
</div>
<component
:is="iconMap.check"
v-if="formState.sslUse === opt"
id="nc-selected-item-icon"
class="text-primary w-4 h-4"
/>
</div>
</a-select-option>
</NcSelect>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="24">
<a-form-item
v-if="formState.sslUse && ![SSLUsage.No, SSLUsage.Allowed].includes(formState.sslUse)"
label="SSL keys"
class="!mt-3"
>
<div class="flex gap-2 w-full">
<NcTooltip placement="top">
<!-- Select .cert file -->
<template #title>
<span>{{ $t('tooltip.clientCert') }}</span>
</template>
<NcButton
size="small"
type="secondary"
:disabled="!sslFilesRequired"
class="shadow !w-[90px]"
@click="certFileInput?.click()"
>
{{ $t('labels.clientCert') }}
</NcButton>
</NcTooltip>
<NcTooltip placement="top">
<!-- Select .key file -->
<template #title>
<span>{{ $t('tooltip.clientKey') }}</span>
</template>
<NcButton
size="small"
type="secondary"
:disabled="!sslFilesRequired"
class="shadow !w-[90px]"
@click="keyFileInput?.click()"
>
{{ $t('labels.clientKey') }}
</NcButton>
</NcTooltip>
<NcTooltip placement="top">
<!-- Select CA file -->
<template #title>
<span>{{ $t('tooltip.clientCA') }}</span>
</template>
<NcButton
size="small"
type="secondary"
:disabled="!sslFilesRequired"
class="shadow !w-[90px]"
@click="caFileInput?.click()"
>
{{ $t('labels.serverCA') }}
</NcButton>
</NcTooltip>
</div>
</a-form-item>
</a-col>
</a-row>
<input
ref="caFileInput"
type="file"
class="!hidden"
accept=".ca"
@change="onFileSelect(CertTypes.ca, caFileInput)"
/>
<input
ref="certFileInput"
type="file"
class="!hidden"
accept=".cert"
@change="onFileSelect(CertTypes.cert, certFileInput)"
/>
<input
ref="keyFileInput"
type="file"
class="!hidden"
accept=".key"
@change="onFileSelect(CertTypes.key, keyFileInput)"
/>
</div>
</a-collapse-panel>
</a-collapse>
</template>
<!-- Todo: Enable later when we plan to introduce private connection -->
<!-- <div class="nc-form-section">
<a-form-item class="!my-0">
<div class="flex items-center gap-3">
<a-switch v-if="isEeUI" v-model:checked="formState.is_private" size="small" />
<NcTooltip v-else>
<template #title>
<div class="text-center">
{{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
</div>
</template>
<a-switch :checked="formState.is_private" disabled size="small" />
</NcTooltip>
<NcTooltip placement="right" class="cursor-pointer">
<template #title>
{{ $t('tooltip.privateConnection') }}
</template>
<div
class="nc-form-section-title"
@click="isEeUI ? (formState.is_private = !formState.is_private) : undefined"
>
Private connection
</div>
</NcTooltip>
</div>
</a-form-item>
</div> -->
<template
v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
>
<a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-connection-advanced-options !mt-4">
<template #expandIcon="{ isActive }">
<NcButton
type="text"
size="small"
class="!-ml-1.5"
@click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
>
<div class="nc-form-section-title">Advanced options</div>
<GeneralIcon
icon="chevronDown"
class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
:class="{ '!rotate-180': isActive }"
/>
</NcButton>
</template>
<a-collapse-panel key="1" collapsible="disabled">
<template #header>
<span></span>
</template>
<div class="flex flex-col gap-2">
<div>Edit Connection JSON</div>
<div class="border-1 border-gray-200 !rounded-lg shadow-sm overflow-hidden">
<MonacoEditor v-model="customJsonFormState" class="nc-connection-json-editor h-[400px] w-full" />
</div>
</div>
</a-collapse-panel>
</a-collapse>
</template>
</a-form>
<div class="mt-10"></div>
</div>
</div>
<general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
<div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
<a-spin size="large" />
</div>
</general-overlay>
</div>
<div class="nc-edit-or-add-integration-right-panel">
<template v-if="isEeUI">
<DashboardSettingsDataSourcesInfo varient="new" />
<NcDivider />
</template>
<WorkspaceIntegrationsSupportedDocs />
<NcDivider />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
:deep(.ant-collapse-header) {
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;
}
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
@apply !right-0;
}
:deep(.ant-collapse-content-box) {
@apply !px-0 !pb-0 !pt-3;
}
:deep(.ant-form-item-explain-error) {
@apply !text-xs;
}
:deep(.ant-form-item) {
@apply mb-0;
}
:deep(.ant-divider) {
@apply m-0;
}
:deep(.ant-form-item-with-help .ant-form-item-explain) {
@apply !min-h-0;
}
:deep(.ant-select .ant-select-selector .ant-select-selection-item) {
@apply font-weight-400;
}
.nc-edit-or-add-connection {
:deep(.ant-input-affix-wrapper),
:deep(.ant-input),
:deep(.ant-select) {
@apply !appearance-none border-solid rounded-md;
}
:deep(.ant-input-password) {
input {
@apply !border-none my-0;
}
}
.nc-form-section {
@apply flex flex-col gap-3;
}
.nc-form-section-title {
@apply text-sm font-bold text-gray-800;
}
.nc-form-section-body {
@apply flex flex-col gap-3;
}
.nc-connection-json-editor {
@apply min-h-[300px] max-h-[600px];
resize: vertical;
overflow-y: auto;
}
:deep(.ant-form-item-label > label.ant-form-item-required:after) {
@apply content-['*'] inline-block text-inherit text-red-500 ml-1;
}
.nc-form-extra-connectin-parameters {
:deep(.ant-input) {
&:not(:hover):not(:focus):not(:disabled) {
@apply !shadow-default !border-gray-200;
}
&:hover:not(:focus):not(:disabled) {
@apply !border-gray-200 !shadow-hover;
}
&:focus {
@apply !shadow-selected !ring-0;
border-color: var(--ant-primary-color-hover) !important;
}
}
}
:deep(.ant-form-item) {
&.ant-form-item-has-error {
&:not(:has(.ant-input-password)) .ant-input {
&:not(:hover):not(:focus):not(:disabled) {
@apply shadow-default;
}
&:hover:not(:focus):not(:disabled) {
@apply shadow-hover;
}
&:focus {
@apply shadow-error ring-0;
}
}
.ant-input-number,
.ant-input-affix-wrapper.ant-input-password {
&:not(:hover):not(:focus-within):not(:disabled) {
@apply shadow-default;
}
&:hover:not(:focus-within):not(:disabled) {
@apply shadow-hover;
}
&:focus-within {
@apply shadow-error ring-0;
}
}
}
&:not(.ant-form-item-has-error) {
&:not(:has(.ant-input-password)) .ant-input {
&:not(:hover):not(:focus):not(:disabled) {
@apply shadow-default border-gray-200;
}
&:hover:not(:focus):not(:disabled) {
@apply border-gray-200 shadow-hover;
}
&:focus {
@apply shadow-selected ring-0;
}
}
.ant-input-number,
.ant-input-affix-wrapper.ant-input-password {
&:not(:hover):not(:focus-within):not(:disabled) {
@apply shadow-default border-gray-200;
}
&:hover:not(:focus-within):not(:disabled) {
@apply border-gray-200 shadow-hover;
}
&:focus-within {
@apply shadow-selected ring-0;
}
}
}
}
:deep(.ant-row:not(.ant-form-item)) {
@apply !-mx-1.5;
& > .ant-col {
@apply !px-1.5;
}
}
}
</style>
<style lang="scss"></style>