github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat: handle in fields

pull/8708/head
Pranav C 4 months ago
parent
c5f8e8a762
commit
234037d26c
7 changed files with 206 additions and 185 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 353
      packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
  2. 3
      packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
  3. 15
      packages/nc-gui/components/smartsheet/details/Fields.vue
  4. 8
      packages/nc-gui/components/smartsheet/header/Menu.vue
  5. 1
      packages/nc-gui/lang/en.json
  6. 4
      packages/nocodb-sdk/src/lib/UITypes.ts
  7. 7
      packages/nocodb/tests/unit/rest/tests/readOnlySource.test.ts

353
packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
Unescape View File

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Form, message } from 'ant-design-vue' import {Form, message} from 'ant-design-vue'
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' import type {SelectHandler} from 'ant-design-vue/es/vc-select/Select'
import { SourceRestriction } from 'nocodb-sdk' import {SourceRestriction} from 'nocodb-sdk'
import { import {
type CertTypes, type CertTypes,
ClientType, ClientType,
@ -21,12 +21,12 @@ const vOpen = useVModel(props, 'open', emit)
const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL) const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL)
const baseStore = useBase() const baseStore = useBase()
const { loadProject } = useBases() const {loadProject} = useBases()
const { base } = storeToRefs(baseStore) const {base} = storeToRefs(baseStore)
const { loadProjectTables } = useTablesStore() const {loadProjectTables} = useTablesStore()
const { refreshCommandPalette } = useCommandPalette() const {refreshCommandPalette} = useCommandPalette()
const _projectId = inject(ProjectIdInj, undefined) const _projectId = inject(ProjectIdInj, undefined)
const baseId = computed(() => _projectId?.value ?? base.value?.id) const baseId = computed(() => _projectId?.value ?? base.value?.id)
@ -39,17 +39,17 @@ const testingConnection = ref(false)
const form = ref<typeof Form>() const form = ref<typeof Form>()
const { api } = useApi() const {api} = useApi()
const { $e } = useNuxtApp() const {$e} = useNuxtApp()
const { t } = useI18n() const {t} = useI18n()
const creatingSource = ref(false) const creatingSource = ref(false)
const formState = ref<ProjectCreateForm>({ const formState = ref<ProjectCreateForm>({
title: '', title: '',
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, dataSource: {...getDefaultConnectionConfig(ClientType.MYSQL)},
inflection: { inflection: {
inflectionColumn: 'none', inflectionColumn: 'none',
inflectionTable: 'none', inflectionTable: 'none',
@ -58,12 +58,12 @@ const formState = ref<ProjectCreateForm>({
extraParameters: [], extraParameters: [],
'is_schema_readonly': true, 'is_schema_readonly': true,
'is_data_readonly': false, 'is_data_readonly': false,
}, },
}) })
const customFormState = ref<ProjectCreateForm>({ const customFormState = ref<ProjectCreateForm>({
title: '', title: '',
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, dataSource: {...getDefaultConnectionConfig(ClientType.MYSQL)},
inflection: { inflection: {
inflectionColumn: 'none', inflectionColumn: 'none',
inflectionTable: 'none', inflectionTable: 'none',
@ -123,14 +123,14 @@ const validators = computed(() => {
} }
}) })
const { validate, validateInfos } = useForm(formState.value, validators) const {validate, validateInfos} = useForm(formState.value, validators)
const populateName = (v: string) => { const populateName = (v: string) => {
formState.value.dataSource.connection.database = `${v.trim()}_noco` formState.value.dataSource.connection.database = `${v.trim()}_noco`
} }
const onClientChange = () => { const onClientChange = () => {
formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) } formState.value.dataSource = {...getDefaultConnectionConfig(formState.value.dataSource.client)}
populateName(formState.value.title) populateName(formState.value.title)
} }
@ -171,7 +171,7 @@ const updateSSLUse = () => {
} }
const addNewParam = () => { const addNewParam = () => {
formState.value.extraParameters.push({ key: '', value: '' }) formState.value.extraParameters.push({key: '', value: ''})
} }
const removeParam = (index: number) => { const removeParam = (index: number) => {
@ -197,7 +197,7 @@ const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
} }
const sslFilesRequired = computed( const sslFilesRequired = computed(
() => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed, () => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed,
) )
function getConnectionConfig() { function getConnectionConfig() {
@ -210,8 +210,8 @@ function getConnectionConfig() {
if ('ssl' in connection && connection.ssl) { if ('ssl' in connection && connection.ssl) {
if ( if (
formState.value.sslUse === SSLUsage.No || formState.value.sslUse === SSLUsage.No ||
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined)) (typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined))
) { ) {
delete connection.ssl delete connection.ssl
} }
@ -223,7 +223,7 @@ const focusInvalidInput = () => {
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus() form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
} }
const { $poller } = useNuxtApp() const {$poller} = useNuxtApp()
const createSource = async () => { const createSource = async () => {
try { try {
@ -240,7 +240,7 @@ const createSource = async () => {
const connection = getConnectionConfig() const connection = getConnectionConfig()
const config = { ...formState.value.dataSource, connection } const config = {...formState.value.dataSource, connection}
const jobData = await api.source.create(baseId.value, { const jobData = await api.source.create(baseId.value, {
alias: formState.value.title, alias: formState.value.title,
@ -253,36 +253,36 @@ const createSource = async () => {
}) })
$poller.subscribe( $poller.subscribe(
{ id: jobData.id }, {id: jobData.id},
async (data: { async (data: {
id: string id: string
status?: string status?: string
data?: { data?: {
error?: { error?: {
message: string message: string
}
message?: string
result?: any
} }
message?: string }) => {
result?: any if (data.status !== 'close') {
} if (data.status === JobStatus.COMPLETED) {
}) => { $e('a:base:create:extdb')
if (data.status !== 'close') {
if (data.status === JobStatus.COMPLETED) { if (baseId.value) {
$e('a:base:create:extdb') await loadProject(baseId.value, true)
await loadProjectTables(baseId.value, true)
if (baseId.value) { }
await loadProject(baseId.value, true)
await loadProjectTables(baseId.value, true) emit('sourceCreated')
vOpen.value = false
creatingSource.value = false
} else if (status === JobStatus.FAILED) {
message.error('Failed to create base')
creatingSource.value = false
} }
emit('sourceCreated')
vOpen.value = false
creatingSource.value = false
} else if (status === JobStatus.FAILED) {
message.error('Failed to create base')
creatingSource.value = false
} }
} },
},
) )
} catch (e: any) { } catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
@ -339,11 +339,11 @@ const testConnection = async () => {
const handleImportURL = async () => { const handleImportURL = async () => {
if (!importURL.value || importURL.value === '') return if (!importURL.value || importURL.value === '') return
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value }) const connectionConfig = await api.utils.urlToConfig({url: importURL.value})
if (connectionConfig) { if (connectionConfig) {
formState.value.dataSource.client = connectionConfig.client formState.value.dataSource.client = connectionConfig.client
formState.value.dataSource.connection = { ...connectionConfig.connection } formState.value.dataSource.connection = {...connectionConfig.connection}
} else { } else {
message.error(t('msg.error.invalidURL')) message.error(t('msg.error.invalidURL'))
} }
@ -352,27 +352,27 @@ const handleImportURL = async () => {
} }
const handleEditJSON = () => { const handleEditJSON = () => {
customFormState.value = { ...formState.value } customFormState.value = {...formState.value}
configEditDlg.value = true configEditDlg.value = true
} }
const handleOk = () => { const handleOk = () => {
formState.value = { ...customFormState.value } formState.value = {...customFormState.value}
configEditDlg.value = false configEditDlg.value = false
updateSSLUse() updateSSLUse()
} }
// reset test status on config change // reset test status on config change
watch( watch(
() => formState.value.dataSource, () => formState.value.dataSource,
() => (testSuccess.value = false), () => (testSuccess.value = false),
{ deep: true }, {deep: true},
) )
// populate database name based on title // populate database name based on title
watch( watch(
() => formState.value.title, () => formState.value.title,
(v) => populateName(v), (v) => populateName(v),
) )
// select and focus title field on load // select and focus title field on load
@ -389,12 +389,12 @@ onMounted(async () => {
}) })
watch( watch(
connectionType, connectionType,
(v) => { (v) => {
formState.value.dataSource.client = v formState.value.dataSource.client = v
onClientChange() onClientChange()
}, },
{ immediate: true }, {immediate: true},
) )
const toggleModal = (val: boolean) => { const toggleModal = (val: boolean) => {
vOpen.value = val vOpen.value = val
@ -404,6 +404,7 @@ const allowMetaWrite = computed({
get: () => !formState.value.is_schema_readonly, get: () => !formState.value.is_schema_readonly,
set: (v) => { set: (v) => {
formState.value.is_schema_readonly = !v formState.value.is_schema_readonly = !v
$e('c:source:schema-write-toggle', {allowed: !v})
}, },
}) })
@ -411,60 +412,61 @@ const allowDataWrite = computed({
get: () => !formState.value.is_data_readonly, get: () => !formState.value.is_data_readonly,
set: (v) => { set: (v) => {
formState.value.is_data_readonly = !v formState.value.is_data_readonly = !v
$e('c:source:data-write-toggle', { allowed: !v })
}, },
}) })
</script> </script>
<template> <template>
<GeneralModal <GeneralModal
:visible="vOpen" :visible="vOpen"
:closable="!creatingSource" :closable="!creatingSource"
:keyboard="!creatingSource" :keyboard="!creatingSource"
:mask-closable="false" :mask-closable="false"
size="medium" size="medium"
@update:visible="toggleModal" @update:visible="toggleModal"
> >
<div class="py-6 px-8"> <div class="py-6 px-8">
<div class="create-source bg-white relative flex flex-col justify-center gap-2 w-full"> <div class="create-source bg-white relative flex flex-col justify-center gap-2 w-full">
<h1 class="prose-xl font-bold self-start mb-4 flex items-center gap-2"> <h1 class="prose-xl font-bold self-start mb-4 flex items-center gap-2">
{{ $t('title.newBase') }} {{ $t('title.newBase') }}
<DashboardSettingsDataSourcesInfo /> <DashboardSettingsDataSourcesInfo/>
<span class="flex-grow"></span> <span class="flex-grow"></span>
</h1> </h1>
<a-form <a-form
ref="form" ref="form"
:model="formState" :model="formState"
name="external-base-create-form" name="external-base-create-form"
layout="horizontal" layout="horizontal"
no-style no-style
:label-col="{ span: 8 }" :label-col="{ span: 8 }"
> >
<div <div
class="nc-scrollbar-md" class="nc-scrollbar-md"
:style="{ :style="{
maxHeight: '60vh', maxHeight: '60vh',
}" }"
> >
<a-form-item label="Source Name" v-bind="validateInfos.title"> <a-form-item label="Source Name" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" /> <a-input v-model:value="formState.title" class="nc-extdb-proj-name"/>
</a-form-item> </a-form-item>
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
<a-select <a-select
v-model:value="formState.dataSource.client" v-model:value="formState.dataSource.client"
class="nc-extdb-db-type" class="nc-extdb-db-type"
dropdown-class-name="nc-dropdown-ext-db-type" dropdown-class-name="nc-dropdown-ext-db-type"
@change="onClientChange" @change="onClientChange"
> >
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"> <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value">
<div class="flex items-center gap-2 justify-between"> <div class="flex items-center gap-2 justify-between">
<div>{{ client.text }}</div> <div>{{ client.text }}</div>
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="formState.dataSource.client === client.value" v-if="formState.dataSource.client === client.value"
id="nc-selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>
</a-select-option> </a-select-option>
@ -473,40 +475,41 @@ const allowDataWrite = computed({
<!-- SQLite File --> <!-- SQLite File -->
<a-form-item <a-form-item
v-if="formState.dataSource.client === ClientType.SQLITE" v-if="formState.dataSource.client === ClientType.SQLITE"
:label="$t('labels.sqliteFile')" :label="$t('labels.sqliteFile')"
v-bind="validateInfos['dataSource.connection.connection.filename']" v-bind="validateInfos['dataSource.connection.connection.filename']"
> >
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" /> <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename"/>
</a-form-item> </a-form-item>
<template v-else> <template v-else>
<!-- Host Address --> <!-- Host Address -->
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
<a-input <a-input
v-model:value="(formState.dataSource.connection as DefaultConnection).host" v-model:value="(formState.dataSource.connection as DefaultConnection).host"
class="nc-extdb-host-address" class="nc-extdb-host-address"
/> />
</a-form-item> </a-form-item>
<!-- Port Number --> <!-- Port Number -->
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
<a-input-number <a-input-number
v-model:value="(formState.dataSource.connection as DefaultConnection).port" v-model:value="(formState.dataSource.connection as DefaultConnection).port"
class="!w-full nc-extdb-host-port" class="!w-full nc-extdb-host-port"
/> />
</a-form-item> </a-form-item>
<!-- Username --> <!-- Username -->
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> <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-input v-model:value="(formState.dataSource.connection as DefaultConnection).user"
class="nc-extdb-host-user"/>
</a-form-item> </a-form-item>
<!-- Password --> <!-- Password -->
<a-form-item :label="$t('labels.password')"> <a-form-item :label="$t('labels.password')">
<a-input-password <a-input-password
v-model:value="(formState.dataSource.connection as DefaultConnection).password" v-model:value="(formState.dataSource.connection as DefaultConnection).password"
class="nc-extdb-host-password" class="nc-extdb-host-password"
/> />
</a-form-item> </a-form-item>
@ -514,19 +517,19 @@ const allowDataWrite = computed({
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
<!-- Database : create if not exists --> <!-- Database : create if not exists -->
<a-input <a-input
v-model:value="formState.dataSource.connection.database" v-model:value="formState.dataSource.connection.database"
:placeholder="$t('labels.dbCreateIfNotExists')" :placeholder="$t('labels.dbCreateIfNotExists')"
class="nc-extdb-host-database" class="nc-extdb-host-database"
/> />
</a-form-item> </a-form-item>
<!-- Schema name --> <!-- Schema name -->
<a-form-item <a-form-item
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath" v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
:label="$t('labels.schemaName')" :label="$t('labels.schemaName')"
v-bind="validateInfos['dataSource.searchPath.0']" v-bind="validateInfos['dataSource.searchPath.0']"
> >
<a-input v-model:value="formState.dataSource.searchPath[0]" /> <a-input v-model:value="formState.dataSource.searchPath[0]"/>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<template #label> <template #label>
@ -538,7 +541,7 @@ const allowDataWrite = computed({
<template #title> <template #title>
<span>{{ $t('tooltip.allowMetaWrite') }}</span> <span>{{ $t('tooltip.allowMetaWrite') }}</span>
</template> </template>
<GeneralIcon class="text-gray-500" icon="info" /> <GeneralIcon class="text-gray-500" icon="info"/>
</NcTooltip> </NcTooltip>
</div> </div>
</template> </template>
@ -554,7 +557,7 @@ const allowDataWrite = computed({
<template #title> <template #title>
<span>{{ $t('tooltip.allowDataWrite') }}</span> <span>{{ $t('tooltip.allowDataWrite') }}</span>
</template> </template>
<GeneralIcon class="text-gray-500" icon="info" /> <GeneralIcon class="text-gray-500" icon="info"/>
</NcTooltip> </NcTooltip>
</div> </div>
</template> </template>
@ -563,7 +566,8 @@ const allowDataWrite = computed({
<div class="flex items-right justify-end gap-2"> <div class="flex items-right justify-end gap-2">
<!-- Use Connection URL --> <!-- Use Connection URL -->
<NcButton type="ghost" size="small" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true"> <NcButton type="ghost" size="small" class="nc-extdb-btn-import-url !rounded-md"
@click.stop="importURLDlg = true">
{{ $t('activity.useConnectionUrl') }} {{ $t('activity.useConnectionUrl') }}
</NcButton> </NcButton>
</div> </div>
@ -575,18 +579,18 @@ const allowDataWrite = computed({
</template> </template>
<a-form-item label="SSL mode"> <a-form-item label="SSL mode">
<a-select <a-select
v-model:value="formState.sslUse" v-model:value="formState.sslUse"
dropdown-class-name="nc-dropdown-ssl-mode" dropdown-class-name="nc-dropdown-ssl-mode"
@select="onSSLModeChange" @select="onSSLModeChange"
> >
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt"> <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">
<div class="flex items-center gap-2 justify-between"> <div class="flex items-center gap-2 justify-between">
<div>{{ opt }}</div> <div>{{ opt }}</div>
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="formState?.sslUse === opt" v-if="formState?.sslUse === opt"
id="nc-selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>
</a-select-option> </a-select-option>
@ -601,7 +605,8 @@ const allowDataWrite = computed({
<span>{{ $t('tooltip.clientCert') }}</span> <span>{{ $t('tooltip.clientCert') }}</span>
</template> </template>
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()"> <NcButton size="small" :disabled="!sslFilesRequired" class="shadow"
@click="certFileInput?.click()">
{{ $t('labels.clientCert') }} {{ $t('labels.clientCert') }}
</NcButton> </NcButton>
</a-tooltip> </a-tooltip>
@ -611,7 +616,8 @@ const allowDataWrite = computed({
<template #title> <template #title>
<span>{{ $t('tooltip.clientKey') }}</span> <span>{{ $t('tooltip.clientKey') }}</span>
</template> </template>
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()"> <NcButton size="small" :disabled="!sslFilesRequired" class="shadow"
@click="keyFileInput?.click()">
{{ $t('labels.clientKey') }} {{ $t('labels.clientKey') }}
</NcButton> </NcButton>
</a-tooltip> </a-tooltip>
@ -622,65 +628,69 @@ const allowDataWrite = computed({
<span>{{ $t('tooltip.clientCA') }}</span> <span>{{ $t('tooltip.clientCA') }}</span>
</template> </template>
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()"> <NcButton size="small" :disabled="!sslFilesRequired" class="shadow"
@click="caFileInput?.click()">
{{ $t('labels.serverCA') }} {{ $t('labels.serverCA') }}
</NcButton> </NcButton>
</a-tooltip> </a-tooltip>
</div> </div>
</a-form-item> </a-form-item>
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" /> <input ref="caFileInput" type="file" class="!hidden"
@change="onFileSelect(CertTypes.ca, caFileInput)"/>
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" /> <input ref="certFileInput" type="file" class="!hidden"
@change="onFileSelect(CertTypes.cert, certFileInput)"/>
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" /> <input ref="keyFileInput" type="file" class="!hidden"
@change="onFileSelect(CertTypes.key, keyFileInput)"/>
<a-divider /> <a-divider/>
<!-- Extra connection parameters --> <!-- Extra connection parameters -->
<a-form-item <a-form-item
class="mb-2" class="mb-2"
:label="$t('labels.extraConnectionParameters')" :label="$t('labels.extraConnectionParameters')"
v-bind="validateInfos.extraParameters" v-bind="validateInfos.extraParameters"
> >
<a-card> <a-card>
<div v-for="(item, index) of formState.extraParameters" :key="index"> <div v-for="(item, index) of formState.extraParameters" :key="index">
<div class="flex py-1 items-center gap-1"> <div class="flex py-1 items-center gap-1">
<a-input v-model:value="item.key" /> <a-input v-model:value="item.key"/>
<span>:</span> <span>:</span>
<a-input v-model:value="item.value" /> <a-input v-model:value="item.value"/>
<component <component
:is="iconMap.close" :is="iconMap.close"
:style="{ 'font-size': '1.5em', 'color': 'red' }" :style="{ 'font-size': '1.5em', 'color': 'red' }"
@click="removeParam(index)" @click="removeParam(index)"
/> />
</div> </div>
</div> </div>
<NcButton size="small" type="dashed" class="w-full caption mt-2" @click="addNewParam"> <NcButton size="small" type="dashed" class="w-full caption mt-2" @click="addNewParam">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<component :is="iconMap.plus" /> <component :is="iconMap.plus"/>
</div> </div>
</NcButton> </NcButton>
</a-card> </a-card>
</a-form-item> </a-form-item>
<a-divider /> <a-divider/>
<a-form-item :label="$t('labels.inflection.tableName')"> <a-form-item :label="$t('labels.inflection.tableName')">
<a-select <a-select
v-model:value="formState.inflection.inflectionTable" v-model:value="formState.inflection.inflectionTable"
dropdown-class-name="nc-dropdown-inflection-table-name" dropdown-class-name="nc-dropdown-inflection-table-name"
> >
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp"> <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">
<div class="flex items-center gap-2 justify-between"> <div class="flex items-center gap-2 justify-between">
<div>{{ tp }}</div> <div>{{ tp }}</div>
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="formState?.inflection?.inflectionTable === tp" v-if="formState?.inflection?.inflectionTable === tp"
id="nc-selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>
</a-select-option> </a-select-option>
@ -689,17 +699,18 @@ const allowDataWrite = computed({
<a-form-item :label="$t('labels.inflection.columnName')"> <a-form-item :label="$t('labels.inflection.columnName')">
<a-select <a-select
v-model:value="formState.inflection.inflectionColumn" v-model:value="formState.inflection.inflectionColumn"
dropdown-class-name="nc-dropdown-inflection-column-name" dropdown-class-name="nc-dropdown-inflection-column-name"
> >
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp" <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp"
><div class="flex items-center gap-2 justify-between"> >
<div class="flex items-center gap-2 justify-between">
<div>{{ tp }}</div> <div>{{ tp }}</div>
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="formState?.inflection?.inflectionColumn === tp" v-if="formState?.inflection?.inflectionColumn === tp"
id="nc-selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>
</a-select-option> </a-select-option>
@ -720,23 +731,23 @@ const allowDataWrite = computed({
<a-form-item class="flex justify-end !mt-5"> <a-form-item class="flex justify-end !mt-5">
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<NcButton <NcButton
:type="testSuccess ? 'ghost' : 'primary'" :type="testSuccess ? 'ghost' : 'primary'"
size="small" size="small"
class="nc-extdb-btn-test-connection !rounded-md" class="nc-extdb-btn-test-connection !rounded-md"
:loading="testingConnection" :loading="testingConnection"
@click="testConnection" @click="testConnection"
> >
<GeneralIcon v-if="testSuccess" icon="circleCheck" class="text-primary mr-2" /> <GeneralIcon v-if="testSuccess" icon="circleCheck" class="text-primary mr-2"/>
{{ $t('activity.testDbConn') }} {{ $t('activity.testDbConn') }}
</NcButton> </NcButton>
<NcButton <NcButton
size="small" size="small"
type="primary" type="primary"
:disabled="!testSuccess" :disabled="!testSuccess"
:loading="creatingSource" :loading="creatingSource"
class="nc-extdb-btn-submit !rounded-md" class="nc-extdb-btn-submit !rounded-md"
@click="createSource" @click="createSource"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</NcButton> </NcButton>
@ -745,26 +756,26 @@ const allowDataWrite = computed({
</a-form> </a-form>
<a-modal <a-modal
v-model:visible="configEditDlg" v-model:visible="configEditDlg"
:title="$t('activity.editConnJson')" :title="$t('activity.editConnJson')"
width="600px" width="600px"
wrap-class-name="nc-modal-edit-connection-json" wrap-class-name="nc-modal-edit-connection-json"
@ok="handleOk" @ok="handleOk"
> >
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" /> <MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full"/>
</a-modal> </a-modal>
<!-- Use Connection URL --> <!-- Use Connection URL -->
<a-modal <a-modal
v-model:visible="importURLDlg" v-model:visible="importURLDlg"
:title="$t('activity.useConnectionUrl')" :title="$t('activity.useConnectionUrl')"
width="500px" width="500px"
:ok-text="$t('general.ok')" :ok-text="$t('general.ok')"
:cancel-text="$t('general.cancel')" :cancel-text="$t('general.cancel')"
wrap-class-name="nc-modal-connection-url" wrap-class-name="nc-modal-connection-url"
@ok="handleImportURL" @ok="handleImportURL"
> >
<a-input v-model:value="importURL" /> <a-input v-model:value="importURL"/>
</a-modal> </a-modal>
</div> </div>
</div> </div>

3
packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
Unescape View File

@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { SourceType } from 'nocodb-sdk' import type { SourceType } from 'nocodb-sdk'
import { SourceRestriction } from 'nocodb-sdk'
import { Form, message } from 'ant-design-vue' import { Form, message } from 'ant-design-vue'
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
import { import {
@ -370,6 +369,7 @@ const allowMetaWrite = computed({
get: () => !formState.value.is_schema_readonly, get: () => !formState.value.is_schema_readonly,
set: (v) => { set: (v) => {
formState.value.is_schema_readonly = !v formState.value.is_schema_readonly = !v
$e('c:source:schema-write-toggle', { allowed: !v, edit: true })
}, },
}) })
@ -377,6 +377,7 @@ const allowDataWrite = computed({
get: () => !formState.value.is_data_readonly, get: () => !formState.value.is_data_readonly,
set: (v) => { set: (v) => {
formState.value.is_data_readonly = !v formState.value.is_data_readonly = !v
$e('c:source:data-write-toggle', { allowed: !v, edit: true })
}, },
}) })
</script> </script>

15
packages/nc-gui/components/smartsheet/details/Fields.vue
Unescape View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { diff } from 'deep-object-diff' import { diff } from 'deep-object-diff'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk' import { UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol, readonlyMetaAllowedTypes } from 'nocodb-sdk'
import type { ColumnType, FilterType, SelectOptionsType } from 'nocodb-sdk' import type { ColumnType, FilterType, SelectOptionsType } from 'nocodb-sdk'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import { onKeyDown, useMagicKeys } from '@vueuse/core' import { onKeyDown, useMagicKeys } from '@vueuse/core'
@ -182,7 +182,18 @@ const setFieldMoveHook = (field: TableExplorerColumn, before = false) => {
} }
} }
const { isMetaReadOnly } = useRoles()
const isColumnUpdateAllowed = (column: ColumnType) => {
if (isMetaReadOnly.value && !readonlyMetaAllowedTypes.includes(column?.uidt)) return false
return true
}
const changeField = (field?: TableExplorerColumn, event?: MouseEvent) => { const changeField = (field?: TableExplorerColumn, event?: MouseEvent) => {
if (!isColumnUpdateAllowed(field)) {
return message.info(t('msg.info.schemaReadOnly'))
}
if (field && field?.pk) { if (field && field?.pk) {
// Editing primary key not supported // Editing primary key not supported
message.info(t('msg.info.editingPKnotSupported')) message.info(t('msg.info.editingPKnotSupported'))
@ -1003,7 +1014,7 @@ watch(
<div <div
v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv" v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"
class="flex px-2 hover:bg-gray-100 first:rounded-t-lg border-b-1 last:rounded-b-none border-gray-200 pl-5 group" class="flex px-2 hover:bg-gray-100 first:rounded-t-lg border-b-1 last:rounded-b-none border-gray-200 pl-5 group"
:class="` ${compareCols(field, activeField) ? 'selected' : ''}`" :class="{ 'selected': compareCols(field, activeField), 'cursor-not-allowed': !isColumnUpdateAllowed(field) }"
:data-testid="`nc-field-item-${fieldState(field)?.title || field.title}`" :data-testid="`nc-field-item-${fieldState(field)?.title || field.title}`"
@click="changeField(field, $event)" @click="changeField(field, $event)"
> >

8
packages/nc-gui/components/smartsheet/header/Menu.vue
Unescape View File

@ -355,7 +355,7 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
isOpen.value = false isOpen.value = false
} }
const isColumnCRUDAllowed = computed(() => { const isColumnUpdateAllowed = computed(() => {
if (isMetaReadOnly.value && !readonlyMetaAllowedTypes.includes(column.value?.uidt)) return false if (isMetaReadOnly.value && !readonlyMetaAllowedTypes.includes(column.value?.uidt)) return false
return true return true
}) })
@ -382,7 +382,7 @@ const isColumnCRUDAllowed = computed(() => {
}" }"
> >
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('fieldAlter') && isColumnCRUDAllowed" v-if="isUIAllowed('fieldAlter') && isColumnUpdateAllowed"
:disabled="column?.pk || isSystemColumn(column)" :disabled="column?.pk || isSystemColumn(column)"
@click="onEditPress" @click="onEditPress"
> >
@ -393,7 +393,7 @@ const isColumnCRUDAllowed = computed(() => {
</div> </div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('duplicateColumn') && isExpandedForm && !column?.pk && isColumnCRUDAllowed" v-if="isUIAllowed('duplicateColumn') && isExpandedForm && !column?.pk && isColumnUpdateAllowed"
:disabled="!isDuplicateAllowed" :disabled="!isDuplicateAllowed"
@click="openDuplicateDlg" @click="openDuplicateDlg"
> >
@ -532,7 +532,7 @@ const isColumnCRUDAllowed = computed(() => {
<a-divider v-if="!column?.pv" class="!my-0" /> <a-divider v-if="!column?.pv" class="!my-0" />
<NcMenuItem <NcMenuItem
v-if="!column?.pv && isUIAllowed('fieldDelete') && isColumnCRUDAllowed" v-if="!column?.pv && isUIAllowed('fieldDelete') && isColumnUpdateAllowed"
:disabled="!isDeleteAllowed" :disabled="!isDeleteAllowed"
class="!hover:bg-red-50" class="!hover:bg-red-50"
@click="handleDelete" @click="handleDelete"

1
packages/nc-gui/lang/en.json
Unescape View File

@ -1264,6 +1264,7 @@
} }
}, },
"info": { "info": {
"schemaReadOnly": "Schema alterations are disabled for this source",
"enterWorkspaceName": "Enter workspace name", "enterWorkspaceName": "Enter workspace name",
"enterBaseName": "Enter base name", "enterBaseName": "Enter base name",
"idpPaste": "Paste these URL in your Identity Providers console", "idpPaste": "Paste these URL in your Identity Providers console",

4
packages/nocodb-sdk/src/lib/UITypes.ts
Unescape View File

@ -255,12 +255,10 @@ export const isSelectTypeCol = (
}; };
export default UITypes; export default UITypes;
export const readonlyMetaAllowedTypes = [ export const readonlyMetaAllowedTypes = [
UITypes.Lookup, UITypes.Lookup,
UITypes.Rollup, UITypes.Rollup,
UITypes.Formula, UITypes.Formula,
UITypes.Barcode, UITypes.Barcode,
UITypes.QrCode, UITypes.QrCode,
] ];

7
packages/nocodb/tests/unit/rest/tests/readOnlySource.test.ts
Unescape View File

@ -44,7 +44,7 @@ function sourceTest() {
base_id: base.id, base_id: base.id,
}; };
const countryColumns = await countryTable.getColumns(sakilaCtx); const countryColumns = (await countryTable.getColumns(sakilaCtx)).filter(c => !c.pk);
const rowAttributes = Array(99) const rowAttributes = Array(99)
.fill(0) .fill(0)
.map((index) => .map((index) =>
@ -84,7 +84,7 @@ function sourceTest() {
base_id: base.id, base_id: base.id,
}; };
const countryColumns = await countryTable.getColumns(sakilaCtx); const countryColumns = (await countryTable.getColumns(sakilaCtx)).filter(c => !c.pk);
const rowAttributes = Array(99) const rowAttributes = Array(99)
.fill(0) .fill(0)
.map((index) => .map((index) =>
@ -96,7 +96,6 @@ function sourceTest() {
.set('xc-auth', context.token) .set('xc-auth', context.token)
.send(rowAttributes) .send(rowAttributes)
.expect(200); .expect(200);
await request(context.app) await request(context.app)
.post(`/api/v1/db/meta/projects/${base.id}/tables`) .post(`/api/v1/db/meta/projects/${base.id}/tables`)
.set('xc-auth', context.token) .set('xc-auth', context.token)
@ -123,7 +122,7 @@ function sourceTest() {
base_id: base.id, base_id: base.id,
}; };
const countryColumns = await countryTable.getColumns(sakilaCtx); const countryColumns = (await countryTable.getColumns(sakilaCtx)).filter(c => !c.pk);
const rowAttributes = Array(99) const rowAttributes = Array(99)
.fill(0) .fill(0)
.map((index) => .map((index) =>

Write Preview
Loading…
Cancel
Save