Nc feat/Readonly source followup (#8795)

* feat: allow partial column update (GUI)

* feat: allow partial column update (backend)

* refactor: swagger schema description correction

* feat: allow edit from multi field editor

* fix: allow meta update in api level

* fix: add tooltip and docs link

* fix: multi field editor corrections

* fix: allow table meta update

* fix: allow table meta update

* fix: allow column validation update

* fix: block adding new option directly from cell

* fix: add tooltip for column menu options

* refactor: tooltips

* test: replace index with count as parameter

* fix: corrections

* refactor: hint text update

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -1,7 +1,6 @@
 <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 {
   type CertTypes,
   ClientType,
@@ -437,7 +436,7 @@ const allowDataWrite = computed({
     :closable="!creatingSource"
     :keyboard="!creatingSource"
     :mask-closable="false"
-    size="medium"
+    :width="750"
     @update:visible="toggleModal"
   >
     <div class="py-6 px-8">
@@ -454,7 +453,7 @@ const allowDataWrite = computed({
           name="external-base-create-form"
           layout="horizontal"
           no-style
-          :label-col="{ span: 8 }"
+          :label-col="{ span: 5 }"
         >
           <div
             class="nc-scrollbar-md"
@@ -545,50 +544,10 @@ const allowDataWrite = computed({
                 <a-input v-model:value="formState.dataSource.searchPath[0]" />
               </a-form-item>
             </template>
-            <a-form-item>
-              <template #label>
-                <div class="flex gap-1 justify-end">
-                  <span>
-                    {{ $t('labels.allowMetaWrite') }}
-                  </span>
-                  <NcTooltip>
-                    <template #title>
-                      <span>{{ $t('tooltip.allowMetaWrite') }}</span>
-                    </template>
-                    <GeneralIcon class="text-gray-500" icon="info" />
-                  </NcTooltip>
-                </div>
-              </template>
-              <a-switch v-model:checked="allowMetaWrite" data-testid="nc-allow-meta-write" size="small"></a-switch>
-            </a-form-item>
-            <a-form-item>
-              <template #label>
-                <div class="flex gap-1 justify-end">
-                  <span>
-                    {{ $t('labels.allowDataWrite') }}
-                  </span>
-                  <NcTooltip>
-                    <template #title>
-                      <span>{{ $t('tooltip.allowDataWrite') }}</span>
-                    </template>
-                    <GeneralIcon class="text-gray-500" icon="info" />
-                  </NcTooltip>
-                </div>
-              </template>
-              <div class="flex justify-start">
-                <NcTooltip :disabled="!allowMetaWrite" placement="topLeft">
-                  <template #title>
-                    {{ $t('tooltip.dataWriteOptionDisabled') }}
-                  </template>
-                  <a-switch
-                    v-model:checked="allowDataWrite"
-                    :disabled="allowMetaWrite"
-                    data-testid="nc-allow-data-write"
-                    size="small"
-                  ></a-switch>
-                </NcTooltip>
-              </div>
-            </a-form-item>
+            <DashboardSettingsDataSourcesSourceRestrictions
+              v-model:allowMetaWrite="allowMetaWrite"
+              v-model:allowDataWrite="allowDataWrite"
+            />
             <template
               v-if="
                 formState.dataSource.client !== ClientType.SQLITE &&

packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue

@@ -401,7 +401,7 @@ const allowDataWrite = computed({
   <div class="edit-source bg-white relative flex flex-col justify-start gap-2 w-full p-2">
     <h1 class="prose-2xl font-bold self-start">{{ $t('activity.editSource') }}</h1>
 
-    <a-form ref="form" :model="formState" name="external-base-create-form" layout="horizontal" no-style :label-col="{ span: 8 }">
+    <a-form ref="form" :model="formState" name="external-base-create-form" layout="horizontal" no-style :label-col="{ span: 5 }">
       <div
         class="nc-scrollbar-md"
         :style="{
@@ -563,50 +563,10 @@ const allowDataWrite = computed({
             <a-input v-model:value="formState.dataSource.searchPath[0]" />
           </a-form-item>
         </template>
-        <a-form-item>
-          <template #label>
-            <div class="flex gap-1 justify-end">
-              <span>
-                {{ $t('labels.allowMetaWrite') }}
-              </span>
-              <NcTooltip>
-                <template #title>
-                  <span>{{ $t('tooltip.allowMetaWrite') }}</span>
-                </template>
-                <GeneralIcon class="text-gray-500" icon="info" />
-              </NcTooltip>
-            </div>
-          </template>
-          <a-switch v-model:checked="allowMetaWrite" data-testid="nc-allow-meta-write" size="small"></a-switch>
-        </a-form-item>
-        <a-form-item>
-          <template #label>
-            <div class="flex gap-1 justify-end">
-              <span>
-                {{ $t('labels.allowDataWrite') }}
-              </span>
-              <NcTooltip>
-                <template #title>
-                  <span>{{ $t('tooltip.allowDataWrite') }}</span>
-                </template>
-                <GeneralIcon class="text-gray-500" icon="info" />
-              </NcTooltip>
-            </div>
-          </template>
-          <div class="flex justify-start">
-            <NcTooltip :disabled="!allowMetaWrite" placement="topLeft">
-              <template #title>
-                {{ $t('tooltip.dataWriteOptionDisabled') }}
-              </template>
-              <a-switch
-                v-model:checked="allowDataWrite"
-                :disabled="allowMetaWrite"
-                data-testid="nc-allow-data-write"
-                size="small"
-              ></a-switch>
-            </NcTooltip>
-          </div>
-        </a-form-item>
+        <DashboardSettingsDataSourcesSourceRestrictions
+          v-model:allowMetaWrite="allowMetaWrite"
+          v-model:allowDataWrite="allowDataWrite"
+        />
         <template
           v-if="
             formState.dataSource.client !== ClientType.SQLITE &&

packages/nc-gui/components/dashboard/settings/data-sources/SourceRestrictions.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const props = defineProps<{
+  allowMetaWrite: boolean
+  allowDataWrite: boolean
+}>()
+
+const emits = defineEmits(['update:allowMetaWrite', 'update:allowDataWrite'])
+
+const dataWrite = useVModel(props, 'allowDataWrite', emits)
+const metaWrite = useVModel(props, 'allowMetaWrite', emits)
+</script>
+
+<template>
+  <a-form-item>
+    <template #help>
+      <span class="text-small">
+        {{ $t('tooltip.allowDataWrite') }}
+      </span>
+    </template>
+    <template #label>
+      <div class="flex gap-1 justify-end">
+        <span>
+          {{ $t('labels.allowDataWrite') }}
+        </span>
+      </div>
+    </template>
+    <div class="flex justify-start">
+      <NcTooltip :disabled="!metaWrite" placement="topLeft">
+        <template #title>
+          {{ $t('tooltip.dataWriteOptionDisabled') }}
+        </template>
+        <a-switch v-model:checked="dataWrite" :disabled="metaWrite" data-testid="nc-allow-data-write" size="small"></a-switch>
+      </NcTooltip>
+    </div>
+  </a-form-item>
+  <a-form-item>
+    <template #help>
+      <span class="text-small">
+        <span class="font-weight-medium" :class="{ 'nc-allow-meta-write-help': metaWrite }">
+          {{ $t('labels.notRecommended') }}:
+        </span>
+        {{ $t('tooltip.allowMetaWrite') }}
+      </span>
+    </template>
+    <template #label>
+      <div class="flex gap-1 justify-end">
+        <span>
+          {{ $t('labels.allowMetaWrite') }}
+        </span>
+      </div>
+    </template>
+    <a-switch v-model:checked="metaWrite" data-testid="nc-allow-meta-write" class="nc-allow-meta-write" size="small"></a-switch>
+  </a-form-item>
+</template>
+
+<style scoped>
+.nc-allow-meta-write.ant-switch-checked {
+  background: #b33870;
+}
+
+.nc-allow-meta-write-help {
+  color: #b33870;
+}
+</style>