Merge pull request #7908 from nocodb/pre-release

0.204.7 Pre-release

packages/nc-gui/assets/style.scss

@@ -65,7 +65,7 @@ main {
 }
 
 .nc-scrollbar-md {
-  overflow-y: scroll;
+  overflow-y: auto !important;
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
@@ -89,7 +89,7 @@ main {
 }
 
 .nc-scrollbar-lg {
-  overflow-y: scroll;
+  overflow-y: auto !important;
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
@@ -113,7 +113,7 @@ main {
 }
 
 .nc-scrollbar-x-md {
-  overflow-x: scroll;
+  overflow-x: auto !important;
   scrollbar-width: thin !important;
 
 
@@ -141,7 +141,7 @@ main {
 }
 
 .nc-scrollbar-dark-md {
-  overflow-y: scroll;
+  overflow-y: auto !important;
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
@@ -174,7 +174,7 @@ main {
 }
 
 .nc-scrollbar-x-md-dark {
-  overflow-x: scroll;
+  overflow-x: auto !important;
   scrollbar-width: thin !important;
 
 
@@ -204,7 +204,7 @@ main {
 }
 
 .nc-scrollbar-x-lg {
-  overflow-x: scroll;
+  overflow-x: auto !important;
 
   &::-webkit-scrollbar {
     width: 8px;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2 px-5">
+  <div class="h-full overflow-y-auto scrollbar-thin-dull pt-2 px-5">
     <div class="text-xl mt-4 mb-8 text-left font-weight-bold">{{ $t('title.appStore') }}</div>
     <div>
       <LazyDashboardSettingsAppStore />

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

@@ -36,7 +36,7 @@ loadLicense()
 </script>
 
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull">
+  <div class="h-full overflow-y-auto scrollbar-thin-dull">
     <!--    <div class="text-xl mt-4 mb-8 text-center font-weight-bold">License</div>-->
     <!--    <div class="mx-auto w-150">-->
     <!--      <div>-->

packages/nc-gui/components/cell/attachment/utils.ts

@@ -76,7 +76,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         // Maximum Number of Attachments per cell
         maxNumberOfAttachments: Math.max(1, +appInfo.value.ncMaxAttachmentsAllowed || 50) || 50,
         // Maximum File Size per file
-        maxAttachmentSize: Math.max(1, +appInfo.value.ncMaxAttachmentsAllowed || 20) || 20,
+        maxAttachmentSize: Math.max(1, +appInfo.value.ncAttachmentFieldSize || 20) || 20,
         supportedAttachmentMimeTypes: ['*'],
       }),
     }

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

@@ -527,7 +527,7 @@ const projectDelete = () => {
                     v-if="base?.sources?.[0]?.enabled"
                     key="erd"
                     data-testid="nc-sidebar-base-relations"
-                    @click="openErdView(base?.sources?.[0]!)"
+                    @click="openErdView(base?.sources?.[0])"
                   >
                     <div v-e="['c:base:erd']" class="flex gap-2 items-center">
                       <GeneralIcon icon="erd" />
@@ -766,7 +766,7 @@ const projectDelete = () => {
             </div>
           </NcMenuItem>
           <NcDivider />
-          <NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete">
+          <NcMenuItem v-if="isUIAllowed('tableDelete')" class="!hover:bg-red-50" @click="tableDelete">
             <div class="nc-base-option-item flex gap-2 items-center text-red-600">
               <GeneralIcon icon="delete" />
               {{ $t('general.delete') }}

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

@@ -109,7 +109,7 @@ const onChange = (value: string) => {
   @apply !rounded-xl py-1.5;
 
   .rc-virtual-list-holder {
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
     font-weight: 500;
 

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

@@ -234,7 +234,7 @@ const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role
         <div class="flex justify-between gap-3 w-full">
           <div
             ref="divRef"
-            class="flex items-center border-1 gap-1 w-full overflow-x-scroll nc-scrollbar-x-md items-center h-10 rounded-lg !min-w-96"
+            class="flex items-center border-1 gap-1 w-full overflow-x-auto nc-scrollbar-x-md items-center h-10 rounded-lg !min-w-96"
             tabindex="0"
             :class="{
               'border-primary/100': isDivFocused,

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

@@ -513,7 +513,10 @@ const getRowId = (row: RowType) => {
                     </div>
                   </a-layout-header>
 
-                  <a-layout-content class="overflow-y-hidden mt-1" style="max-height: calc(100% - 11rem)">
+                  <a-layout-content
+                    class="overflow-y-hidden mt-1"
+                    :style="{ maxHeight: isUIAllowed('dataInsert') ? 'calc(100% - 11rem)' : 'calc(100% - 8rem)' }"
+                  >
                     <div :ref="kanbanListRef" class="nc-kanban-list h-full nc-scrollbar-dark-md" :data-stack-title="stack.title">
                       <!-- Draggable Record Card -->
                       <Draggable
@@ -665,6 +668,7 @@ const getRowId = (row: RowType) => {
                       </div>
 
                       <div
+                        v-if="isUIAllowed('dataInsert')"
                         class="flex flex-row w-full mt-3 justify-between items-center cursor-pointer bg-white px-4 py-2 rounded-lg border-gray-100 border-1 shadow-sm shadow-gray-100"
                         @click="
                           () => {

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

@@ -30,7 +30,7 @@ vModel.value.meta = {
     // Maximum Number of Attachments per cell
     maxNumberOfAttachments: Math.max(1, +appInfo.value.ncMaxAttachmentsAllowed || 50) || 50,
     // Maximum File Size per file
-    maxAttachmentSize: Math.max(1, +appInfo.value.ncMaxAttachmentsAllowed || 20) || 20,
+    maxAttachmentSize: Math.max(1, +appInfo.value.ncAttachmentFieldSize || 20) || 20,
     // allow all mime types by default
     supportedAttachmentMimeTypes: ['*'],
   }),

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

@@ -11,6 +11,8 @@ interface Option {
   id?: string
   fk_colum_id?: string
   order?: number
+  status?: 'remove'
+  index?: number
 }
 
 const props = defineProps<{
@@ -30,7 +32,7 @@ const { optionsMagic: _optionsMagic } = useNocoEe()
 
 const optionsWrapperDomRef = ref<HTMLElement>()
 
-const options = ref<(Option & { status?: 'remove'; index?: number })[]>([])
+const options = ref<Option[]>([])
 
 const isAddingOption = ref(false)
 
@@ -39,15 +41,14 @@ const OPTIONS_PAGE_COUNT = 20
 const loadedOptionAnchor = ref(OPTIONS_PAGE_COUNT)
 const isReverseLazyLoad = ref(false)
 
-const renderedOptions = ref<(Option & { status?: 'remove'; index?: number })[]>([])
-const savedDefaultOption = ref<Option | null>(null)
-const savedCdf = ref<string | null>(null)
+const renderedOptions = ref<Option[]>([])
+const savedDefaultOption = ref<Option[]>([])
 
 const colorMenus = ref<any>({})
 
 const colors = ref(enumColor.light)
 
-const defaultOption = ref()
+const defaultOption = ref<Option[]>([])
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
@@ -115,15 +116,15 @@ onMounted(() => {
   }
 
   if (vModel.value.cdf && typeof vModel.value.cdf === 'string') {
-    const fndDefaultOption = options.value.find((el) => el.title === vModel.value.cdf)
-    if (!fndDefaultOption) {
+    const fndDefaultOption = options.value.filter((el) => el.title === vModel.value.cdf)
+    if (!fndDefaultOption.length) {
       vModel.value.cdf = vModel.value.cdf.replace(/^'/, '').replace(/'$/, '')
     }
   }
 
-  const fndDefaultOption = options.value.find((el) => el.title === vModel.value.cdf)
-  if (fndDefaultOption) {
-    defaultOption.value = fndDefaultOption
+  const fndDefaultOption = options.value.filter((el) => el.title === vModel.value.cdf)
+  if (fndDefaultOption.length) {
+    defaultOption.value = vModel.value.uidt === UITypes.SingleSelect ? [fndDefaultOption[0]] : fndDefaultOption
   }
 })
 
@@ -206,17 +207,32 @@ const removeRenderedOption = (index: number) => {
 
   const optionId = renderedOptions.value[index]?.id
 
-  if (optionId === defaultOption.value?.id) {
-    savedDefaultOption.value = { ...defaultOption.value }
-    savedCdf.value = vModel.value.cdf
-    defaultOption.value = null
-    vModel.value.cdf = null
+  const removedDefaultOption = defaultOption.value.find((o) => o.id === optionId)
+
+  if (removedDefaultOption) {
+    if (vModel.value.uidt === UITypes.SingleSelect) {
+      savedDefaultOption.value = [removedDefaultOption]
+      defaultOption.value = []
+      vModel.value.cdf = null
+    } else {
+      savedDefaultOption.value = [...savedDefaultOption.value, removedDefaultOption]
+      defaultOption.value = defaultOption.value.filter((o) => o.id !== optionId)
+      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
+    }
   }
 }
 
-const optionChanged = (changedId: string) => {
-  if (changedId && changedId === defaultOption.value?.id) {
-    vModel.value.cdf = defaultOption.value.title
+const optionChanged = (changedElement: Option) => {
+  const changedDefaultOptionIndex = defaultOption.value.findIndex((o) => o.id === changedElement.id)
+
+  if (changedDefaultOptionIndex !== -1) {
+    if (vModel.value.uidt === UITypes.SingleSelect) {
+      defaultOption.value[changedDefaultOptionIndex].title = changedElement.title
+      vModel.value.cdf = changedElement.title
+    } else {
+      defaultOption.value[changedDefaultOptionIndex].title = changedElement.title
+      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
+    }
   }
   syncOptions()
 }
@@ -235,11 +251,18 @@ const undoRemoveRenderedOption = (index: number) => {
 
   const optionId = renderedOptions.value[index]?.id
 
-  if (optionId === savedDefaultOption.value?.id) {
-    defaultOption.value = { ...savedDefaultOption.value }
-    vModel.value.cdf = savedCdf.value
-    savedDefaultOption.value = null
-    savedCdf.value = null
+  const addedDefaultOption = savedDefaultOption.value.find((o) => o.id === optionId)
+
+  if (addedDefaultOption) {
+    if (vModel.value.uidt === UITypes.SingleSelect) {
+      defaultOption.value = [addedDefaultOption]
+      vModel.value.cdf = addedDefaultOption.title
+      savedDefaultOption.value = []
+    } else {
+      defaultOption.value = [...defaultOption.value, addedDefaultOption]
+      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
+      savedDefaultOption.value = savedDefaultOption.value.filter((o) => o.id !== optionId)
+    }
   }
 }
 
@@ -251,12 +274,26 @@ const undoRemoveRenderedOption = (index: number) => {
 // })
 
 // Removes the Select Option from cdf if the option is removed
-watch(vModel.value, (next) => {
+watch(vModel, (next) => {
   const cdfs = (next.cdf ?? '').toString().split(',')
-  const values = (next.colOptions.options ?? []).map((col) => {
-    return col.title.replace(/^'/, '').replace(/'$/, '')
-  })
-  const newCdf = cdfs.filter((c: string) => values.includes(c)).join(',')
+
+  const valuesMap = (next.colOptions.options ?? []).reduce((acc, c) => {
+    acc[c.title.replace(/^'|'$/g, '')] = c
+    return acc
+  }, {})
+
+  defaultOption.value = []
+
+  const newCdf = cdfs
+    .filter((c: string) => {
+      if (valuesMap[c]) {
+        defaultOption.value.push(valuesMap[c])
+        return true
+      }
+      return false
+    })
+    .join(',')
+
   next.cdf = newCdf.length === 0 ? null : newCdf
 })
 
@@ -365,7 +402,7 @@ const loadListData = async ($state: any) => {
                 :data-testid="`select-column-option-input-${index}`"
                 :disabled="element.status === 'remove'"
                 @keydown.enter.prevent="element.title?.trim() && addNewOption()"
-                @change="optionChanged(element.id)"
+                @change="optionChanged(element)"
               />
             </div>
 

packages/nc-gui/components/smartsheet/details/Api.vue

@@ -82,11 +82,7 @@ const selectedClient = ref<string | undefined>(langs[0].clients && langs[0].clie
 const selectedLangName = ref(langs[0].name)
 
 const apiUrl = computed(
-  () =>
-    new URL(
-      `/api/v1/db/data/noco/${base.value?.id}/${meta.value?.id}/views/${view.value?.id}`,
-      (appInfo.value && appInfo.value.ncSiteUrl) || '/',
-    ).href,
+  () => new URL(`/api/v2/tables/${meta.value?.id}/records`, (appInfo.value && appInfo.value.ncSiteUrl) || '/').href,
 )
 
 const snippet = computed(
@@ -95,12 +91,15 @@ const snippet = computed(
       method: 'GET',
       headers: [{ name: 'xc-auth', value: token.value, comment: 'JWT Auth token' }],
       url: apiUrl.value,
-      queryString: Object.entries(queryParams.value || {}).map(([name, value]) => {
-        return {
-          name,
-          value: String(value),
-        }
-      }),
+      queryString: [
+        ...Object.entries(queryParams.value || {}).map(([name, value]) => {
+          return {
+            name,
+            value: String(value),
+          }
+        }),
+        { name: 'viewId', value: view.value?.id },
+      ],
     }),
 )
 

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -271,29 +271,24 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
   const col = fields.value.find((col) => compareCols(col, state))
   if (!col) return
 
-  const diffs = diff(col, state) as Partial<TableExplorerColumn>
-
-  // hack to prevent update status `Updated Field` when clicking on field first time
-  let isUpdated = true
-
-  if (
-    [UITypes.SingleSelect, UITypes.MultiSelect].includes(col.uidt) &&
-    Object.keys(diffs).length === 1 &&
-    diffs?.colOptions?.options &&
-    (diffs?.colOptions?.options?.length === 0 ||
-      (diffs?.colOptions?.options[0]?.index !== undefined && Object.keys(diffs?.colOptions?.options[0] || {}).length === 1))
-  ) {
-    isUpdated = false
-  }
-
-  if (!isUpdated) {
-    let field = fields.value.find((field) => compareCols(field, state))
-    if (field) {
-      field = state
+  if (state.colOptions && [UITypes.SingleSelect, UITypes.MultiSelect].includes(col.uidt)) {
+    state = {
+      ...state,
+      colOptions: {
+        ...(state.colOptions || {}),
+        options: ((state.colOptions as SelectOptionsType)?.options || []).map((option) => {
+          if (option?.index !== undefined) {
+            delete option.index
+          }
+          return option
+        }),
+      },
     }
   }
 
-  if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs) || !isUpdated) {
+  const diffs = diff(col, state) as Partial<TableExplorerColumn>
+
+  if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs)) {
     ops.value = ops.value.filter((op) => op.op === 'add' || !compareCols(op.column, state))
   } else {
     const field = ops.value.find((op) => compareCols(op.column, state))