refactor: review comments

packages/nc-gui/components/smartsheet/Details.vue

@@ -8,7 +8,7 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
 const { $e } = useNuxtApp()
 
-const { isUIAllowed } = useRoles()
+const { isUIAllowed, isDataReadOnly } = useRoles()
 
 const { base } = storeToRefs(useBase())
 const meta = inject(MetaInj, ref())
@@ -85,7 +85,7 @@ watch(openedSubTab, () => {
         </div>
       </a-tab-pane>
 
-      <a-tab-pane v-if="isUIAllowed('hookList')" key="webhook">
+      <a-tab-pane v-if="isUIAllowed('hookList') && !isDataReadOnly" key="webhook">
         <template #tab>
           <div class="tab" data-testid="nc-webhooks-tab">
             <GeneralIcon icon="webhook" class="tab-icon" :class="{}" />

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -166,7 +166,7 @@ const isViewColumnsLoading = computed(() => _isViewColumnsLoading.value || !meta
 const resizingColumn = ref(false)
 
 // #Permissions
-const { isUIAllowed } = useRoles()
+const { isUIAllowed, isDataReadOnly } = useRoles()
 const hasEditPermission = computed(() => isUIAllowed('dataEdit'))
 const isAddingColumnAllowed = computed(() => !readOnly.value && !isLocked.value && isUIAllowed('fieldAdd') && !isSqlView.value)
 
@@ -233,7 +233,13 @@ const isKeyDown = ref(false)
 // #Cell - 1
 
 async function clearCell(ctx: { row: number; col: number } | null, skipUpdate = false) {
-  if (!ctx || !hasEditPermission.value || (!isLinksOrLTAR(fields.value[ctx.col]) && isVirtualCol(fields.value[ctx.col]))) return
+  if (
+    isDataReadOnly.value ||
+    !ctx ||
+    !hasEditPermission.value ||
+    (!isLinksOrLTAR(fields.value[ctx.col]) && isVirtualCol(fields.value[ctx.col]))
+  )
+    return
 
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
   if (colMeta.value[ctx.col].isReadonly) return
@@ -916,7 +922,7 @@ const onNavigate = (dir: NavigateDir) => {
 // #Cell - 2
 
 async function clearSelectedRangeOfCells() {
-  if (!hasEditPermission.value) return
+  if (!hasEditPermission.value || isDataReadOnly.value) return
 
   const start = selectedRange.start
   const end = selectedRange.end
@@ -1278,6 +1284,7 @@ const selectedReadonly = computed(
 
 const showFillHandle = computed(
   () =>
+    !isDataReadOnly.value &&
     !readOnly.value &&
     !editEnabled.value &&
     (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
@@ -2175,7 +2182,7 @@ onKeyStroke('ArrowDown', onDown)
             </NcMenuItem>
 
             <NcMenuItem
-              v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
+              v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected) && !isDataReadOnly"
               class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
               data-testid="nc-delete-row"
               @click="deleteSelectedRows"
@@ -2222,7 +2229,7 @@ onKeyStroke('ArrowDown', onDown)
             </NcMenuItem>
 
             <NcMenuItem
-              v-if="contextMenuTarget && hasEditPermission"
+              v-if="contextMenuTarget && hasEditPermission && !isDataReadOnly"
               class="nc-base-menu-item"
               data-testid="context-menu-item-paste"
               :disabled="selectedReadonly"
@@ -2241,7 +2248,8 @@ onKeyStroke('ArrowDown', onDown)
                 contextMenuTarget &&
                 hasEditPermission &&
                 selectedRange.isSingleCell() &&
-                (isLinksOrLTAR(fields[contextMenuTarget.col]) || !cellMeta[0]?.[contextMenuTarget.col].isVirtualCol)
+                (isLinksOrLTAR(fields[contextMenuTarget.col]) || !cellMeta[0]?.[contextMenuTarget.col].isVirtualCol) &&
+                !isDataReadOnly
               "
               class="nc-base-menu-item"
               :disabled="selectedReadonly"
@@ -2256,7 +2264,7 @@ onKeyStroke('ArrowDown', onDown)
 
             <!-- Clear cell -->
             <NcMenuItem
-              v-else-if="contextMenuTarget && hasEditPermission"
+              v-else-if="contextMenuTarget && hasEditPermission && !isDataReadOnly"
               class="nc-base-menu-item"
               :disabled="selectedReadonly"
               data-testid="context-menu-item-clear"
@@ -2278,7 +2286,7 @@ onKeyStroke('ArrowDown', onDown)
               </NcMenuItem>
             </template>
 
-            <template v-if="hasEditPermission">
+            <template v-if="hasEditPermission && !isDataReadOnly">
               <NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected))" />
               <NcMenuItem
                 v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())"

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
+import { type ColumnReqType, type ColumnType, readonlyMetaAllowedTypes } from 'nocodb-sdk'
 import { UITypes, UITypesName } from 'nocodb-sdk'
 
 interface Props {
@@ -32,7 +32,7 @@ const isDropDownOpen = ref(false)
 
 const column = toRef(props, 'column')
 
-const { isUIAllowed } = useRoles()
+const { isUIAllowed, isMetaReadOnly } = useRoles()
 
 provide(ColumnInj, column)
 
@@ -60,7 +60,12 @@ const closeAddColumnDropdown = () => {
 const openHeaderMenu = (e?: MouseEvent) => {
   if (isLocked.value || (isExpandedForm.value && e?.type === 'dblclick') || isExpandedBulkUpdateForm.value) return
 
-  if (!isForm.value && isUIAllowed('fieldEdit') && !isMobileMode.value) {
+  if (
+    !isForm.value &&
+    isUIAllowed('fieldEdit') &&
+    !isMobileMode.value &&
+    (!isMetaReadOnly.value || readonlyMetaAllowedTypes.includes(column.value.uidt))
+  ) {
     editColumnDropdown.value = true
   }
 }

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -382,8 +382,8 @@ const isColumnUpdateAllowed = computed(() => {
         }"
       >
         <NcMenuItem
-          v-if="isUIAllowed('fieldAlter') && isColumnUpdateAllowed"
-          :disabled="column?.pk || isSystemColumn(column)"
+          v-if="isUIAllowed('fieldAlter')"
+          :disabled="column?.pk || isSystemColumn(column) || !isColumnUpdateAllowed"
           @click="onEditPress"
         >
           <div class="nc-column-edit nc-header-menu-item">
@@ -393,8 +393,8 @@ const isColumnUpdateAllowed = computed(() => {
           </div>
         </NcMenuItem>
         <NcMenuItem
-          v-if="isUIAllowed('duplicateColumn') && isExpandedForm && !column?.pk && isColumnUpdateAllowed"
-          :disabled="!isDuplicateAllowed"
+          v-if="isUIAllowed('duplicateColumn') && isExpandedForm && !column?.pk"
+          :disabled="!isDuplicateAllowed || !isColumnUpdateAllowed"
           @click="openDuplicateDlg"
         >
           <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
@@ -532,8 +532,8 @@ const isColumnUpdateAllowed = computed(() => {
         <a-divider v-if="!column?.pv" class="!my-0" />
 
         <NcMenuItem
-          v-if="!column?.pv && isUIAllowed('fieldDelete') && isColumnUpdateAllowed"
-          :disabled="!isDeleteAllowed"
+          v-if="!column?.pv && isUIAllowed('fieldDelete')"
+          :disabled="!isDeleteAllowed || !isColumnUpdateAllowed"
           class="!hover:bg-red-50"
           @click="handleDelete"
         >

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -7,6 +7,7 @@ import {
   type LookupType,
   type RollupType,
   isLinksOrLTAR,
+  readonlyMetaAllowedTypes,
 } from 'nocodb-sdk'
 import { RelationTypes, UITypes, UITypesName, substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 
@@ -36,7 +37,7 @@ provide(ColumnInj, column)
 
 const { metas } = useMetas()
 
-const { isUIAllowed } = useRoles()
+const { isUIAllowed, isMetaReadOnly } = useRoles()
 
 const meta = inject(MetaInj, ref())
 
@@ -122,7 +123,12 @@ const closeAddColumnDropdown = () => {
 const openHeaderMenu = (e?: MouseEvent) => {
   if (isLocked.value || (isExpandedForm.value && e?.type === 'dblclick') || isExpandedBulkUpdateForm.value) return
 
-  if (!isForm.value && isUIAllowed('fieldEdit') && !isMobileMode.value) {
+  if (
+    !isForm.value &&
+    isUIAllowed('fieldEdit') &&
+    !isMobileMode.value &&
+    (!isMetaReadOnly.value || readonlyMetaAllowedTypes.includes(column.value.uidt))
+  ) {
     editColumnDropdown.value = true
   }
 }

packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
 
 const emits = defineEmits(['rename', 'closeModal', 'delete'])
 
-const { isUIAllowed } = useRoles()
+const { isUIAllowed, isDataReadOnly } = useRoles()
 
 const isPublicView = inject(IsPublicInj, ref(false))
 
@@ -193,7 +193,7 @@ const onDelete = async () => {
 
     <template v-if="view.type !== ViewTypes.FORM">
       <NcDivider />
-      <template v-if="isUIAllowed('csvTableImport') && !isPublicView">
+      <template v-if="isUIAllowed('csvTableImport') && !isPublicView && !isDataReadOnly">
         <NcSubMenu key="upload">
           <template #title>
             <div

packages/nc-gui/components/virtual-cell/components/LinkedItems.vue

@@ -31,6 +31,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const filterQueryRef = ref<HTMLInputElement>()
 
+const { isDataReadOnly } = useRoles()
+
 const { isSharedBase } = storeToRefs(useBase())
 
 const {
@@ -410,7 +412,7 @@ const onFilterChange = () => {
       <div class="nc-dropdown-link-record-footer bg-gray-100 p-2 rounded-b-xl flex items-center justify-between gap-3 min-h-11">
         <div class="flex items-center gap-2">
           <NcButton
-            v-if="!isPublic"
+            v-if="!isPublic && !isDataReadOnly"
             v-e="['c:row-expand:open']"
             size="small"
             class="!hover:(bg-white text-brand-500) !h-7 !text-small"

packages/nc-gui/components/virtual-cell/components/UnLinkedItems.vue

@@ -21,6 +21,8 @@ const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
+const { isDataReadOnly } = useRoles()
+
 const {
   childrenExcludedList,
   isChildrenExcludedListLinked,
@@ -403,7 +405,7 @@ const onFilterChange = () => {
       <div class="nc-dropdown-link-record-footer bg-gray-100 p-2 rounded-b-xl flex items-center justify-between min-h-11">
         <div class="flex">
           <NcButton
-            v-if="!isPublic"
+            v-if="!isPublic && !isDataReadOnly"
             v-e="['c:row-expand:open']"
             size="small"
             class="!hover:(bg-white text-brand-500) !h-7 !text-small"

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -67,6 +67,8 @@ export function useMultiSelect(
 
   const { addUndo, clone, defineViewScope } = useUndoRedo()
 
+  const { isDataReadOnly } = useRoles()
+
   const editEnabled = ref(_editEnabled)
 
   const isMouseDown = ref(false)
@@ -611,7 +613,9 @@ export function useMultiSelect(
       case 'Delete':
       case 'Backspace':
         e.preventDefault()
-
+        if (isDataReadOnly.value) {
+          return
+        }
         if (selectedRange.isSingleCell()) {
           selectedRange.clear()
 
@@ -797,6 +801,10 @@ export function useMultiSelect(
   const clearSelectedRange = selectedRange.clear.bind(selectedRange)
 
   const handlePaste = async (e: ClipboardEvent) => {
+    if (isDataReadOnly.value) {
+      return
+    }
+
     if (isDrawerOrModalExist() || isExpandedCellInputExist()) {
       return
     }