mirror of https://github.com/nocodb/nocodb
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.
805 lines
26 KiB
805 lines
26 KiB
<script lang="ts" setup> |
|
import { type SourceType, validateAndExtractSSLProp } from 'nocodb-sdk' |
|
import { Form, message } from 'ant-design-vue' |
|
import { |
|
ClientType, |
|
type DatabricksConnection, |
|
type DefaultConnection, |
|
type ProjectCreateForm, |
|
SSLUsage, |
|
type SnowflakeConnection, |
|
clientTypes as _clientTypes, |
|
} from '#imports' |
|
|
|
const props = defineProps<{ |
|
sourceId: string |
|
}>() |
|
|
|
const emit = defineEmits(['sourceUpdated', 'close']) |
|
|
|
const baseStore = useBase() |
|
const basesStore = useBases() |
|
const { base } = storeToRefs(baseStore) |
|
|
|
const { integrations, loadIntegrations } = useIntegrationStore() |
|
|
|
const _projectId = inject(ProjectIdInj, undefined) |
|
const baseId = computed(() => _projectId?.value ?? base.value?.id) |
|
|
|
const { refreshCommandPalette } = useCommandPalette() |
|
|
|
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 editingSource = ref(false) |
|
|
|
const easterEgg = ref(false) |
|
|
|
const easterEggCount = ref(0) |
|
|
|
const advancedOptionsExpansionPanel = ref<string[]>([]) |
|
|
|
const isLoading = ref<boolean>(false) |
|
|
|
const onEasterEgg = () => { |
|
easterEggCount.value += 1 |
|
if (easterEggCount.value >= 2) { |
|
easterEgg.value = true |
|
} |
|
} |
|
|
|
const defaultFormState = (client = ClientType.MYSQL) => { |
|
return { |
|
title: '', |
|
dataSource: { ...getDefaultConnectionConfig(client) }, |
|
inflection: { |
|
inflectionColumn: 'none', |
|
inflectionTable: 'none', |
|
}, |
|
sslUse: SSLUsage.No, |
|
extraParameters: [], |
|
is_schema_readonly: true, |
|
is_data_readonly: false, |
|
} |
|
} |
|
|
|
const formState = ref<ProjectCreateForm>(defaultFormState()) |
|
|
|
const selectedIntegration = computed(() => { |
|
return formState.value.fk_integration_id && integrations.value.find((i) => i.id === formState.value.fk_integration_id) |
|
}) |
|
const selectedIntegrationDb = computed(() => { |
|
return selectedIntegration.value?.config?.connection?.database |
|
}) |
|
const selectedIntegrationSchema = computed(() => { |
|
return selectedIntegration.value?.config?.searchPath?.[0] |
|
}) |
|
|
|
const getDataSourceValue = (field: 'database' | 'schema') => { |
|
if (field === 'database') { |
|
return selectedIntegrationDb.value |
|
} |
|
if (field === 'schema') { |
|
return selectedIntegrationSchema.value |
|
} |
|
} |
|
|
|
const validators = computed(() => { |
|
return { |
|
'title': [baseTitleValidator()], |
|
'extraParameters': [extraParameterValidator], |
|
'dataSource.client': [fieldRequiredValidator()], |
|
...(formState.value.dataSource.client === ClientType.SQLITE |
|
? {} |
|
: formState.value.dataSource.client === ClientType.SNOWFLAKE |
|
? { |
|
'dataSource.connection.database': [fieldRequiredValidator()], |
|
'dataSource.connection.schema': [fieldRequiredValidator()], |
|
} |
|
: { |
|
'dataSource.connection.database': |
|
selectedIntegration.value && getDataSourceValue('database') ? [] : [fieldRequiredValidator()], |
|
...([ClientType.PG, ClientType.MSSQL].includes(formState.value.dataSource.client) && |
|
formState.value.dataSource.searchPath |
|
? { |
|
'dataSource.searchPath.0': |
|
selectedIntegration.value && getDataSourceValue('schema') ? [] : [fieldRequiredValidator()], |
|
} |
|
: {}), |
|
}), |
|
} |
|
}) |
|
|
|
const { validate, validateInfos } = useForm(formState, validators) |
|
|
|
const updateSSLUse = () => { |
|
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 |
|
} |
|
} |
|
} |
|
|
|
const inflectionTypes = ['camelize', 'none'] |
|
|
|
function getConnectionConfig() { |
|
const extraParameters = Object.fromEntries(new Map(formState.value.extraParameters.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 editBase = async () => { |
|
try { |
|
await validate() |
|
} catch (e) { |
|
focusInvalidInput() |
|
return |
|
} |
|
|
|
try { |
|
if (!base.value?.id) return |
|
|
|
const connection = getConnectionConfig() |
|
|
|
const config = { ...formState.value.dataSource, connection } |
|
|
|
// todo: refactor and remove this duplicate path in config |
|
if (config.client === ClientType.SQLITE && config.connection?.connection?.filename) { |
|
config.connection.filename = config.connection.connection.filename |
|
} |
|
|
|
// if integration is selected and database/schema is empty, set it to `undefined` to use default from integration |
|
if (selectedIntegration.value) { |
|
if (config.connection?.database === '') { |
|
config.connection.database = undefined |
|
} |
|
if (config.searchPath?.[0] === '') { |
|
config.searchPath = undefined |
|
} |
|
} |
|
|
|
await api.source.update(base.value?.id, props.sourceId, { |
|
alias: formState.value.title, |
|
type: formState.value.dataSource.client, |
|
config, |
|
inflection_column: formState.value.inflection.inflectionColumn, |
|
inflection_table: formState.value.inflection.inflectionTable, |
|
is_schema_readonly: formState.value.is_schema_readonly, |
|
is_data_readonly: formState.value.is_data_readonly, |
|
}) |
|
|
|
$e('a:source:edit:extdb') |
|
|
|
await basesStore.loadProject(baseId.value!, true) |
|
emit('sourceUpdated') |
|
emit('close') |
|
} catch (e: any) { |
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
} finally { |
|
refreshCommandPalette() |
|
} |
|
} |
|
|
|
const testConnectionError = ref() |
|
|
|
const testConnection = async () => { |
|
try { |
|
await validate() |
|
} catch (e) { |
|
focusInvalidInput() |
|
return |
|
} |
|
|
|
$e('a:source:edit:extdb:test-connection', []) |
|
|
|
try { |
|
testingConnection.value = true |
|
|
|
if (formState.value.dataSource.client === ClientType.SQLITE) { |
|
testSuccess.value = true |
|
} else { |
|
const connection = getConnectionConfig() |
|
|
|
connection.database = getTestDatabaseName(formState.value.dataSource)! |
|
|
|
let searchPath = formState.value.dataSource.searchPath |
|
|
|
// if integration is selected and database/schema is empty, set it to `undefined` to use default from integration |
|
if (selectedIntegration.value) { |
|
if (connection?.database === '') { |
|
connection.database = undefined |
|
} |
|
if (searchPath?.[0] === '') { |
|
searchPath = undefined |
|
} |
|
} |
|
const testConnectionConfig = { |
|
...formState.value.dataSource, |
|
connection, |
|
searchPath, |
|
fk_integration_id: formState.value.fk_integration_id, |
|
} |
|
|
|
const result = await api.utils.testConnection(testConnectionConfig) |
|
|
|
if (result.code === 0) { |
|
testSuccess.value = true |
|
} else { |
|
testSuccess.value = false |
|
|
|
message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
|
} |
|
} |
|
} catch (e: any) { |
|
testSuccess.value = false |
|
testConnectionError.value = await extractSdkResponseErrorMsg(e) |
|
} |
|
|
|
testingConnection.value = false |
|
} |
|
|
|
// reset test status on config change |
|
watch( |
|
() => formState.value.dataSource, |
|
() => { |
|
testSuccess.value = false |
|
testConnectionError.value = null |
|
}, |
|
{ deep: true }, |
|
) |
|
|
|
// load source config |
|
onMounted(async () => { |
|
isLoading.value = true |
|
|
|
if (!integrations.value.length) { |
|
await loadIntegrations(true, base.value?.id) |
|
} |
|
|
|
if (base.value?.id) { |
|
const definedParameters = ['host', 'port', 'user', 'password', 'database'] |
|
|
|
const activeBase = (await api.source.read(base.value?.id, props.sourceId)) as SourceType |
|
|
|
const tempParameters = Object.entries(activeBase.config.connection || {}) |
|
.filter(([key]) => !definedParameters.includes(key)) |
|
.map(([key, value]) => ({ key: key as string, value: value as string })) |
|
|
|
const client = activeBase.config?.client || activeBase.config?.connection?.client |
|
|
|
formState.value = { |
|
title: activeBase.alias || '', |
|
dataSource: { client, connection: {}, ...(activeBase.config || {}), searchPath: activeBase.config?.searchPath || [] }, |
|
inflection: { |
|
inflectionColumn: activeBase.inflection_column, |
|
inflectionTable: activeBase.inflection_table, |
|
}, |
|
extraParameters: tempParameters, |
|
sslUse: SSLUsage.No, |
|
is_schema_readonly: activeBase.is_schema_readonly, |
|
is_data_readonly: activeBase.is_data_readonly, |
|
fk_integration_id: activeBase.fk_integration_id, |
|
} |
|
updateSSLUse() |
|
} |
|
|
|
isLoading.value = false |
|
}) |
|
|
|
// if searchPath is null/undefined reset it to empty array when necessary |
|
watch( |
|
() => formState.value.dataSource.searchPath, |
|
(val) => { |
|
if ([ClientType.PG, ClientType.MSSQL].includes(formState.value.dataSource.client) && !val) { |
|
formState.value.dataSource.searchPath = [] |
|
} |
|
}, |
|
{ |
|
immediate: true, |
|
}, |
|
) |
|
|
|
const allowMetaWrite = computed({ |
|
get: () => !formState.value.is_schema_readonly, |
|
set: (v) => { |
|
formState.value.is_schema_readonly = !v |
|
// if schema write is allowed, data write should be allowed too |
|
if (v) { |
|
formState.value.is_data_readonly = false |
|
} |
|
$e('c:source:schema-write-toggle', { allowed: !v, edit: true }) |
|
}, |
|
}) |
|
|
|
const allowDataWrite = computed({ |
|
get: () => !formState.value.is_data_readonly, |
|
set: (v) => { |
|
formState.value.is_data_readonly = !v |
|
$e('c:source:data-write-toggle', { allowed: !v, edit: true }) |
|
}, |
|
}) |
|
|
|
const handleUpdateAdvancedOptionsExpansionPanel = (open: boolean) => { |
|
if (open) { |
|
advancedOptionsExpansionPanel.value = ['1'] |
|
handleAutoScroll(true, 'nc-source-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(`.edit-source .${className}`) |
|
if (!el) return |
|
|
|
// wait for transition complete |
|
timer = setTimeout(() => { |
|
el.scrollIntoView({ block: 'center', behavior: 'smooth' }) |
|
}, 400) |
|
}) |
|
} |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="edit-source bg-white relative h-full flex flex-col w-full"> |
|
<div class="h-full max-h-[calc(100%_-_65px)] flex"> |
|
<div class="nc-edit-source-left-panel nc-scrollbar-thin relative"> |
|
<div class="h-full max-w-[768px] mx-auto"> |
|
<a-form |
|
ref="form" |
|
:model="formState" |
|
hide-required-mark |
|
name="external-base-create-form" |
|
layout="vertical" |
|
no-style |
|
class="flex flex-col gap-5.5" |
|
> |
|
<div class="nc-form-section"> |
|
<div class="nc-form-section-body"> |
|
<a-row :gutter="24"> |
|
<a-col :span="12"> |
|
<a-form-item label="Data Source Name" v-bind="validateInfos.title"> |
|
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" /> |
|
</a-form-item> |
|
</a-col> |
|
</a-row> |
|
<a-row :gutter="24"> |
|
<a-col :span="12"> |
|
<a-form-item label="Select connection"> |
|
<NcSelect |
|
:value="formState.fk_integration_id" |
|
disabled |
|
class="nc-extdb-db-type nc-select-shadow" |
|
dropdown-class-name="nc-dropdown-ext-db-type" |
|
placeholder="Select connection" |
|
allow-clear |
|
show-search |
|
dropdown-match-select-width |
|
> |
|
<a-select-option v-for="integration in integrations" :key="integration.id" :value="integration.id"> |
|
<div class="w-full flex gap-2 items-center" :data-testid="integration.title"> |
|
<GeneralIntegrationIcon |
|
v-if="integration?.sub_type" |
|
:type="integration.sub_type" |
|
:style="{ |
|
filter: 'grayscale(100%) brightness(115%)', |
|
}" |
|
/> |
|
<NcTooltip class="flex-1 truncate" show-on-truncate-only> |
|
<template #title> |
|
{{ integration.title }} |
|
</template> |
|
{{ integration.title }} |
|
</NcTooltip> |
|
<component |
|
:is="iconMap.check" |
|
v-if="formState.fk_integration_id === integration.id" |
|
id="nc-selected-item-icon" |
|
class="text-primary w-4 h-4" |
|
/> |
|
</div> |
|
</a-select-option> |
|
</NcSelect> |
|
</a-form-item> |
|
</a-col> |
|
</a-row> |
|
</div> |
|
</div> |
|
|
|
<div class="nc-form-section"> |
|
<div class="nc-form-section-body"> |
|
<!-- SQLite File --> |
|
<template v-if="formState.dataSource.client === ClientType.SQLITE"> </template> |
|
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE"> |
|
<a-row :gutter="24"> |
|
<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" |
|
/> |
|
</a-form-item> |
|
</a-col> |
|
<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="Database" v-bind="validateInfos['dataSource.connection.database']"> |
|
<a-input |
|
v-model:value="(formState.dataSource.connection as DatabricksConnection).database" |
|
class="nc-extdb-host-database" |
|
/> |
|
</a-form-item> |
|
</a-col> |
|
<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"> |
|
<!-- 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.dbCreateIfNotExists')" |
|
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) || |
|
[ClientType.MSSQL, ClientType.PG].includes(selectedIntegration?.sub_type)) && |
|
formState.dataSource.searchPath |
|
" |
|
:label="$t('labels.schemaName')" |
|
v-bind="validateInfos['dataSource.searchPath.0']" |
|
> |
|
<a-input |
|
v-model:value="formState.dataSource.searchPath[0]" |
|
:placeholder="selectedIntegrationSchema && `${selectedIntegrationSchema} (default)`" |
|
/> |
|
</a-form-item> |
|
</a-col> |
|
</a-row> |
|
</template> |
|
</div> |
|
</div> |
|
|
|
<div class="nc-form-section"> |
|
<div class="nc-form-section-title">Permissions</div> |
|
<div class="nc-form-section-body"> |
|
<DashboardSettingsDataSourcesSourceRestrictions |
|
v-model:allowMetaWrite="allowMetaWrite" |
|
v-model:allowDataWrite="allowDataWrite" |
|
/> |
|
</div> |
|
</div> |
|
<template |
|
v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)" |
|
> |
|
<a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-source-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-4"> |
|
<div class="flex flex-col gap-4"> |
|
<a-row :gutter="24"> |
|
<a-col :span="12"> |
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
|
<NcSelect |
|
v-model:value="formState.inflection.inflectionTable" |
|
class="nc-select-shadow" |
|
dropdown-class-name="nc-dropdown-inflection-table-name" |
|
> |
|
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option> |
|
</NcSelect> |
|
</a-form-item> |
|
</a-col> |
|
<a-col :span="12"> |
|
<a-form-item :label="$t('labels.inflection.columnName')"> |
|
<NcSelect |
|
v-model:value="formState.inflection.inflectionColumn" |
|
class="nc-select-shadow" |
|
dropdown-class-name="nc-dropdown-inflection-column-name" |
|
> |
|
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option> |
|
</NcSelect> |
|
</a-form-item> |
|
</a-col> |
|
</a-row> |
|
</div> |
|
</div> |
|
</a-collapse-panel> |
|
</a-collapse> |
|
</template> |
|
<div> |
|
<!-- For spacing --> |
|
</div> |
|
</a-form> |
|
</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-source-right-panel"> |
|
<DashboardSettingsDataSourcesSupportedDocs /> |
|
<NcDivider /> |
|
</div> |
|
</div> |
|
<div class="p-4 w-full flex items-center justify-between gap-3 border-t-1 border-gray-200"> |
|
<div class="flex-1 flex items-center gap-3"> |
|
<div class="flex-1 flex items-center gap-3 text-[#C86827]"> |
|
<GeneralIcon icon="alertTriangle" class="flex-none" /> |
|
<div>{{ $t('msg.warning.dbValid') }}</div> |
|
</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="!testSuccess || isLoading" |
|
:loading="editingSource" |
|
class="nc-extdb-btn-submit" |
|
@click="editBase" |
|
> |
|
{{ $t('general.submit') }} |
|
</NcButton> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.nc-edit-source-left-panel { |
|
@apply p-6 flex-1 flex justify-center; |
|
} |
|
.nc-edit-source-right-panel { |
|
@apply p-4 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl; |
|
} |
|
: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; |
|
} |
|
|
|
.edit-source { |
|
: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>
|
|
|