Merge pull request #6753 from nocodb/develop

.github/workflows/publish-api-docs.yml

@@ -35,7 +35,7 @@ jobs:
         env:
           API_TOKEN_GITHUB: ${{ secrets.GH_TOKEN }}
         with:
-          source_file: 'packages/nocodb/src/schema/swagger.json'
+          source_file: 'packages/nocodb/src/schema/swagger-v2.json'
           destination_repo: 'nocodb/noco-apis-doc'
           destination_folder: 'data-apis-v2'
           user_email: 'oof1lab@gmail.com'

packages/nc-gui/assets/style/fonts.css

@@ -2,6 +2,7 @@
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Manrope';
+  font-weight: 450 900;
   src: url('./manrope/Manrope-VariableFont_wght.ttf') format('truetype')
 }
 

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

@@ -6,6 +6,7 @@ import {
   IsFormInj,
   JsonExpandInj,
   ReadonlyInj,
+  RowHeightInj,
   computed,
   inject,
   ref,
@@ -46,6 +47,8 @@ const _isExpanded = inject(JsonExpandInj, ref(false))
 
 const isExpanded = ref(false)
 
+const rowHeight = inject(RowHeightInj, ref(undefined))
+
 const localValue = computed<string | Record<string, any> | undefined>({
   get: () => localValueState.value,
   set: (val: undefined | string | Record<string, any>) => {
@@ -140,6 +143,13 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
+const inputWrapperRef = ref<HTMLElement | null>(null)
+
+onClickOutside(inputWrapperRef, (e) => {
+  if ((e.target as HTMLElement)?.closest('.nc-json-action')) return
+  editEnabled.value = false
+})
+
 watch(isExpanded, () => {
   _isExpanded.value = isExpanded.value
 })
@@ -148,7 +158,7 @@ watch(isExpanded, () => {
 <template>
   <component :is="isExpanded ? NcModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
     <div v-if="editEnabled && !readonly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
-      <div class="flex flex-row justify-between pt-1 pb-2" @mousedown.stop>
+      <div class="flex flex-row justify-between pt-1 pb-2 nc-json-action" @mousedown.stop>
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
           <CilFullscreenExit v-if="isExpanded" class="h-2.5" />
 
@@ -167,6 +177,7 @@ watch(isExpanded, () => {
       </div>
 
       <LazyMonacoEditor
+        ref="inputWrapperRef"
         :model-value="localValue || ''"
         class="min-w-full w-80"
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"
@@ -182,7 +193,7 @@ watch(isExpanded, () => {
 
     <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
 
-    <span v-else>{{ vModel }}</span>
+    <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
   </component>
 </template>
 

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

@@ -43,6 +43,8 @@ const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMobileMode } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
@@ -383,7 +385,7 @@ const selectedOpts = computed(() => {
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :bordered="false"
       clear-icon
-      show-search
+      :show-search="!isMobileMode"
       :show-arrow="editAllowed && !(readOnly || isLockedMode)"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed || isLockedMode"
@@ -392,6 +394,9 @@ const selectedOpts = computed(() => {
       @search="search"
       @keydown.stop
     >
+      <template #suffixIcon>
+        <GeneralIcon icon="arrowDown" class="text-gray-700 nc-select-expand-btn" />
+      </template>
       <a-select-option
         v-for="op of options"
         :key="op.id || op.title"

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

@@ -37,6 +37,8 @@ const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMobileMode } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
@@ -202,6 +204,8 @@ async function addIfMissingAndSave() {
 }
 
 const search = () => {
+  if (isMobileMode.value) return
+
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
 
@@ -285,7 +289,7 @@ const selectedOpt = computed(() => {
       v-else
       ref="aselect"
       v-model:value="vModel"
-      class="w-full overflow-hidden"
+      class="w-full overflow-hidden xs:min-h-12"
       :class="{ 'caret-transparent': !hasEditRoles }"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :allow-clear="!column.rqd && editAllowed"
@@ -294,7 +298,7 @@ const selectedOpt = computed(() => {
       :disabled="readOnly || !editAllowed || isLockedMode"
       :show-arrow="hasEditRoles && !(readOnly || isLockedMode) && active && vModel === null"
       :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`"
-      :show-search="isOpen && active"
+      :show-search="!isMobileMode && isOpen && active"
       @select="onSelect"
       @keydown="onKeydown($event)"
       @search="search"

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -55,7 +55,7 @@ useEventListener(container, 'click', (e) => {
 <template>
   <GeneralOverlay v-model="selectedImage" :z-index="1001" class="bg-gray-500 bg-opacity-50">
     <template v-if="selectedImage">
-      <div ref="container" class="overflow-hidden p-12 text-center relative">
+      <div ref="container" class="overflow-hidden p-12 text-center relative xs:h-screen">
         <div class="text-white group absolute top-5 right-5">
           <component
             :is="iconMap.closeCircle"

packages/nc-gui/components/cell/attachment/index.vue

@@ -152,14 +152,18 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
 
 const rowHeight = inject(RowHeightInj, ref())
 
-const open = () => {
-  if (isMobileMode.value) return (isExpandedForm.value = true)
+const open = (e: Event) => {
+  e.stopPropagation()
 
   _open()
 }
 
 const openAttachment = (item: any) => {
-  if (isMobileMode.value) return
+  if (isMobileMode.value && !isExpandedForm.value) {
+    isExpandedForm.value = true
+
+    return
+  }
 
   _openAttachment(item)
 }
@@ -169,6 +173,14 @@ const onExpand = () => {
 
   modalVisible.value = true
 }
+
+const onImageClick = (item: any) => {
+  if (isMobileMode.value && !isExpandedForm.value) return
+
+  if (!isMobileMode.value && (isGallery.value || (isKanban.value && !isExpandedForm.value))) return
+
+  selectedImage.value = item
+}
 </script>
 
 <template>
@@ -178,7 +190,7 @@ const onExpand = () => {
     :style="{
       height: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
-    class="nc-attachment-cell relative flex color-transition flex items-center w-full"
+    class="nc-attachment-cell relative flex color-transition flex items-center w-full xs:(min-h-12 max-h-32)"
     :class="{ 'justify-center': !active, 'justify-between': active }"
   >
     <LazyCellAttachmentCarousel />
@@ -198,26 +210,29 @@ const onExpand = () => {
 
     <div
       v-if="!isReadonly"
-      :class="{ 'mx-auto px-4': !visibleItems.length }"
+      :class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
       class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       data-testid="attachment-cell-file-picker-button"
-      @click.stop="open"
+      @click="open"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-      <NcTooltip placement="bottom">
+      <NcTooltip placement="bottom" class="xs:w-full">
         <template #title
           ><span data-rec="true">{{ $t('activity.attachmentDrop') }} </span></template
         >
 
-        <div v-if="active || !visibleItems.length || (isForm && visibleItems.length)" class="flex items-center gap-1">
+        <div
+          v-if="active || !visibleItems.length || (isForm && visibleItems.length)"
+          class="flex items-center gap-1 xs:(w-full min-w-12 h-8 justify-center)"
+        >
           <MaterialSymbolsAttachFile
             class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
           />
           <div
             v-if="!visibleItems.length"
             data-rec="true"
-            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
+            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs xs:(justify-center rounded-lg text-sm)"
           >
             {{ $t('activity.addFiles') }}
           </div>
@@ -245,12 +260,7 @@ const onExpand = () => {
               <div
                 class="nc-attachment flex items-center flex-col flex-wrap justify-center"
                 :class="{ 'ml-2': active }"
-                @click="
-                  () => {
-                    if (isGallery || isMobileMode || (isKanban && !isExpandedForm)) return
-                    selectedImage = item
-                  }
-                "
+                @click="() => onImageClick(item)"
               >
                 <LazyCellAttachmentImage
                   :alt="item.title || `#${i}`"
@@ -281,7 +291,7 @@ const onExpand = () => {
 
       <div
         v-if="active || (isForm && visibleItems.length)"
-        class="h-6 w-5 group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+        class="xs:hidden h-6 w-5 group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       >
         <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 

packages/nc-gui/components/dashboard/Sidebar.vue

@@ -47,7 +47,7 @@ onUnmounted(() => {
     </div>
     <div
       ref="treeViewDom"
-      class="flex flex-col nc-scrollbar-dark-md flex-grow xs:(border-transparent pt-2)"
+      class="flex flex-col nc-scrollbar-dark-md flex-grow xs:(border-transparent pt-2 pr-2)"
       :class="{
         'border-t-1': !isSharedBase,
         'border-transparent': !isTreeViewOnScrollTop,

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

@@ -182,7 +182,7 @@ const isTableOpened = computed(() => {
               :class="{ '!rotate-180': isExpanded }"
             />
           </NcButton>
-          <div v-else class="min-w-5.75"></div>
+          <div v-else class="sm:min-w-5.75 xs:min-w-7.5 h-2"></div>
           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
             <div
               class="flex items-center nc-table-icon"

packages/nc-gui/components/dlg/AirtableImport.vue

@@ -144,12 +144,12 @@ async function createOrUpdate() {
   }
 }
 
-async function listenForUpdates() {
+async function listenForUpdates(id?: string) {
   if (listeningForUpdates.value) return
 
   listeningForUpdates.value = true
 
-  const job = await $api.jobs.status({ syncId: syncSource.value.id })
+  const job = id ? { id } : await $api.jobs.status({ syncId: syncSource.value.id })
 
   if (!job) {
     listeningForUpdates.value = false
@@ -226,12 +226,12 @@ async function loadSyncSrc() {
 
 async function sync() {
   try {
-    await $fetch(`/api/v1/db/meta/syncs/${syncSource.value.id}/trigger`, {
+    const jobData: any = await $fetch(`/api/v1/db/meta/syncs/${syncSource.value.id}/trigger`, {
       baseURL,
       method: 'POST',
       headers: { 'xc-auth': $state.token.value as string },
     })
-    listenForUpdates()
+    listenForUpdates(jobData.id)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -251,13 +251,23 @@ async function abort() {
           headers: { 'xc-auth': $state.token.value as string },
         })
         step.value = 1
+        progress.value = []
+        goBack.value = false
+        enableAbort.value = false
       } catch (e: any) {
         message.error(await extractSdkResponseErrorMsg(e))
       }
     },
   })
 }
 
+function cancel() {
+  step.value = 1
+  progress.value = []
+  goBack.value = false
+  enableAbort.value = false
+}
+
 function migrateSync(src: any) {
   if (!src.details?.options) {
     src.details.options = {
@@ -456,7 +466,7 @@ onMounted(async () => {
           <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false">
             {{ $t('labels.goToDashboard') }}
           </a-button>
-          <a-button v-else-if="goBack" class="mt-4 uppercase" size="large" danger @click="step = 1">{{
+          <a-button v-else-if="goBack" class="mt-4 uppercase" size="large" danger @click="cancel()">{{
             $t('general.cancel')
           }}</a-button>
           <a-button v-else-if="enableAbort" class="mt-4 uppercase" size="large" danger @click="abort()">{{

packages/nc-gui/components/dlg/QuickImport.vue

@@ -149,10 +149,12 @@ const dialogShow = useVModel(rest, 'modelValue', emit)
 if (isWorkerSupport) {
   watch(
     dialogShow,
-    (val) => {
+    async (val) => {
       if (val) {
-        importWorker = initWorker(importWorkerUrl)
-      } else importWorker?.terminate()
+        importWorker = await initWorker(importWorkerUrl)
+      } else {
+        importWorker?.terminate()
+      }
     },
     { immediate: true },
   )

packages/nc-gui/components/general/JoinCloud.vue

@@ -6,7 +6,7 @@ import { iconMap } from '#imports'
   <a
     v-e="['c:navbar:join-cloud']"
     class="flex !no-underline"
-    href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url"
+    href="https://app.nocodb.com/#/signin?utm_source=OSS&utm_medium=OSS&utm_campaign=OSS&utm_content=OSS"
   >
     <div
       class="flex justify-center items-center rounded-l-[3px] w-full cursor-pointer px-2 py-1 !text-current !no-underline text-primary border-1 border-[#cdd1d6] bg-[#EFF2F6] hover:bg-[#e9ebef] m-0"

packages/nc-gui/components/general/ShareProject.vue

@@ -92,11 +92,3 @@ const copySharedBase = async () => {
 
   <LazyDlgShareAndCollaborateView :is-view-toolbar="isViewToolbar" />
 </template>
-
-<style lang="scss">
-.share-status-tootltip {
-  .ant-tooltip-inner {
-    @apply !rounded-md !border-1 !border-gray-200;
-  }
-}
-</style>

packages/nc-gui/components/general/WorkspaceIcon.vue

@@ -8,9 +8,11 @@ const props = defineProps<{
   size?: 'small' | 'medium' | 'large'
 }>()
 
-const workspaceColor = computed(() =>
-  props.workspace ? props.workspace.meta?.color || stringToColor(props.workspace.id!) : undefined,
-)
+const workspaceColor = computed(() => {
+  const color = props.workspace ? props.workspace.meta?.color || stringToColor(props.workspace.id!) : undefined
+
+  return color || '#0A1433'
+})
 
 const size = computed(() => props.size || 'medium')
 </script>