From 3820e91a1b6dec9330afedfacad4ac20f0750d1a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 18 Jun 2024 19:06:18 +0000
Subject: [PATCH] feat: label and tooltip corrections

---
 .../components/dashboard/TreeView/index.vue   |  6 +--
 .../settings/data-sources/CreateBase.vue      | 51 +++++++++++++++++--
 .../settings/data-sources/EditBase.vue        | 51 +++++++++++++++++--
 .../smartsheet/column/EditOrAdd.vue           | 25 ++++++---
 .../column/UITypesOptionsWithSearch.vue       | 11 ++--
 .../components/smartsheet/header/Menu.vue     | 34 +++++++++----
 .../smartsheet/toolbar/Calendar/Range.vue     |  2 +-
 packages/nc-gui/composables/useRoles/index.ts | 10 ++++
 packages/nc-gui/composables/useViewFilters.ts |  1 -
 packages/nc-gui/lang/en.json                  |  4 ++
 10 files changed, 159 insertions(+), 36 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/index.vue b/packages/nc-gui/components/dashboard/TreeView/index.vue
index 93d5089a89..84220e5466 100644
--- a/packages/nc-gui/components/dashboard/TreeView/index.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/index.vue
@@ -15,7 +15,7 @@ const basesStore = useBases()
 
 const { createProject: _createProject, updateProject } = basesStore
 
-const { bases, basesList, activeProjectId, b } = storeToRefs(basesStore)
+const { bases, basesList, activeProjectId } = storeToRefs(basesStore)
 
 const { isWorkspaceLoading } = storeToRefs(useWorkspace())
 
