fix: Miscellaneous ui errors

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker&inline'
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker&inline'
+
 import type { editor as MonacoEditor } from 'monaco-editor'
-import { deepCompare, isDrawerOrModalExist, onMounted, ref, watch } from '#imports'
+import { deepCompare, initWorker, isDrawerOrModalExist, onMounted, ref, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>
@@ -45,15 +45,17 @@ const isValid = ref(true)
  * Adding monaco editor to Vite
  *
  * @ts-expect-error */
-self.MonacoEnvironment = {
-  getWorker(_: any, label: string) {
+self.MonacoEnvironment = window.MonacoEnvironment = {
+  async getWorker(_: any, label: string) {
     switch (label) {
-      case 'json':
-        return new JsonWorker()
-      case 'typescript':
-        return new TypescriptWorker()
-      default:
-        return new EditorWorker()
+      case 'json': {
+        const workerBlob = new Blob([JsonWorker], { type: 'text/javascript' })
+        return await initWorker(URL.createObjectURL(workerBlob))
+      }
+      default: {
+        const workerBlob = new Blob([EditorWorker], { type: 'text/javascript' })
+        return await initWorker(URL.createObjectURL(workerBlob))
+      }
     }
   },
 }

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

@@ -84,7 +84,7 @@ const selectedLangName = ref(langs[0].name)
 const apiUrl = computed(
   () =>
     new URL(
-      `/api/v1/db/data/noco/${base.value.id}/${meta.value?.title}/views/${view.value?.title}`,
+      `/api/v1/db/data/noco/${base.value.id}/${meta.value?.id}/views/${view.value?.id}`,
       (appInfo.value && appInfo.value.ncSiteUrl) || '/',
     ).href,
 )

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

@@ -84,7 +84,7 @@ const selectedLangName = ref(langs[0].name)
 const apiUrl = computed(
   () =>
     new URL(
-      `/api/v1/db/data/noco/${base.value?.id}/${meta.value?.title}/views/${view.value?.title}`,
+      `/api/v1/db/data/noco/${base.value?.id}/${meta.value?.id}/views/${view.value?.id}`,
       (appInfo.value && appInfo.value.ncSiteUrl) || '/',
     ).href,
 )
@@ -118,9 +118,9 @@ const api = new Api({
 
 api.dbViewRow.list(
   "noco",
-  ${JSON.stringify(base.value?.title)},
-  ${JSON.stringify(meta.value?.title)},
-  ${JSON.stringify(view.value?.title)}, ${JSON.stringify(queryParams.value, null, 4)}).then(function (data) {
+  ${JSON.stringify(base.value?.id)},
+  ${JSON.stringify(meta.value?.id)},
+  ${JSON.stringify(view.value?.id)}, ${JSON.stringify(queryParams.value, null, 4)}).then(function (data) {
   console.log(data);
 }).catch(function (error) {
   console.error(error);

packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts

@@ -34,6 +34,9 @@ export const useColumnDrag = ({
     const lastCol = fields.value[fields.value.length - 1]
     const lastViewCol = gridViewCols.value[lastCol.id!]
 
+    // if nextToViewCol/toViewCol is null, return
+    if (nextToViewCol === null || lastViewCol === null) return
+
     const newOrder = nextToViewCol ? toViewCol.order! + (nextToViewCol.order! - toViewCol.order!) / 2 : lastViewCol.order! + 1
     const oldOrder = toBeReorderedViewCol.order
 

packages/nc-gui/composables/useViewData.ts

@@ -187,24 +187,32 @@ export function useViewData(
     controller.value = CancelToken.source()
 
     isPaginationLoading.value = true
+    let response
 
-    const response = !isPublic.value
-      ? await api.dbViewRow.list(
-          'noco',
-          base.value.id!,
-          metaId.value!,
-          viewMeta.value!.id!,
-          {
-            ...queryParams.value,
-            ...params,
-            ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-            ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-            where: where?.value,
-          } as any,
-          { cancelToken: controller.value.token },
-        )
-      : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
-
+    try {
+      response = !isPublic.value
+        ? await api.dbViewRow.list(
+            'noco',
+            base.value.id!,
+            metaId.value!,
+            viewMeta.value!.id!,
+            {
+              ...queryParams.value,
+              ...params,
+              ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+              ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+              where: where?.value,
+            } as any,
+            { cancelToken: controller.value.token },
+          )
+        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
+    } catch (error) {
+      // if the request is canceled, then do nothing
+      if (error.code === 'ERR_CANCELED') {
+        return
+      }
+      throw error
+    }
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
     isPaginationLoading.value = false

packages/nc-gui/nuxt.config.ts

@@ -4,7 +4,6 @@ import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
-import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 
@@ -180,13 +179,6 @@ export default defineNuxtConfig({
           }),
         ],
       }),
-      monacoEditorPlugin({
-        languageWorkers: ['json'],
-        // customWorkers: [{ label: 'sql', entry: 'monaco-sql-languages/out/esm/sql/sql.worker.js' }],
-        customDistPath: (root: string, buildOutDir: string) => {
-          return `${buildOutDir}/` + `monacoeditorwork`
-        },
-      }),
       PurgeIcons({
         /* PurgeIcons Options */
         includedCollections: ['emojione'],