Merge pull request #3087 from nocodb/fix/add-missing-isUIAllowed

fix(gui-v2): add i18n / isUIAllowed

packages/nc-gui-v2/components.d.ts

@@ -65,7 +65,6 @@ declare module '@vue/runtime-core' {
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
-    ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
@@ -77,7 +76,6 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
-    MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MaterialSymbolsWarning: typeof import('~icons/material-symbols/warning')['default']
@@ -86,12 +84,14 @@ declare module '@vue/runtime-core' {
     MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
+    MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -118,13 +118,12 @@ declare module '@vue/runtime-core' {
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
+    MdiGithub: typeof import('~icons/mdi/github')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
     MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
-    MdiLens: typeof import('~icons/mdi/lens')['default']
-    MdiLense: typeof import('~icons/mdi/lense')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogin: typeof import('~icons/mdi/login')['default']
@@ -143,6 +142,7 @@ declare module '@vue/runtime-core' {
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
@@ -150,11 +150,9 @@ declare module '@vue/runtime-core' {
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
+    MdiTwitter: typeof import('~icons/mdi/twitter')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
-    MdiZomm: typeof import('~icons/mdi/zomm')['default']
-    MdiZoom: typeof import('~icons/mdi/zoom')['default']
-    MdiZoomIn: typeof import('~icons/mdi/zoom-in')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

packages/nc-gui-v2/components/cell/Checkbox.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { inject } from '#imports'
+import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/context'
-import { getMdiIcon } from '@/utils'
 
 interface Props {
   modelValue?: boolean | undefined | number
@@ -14,11 +12,15 @@ interface Emits {
 const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
-const vModel = $(useVModel(props, 'modelValue', emits))
+
+let vModel = $(useVModel(props, 'modelValue', emits))
 
 const column = inject(ColumnInj)
+
 const isForm = inject(IsFormInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const checkboxMeta = $computed(() => {
   return {
     icon: {
@@ -29,11 +31,17 @@ const checkboxMeta = $computed(() => {
     ...(column?.value?.meta || {}),
   }
 })
+
+function onClick() {
+  if (editEnabled) {
+    vModel = !vModel
+  }
+}
 </script>
 
 <template>
   <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
-    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
+    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="onClick">
       <component
         :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
         :style="{

packages/nc-gui-v2/components/cell/Currency.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref, useVModel } from '#imports'
+import { ColumnInj, ReadonlyInj, computed, inject, useVModel } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null
@@ -13,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emit)
 

packages/nc-gui-v2/components/cell/DatePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, ReadonlyInj } from '~/context'
+import { ColumnInj, ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: string | null
@@ -11,9 +11,11 @@ const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const columnMeta = inject(ColumnInj, null)
-const readOnlyMode = inject(ReadonlyInj, false)
+
+const editEnabled = inject(ReadonlyInj)
 
 let isDateInvalid = $ref(false)
+
 const dateFormat = columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD'
 
 const localState = $computed({
@@ -61,10 +63,10 @@ watch(
     class="!w-full px-1"
     :format="dateFormat"
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
     @click="open = !open"
   >
     <template #suffixIcon></template>

packages/nc-gui-v2/components/cell/DateTimePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: string | null
@@ -12,9 +12,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnlyMode = inject(ReadonlyInj, false)
+const editEnabled = inject(ReadonlyInj)
 
 let isDateInvalid = $ref(false)
+
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 const localState = $computed({
@@ -63,11 +64,12 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     format="YYYY-MM-DD HH:mm"
-    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
+    :placeholder="isDateInvalid ? 'Invalid date' : !editEnabled ? 'Select date and time' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
+    :disabled="!editEnabled"
     @click="open = !open"
     @ok="open = !open"
   >

packages/nc-gui-v2/components/cell/Decimal.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
+import { ReadonlyInj, inject, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null | string
@@ -15,7 +14,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Duration.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { computed, inject, ref } from '#imports'
+import {
-import { ColumnInj } from '~/context'
+  ColumnInj,
-import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils'
+  ReadonlyInj,
+  computed,
+  convertDurationToSeconds,
+  convertMS2Duration,
+  durationOptions,
+  inject,
+  ref,
+} from '#imports'
 
 interface Props {
   modelValue: number | string | null
@@ -13,12 +20,18 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const showWarningMessage = ref(false)
+
 const durationInMS = ref(0)
+
 const isEdited = ref(false)
+
 const durationType = ref(column?.value?.meta?.duration || 0)
 
 const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
+
 const localState = computed({
   get: () => convertMS2Duration(modelValue, durationType.value),
   set: (val) => {
@@ -59,6 +72,7 @@ const submitDuration = () => {
 <template>
   <div class="duration-cell-wrapper">
     <input
+      v-if="editEnabled"
       ref="durationInput"
       v-model="localState"
       :placeholder="durationPlaceholder"
@@ -66,6 +80,7 @@ const submitDuration = () => {
       @keypress="checkDurationFormat($event)"
       @keydown.enter="submitDuration"
     />
+    <span v-else> {{ localState }}</span>
     <div v-if="showWarningMessage" class="duration-warning">
       <!-- TODO: i18n -->
       Please enter a number

packages/nc-gui-v2/components/cell/Email.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref, useVModel } from '#imports'
+import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
-import { isEmail } from '~/utils'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null
@@ -16,7 +14,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Float.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
+import { ReadonlyInj, inject, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null
@@ -15,7 +14,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Integer.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
+import { ReadonlyInj, inject, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null
@@ -15,7 +14,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/Json.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
-import { computed, inject, ref, useVModel, watch } from '#imports'
+import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -16,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { computed, inject } from '#imports'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj } from '~/context'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -16,12 +15,17 @@ const emit = defineEmits(['update:modelValue'])
 const { isMysql } = useProject()
 
 const column = inject(ColumnInj)
+
 // const isForm = inject<boolean>('isForm', false)
-// const editEnabled = inject(EditModeInj, ref(false))
+
+const editEnabled = inject(ReadonlyInj)
+
 const active = inject(ActiveCellInj, ref(false))
 
 const selectedIds = ref<string[]>([])
+
 const aselect = ref<typeof AntSelect>()
+
 const isOpen = ref(false)
 
 const options = computed(() => {
@@ -112,6 +116,7 @@ watch(isOpen, (n, _o) => {
     show-arrow
     :show-search="false"
     :open="isOpen"
+    :disabled="!editEnabled"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
   >

packages/nc-gui-v2/components/cell/Percent.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
+import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
-import { ColumnInj } from '~/context'
-import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils'
 
 interface Props {
   modelValue: number | string | null
@@ -11,6 +9,8 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const editEnabled = inject(ReadonlyInj)
+
 const column = inject(ColumnInj)
 
 const percent = ref()
@@ -63,5 +63,6 @@ function onKeyDownEnter() {
     @blur="onBlur"
     @keydown.enter="onKeyDownEnter"
   />
-  <input v-else v-model="localState" type="text" @focus="isEdited = true" />
+  <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
+  <span v-else>{{ localState }}</span>
 </template>

packages/nc-gui-v2/components/cell/Rating.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
+import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue?: number | null
-  readOnly?: boolean
 }
 
-const { modelValue, readOnly } = defineProps<Props>()
+const { modelValue } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
+const editEnabled = inject(ReadonlyInj)
+
 const ratingMeta = computed(() => {
   return {
     icon: {
@@ -32,7 +32,7 @@ const vModel = computed({
 </script>
 
 <template>
-  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="readOnly">
+  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="!editEnabled">
     <template #character>
       <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
       <MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { computed, inject } from '#imports'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj } from '~/context'
 
 interface Props {
   modelValue?: string
@@ -13,11 +12,15 @@ const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
+
 // const isForm = inject<boolean>('isForm', false)
-// const editEnabled = inject(EditModeInj, ref(false))
+
+const editEnabled = inject(ReadonlyInj)
+
 const active = inject(ActiveCellInj, ref(false))
 
 const aselect = ref<typeof AntSelect>()
+
 const isOpen = ref(false)
 
 const vModel = computed({
@@ -72,6 +75,7 @@ watch(isOpen, (n, _o) => {
     placeholder="Select an option"
     :bordered="false"
     :open="isOpen"
+    :disabled="!editEnabled"
     :show-arrow="active || vModel === null"
     @select="isOpen = false"
     @keydown="handleKeys"

packages/nc-gui-v2/components/cell/Text.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
+import { ReadonlyInj, inject } from '#imports'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null
@@ -11,7 +10,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

packages/nc-gui-v2/components/cell/TextArea.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref } from '#imports'
+import { ReadonlyInj, computed, inject } from '#imports'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null
@@ -11,7 +10,7 @@ const { modelValue } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = computed({
   get: () => modelValue ?? '',

packages/nc-gui-v2/components/cell/TimePicker.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -13,9 +13,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const readOnlyMode = inject(ReadonlyInj, false)
+const editEnabled = inject(ReadonlyInj)
 
 let isTimeInvalid = $ref(false)
+
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 const localState = $computed({
@@ -76,9 +77,9 @@ watch(
     format="HH:mm"
     class="!w-full px-1"
     :placeholder="isTimeInvalid ? 'Invalid time' : !readOnlyMode ? 'Select time' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
     :popup-class-name="randomClass"
     @click="open = !open"
     @ok="open = !open"

packages/nc-gui-v2/components/cell/Url.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref } from '#imports'
+import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
-import { isValidURL } from '~/utils'
 
 interface Props {
   modelValue: string | null
@@ -14,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj, ref(false))
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = computed({
   get: () => value,

packages/nc-gui-v2/components/cell/YearPicker.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: number | string | null
@@ -11,7 +11,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const readOnlyMode = inject(ReadonlyInj, false)
+const editEnabled = inject(ReadonlyInj)
 
 let isYearInvalid = $ref(false)
 
@@ -62,9 +62,9 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
-    :allow-clear="!readOnlyMode"
+    :allow-clear="!editEnabled"
     :input-read-only="true"
-    :open="readOnlyMode ? false : open"
+    :open="editEnabled ? false : open"
     :dropdown-class-name="randomClass"
     @click="open = !open"
     @change="open = !open"

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -15,9 +15,13 @@ const { addTab } = useTabs()
 const { $api, $e } = useNuxtApp()
 
 const { tables, loadTables, isSharedBase } = useProject()
+
 const { activeTab } = useTabs()
+
 const { deleteTable } = useTable()
 
+const { isUIAllowed } = useUIPermission()
+
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
     acc[table.id as string] = table
@@ -25,7 +29,10 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
+const showTableList = ref(true)
+
 const tableCreateDlg = ref(false)
+
 let key = $ref(0)
 
 const menuRef = $ref<HTMLLIElement>()
@@ -158,6 +165,17 @@ const activeTable = computed(() => {
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
           </span>
+          <MdiPlus
+            v-if="isUIAllowed('treeview-add-button')"
+            v-t="['c:table:create:navdraw']"
+            class="transform text-gray-500 hover:(text-pink-500 scale-105) nc-btn-tbl-add"
+            @click.stop="tableCreateDlg = true"
+          />
+
+          <MdiMenuDown
+            class="transition-transform !duration-100 text-gray-500 hover:text-pink-500"
+            :class="{ 'transform rotate-180': showTableList }"
+          />
         </div>
         <div style="direction: ltr" class="flex-1">
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
@@ -178,26 +196,42 @@ const activeTable = computed(() => {
                 <div class="flex align-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                   <div class="flex w-auto">
                     <MdiDrag
+                      v-if="isUIAllowed('treeview-drag-n-drop')"
                       :class="`nc-child-draggable-icon-${table.title}`"
                       class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
                       @click.stop.prevent
                     />
 
-                    <component :is="icon(table)" class="nc-view-icon group-hover:hidden text-xs group-hover:text-gray-500" />
+                    <component
+                      :is="icon(table)"
+                      class="nc-view-icon text-xs"
+                      :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                    />
                   </div>
 
                   <div class="nc-tbl-title flex-1">{{ table.title }}</div>
 
-                  <a-dropdown :trigger="['click']" @click.stop>
+                  <a-dropdown v-if="isUIAllowed('table-rename') || isUIAllowed('table-delete')" :trigger="['click']" @click.stop>
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
 
                     <template #overlay>
                       <a-menu class="cursor-pointer">
-                        <a-menu-item v-t="" class="!text-xs" @click="showRenameTableDlg(table)">
+                        <a-menu-item
-                          <div>Rename</div>
+                          v-if="isUIAllowed('table-rename')"
-                        </a-menu-item>
+                          v-t="['c:table:rename']"
+                          class="!text-xs"
+                          @click="showRenameTableDlg(table)"
+                          ><div>Rename</div></a-menu-item
+                        >
 
-                        <a-menu-item class="!text-xs" @click="deleteTable(table)"> Delete</a-menu-item>
+                        <a-menu-item
+                          v-if="isUIAllowed('table-delete')"
+                          v-t="['c:table:delete']"
+                          class="!text-xs"
+                          @click="deleteTable(table)"
+                        >
+                          Delete</a-menu-item
+                        >
                       </a-menu>
                     </template>
                   </a-dropdown>
@@ -219,15 +253,25 @@ const activeTable = computed(() => {
       <template #overlay>
         <a-menu class="cursor-pointer">
           <template v-if="contextMenuTarget.type === 'table'">
-            <a-menu-item class="!text-xs" @click="showRenameTableDlg(contextMenuTarget.value)">
+            <a-menu-item
+              v-if="isUIAllowed('table-rename')"
+              v-t="['c:table:rename']"
+              class="!text-xs"
+              @click="showRenameTableDlg(contextMenuTarget.value)"
+            >
               {{ $t('general.rename') }}
             </a-menu-item>
-            <a-menu-item class="!text-xs" @click="deleteTable(contextMenuTarget.value)">
+            <a-menu-item
+              v-if="isUIAllowed('table-delete')"
+              v-t="['c:table:delete']"
+              class="!text-xs"
+              @click="deleteTable(contextMenuTarget.value)"
+            >
               {{ $t('general.delete') }}
             </a-menu-item>
           </template>
           <template v-else>
-            <a-menu-item class="!text-xs" @click="reloadTables">
+            <a-menu-item v-t="['c:table:reload']" class="!text-xs" @click="reloadTables">
               {{ $t('general.reload') }}
             </a-menu-item>
           </template>

packages/nc-gui-v2/components/dashboard/settings/Modal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
+import { useI18n } from 'vue-i18n'
 import AuditTab from './AuditTab.vue'
 import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
@@ -10,7 +11,7 @@ import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
 import NootbookOutline from '~icons/mdi/notebook-outline'
-import { useVModel, watch } from '#imports'
+import { useUIPermission, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: boolean
@@ -38,19 +39,29 @@ const emits = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emits)
 
+const { isUIAllowed } = useUIPermission()
+
+const { t } = useI18n()
+
 const tabsInfo: TabGroup = {
   teamAndAuth: {
     title: 'Team and Auth',
     icon: TeamFillIcon,
     subTabs: {
+      ...(isUIAllowed('userMgmtTab') && {
         usersManagement: {
-        title: 'Users Management',
+          // Users Management
+          title: t('title.userMgmt'),
           body: UserManagement,
         },
+      }),
+      ...(isUIAllowed('apiTokenTab') && {
         apiTokenManagement: {
-        title: 'API Token Management',
+          // API Tokens Management
+          title: t('title.apiTokenMgmt'),
           body: ApiTokenManagement,
         },
+      }),
     },
   },
   appStore: {

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

@@ -10,10 +10,13 @@ const props = defineProps<{ column: ColumnType & { meta: any }; required?: boole
 const hideMenu = toRef(props, 'hideMenu')
 
 const meta = inject(MetaInj)
+
 const isForm = inject(IsFormInj, ref(false))
 
 const column = toRef(props, 'column')
 
+const { isUIAllowed } = useUIPermission()
+
 provide(ColumnInj, column)
 
 const editColumnDropdown = ref(false)
@@ -36,7 +39,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
 
     <template v-if="!hideMenu">
       <div class="flex-1" />
-      <SmartsheetHeaderMenu v-if="!isForm" @edit="editColumnDropdown = true" />
+      <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" @edit="editColumnDropdown = true" />
     </template>
 
     <a-dropdown

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

@@ -6,7 +6,9 @@ import { ColumnInj, IsFormInj, MetaInj } from '~/context'
 import { provide, toRef, useMetas, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required?: boolean }>()
+
 const column = toRef(props, 'column')
+
 const hideMenu = toRef(props, 'hideMenu')
 
 const editColumnDropdown = ref(false)
@@ -15,13 +17,18 @@ provide(ColumnInj, column)
 
 const { metas } = useMetas()
 
+const { isUIAllowed } = useUIPermission()
+
 const meta = inject(MetaInj)
+
 const isForm = inject(IsFormInj, ref(false))
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)
 
 const colOptions = $computed(() => column.value?.colOptions)
+
 const tableTile = $computed(() => meta?.value?.title)
+
 const relationColumnOptions = $computed<LinkToAnotherRecordType | null>(() => {
   if (isMm.value || isHm.value || isBt.value) {
     return column.value?.colOptions as LinkToAnotherRecordType
@@ -108,8 +115,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <!--    </v-tooltip> -->
     <template v-if="!hideMenu">
       <v-spacer />
-
+      <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
-      <SmartsheetHeaderMenu v-if="!isForm" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 
     <a-dropdown

packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

@@ -18,6 +18,8 @@ const sharedViewListDlg = ref(false)
 
 const publicViewId = null
 
+const isView = false
+
 // TODO: pending for shared view
 
 // interface Props {
@@ -40,6 +42,8 @@ const showWebhookDrawer = ref(false)
 
 const quickImportDialog = ref(false)
 
+const { isUIAllowed } = useUIPermission()
+
 const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
   let offset = 0
   let c = 1
@@ -119,30 +123,44 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
       <template #overlay>
         <div class="bg-white shadow-lg !border">
           <div>
-            <div class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
+            <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
               <MdiDownloadIcon />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
             </div>
-            <div class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+            <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
               <MdiDownloadIcon />
               <!-- Download as XLSX -->
               {{ $t('activity.downloadExcel') }}
             </div>
-            <div class="nc-menu-item" @click="quickImportDialog = true">
+            <div
+              v-if="isUIAllowed('csvImport') && !isView"
+              v-t="['a:actions:upload-csv']"
+              class="nc-menu-item"
+              @click="quickImportDialog = true"
+            >
               <MdiUploadIcon />
               <!-- Upload CSV -->
               {{ $t('activity.uploadCSV') }}
             </div>
-            <div class="nc-menu-item" @click="sharedViewListDlg = true">
+            <div
+              v-if="isUIAllowed('SharedViewList') && !isView"
+              v-t="['a:actions:shared-view-list']"
+              class="nc-menu-item"
+              @click="sharedViewListDlg = true"
+            >
               <MdiViewListIcon />
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}
             </div>
-            <div class="nc-menu-item" @click="showWebhookDrawer = true">
+            <div
+              v-if="isUIAllowed('webhook') && !isView"
+              v-t="['c:actions:webhook']"
+              class="nc-menu-item"
+              @click="showWebhookDrawer = true"
+            >
               <MdiHookIcon />
-              <!-- todo: i18n -->
+              {{ $t('objects.webhooks') }}
-              Webhook
             </div>
           </div>
         </div>

packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue

@@ -17,6 +17,8 @@ const { $e } = useNuxtApp()
 
 const { dashboardUrl } = useDashboard()
 
+const { isUIAllowed } = useUIPermission()
+
 let showShareModel = $ref(false)
 
 const passwordProtected = $ref(false)
@@ -102,7 +104,7 @@ const copyLink = () => {
 
 <template>
   <div>
-    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn">
+    <a-button v-if="isUIAllowed('share-view')" v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn">
       <div class="flex align-center gap-1" @click="genShareLink">
         <MdiOpenInNewIcon />
         <!-- Share View -->

packages/nc-gui-v2/components/smartsheet/Form.vue

@@ -406,11 +406,11 @@ onMounted(async () => {
     </a-col>
     <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-primary">
       <div class="h-[200px]">
-        <a-card class="h-full !bg-[#dbdad7] ma-0 rounded-b-0 pa-8">
+        <a-card class="h-full !bg-[#dbdad7] ma-0 rounded-b-0 pa-8" body-style="max-width: 700px; margin: 0 auto;">
           <a-form ref="formRef" :model="formState">
-            <a-card class="rounded ma-6 pb-10 px-15">
+            <a-card class="rounded ma-2 py-10 px-5">
               <!-- Header -->
-              <a-form-item class="ma-0 gap-0 pa-0">
+              <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
                 <a-input
                   v-model:value="formViewData.heading"
                   class="w-full text-bold text-h3"
@@ -422,8 +422,9 @@ onMounted(async () => {
                   @keydown.enter="updateView"
                 />
               </a-form-item>
+              <div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
               <!-- Sub Header -->
-              <a-form-item>
+              <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
                 <a-input
                   v-model:value="formViewData.subheading"
                   class="w-full"
@@ -431,10 +432,12 @@ onMounted(async () => {
                   hide-details
                   :placeholder="$t('msg.info.formDesc')"
                   :bordered="false"
+                  :disabled="!isEditable"
                   @blur="updateView"
                   @click="updateView"
                 />
               </a-form-item>
+              <div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div>
               <Draggable
                 ref="draggableRef"
                 :list="localColumns"
@@ -538,7 +541,7 @@ onMounted(async () => {
             </a-card>
           </a-form>
 
-          <div class="mx-10 px-10">
+          <div v-if="isEditable" class="mx-10 px-10">
             <!-- After form is submitted -->
             <div class="text-gray-500 mt-4 mb-2">
               {{ $t('msg.info.afterFormSubmitted') }}

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -43,6 +43,8 @@ const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 
+const { isUIAllowed } = useUIPermission()
+
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
 
@@ -83,10 +85,15 @@ const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useG
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
+
 provide(IsGridInj, true)
+
 provide(PaginationDataInj, paginationData)
+
 provide(ChangePageInj, changePage)
 
+provide(ReadonlyInj, isUIAllowed('xcDatatableEditable'))
+
 reloadViewDataHook?.on(async () => {
   await loadData()
   loadAggCommentsCount()
@@ -322,7 +329,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 </div>
               </th>
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
-              <th v-t="['c:column:add']" @click="addColumnDropdown = true">
+              <th v-if="isUIAllowed('add-column')" v-t="['c:column:add']" @click="addColumnDropdown = true">
                 <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
                   <div class="h-full w-[60px] flex align-center justify-center">
                     <MdiPlus class="text-sm" />
@@ -413,7 +420,11 @@ const expandForm = (row: Row, state: Record<string, any>) => {
               </template>
             </SmartsheetRow>
 
-            <tr v-if="!isLocked">
+            <!-- 
+              TODO: add relationType !== 'bt' ?
+              v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'"> 
+            -->
+            <tr v-if="!isView && !isLocked && !isPublicView && isUIAllowed('xcDatatableEditable')">
               <td
                 v-t="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -10,9 +10,13 @@ import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
 const emit = defineEmits(['cancel'])
+
 const { meta } = useSmartsheetStoreOrThrow()
+
 const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
+
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
+
 const { isUIAllowed } = useUIPermission()
 
 const save = async () => {
@@ -45,7 +49,12 @@ const iconColor = '#1890ff'
     </h5>
     <div class="flex-grow" />
     <mdi-reload class="cursor-pointer select-none" />
-    <component :is="drawerToggleIcon" class="cursor-pointer select-none" @click="commentsDrawer = !commentsDrawer" />
+    <component
+      :is="drawerToggleIcon"
+      v-if="isUIAllowed('rowComments')"
+      class="cursor-pointer select-none"
+      @click="commentsDrawer = !commentsDrawer"
+    />>
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}

packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue

@@ -11,7 +11,10 @@ const emits = defineEmits<Emits>()
 
 const { $e } = useNuxtApp()
 
+const { isUIAllowed } = useUIPermission()
+
 const isView = ref(false)
+
 let showApiSnippet = $ref(false)
 
 const showWebhookDrawer = ref(false)
@@ -33,6 +36,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 
 <template>
   <a-menu :selected-keys="[]" class="flex-1 flex flex-col">
+    <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
       <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
         {{ $t('activity.createView') }}
       </h3>
@@ -73,7 +77,12 @@ function onOpenModal(type: ViewTypes, title = '') {
         </a-tooltip>
       </a-menu-item>
 
-    <a-menu-item v-if="!isView" key="form" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.FORM)">
+      <a-menu-item
+        v-if="!isView"
+        key="form"
+        class="group !flex !items-center !my-0 !h-[30px]"
+        @click="onOpenModal(ViewTypes.FORM)"
+      >
         <a-tooltip placement="left">
           <template #title>
             {{ $t('msg.info.addView.form') }}
@@ -90,10 +99,13 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
+    </div>
 
     <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
+
     <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
+        v-if="isUIAllowed('virtualViewsCreateOrEdit')"
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
         @click="onWebhooks"
       >

packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -25,6 +25,8 @@ const vModel = useVModel(props, 'view', emits)
 
 const { $e } = useNuxtApp()
 
+const { isUIAllowed } = useUIPermission()
+
 /** Is editing the view name enabled */
 let isEditing = $ref<boolean>(false)
 
@@ -141,7 +143,11 @@ function onStopEdit() {
 </script>
 
 <template>
-  <a-menu-item class="select-none group !flex !items-center !my-0" @dblclick.stop="onDblClick" @click.stop="onClick">
+  <a-menu-item
+    class="select-none group !flex !items-center !my-0"
+    @dblclick.stop="isUIAllowed('virtualViewsCreateOrEdit') && onDblClick"
+    @click.stop="onClick"
+  >
     <div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
       <div class="flex w-auto">
         <MdiDrag
@@ -161,7 +167,7 @@ function onStopEdit() {
 
       <div class="flex-1" />
 
-      <template v-if="!isEditing">
+      <template v-if="!isEditing && isUIAllowed('virtualViewsCreateOrEdit')">
         <div class="flex items-center gap-1">
           <a-tooltip placement="left">
             <template #title>

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -12,6 +12,8 @@ const activeView = inject(ActiveViewInj, ref())
 
 const { views, loadViews } = useViews(meta)
 
+const { isUIAllowed } = useUIPermission()
+
 const router = useRouter()
 
 const route = useRoute()
@@ -103,7 +105,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
-        <a-tooltip placement="left">
+        <a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">
           <template #title> {{ $t('objects.webhooks') }}</template>
 
           <div class="nc-sidebar-right-item hover:after:bg-gray-300">
@@ -128,7 +130,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     <div v-if="sidebarOpen" class="flex-1 flex flex-col">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
-      <a-divider class="my-2" />
+      <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" />
 
       <MenuBottom @open-modal="openModal" />
     </div>

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@@ -2,13 +2,15 @@
 import AddRow from './AddRow.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
+
+const { isUIAllowed } = useUIPermission()
 </script>
 
 <template>
   <div class="flex gap-2">
     <slot name="start" />
 
-    <LockMenu />
+    <LockMenu v-if="isUIAllowed('view-type')" />
 
     <div class="dot" />
 
@@ -16,7 +18,7 @@ import Reload from './Reload.vue'
 
     <div class="dot" />
 
-    <AddRow />
+    <AddRow v-if="isUIAllowed('xcDatatableEditable')" />
 
     <slot name="end" />
   </div>

packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue

@@ -17,12 +17,17 @@ interface ApiToken extends ApiTokenType {
 }
 
 const { $api, $e } = useNuxtApp()
+
 const { project } = $(useProject())
+
 const { copy } = useClipboard()
 
 let tokensInfo = $ref<ApiToken[] | undefined>([])
+
 let showNewTokenModal = $ref(false)
+
 let showDeleteTokenModal = $ref(false)
+
 let selectedTokenData = $ref<ApiToken>({})
 
 const loadApiTokens = async () => {
@@ -110,8 +115,8 @@ onMounted(() => {
     <div class="flex flex-col h-full">
       <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
       <div class="flex mt-6 justify-center space-x-2">
-        <a-button @click="showDeleteTokenModal = false"> Cancel </a-button>
+        <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }} </a-button>
-        <a-button type="primary" danger @click="deleteToken()"> Confirm </a-button>
+        <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }} </a-button>
       </div>
     </div>
   </a-modal>
@@ -121,7 +126,7 @@ onMounted(() => {
         <a-button size="middle" type="text" @click="loadApiTokens()">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <ReloadIcon class="text-gray-500" />
-            <div class="text-gray-500">Reload</div>
+            <div class="text-gray-500">{{ $t('general.reload') }}</div>
           </div>
         </a-button>
         <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
@@ -134,9 +139,9 @@ onMounted(() => {
     </div>
     <div v-if="tokensInfo" class="w-full flex flex-col mt-2 px-1">
       <div class="flex flex-row border-b-1 text-gray-600 text-xs pb-2 pt-2">
-        <div class="flex w-4/10 pl-2">Description</div>
+        <div class="flex w-4/10 pl-2">{{ $t('labels.description') }}</div>
-        <div class="flex w-4/10 justify-center">Token</div>
+        <div class="flex w-4/10 justify-center">{{ $t('labels.token') }}</div>
-        <div class="flex w-2/10 justify-end pr-2">Actions</div>
+        <div class="flex w-2/10 justify-end pr-2">{{ $t('labels.action') }}</div>
       </div>
       <div v-for="(item, index) in tokensInfo" :key="index" class="flex flex-col">
         <div class="flex flex-row border-b-1 items-center px-2 py-2">

packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { ActiveCellInj, CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { ActiveCellInj, CellValueInj, ColumnInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 
@@ -18,6 +18,8 @@ const row = inject(RowInj)
 
 const active = inject(ActiveCellInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const listItemsDlg = ref(false)
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
@@ -57,7 +59,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
-    <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
+    <div v-if="editEnabled" class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
       <component
         :is="addIcon"
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"

packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -17,6 +17,8 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -76,7 +78,11 @@ const unlinkRef = async (rec: Record<string, any>) => {
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
           @click="childListDlg = true"
         />
-        <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+        <MdiPlus
+          v-if="editEnabled"
+          class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          @click="listItemsDlg = true"
+        />
       </div>
     </template>
     <ListItems v-model="listItemsDlg" />

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -17,6 +17,8 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -75,7 +77,11 @@ const unlinkRef = async (rec: Record<string, any>) => {
       <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
         <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
 
-        <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+        <MdiPlus
+          v-if="editEnabled"
+          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          @click="listItemsDlg = true"
+        />
       </div>
     </template>
 

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -13,8 +13,10 @@ const emit = defineEmits(['unlink'])
 
 const { relatedTableMeta } = useLTARStoreOrThrow()
 
-const readonly = inject(ReadonlyInj, false)
+const editEnabled = inject(ReadonlyInj)
+
 const active = inject(ActiveCellInj, ref(false))
+
 const isForm = inject(IsFormInj)
 
 const expandedFormDlg = ref(false)
@@ -27,12 +29,12 @@ const expandedFormDlg = ref(false)
     @click="expandedFormDlg = true"
   >
     <span class="name">{{ value }}</span>
-    <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
+    <div v-show="active || isForm" v-if="editEnabled" class="flex align-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
     <SmartsheetExpandedForm
-      v-if="expandedFormDlg"
+      v-if="expandedFormDlg && editEnabled"
       v-model="expandedFormDlg"
       :row="{ row: item }"
       :meta="relatedTableMeta"

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -2,15 +2,19 @@
 import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
-import { ColumnInj, IsFormInj } from '~/context'
+import { ColumnInj, IsFormInj, ReadonlyInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
+
 const isForm = inject(IsFormInj, ref(false))
+
 const column = inject(ColumnInj)
 
+const editEnabled = inject(ReadonlyInj)
+
 const {
   childrenList,
   meta,
@@ -64,7 +68,7 @@ const expandedFormRow = ref()
 
         <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
-        <a-button type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
+        <a-button v-if="editEnabled" type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
             <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
             Link to '{{ meta.title }}'
@@ -90,7 +94,7 @@ const expandedFormRow = ref()
                 }}<span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
               <div class="flex-1"></div>
-              <div class="flex gap-2">
+              <div v-if="editEnabled" class="flex gap-2">
                 <MdiLinkVariantRemove
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="unlinkRow(row)"

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -24,6 +24,8 @@ export function useViewColumns(
 
   const { $api } = useNuxtApp()
 
+  const { isUIAllowed } = useUIPermission()
+
   const loadViewColumns = async () => {
     if (!meta || !view) return
 
@@ -88,11 +90,13 @@ export function useViewColumns(
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
+    if (isUIAllowed('fieldsSync')) {
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
       } else if (view?.value?.id) {
         if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view.value.id, field)) as any
       }
+    }
 
     reloadData?.()
   }

packages/nc-gui-v2/composables/useViewSorts.ts

@@ -10,18 +10,23 @@ export function useViewSorts(
 
   const { $api } = useNuxtApp()
 
+  const { isUIAllowed } = useUIPermission()
+
   const loadSorts = async () => {
     if (!view?.value) return
     sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
   }
 
   const saveOrUpdate = async (sort: SortType, i: number) => {
-    if (!sorts?.value) return
+    // TODO:
+    // if (!this.shared && this._isUIAllowed('sortSync')) {
+    if (isUIAllowed('sortSync')) {
       if (sort.id) {
         await $api.dbTableSort.update(sort.id, sort)
       } else {
         sorts.value[i] = (await $api.dbTableSort.create(view?.value?.id as string, sort)) as any
       }
+    }
     reloadData?.()
   }
   const addSort = () => {
@@ -31,11 +36,13 @@ export function useViewSorts(
   }
 
   const deleteSort = async (sort: SortType, i: number) => {
+    // TOOD:
     // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
-    if (sort.id) {
+    if (isUIAllowed('sortSync') && sort.id) {
       await $api.dbTableSort.delete(sort.id)
-    }
+    } else {
       sorts.value.splice(i, 1)
     }
+  }
   return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
 }

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -30,7 +30,7 @@ onKeyStroke(
 
 clearTabs()
 
-if (!route.params.type) {
+if (!route.params.type && isUIAllowed('teamAndAuth')) {
   addTab({ type: TabType.AUTH, title: 'Team & Auth' })
 }
 
@@ -140,8 +140,8 @@ await loadTables()
 
                   <a-menu-item key="teamAndAuth">
                     <div
-                      v-if="isUIAllowed('settings')"
+                      v-if="isUIAllowed('teamAndAuth')"
-                      v-t="['c:navdraw:project-settings']"
+                      v-t="['c:navdraw:team-and-auth']"
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
@@ -152,8 +152,8 @@ await loadTables()
 
                   <a-menu-item key="appStore">
                     <div
-                      v-if="isUIAllowed('settings')"
+                      v-if="isUIAllowed('appStore')"
-                      v-t="['c:navdraw:project-settings']"
+                      v-t="['c:navdraw:app-store']"
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'appStore')"
                     >
@@ -164,8 +164,8 @@ await loadTables()
 
                   <a-menu-item key="metaData">
                     <div
-                      v-if="isUIAllowed('settings')"
+                      v-if="isUIAllowed('projectMetadata')"
-                      v-t="['c:navdraw:project-settings']"
+                      v-t="['c:navdraw:project-metadata']"
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'metaData')"
                     >
@@ -176,8 +176,8 @@ await loadTables()
 
                   <a-menu-item key="audit">
                     <div
-                      v-if="isUIAllowed('settings')"
+                      v-if="isUIAllowed('audit')"
-                      v-t="['c:navdraw:project-settings']"
+                      v-t="['c:navdraw:audit']"
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'audit')"
                     >
@@ -188,7 +188,7 @@ await loadTables()
 
                   <a-menu-divider />
 
-                  <a-sub-menu key="preview-as">
+                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
                     <template #title>
                       <div class="nc-project-menu-item group">
                         <MdiContentCopy class="group-hover:text-pink-500 nc-project-preview" />

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@@ -57,7 +57,7 @@ const icon = (tab: TabItem) => {
           </a-tab-pane>
 
           <template #leftExtra>
-            <a-menu v-model:selectedKeys="currentMenu" class="border-0" mode="horizontal">
+            <a-menu v-if="isUIAllowed('addOrImport')" v-model:selectedKeys="currentMenu" class="border-0" mode="horizontal">
               <a-sub-menu key="addORImport">
                 <template #title>
                   <div class="text-sm flex items-center gap-2 pt-[8px] pb-3">

packages/nc-gui-v2/pages/index/index.vue

@@ -15,6 +15,8 @@ const { $e } = useNuxtApp()
 
 const { api, isLoading } = useApi()
 
+const { isUIAllowed } = useUIPermission()
+
 useSidebar({ hasSidebar: true, isOpen: true })
 
 const filterQuery = ref('')
@@ -34,6 +36,7 @@ const filteredProjects = computed(
 )
 
 const deleteProject = (project: ProjectType) => {
+  $e('c:project:delete')
   Modal.confirm({
     title: `Do you want to delete '${project.title}' project?`,
     okText: 'Yes',
@@ -41,8 +44,8 @@ const deleteProject = (project: ProjectType) => {
     cancelText: 'No',
     async onOk() {
       try {
-        $e('c:project:delete')
         await api.project.delete(project.id as string)
+        $e('a:project:delete')
         return projects.value?.splice(projects.value.indexOf(project), 1)
       } catch (e: any) {
         return message.error(await extractSdkResponseErrorMsg(e))
@@ -78,7 +81,7 @@ onMounted(() => {
         ></a-input-search>
         <div class="flex-grow"></div>
 
-        <a-dropdown @click.stop>
+        <a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop>
           <a-button class="nc-new-project-menu !shadow">
             <div class="flex align-center">
               {{ $t('title.newProj') }}