@@ -248,9 +248,9 @@ watch(
           ghost-class="ghost"
           @change="onMove($event)"
         >
-          <template #item="{ element: base }">
+          <template #item="{ element: base1 }">
             <div :key="base.id">
-              <ProjectWrapper :base-role="base.project_role" :base="base">
+              <ProjectWrapper :base-role="base1.project_role" :base="base1">
                 <DashboardTreeViewProjectNode />
               </ProjectWrapper>
             </div>
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 0ee0a30cea..8febd32045 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -399,6 +399,22 @@ watch(
 const toggleModal = (val: boolean) => {
   vOpen.value = val
 }
+
+const allowMetaWrite = computed({
+  get: () => !formState.value.meta[SourceRestriction.META_READONLY],
+  set: (v) => {
+    formState.value.meta = formState.value.meta || {}
+    formState.value.meta[SourceRestriction.META_READONLY] = !v
+  },
+})
+
+const allowDataWrite = computed({
+  get: () => !formState.value.meta[SourceRestriction.DATA_READONLY],
+  set: (v) => {
+    formState.value.meta = formState.value.meta || {}
+    formState.value.meta[SourceRestriction.DATA_READONLY] = !v
+  },
+})
 </script>
 
 <template>
@@ -514,12 +530,37 @@ const toggleModal = (val: boolean) => {
               >
                 <a-input v-model:value="formState.dataSource.searchPath[0]" />
               </a-form-item>
-
-              <a-form-item label="Readonly Schema">
-                <a-switch v-model:checked="formState.meta[SourceRestriction.META_READONLY]" size="small"></a-switch>
+              <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" size="small"></a-switch>
               </a-form-item>
-              <a-form-item label="Readonly Data">
-                <a-switch v-model:checked="formState.meta[SourceRestriction.DATA_READONLY]" size="small"></a-switch>
+              <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>
+                <a-switch v-model:checked="allowDataWrite" size="small"></a-switch>
               </a-form-item>
 
               <div class="flex items-right justify-end gap-2">
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
index 1584a38388..a80fa834fc 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -367,6 +367,22 @@ watch(
     immediate: true,
   },
 )
+
+const allowMetaWrite = computed({
+  get: () => !formState.value.meta[SourceRestriction.META_READONLY],
+  set: (v) => {
+    formState.value.meta = formState.value.meta || {}
+    formState.value.meta[SourceRestriction.META_READONLY] = !v
+  },
+})
+
+const allowDataWrite = computed({
+  get: () => !formState.value.meta[SourceRestriction.DATA_READONLY],
+  set: (v) => {
+    formState.value.meta = formState.value.meta || {}
+    formState.value.meta[SourceRestriction.DATA_READONLY] = !v
+  },
+})
 </script>
 
 <template>
@@ -536,13 +552,38 @@ watch(
             <a-input v-model:value="formState.dataSource.searchPath[0]" />
           </a-form-item>
 
-          <a-form-item label="Readonly Schema">
-            <a-switch v-model:checked="formState.meta[SourceRestriction.META_READONLY]" size="small"></a-switch>
+          <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" size="small"></a-switch>
           </a-form-item>
-          <a-form-item label="Readonly Data">
-            <a-switch v-model:checked="formState.meta[SourceRestriction.DATA_READONLY]" size="small"></a-switch>
+          <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>
+            <a-switch v-model:checked="allowDataWrite" size="small"></a-switch>
           </a-form-item>
-
           <!--                Use Connection URL -->
           <div class="flex justify-end gap-2">
             <NcButton size="small" type="ghost" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 931f916fc8..4e4629f9b0 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
-import { UITypes, UITypesName, isLinksOrLTAR, isSelfReferencingTableColumn, isSystemColumn, isVirtualCol, readonlyMetaAllowedTypes } from 'nocodb-sdk'
+import {
+  UITypes,
+  UITypesName,
+  isLinksOrLTAR,
+  isSelfReferencingTableColumn,
+  isSystemColumn,
+  isVirtualCol,
+  readonlyMetaAllowedTypes,
+} from 'nocodb-sdk'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
@@ -38,7 +46,7 @@ const { getMeta } = useMetas()
 
 const { t } = useI18n()
 
-const {isMetaReadOnly} = useRoles()
+const { isMetaReadOnly } = useRoles()
 
 const columnLabel = computed(() => props.columnLabel || t('objects.field'))
 
@@ -140,13 +148,13 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
   ]
 
   // if meta is readonly, move disabled types to the end
-  if(isMetaReadOnly.value) {
+  if (isMetaReadOnly.value) {
     types.sort((a, b) => {
       const aDisabled = readonlyMetaAllowedTypes.includes(a.name)
       const bDisabled = readonlyMetaAllowedTypes.includes(b.name)
 
-      if(aDisabled && !bDisabled) return -1
-      if(!aDisabled && bDisabled) return 1
+      if (aDisabled && !bDisabled) return -1
+      if (!aDisabled && bDisabled) return 1
 
       return 0
     })
@@ -397,7 +405,12 @@ const filterOption = (input: string, option: { value: UITypes }) => {
             v-model:value="formState.uidt"
             show-search
             class="nc-column-type-input !rounded-lg"
-            :disabled="(isMetaReadOnly && !readonlyMetaAllowedTypes.includes(formState.uidt)) || isKanban || readOnly || (isEdit && !!onlyNameUpdateOnEditColumns.includes(column?.uidt))"
+            :disabled="
+              (isMetaReadOnly && !readonlyMetaAllowedTypes.includes(formState.uidt)) ||
+              isKanban ||
+              readOnly ||
+              (isEdit && !!onlyNameUpdateOnEditColumns.includes(column?.uidt))
+            "
             dropdown-class-name="nc-dropdown-column-type border-1 !rounded-lg border-gray-200"
             :filter-option="filterOption"
             @dropdown-visible-change="onDropdownChange"
diff --git a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
index 6ac463f1a3..9c9574244f 100644
--- a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
@@ -11,7 +11,7 @@ const { options } = toRefs(props)
 
 const searchQuery = ref('')
 
-const {isMetaReadOnly} = useRoles()
+const { isMetaReadOnly } = useRoles()
 
 const filteredOptions = computed(
   () =>
@@ -108,17 +108,20 @@ const isDisabledUIType = (type: UITypes) => {
         :class="[
           `nc-column-list-option-${index}`,
           {
-            'hover:bg-gray-100 cursor-pointer' : !isDisabledUIType(option.name),
+            'hover:bg-gray-100 cursor-pointer': !isDisabledUIType(option.name),
             'bg-gray-100 nc-column-list-option-active': activeFieldIndex === index && !isDisabledUIType(option.name),
             '!text-gray-400 cursor-not-allowed': isDisabledUIType(option.name),
-
           },
         ]"
         :data-testid="option.name"
         @click="onClick(option.name)"
       >
         <div class="flex gap-2 items-center">
-          <component :is="option.icon" class="w-4 h-4" :class="isDisabledUIType(option.name) ? '!text-gray-400' : 'text-gray-700' "/>
+          <component
+            :is="option.icon"
+            class="w-4 h-4"
+            :class="isDisabledUIType(option.name) ? '!text-gray-400' : 'text-gray-700'"
+          />
           <div class="flex-1 text-sm">{{ UITypesName[option.name] }}</div>
           <span v-if="option.deprecated" class="!text-xs !text-gray-300">({{ $t('general.deprecated') }})</span>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 74bfb25eb7..76955194b0 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ColumnReqType } from 'nocodb-sdk'
+import { type ColumnReqType, readonlyMetaAllowedTypes } from 'nocodb-sdk'
 import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import { SmartsheetStoreEvents } from '#imports'
 
@@ -43,7 +43,7 @@ const { gridViewCols } = useViewColumnsOrThrow()
 
 const { fieldsToGroupBy, groupByLimit } = useViewGroupByOrThrow(view)
 
-const { isUIAllowed } = useRoles()
+const { isUIAllowed, isMetaReadOnly } = useRoles()
 
 const isLoading = ref<'' | 'hideOrShow' | 'setDisplay'>('')
 
@@ -354,6 +354,11 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
   }
   isOpen.value = false
 }
+
+const isColumnCRUDAllowed = computed(() => {
+  if (isMetaReadOnly.value && !readonlyMetaAllowedTypes.includes(column.value?.uidt)) return false
+  return true
+})
 </script>
 
 <template>
@@ -376,7 +381,11 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
           'min-w-[256px]': isExpandedForm,
         }"
       >
-        <NcMenuItem v-if="isUIAllowed('fieldAlter')" :disabled="column?.pk || isSystemColumn(column)" @click="onEditPress">
+        <NcMenuItem
+          v-if="isUIAllowed('fieldAlter') && isColumnCRUDAllowed"
+          :disabled="column?.pk || isSystemColumn(column)"
+          @click="onEditPress"
+        >
           <div class="nc-column-edit nc-header-menu-item">
             <component :is="iconMap.ncEdit" class="text-gray-700" />
             <!-- Edit -->
@@ -471,13 +480,15 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
           <NcTooltip
             :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField || !(isEeUI && !isPublic)"
           >
-            <template #title>{{
-              !isGroupBySupported
-                ? "This field type doesn't support grouping"
-                : isGroupByLimitExceeded
-                ? 'Group by limit exceeded'
-                : ''
-            }}</template>
+            <template #title
+              >{{
+                !isGroupBySupported
+                  ? "This field type doesn't support grouping"
+                  : isGroupByLimitExceeded
+                  ? 'Group by limit exceeded'
+                  : ''
+              }}
+            </template>
             <NcMenuItem
               :disabled="isEeUI && !isPublic && (!isGroupBySupported || isGroupByLimitExceeded) && !isGroupedByThisField"
               @click="
