Merge pull request #7855 from nocodb/nc-fix/browser-console-warnings

Nc fix/browser console warnings

packages/nc-gui/components/account/Profile.vue

@@ -94,7 +94,7 @@ const onValidate = async (_: any, valid: boolean) => {
             <a-input
               v-model:value="email"
               class="w-full !rounded-md !py-1.5"
-              :placeholder="$t('general.email')"
+              :placeholder="$t('labels.email')"
               disabled
               data-testid="nc-account-settings-email-input"
             />

packages/nc-gui/components/account/Token.vue

@@ -312,17 +312,17 @@ const handleCancel = () => {
               class="flex pl-5 py-3 justify-between token items-center border-l-1 border-r-1 border-b-1"
             >
               <span class="text-black font-bold text-3.5 text-start w-2/9">
-                <GeneralTruncateText placement="top" length="20">
+                <GeneralTruncateText placement="top" :length="20">
                   {{ el.description }}
                 </GeneralTruncateText>
               </span>
               <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
-                <GeneralTruncateText placement="top" length="20">
+                <GeneralTruncateText placement="top" :length="20">
                   {{ el.created_by }}
                 </GeneralTruncateText>
               </span>
               <span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
-                <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
+                <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" :length="29">
                   {{ el.token }}
                 </GeneralTruncateText>
                 <span v-else>************************************</span>

packages/nc-gui/components/account/UserList.vue

@@ -239,11 +239,11 @@ const openDeleteModal = (user: UserType) => {
                 <template #title>
                   {{ el.email }}
                 </template>
-                <GeneralTruncateText length="29">
+                <GeneralTruncateText :length="29">
                   {{ el.display_name }}
                 </GeneralTruncateText>
               </NcTooltip>
-              <GeneralTruncateText v-else length="29">
+              <GeneralTruncateText v-else :length="29">
                 {{ el.email }}
               </GeneralTruncateText>
             </div>

packages/nc-gui/components/account/UserMenu.vue

@@ -4,7 +4,7 @@ import type { UsersSortType } from '~/lib'
 
 const { field, direction, handleUserSort } = defineProps<{
   field: UsersSortType['field']
-  direction: UsersSortType['direction']
+  direction?: UsersSortType['direction']
   handleUserSort: Function
 }>()
 

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

@@ -37,7 +37,7 @@ const ratingMeta = computed(() => {
 })
 
 const vModel = computed({
-  get: () => modelValue ?? NaN,
+  get: () => Number(modelValue),
   set: (val) => emits('update:modelValue', val),
 })
 

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

@@ -2,10 +2,15 @@
 import type { BaseType } from 'nocodb-sdk'
 import { ProjectInj, ProjectRoleInj } from '#imports'
 
-const props = defineProps<{
-  baseRole: string | string[]
-  base: BaseType
-}>()
+const props = withDefaults(
+  defineProps<{
+    baseRole: string | string[]
+    base: BaseType
+  }>(),
+  {
+    baseRole: '',
+  },
+)
 
 const baseRole = toRef(props, 'baseRole')
 const base = toRef(props, 'base')

packages/nc-gui/components/monaco/Editor.vue

@@ -16,26 +16,29 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
   lang: 'json',
   validate: true,
   disableDeepCompare: false,
   autoFocus: true,
 })
 
-const emits = defineEmits(['update:modelValue'])
+const { modelValue } = toRefs(props)
+
+const { hideMinimap, lang, validate, disableDeepCompare, readOnly, autoFocus } = props
 
-const { hideMinimap, lang, validate, disableDeepCompare, modelValue, readOnly, autoFocus } = props
+const emits = defineEmits(['update:modelValue'])
 
 const vModel = computed<string>({
   get: () => {
-    if (typeof modelValue === 'object') {
-      return JSON.stringify(modelValue, null, 2)
+    if (typeof modelValue.value === 'object') {
+      return JSON.stringify(modelValue.value, null, 2)
     } else {
-      return modelValue
+      return modelValue.value ?? ''
     }
   },
   set: (newVal: string | Record<string, any>) => {
-    if (typeof modelValue === 'object') {
+    if (typeof modelValue.value === 'object') {
       try {
         emits('update:modelValue', typeof newVal === 'object' ? newVal : JSON.parse(newVal))
       } catch (e) {

packages/nc-gui/components/nc/Switch.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-const props = defineProps<{ checked: boolean; disabled?: boolean }>()
+const props = withDefaults(defineProps<{ checked: boolean; disabled?: boolean; size?: 'default' | 'small' }>(), {
+  size: 'small',
+})
 
 const emit = defineEmits(['change', 'update:checked'])
 
@@ -11,7 +13,8 @@ const onChange = (e: boolean) => {
 </script>
 
 <template>
-  <a-switch v-model:checked="checked" :disabled="props.disabled" class="nc-switch" size="small" @change="onChange"> </a-switch>
+  <a-switch v-model:checked="checked" :disabled="disabled" class="nc-switch" v-bind="$attrs" :size="size" @change="onChange">
+  </a-switch>
   <span v-if="$slots.default" class="cursor-pointer pl-2" @click="checked = !checked">
     <slot />
   </span>

packages/nc-gui/components/project/AccessSettings.vue

@@ -172,7 +172,7 @@ watch(isInviteModalVisible, () => {
         v-else-if="!filteredCollaborators?.length"
         class="nc-collaborators-list w-full h-full flex flex-col items-center justify-center mt-36"
       >
-        <Empty description="$t('title.noMembersFound')" />
+        <a-empty description="$t('title.noMembersFound')" />
       </div>
       <div v-else class="nc-collaborators-list mt-6 h-full">
         <div class="flex flex-col rounded-lg overflow-hidden border-1 max-w-350 max-h-[calc(100%-8rem)]">
@@ -224,7 +224,7 @@ watch(isInviteModalVisible, () => {
                         : null
                     "
                     :description="false"
-                    :on-role-change="(role: ProjectRoles) => updateCollaborator(collab, role)"
+                    :on-role-change="(role) => updateCollaborator(collab, role as ProjectRoles)"
                   />
                 </template>
                 <template v-else>

packages/nc-gui/components/project/ShareBaseDlg.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { RoleLabels } from 'nocodb-sdk'
 import { OrderedProjectRoles, ProjectRoles } from 'nocodb-sdk'
 import type { User } from '#imports'
 const props = defineProps<{
   modelValue: boolean
-  baseId: string
+  baseId?: string
 }>()
 const emit = defineEmits(['update:modelValue'])
 
@@ -211,6 +212,8 @@ const inviteProjectCollaborator = async () => {
     singleEmailValue.value = ''
   }
 }
+
+const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role as ProjectRoles)
 </script>
 
 <template>
@@ -269,7 +272,7 @@ const inviteProjectCollaborator = async () => {
             class="nc-invite-role-selector"
             :role="inviteData.roles"
             :roles="allowedRoles"
-            :on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
+            :on-role-change="onRoleChange"
             :description="false"
           />
         </div>

packages/nc-gui/components/roles/Badge.vue

@@ -8,7 +8,7 @@ const props = withDefaults(
     clickable?: boolean
     inherit?: boolean
     border?: boolean
-    size?: 'sm' | 'md'
+    size?: 'sm' | 'md' | 'lg'
   }>(),
   {
     clickable: false,

packages/nc-gui/components/roles/Selector.vue

@@ -11,7 +11,7 @@ const props = withDefaults(
     description?: boolean
     inherit?: string
     onRoleChange: (role: keyof typeof RoleLabels) => void
-    size: 'sm' | 'md' | 'lg'
+    size?: 'sm' | 'md' | 'lg'
   }>(),
   {
     description: true,
@@ -38,7 +38,7 @@ function onChangeRole(val: SelectValue) {
   <div ref="dropdownRef" size="lg" class="nc-roles-selector relative" @click="isDropdownOpen = !isDropdownOpen">
     <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" :size="sizeRef" clickable />
     <a-select
-      v-model:value="roleRef"
+      :value="roleRef"
       :open="isDropdownOpen"
       :dropdown-match-select-width="false"
       dropdown-class-name="!rounded-lg !h-fit max-w-[350px] nc-role-selector-dropdown"

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

@@ -456,7 +456,7 @@ async function submitCallback() {
 }
 
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
-  if (col.id) {
+  if (col.id && isEditable) {
     try {
       await $api.dbView.formColumnUpdate(col.id, col)
     } catch (e: any) {

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

@@ -372,7 +372,7 @@ watch(
 
   <Suspense>
     <LazySmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
+      v-if="expandedFormOnRowIdDlg && meta?.id"
       v-model="expandedFormOnRowIdDlg"
       :row="{ row: {}, oldRow: {}, rowMeta: {} }"
       :meta="meta"

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

@@ -753,7 +753,7 @@ const getRowId = (row: RowType) => {
 
   <Suspense>
     <LazySmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
+      v-if="expandedFormOnRowIdDlg && meta?.id"
       :key="route.query.rowId"
       v-model="expandedFormOnRowIdDlg"
       :row="{ row: {}, oldRow: {}, rowMeta: {} }"

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

@@ -245,7 +245,7 @@ const count = computed(() => paginationData.value.totalRows)
   </Suspense>
   <Suspense v-if="!isPublic">
     <LazySmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
+      v-if="expandedFormOnRowIdDlg && meta?.id"
       v-model="expandedFormOnRowIdDlg"
       :row="{ row: {}, oldRow: {}, rowMeta: {} }"
       :meta="meta"

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -331,7 +331,7 @@ const headerText = computed(() => {
 
   <Suspense>
     <LazySmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
+      v-if="expandedFormOnRowIdDlg && meta?.id"
       v-model="expandedFormOnRowIdDlg"
       close-after-save
       :meta="meta"

packages/nc-gui/components/smartsheet/column/AttachmentOptions.vue

@@ -82,7 +82,7 @@ watch(searchValue, (value) => {
 </script>
 
 <template>
-  <a-row class="my-2" gutter="8">
+  <a-row class="my-2" :gutter="8">
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.maxNumberOfAttachments']" label="Max Number of Attachments">
         <a-input-number v-model:value="vModel.meta.maxNumberOfAttachments" :min="1" class="!w-full nc-attachment-max-count" />

packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue

@@ -77,7 +77,7 @@ currencyLocales().then((locales) => {
 </script>
 
 <template>
-  <a-row gutter="8">
+  <a-row :gutter="8">
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.currency_locale']" :label="$t('title.currencyLocale')">
         <a-select

packages/nc-gui/components/smartsheet/column/LinkOptions.vue

@@ -49,7 +49,7 @@ vModel.value.meta = {
 </script>
 
 <template>
-  <a-row class="my-2" gutter="8">
+  <a-row class="my-2" :gutter="8">
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.singular']" :label="$t('labels.singularLabel')">
         <a-input

packages/nc-gui/components/smartsheet/column/LongTextOptions.vue

@@ -12,7 +12,7 @@ const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
 const richMode = computed({
-  get: () => vModel.value.meta?.richMode,
+  get: () => !!vModel.value.meta?.richMode,
   set: (value) => {
     if (!vModel.value.meta) vModel.value.meta = {}
 
@@ -29,7 +29,7 @@ watch(richMode, () => {
   <div class="flex flex-col mt-2 gap-2">
     <a-form-item>
       <div class="flex flex-row items-center">
-        <NcSwitch v-model:checked="richMode" :name="$t('labels.enableRichText')" size="small">
+        <NcSwitch v-model:checked="richMode">
           <div class="text-xs">{{ $t('labels.enableRichText') }}</div>
         </NcSwitch>
       </div>

packages/nc-gui/components/smartsheet/column/PercentOptions.vue

@@ -3,7 +3,7 @@ import { useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
-  isEdit: boolean
+  isEdit?: boolean
 }>()
 
 const emit = defineEmits(['update:value'])

packages/nc-gui/components/smartsheet/column/PgBinaryOptions.vue

@@ -21,7 +21,7 @@ vModel.value.meta = {
 </script>
 
 <template>
-  <a-row class="my-2" gutter="8">
+  <a-row class="my-2" :gutter="8">
     <a-col :span="24">
       <a-form-item v-bind="validateInfos['meta.format']" :label="$t('labels.binaryEncodingFormat')">
         <a-select

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

@@ -267,7 +267,7 @@ const goToPreviousRow = () => {
       />
     </Suspense>
     <SmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
+      v-if="expandedFormOnRowIdDlg && meta?.id"
       v-model="expandedFormOnRowIdDlg"
       :row="{ row: {}, oldRow: {}, rowMeta: {} }"
       :meta="meta"

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

@@ -470,7 +470,7 @@ useMenuCloseOnEsc(open)
           <NcButton
             v-if="!filterQuery"
             class="nc-fields-show-all-fields !text-gray-500 !w-1/2"
-            size="sm"
+            size="small"
             type="ghost"
             @click="showAllColumns = !showAllColumns"
           >
@@ -479,7 +479,7 @@ useMenuCloseOnEsc(open)
           <NcButton
             v-if="!isPublic && !filterQuery"
             class="nc-fields-show-system-fields !text-gray-500 !w-1/2"
-            size="sm"
+            size="small"
             type="ghost"
             @click="showSystemField = !showSystemField"
           >

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

@@ -99,7 +99,7 @@ useMenuCloseOnEsc(open)
       >
         <div class="flex flex-col w-full text-sm" @click.stop>
           <div class="text-xs text-gray-500 px-3 pt-2 pb-1 select-none">{{ $t('objects.rowHeight') }}</div>
-          <div v-for="(item, i) of rowHeightOptions" class="nc-row-height-option" @click="updateRowHeight(i)">
+          <div v-for="(item, i) of rowHeightOptions" :key="i" class="nc-row-height-option" @click="updateRowHeight(i)">
             <div class="flex items-center gap-2">
               <GeneralIcon :icon="item.icon" class="nc-row-height-icon" />
               {{ $t(`objects.heightClass.${item.heightClass}`) }}

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

@@ -3,11 +3,16 @@ import type { TableType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import { LockType } from '~/lib'
 
-const props = defineProps<{
-  view: ViewType
-  table: TableType
-  inSidebar: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    view: ViewType
+    table: TableType
+    inSidebar?: boolean
+  }>(),
+  {
+    inSidebar: false,
+  },
+)
 
 const emits = defineEmits(['rename', 'closeModal', 'delete'])
 

packages/nc-gui/components/workspace/CollaboratorsList.vue

@@ -8,7 +8,7 @@ const workspaceStore = useWorkspace()
 
 const { removeCollaborator, updateCollaborator: _updateCollaborator } = workspaceStore
 
-const { collaborators } = storeToRefs(workspaceStore)
+const { collaborators, workspaceRole } = storeToRefs(workspaceStore)
 
 const { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortedData } = useUserSorts('Workspace')
 
@@ -118,7 +118,7 @@ onMounted(async () => {
                     :roles="accessibleRoles"
                     :description="false"
                     class="cursor-pointer"
-                    :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
+                    :on-role-change="(role) => updateCollaborator(collab, role)"
                   />
                 </div>
               </template>

packages/nc-gui/components/workspace/InviteSection.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
+import type { RoleLabels } from 'nocodb-sdk'
 import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useWorkspace } from '#imports'
 import { validateEmail } from '~/utils/validation'
@@ -192,6 +193,8 @@ const onPaste = (e: ClipboardEvent) => {
   })
   inviteData.email = ''
 }
+
+const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role as WorkspaceUserRoles)
 </script>
 
 <template>
@@ -242,7 +245,7 @@ const onPaste = (e: ClipboardEvent) => {
         class="px-1 min-w-[152px] nc-invite-role-selector"
         :role="inviteData.roles"
         :roles="allowedRoles"
-        :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
+        :on-role-change="onRoleChange"
         :description="true"
       />
 

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -304,7 +304,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   }
 
   const loadRow = async (rowId?: string, onlyVirtual = false) => {
-    if (isPublic.value) return
+    if (isPublic.value || !meta.value?.id) return
     let record = await $api.dbTableRow.read(
       NOCO,
       // todo: base_id missing on view type

packages/nc-gui/pages/account/index/[page].vue

@@ -3,9 +3,10 @@ const { appInfo } = useGlobal()
 </script>
 
 <template>
-  <AccountUserManagement v-if="$route.params.page === 'users'" />
-  <AccountToken v-else-if="$route.params.page === 'tokens'" />
-  <AccountProfile v-else-if="$route.params.page === 'profile'" />
-  <AccountAppStore v-else-if="$route.params.page === 'apps' && !appInfo.isCloud" />
-  <span v-else></span>
+  <div>
+    <AccountToken v-if="$route.params.page === 'tokens'" />
+    <AccountProfile v-else-if="$route.params.page === 'profile'" />
+    <AccountAppStore v-else-if="$route.params.page === 'apps' && !appInfo.isCloud" />
+    <span v-else></span>
+  </div>
 </template>

packages/nc-gui/store/workspace.ts

@@ -48,6 +48,8 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     return { id: 'default', title: 'default', meta: {}, roles: '' } as any
   })
 
+  const workspaceRole = computed(() => activeWorkspace.value?.roles)
+
   const activeWorkspaceMeta = computed<Record<string, any>>(() => {
     const defaultMeta = {}
     if (!activeWorkspace.value) return defaultMeta
@@ -253,6 +255,7 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     isWorkspaceSettingsPageOpened,
     workspaceUserCount,
     getPlanLimit,
+    workspaceRole,
   }
 })