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

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

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

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { diff } from 'deep-object-diff'
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 Draggable from 'vuedraggable'
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) => {
if (!isColumnUpdateAllowed(field)) {
return message.info(t('msg.info.schemaReadOnly'))
}
if (field && field?.pk) {
// Editing primary key not supported
message.info(t('msg.info.editingPKnotSupported'))
@ -1003,7 +1014,7 @@ watch(
<div
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="` ${compareCols(field, activeField) ? 'selected' : ''}`"
:class="{ 'selected': compareCols(field, activeField), 'cursor-not-allowed': !isColumnUpdateAllowed(field) }"
:data-testid="`nc-field-item-${fieldState(field)?.title || field.title}`"
@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
}
const isColumnCRUDAllowed = computed(() => {
const isColumnUpdateAllowed = computed(() => {
if (isMetaReadOnly.value && !readonlyMetaAllowedTypes.includes(column.value?.uidt)) return false
return true
})
@ -382,7 +382,7 @@ const isColumnCRUDAllowed = computed(() => {
}"
>
<NcMenuItem
v-if="isUIAllowed('fieldAlter') && isColumnCRUDAllowed"
v-if="isUIAllowed('fieldAlter') && isColumnUpdateAllowed"
:disabled="column?.pk || isSystemColumn(column)"
@click="onEditPress"
>
@ -393,7 +393,7 @@ const isColumnCRUDAllowed = computed(() => {
</div>
</NcMenuItem>
<NcMenuItem
v-if="isUIAllowed('duplicateColumn') && isExpandedForm && !column?.pk && isColumnCRUDAllowed"
v-if="isUIAllowed('duplicateColumn') && isExpandedForm && !column?.pk && isColumnUpdateAllowed"
:disabled="!isDuplicateAllowed"
@click="openDuplicateDlg"
>
@ -532,7 +532,7 @@ const isColumnCRUDAllowed = computed(() => {
<a-divider v-if="!column?.pv" class="!my-0" />
<NcMenuItem
v-if="!column?.pv && isUIAllowed('fieldDelete') && isColumnCRUDAllowed"
v-if="!column?.pv && isUIAllowed('fieldDelete') && isColumnUpdateAllowed"
:disabled="!isDeleteAllowed"
class="!hover:bg-red-50"
@click="handleDelete"

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

@ -1264,6 +1264,7 @@
}
},
"info": {
"schemaReadOnly": "Schema alterations are disabled for this source",
"enterWorkspaceName": "Enter workspace name",
"enterBaseName": "Enter base name",
"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 const readonlyMetaAllowedTypes = [
UITypes.Lookup,
UITypes.Rollup,
UITypes.Formula,
UITypes.Barcode,
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,
};
const countryColumns = await countryTable.getColumns(sakilaCtx);
const countryColumns = (await countryTable.getColumns(sakilaCtx)).filter(c => !c.pk);
const rowAttributes = Array(99)
.fill(0)
.map((index) =>
@ -84,7 +84,7 @@ function sourceTest() {
base_id: base.id,
};
const countryColumns = await countryTable.getColumns(sakilaCtx);
const countryColumns = (await countryTable.getColumns(sakilaCtx)).filter(c => !c.pk);
const rowAttributes = Array(99)
.fill(0)
.map((index) =>
@ -96,7 +96,6 @@ function sourceTest() {
.set('xc-auth', context.token)
.send(rowAttributes)
.expect(200);
await request(context.app)
.post(`/api/v1/db/meta/projects/${base.id}/tables`)
.set('xc-auth', context.token)
@ -123,7 +122,7 @@ function sourceTest() {
base_id: base.id,
};
const countryColumns = await countryTable.getColumns(sakilaCtx);
const countryColumns = (await countryTable.getColumns(sakilaCtx)).filter(c => !c.pk);
const rowAttributes = Array(99)
.fill(0)
.map((index) =>

Write Preview
Loading…
Cancel
Save