@@ -521,7 +532,7 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
         <a-divider v-if="!column?.pv" class="!my-0" />
 
         <NcMenuItem
-          v-if="!column?.pv && isUIAllowed('fieldDelete')"
+          v-if="!column?.pv && isUIAllowed('fieldDelete') && isColumnCRUDAllowed"
           :disabled="!isDeleteAllowed"
           class="!hover:bg-red-50"
           @click="handleDelete"
@@ -559,6 +570,7 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
 :deep(.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled)) {
   @apply !hover:text-black text-gray-700;
 }
+
 :deep(.ant-dropdown-menu-item.ant-dropdown-menu-item-disabled .nc-icon) {
   @apply text-current;
 }
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 4f27e6f8b1..5f3375c634 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type CalendarRangeType, UITypes, ViewTypes, isSystemColumn } from 'nocodb-sdk'
+import { type CalendarRangeType, UITypes, isSystemColumn } from 'nocodb-sdk'
 import type { SelectProps } from 'ant-design-vue'
 
 const meta = inject(MetaInj, ref())
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index dd1e4c2141..e64a74183c 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -185,10 +185,20 @@ export const useRoles = () => {
   const currentSource = inject(ActiveSourceInj, ref())
   const useRolesRes = useRolesShared()
 
+  const isMetaReadOnly = computed(() => {
+    return currentSource.value?.meta?.[SourceRestriction.META_READONLY] || false
+  })
+
+  const isDataReadOnly = computed(() => {
+    return currentSource.value?.meta?.[SourceRestriction.DATA_READONLY] || false
+  })
+
   return {
     ...useRolesRes,
     isUIAllowed: (...args: IsUIAllowedParams) => {
       return useRolesRes.isUIAllowed(args[0], { source: currentSource, ...(args[1] || {}) })
     },
+    isDataReadOnly,
+    isMetaReadOnly,
   }
 }
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index a4e8cee459..ad61e79872 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -10,7 +10,6 @@ import type { ComputedRef, Ref } from 'vue'
 import type { SelectProps } from 'ant-design-vue'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
 
-
 type ColumnFilterType = FilterType & { status?: string; id?: string; children?: ColumnFilterType[]; is_group?: boolean }
 
 export function useViewFilters(
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index e49ab0af6e..22b2f94aa8 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -456,6 +456,8 @@
     "looksLikeThisStackIsEmpty": "Looks like this stack does not have any records"
   },
   "labels": {
+    "allowMetaWrite" : "Allow Schema Change",
+    "allowDataWrite" : "Allow Data Write/Edit",
     "selectView": "Select a View",
     "connectionDetails": "Connection Details",
     "metaSync": "Meta Sync",
@@ -1038,6 +1040,8 @@
     "group": "Group"
   },
   "tooltip": {
+    "allowMetaWrite": "Enable this option to allow modifications to the database schema, including adding, altering, or deleting tables and columns. Use with caution, as changes may affect application functionality.",
+    "allowDataWrite": "Enable this option to allow updating, deleting, or inserting data within the database tables. Ideal for administrative users who need to manage data directly.",
     "reachedSourceLimit": "Limited to only one data source for the moment",
     "saveChanges": "Save changes",
     "xcDB": "Create a new base",