mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-03 09:57:17 +00:00
fix(nc-gui): add docs panel in edit source modal
This commit is contained in:
Ramesh Mane
@@ -722,7 +722,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
|
||||
@apply p-6 flex-1 flex justify-center;
|
||||
}
|
||||
.nc-add-source-right-panel {
|
||||
@apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
|
||||
@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;
|
||||
|
||||
@@ -368,218 +368,224 @@ function handleAutoScroll(scroll: boolean, className: string) {
|
||||
|
||||
<template>
|
||||
<div class="edit-source bg-white relative h-full flex flex-col w-full">
|
||||
<div class="h-full max-h-[calc(100%_-_65px)] nc-scrollbar-thin">
|
||||
<div class="h-full max-w-[992px] p-6 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">
|
||||
<GeneralBaseLogo
|
||||
v-if="integration.type"
|
||||
:source-type="integration.sub_type"
|
||||
class="flex-none h-4 w-4"
|
||||
/>
|
||||
<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)"
|
||||
<div class="h-full max-h-[calc(100%_-_65px)] flex">
|
||||
<div class="nc-edit-source-left-panel nc-scrollbar-thin">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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">
|
||||
<GeneralBaseLogo
|
||||
v-if="integration.type"
|
||||
:source-type="integration.sub_type"
|
||||
class="flex-none h-4 w-4"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<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">
|
||||
<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 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>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
<div>
|
||||
<!-- For spacing -->
|
||||
</div>
|
||||
</a-form>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
<div>
|
||||
<!-- For spacing -->
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</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">
|
||||
@@ -632,11 +638,11 @@ function handleAutoScroll(scroll: boolean, className: string) {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nc-add-source-left-panel {
|
||||
.nc-edit-source-left-panel {
|
||||
@apply p-6 flex-1 flex justify-center;
|
||||
}
|
||||
.nc-add-source-right-panel {
|
||||
@apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user