fix(gui-v2): lint & use notification

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

@@ -92,6 +92,7 @@ declare module '@vue/runtime-core' {
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
+    MdiDragVertical: typeof import('~icons/mdi/drag-vertical')['default']
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import AppInstall from './app-store/AppInstall.vue'
 import MdiEditIcon from '~icons/ic/round-edit'
 import MdiCloseCircleIcon from '~icons/mdi/close-circle-outline'
 import MdiPlusIcon from '~icons/mdi/plus'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 const { $api, $e } = useNuxtApp()
-const toast = useToast()
 
 let apps = $ref<null | Array<any>>(null)
 let showPluginUninstallModal = $ref(false)
@@ -22,9 +22,10 @@ const fetchPluginApps = async () => {
       tags: p.tags ? p.tags.split(',') : [],
       parsedInput: p.input && JSON.parse(p.input),
     }))
-  } catch (e) {
-    console.error(e)
-    toast.error('Something went wrong')
+  } catch (e: any) {
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -34,12 +35,15 @@ const resetPlugin = async () => {
       input: undefined,
       active: false,
     })
-    toast.success('Plugin uninstalled successfully')
+    notification.success({
+      message: 'Plugin uninstalled successfully',
+    })
     showPluginUninstallModal = false
     await fetchPluginApps()
   } catch (e: any) {
-    console.log(e)
-    toast.error(e.message)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:appstore:reset', { app: pluginApp.title })

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { h, useNuxtApp, useProject } from '#imports'
 import MdiReload from '~icons/mdi/reload'
 import MdiDatabaseSync from '~icons/mdi/database-sync'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 const { $api } = useNuxtApp()
 const { project } = useProject()
-const toast = useToast()
 
 let isLoading = $ref(false)
 let isDifferent = $ref(false)
@@ -38,14 +38,14 @@ async function syncMetaDiff() {
 
     isLoading = true
     await $api.project.metaDiffSync(project.value.id)
-    toast.info(`Table metadata recreated successfully`)
+    notification.info({
+      message: 'Table metadata recreated successfully',
+    })
     await loadMetaDiff()
   } catch (e: any) {
-    if (e.response?.status === 402) {
-      toast.info(e.message)
-    } else {
-      toast.error(e.message)
-    }
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   } finally {
     isLoading = false
   }

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

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
-import { viewIcons } from '~/utils'
+import { notification } from 'ant-design-vue'
+import { extractSdkResponseErrorMsg, viewIcons } from '~/utils'
 import { computed, h, useNuxtApp, useProject } from '#imports'
 
 const { $api, $e } = useNuxtApp()
 
 const { project } = useProject()
 
-const toast = useToast()
-
 const roles = $ref<string[]>(['editor', 'commenter', 'viewer'])
 
 let isLoading = $ref(false)
@@ -49,9 +47,13 @@ async function saveUIAcl() {
       project.value.id,
       tables.filter((t) => t.edited),
     )
-    toast.success('Updated UI ACL for tables successfully')
+    notification.success({
+      message: 'Updated UI ACL for tables successfully',
+    })
   } catch (e: any) {
-    toast.error(e?.message)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
   $e('a:proj-meta:ui-acl')
 }

packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import type { PluginType } from 'nocodb-sdk'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -25,8 +25,6 @@ enum Action {
   Test = 'test',
 }
 
-const toast = useToast()
-
 const { $api } = useNuxtApp()
 
 const formRef = ref()
@@ -55,10 +53,13 @@ const saveSettings = async () => {
     })
 
     emits('saved')
-    toast.success(plugin?.formDetails.msgOnInstall || 'Plugin settings saved successfully')
-  } catch (_e: any) {
-    const e = await extractSdkResponseErrorMsg(_e)
-    toast.error(e.message)
+    notification.success({
+      message: plugin?.formDetails.msgOnInstall || 'Plugin settings saved successfully',
+    })
+  } catch (e: any) {
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   } finally {
     loadingAction = null
   }
@@ -76,13 +77,18 @@ const testSettings = async () => {
     })
 
     if (res) {
-      toast.success('Successfully tested plugin settings')
+      notification.success({
+        message: 'Successfully tested plugin settings',
+      })
     } else {
-      toast.info('Invalid credentials')
+      notification.info({
+        message: 'Invalid credentials',
+      })
     }
-  } catch (_e: any) {
-    const e = await extractSdkResponseErrorMsg(_e)
-    toast.error(e.message)
+  } catch (e: any) {
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   } finally {
     loadingAction = null
   }

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

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import io from 'socket.io-client'
 import type { Socket } from 'socket.io-client'
-import { Form } from 'ant-design-vue'
+import { Form, notification } from 'ant-design-vue'
 import type { Card as AntCard } from 'ant-design-vue'
-import { useToast } from 'vue-toastification'
-import { fieldRequiredValidator } from '~/utils/validation'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
 import MdiCloseCircleOutlineIcon from '~icons/mdi/close-circle-outline'
 import MdiCurrencyUsdIcon from '~icons/mdi/currency-usd'
 import MdiLoadingIcon from '~icons/mdi/loading'
@@ -23,8 +21,6 @@ const baseURL = 'http://localhost:8080' // this.$axios.defaults.baseURL
 
 const { $state } = useNuxtApp()
 
-const toast = useToast()
-
 const { project, loadTables } = useProject()
 
 const showGoToDashboardButton = ref(false)
@@ -107,7 +103,9 @@ async function createOrUpdate() {
       syncSource.value = data
     }
   } catch (e: any) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -158,8 +156,9 @@ async function sync() {
       },
     })
   } catch (e: any) {
-    console.log(e)
-    toast.error(e)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
-import { Form } from 'ant-design-vue'
+import { Form, notification } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
 import type { UploadChangeParam } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
@@ -135,7 +134,9 @@ async function handlePreImport() {
       await validate()
       await parseAndExtractData(importState.url, '')
     } catch (e: any) {
-      toast.error(await extractSdkResponseErrorMsg(e))
+      notification.error({
+        message: await extractSdkResponseErrorMsg(e),
+      })
     }
   } else if (activeKey.value === 'jsonEditorTab') {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor), '')
@@ -148,7 +149,9 @@ async function handleImport() {
     loading.value = true
     await templateEditorRef.value.importTemplate()
   } catch (e: any) {
-    return toast.error(await extractSdkResponseErrorMsg(e))
+    return notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   } finally {
     loading.value = false
   }
@@ -174,7 +177,9 @@ async function parseAndExtractData(val: any, name: string) {
     templateEditorModal.value = true
   } catch (e: any) {
     console.log(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 

packages/nc-gui-v2/components/dlg/TableRename.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { watchEffect } from '@vue/runtime-core'
-import { Form } from 'ant-design-vue'
+import { Form, notification } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
 import { useProject, useTabs } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { validateTableName } from '~/utils/validation'
+import { extractSdkResponseErrorMsg, validateTableName } from '~/utils/errorUtils'
 import { useNuxtApp } from '#app'
 
 interface Props {
@@ -16,7 +14,6 @@ interface Props {
 const { modelValue = false, tableMeta } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'updated'])
 const { $e, $api } = useNuxtApp()
-const toast = useToast()
 const dialogShow = computed({
   get() {
     return modelValue
@@ -79,11 +76,15 @@ const renameTable = async () => {
     dialogShow.value = false
     loadTables()
     updateTab({ id: tableMeta?.id }, { title: formState.title })
-    toast.success('Table renamed successfully')
+    notification.success({
+      message: 'Table renamed successfully',
+    })
     $e('a:table:rename')
     dialogShow.value = false
   } catch (e) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
   loading = false
 }

packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue

@@ -581,19 +581,6 @@ function scrollToSelectedOption() {
   })
 }
 
-function getFormulaTypeName(type: string) {
-  switch (type) {
-    case 'function':
-      return 'Function'
-    case 'op':
-      return 'Operator'
-    case 'column':
-      return 'Column'
-    default:
-      return ''
-  }
-}
-
 // set default value
 formState.value.formula_raw = (column?.value?.colOptions as Record<string, any>)?.formula_raw || ''
 

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

@@ -1,26 +1,28 @@
 <script lang="ts" setup>
-import { Modal } from 'ant-design-vue'
+import { Modal, notification } from 'ant-design-vue'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useToast } from 'vue-toastification'
 import { useNuxtApp } from '#app'
 import { useMetas } from '#imports'
 import { ColumnInj, MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiEditIcon from '~icons/mdi/pencil'
 import MdiStarIcon from '~icons/mdi/star'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const { virtual = false } = defineProps<{ virtual?: boolean }>()
+
 const editColumnDropdown = ref(false)
 
 const column = inject(ColumnInj)
+
 const meta = inject(MetaInj)
 
 const { $api } = useNuxtApp()
+
 const { t } = useI18n()
-const toast = useToast()
+
 const { getMeta } = useMetas()
 
 const deleteColumn = () =>
@@ -34,7 +36,9 @@ const deleteColumn = () =>
         await $api.dbTableColumn.delete(column?.value?.id as string)
         getMeta(meta?.value?.id as string, true)
       } catch (e) {
-        toast.error(await extractSdkResponseErrorMsg(e))
+        notification.error({
+          message: await extractSdkResponseErrorMsg(e),
+        })
       }
     },
   })
@@ -43,10 +47,13 @@ const setAsPrimaryValue = async () => {
   try {
     await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
     getMeta(meta?.value?.id as string, true)
-    toast.success('Successfully updated as primary column')
+    notification.success({
+      message: 'Successfully updated as primary column',
+    })
   } catch (e) {
-    console.log(e)
-    toast.error('Failed to update primary column')
+    notification.error({
+      message: 'Failed to update primary column',
+    })
   }
 }
 

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ExportTypes } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import FileSaver from 'file-saver'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
@@ -22,8 +22,6 @@ const { project } = useProject()
 
 const { $api } = useNuxtApp()
 
-const toast = useToast()
-
 const meta = inject(MetaInj)
 
 const selectedView = inject(ActiveViewInj)
@@ -84,13 +82,19 @@ const exportCsv = async () => {
       const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
       FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
       if (offset > -1) {
-        toast.info('Downloading more files')
+        notification.info({
+          message: 'Downloading more files',
+        })
       } else {
-        toast.success('Successfully exported all table data')
+        notification.success({
+          message: 'Successfully exported all table data',
+        })
       }
     }
   } catch (e: any) {
-    toast.error(extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 </script>

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

@@ -2,23 +2,25 @@
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { computed } from 'vue'
-import { message } from 'ant-design-vue'
-import { useToast } from 'vue-toastification'
+import { message, notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useSmartsheetStoreOrThrow } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiOpenInNewIcon from '~icons/mdi/open-in-new'
 import MdiCopyIcon from '~icons/mdi/content-copy'
 
 const { view, $api } = useSmartsheetStoreOrThrow()
 
 const { copy } = useClipboard()
+
 const { $e } = useNuxtApp()
-const toast = useToast()
+
 const { dashboardUrl } = useDashboard()
 
 let showShareModel = $ref(false)
+
 const passwordProtected = $ref(false)
+
 const shared = ref()
 
 const allowCSVDownload = computed({
@@ -69,9 +71,13 @@ async function saveAllowCSVDownload() {
     await $api.dbViewShare.update(shared.value.id, {
       meta,
     } as any)
-    toast.success('Successfully updated')
-  } catch (e) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.success({
+      message: 'Successfully updated',
+    })
+  } catch (e: any) {
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
   if (allowCSVDownload?.value) {
     $e('a:view:share:enable-csv-download')
@@ -85,9 +91,13 @@ const saveShareLinkPassword = async () => {
     await $api.dbViewShare.update(shared.value.id, {
       password: shared.value.password,
     })
-    toast.success('Successfully updated')
-  } catch (e) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.success({
+      message: 'Successfully updated',
+    })
+  } catch (e: any) {
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:view:share:enable-pwd')

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

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
-import { message } from 'ant-design-vue'
+import { message, notification } from 'ant-design-vue'
 import { onMounted, useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
@@ -20,8 +19,9 @@ interface SharedViewType {
 }
 
 const { $api, meta } = useSmartsheetStoreOrThrow()
+
 const { copy } = useClipboard()
-const toast = useToast()
+
 const { dashboardUrl } = useDashboard()
 
 const sharedViewList = ref<SharedViewType[]>()
@@ -80,10 +80,14 @@ const copyLink = (view: SharedViewType) => {
 const deleteLink = async (id: string) => {
   try {
     await $api.dbViewShare.delete(id)
-    toast.success('Deleted shared view successfully')
+    notification.success({
+      message: 'Deleted shared view successfully',
+    })
     await loadSharedViewsList()
-  } catch (e) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+  } catch (e: any) {
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 </script>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { computed, useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
@@ -13,14 +13,16 @@ enum LockType {
 }
 
 const { view, $api } = useSmartsheetStoreOrThrow()
+
 const { $e } = useNuxtApp()
-const toast = useToast()
 
-function changeLockType(type: LockType) {
+async function changeLockType(type: LockType) {
   $e('a:grid:lockmenu', { lockType: type })
 
   if (type === 'personal') {
-    return toast.info('Coming soon', { timeout: 3000 })
+    return notification.info({
+      message: 'Coming soon',
+    })
   }
   try {
     ;(view.value as any).lock_type = type
@@ -28,9 +30,13 @@ function changeLockType(type: LockType) {
       lock_type: type,
     })
 
-    toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 })
+    notification.success({
+      message: `Successfully Switched to ${type} view`,
+    })
   } catch (e: any) {
-    toast.error(extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { useClipboard } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -10,9 +10,7 @@ import VisibilityOpenIcon from '~icons/material-symbols/visibility'
 import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-
-const toast = useToast()
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface ApiToken extends ApiTokenType {
   show?: boolean
@@ -42,7 +40,9 @@ const copyToken = (token: string | undefined) => {
   if (!token) return
 
   copy(token)
-  toast.info('Copied to clipboard')
+  notification.info({
+    message: 'Copied to clipboard',
+  })
 
   $e('c:api-token:copy')
 }
@@ -53,12 +53,15 @@ const generateToken = async () => {
 
     await $api.apiToken.create(project.id, selectedTokenData)
     showNewTokenModal = false
-    toast.success('Token generated successfully')
+    notification.success({
+      message: 'Token generated successfullyd',
+    })
     selectedTokenData = {}
     await loadApiTokens()
   } catch (e: any) {
-    console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:api-token:generate')
@@ -70,12 +73,15 @@ const deleteToken = async () => {
 
     await $api.apiToken.delete(project.id, selectedTokenData.token)
 
-    toast.success('Token deleted successfully')
+    notification.success({
+      message: 'Token deleted successfully',
+    })
     await loadApiTokens()
     showDeleteTokenModal = false
   } catch (e: any) {
-    console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:api-token:delete')

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useClipboard, watchDebounced } from '@vueuse/core'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import UsersModal from './user-management/UsersModal.vue'
 import FeedbackForm from './user-management/FeedbackForm.vue'
 import KebabIcon from '~icons/ic/baseline-more-vert'
@@ -17,7 +17,6 @@ import MdiContentCopyIcon from '~icons/mdi/content-copy'
 import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
 import RolesIcon from '~icons/mdi/drama-masks'
 import type { User } from '~/lib/types'
-const toast = useToast()
 
 const { $api, $e } = useNuxtApp()
 const { project } = useProject()
@@ -51,8 +50,9 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
     totalRows = response.users.pageInfo.totalRows ?? 0
     users = response.users.list as User[]
   } catch (e: any) {
-    console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -61,11 +61,14 @@ const inviteUser = async (user: User) => {
     if (!project.value?.id) return
 
     await $api.auth.projectUserAdd(project.value.id, user)
-    toast.success('Successfully added user to project')
+    notification.success({
+      message: 'Successfully added user to project',
+    })
     await loadUsers()
   } catch (e: any) {
-    console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:user:add')
@@ -76,12 +79,15 @@ const deleteUser = async () => {
     if (!project.value?.id || !selectedUser?.id) return
 
     await $api.auth.projectUserRemove(project.value.id, selectedUser.id)
-    toast.success('Successfully deleted user from project')
+    notification.success({
+      message: 'Successfully deleted user from project',
+    })
     await loadUsers()
     showUserDeleteModal = false
   } catch (e: any) {
-    console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:user:delete')
@@ -107,11 +113,14 @@ const resendInvite = async (user: User) => {
 
   try {
     await $api.auth.projectUserResendInvite(project.value.id, user.id)
-    toast.success('Invite email sent successfully')
+    notification.success({
+      message: 'Invite email sent successfully',
+    })
     await loadUsers()
   } catch (e: any) {
-    console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:user:resend-invite')
@@ -123,7 +132,9 @@ const copyInviteUrl = (user: User) => {
   const getInviteUrl = (token: string) => `${location.origin}${location.pathname}#/user/authentication/signup/${token}`
 
   copy(getInviteUrl(user.invite_token))
-  toast.success('Invite url copied to clipboard')
+  notification.success({
+    message: 'Invite url copied to clipboard',
+  })
 }
 
 onMounted(async () => {

packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { onMounted, useClipboard, useNuxtApp, useProject } from '#imports'
 import { dashboardUrl, extractSdkResponseErrorMsg } from '~/utils'
 
-const toast = useToast()
-
 interface ShareBase {
   uuid?: string
   url?: string
@@ -40,9 +38,9 @@ const loadBase = async () => {
       role: res.roles,
     }
   } catch (e: any) {
-    console.error(e)
-
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -58,9 +56,9 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
     base = res ?? {}
     base!.role = role
   } catch (e: any) {
-    console.error(e)
-
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:shared-base:enable', { role })
@@ -73,8 +71,9 @@ const disableSharedBase = async () => {
     await $api.project.sharedBaseDisable(project.value.id)
     base = null
   } catch (e: any) {
-    console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:shared-base:disable')
@@ -92,9 +91,9 @@ const recreate = async () => {
 
     base = { ...newBase, role: base?.role }
   } catch (e: any) {
-    console.error(e)
-
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:shared-base:recreate')
@@ -105,7 +104,9 @@ const copyUrl = async () => {
 
   await copy(url)
 
-  toast.success('Copied shareable base url to clipboard!')
+  notification.success({
+    message: 'Copied shareable base url to clipboard!',
+  })
 
   $e('c:shared-base:copy-url')
 }
@@ -128,7 +129,10 @@ frameborder="0"
 width="100%"
 height="700"
 style="background: transparent; border: 1px solid #ddd"></iframe>`)
-  toast.success('Copied embeddable html code!')
+
+  notification.success({
+    message: 'Copied embeddable html code!',
+  })
 
   $e('c:shared-base:copy-embed-frame')
 }

packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
-import { Form } from 'ant-design-vue'
+import { Form, notification } from 'ant-design-vue'
 import { useClipboard } from '@vueuse/core'
 import ShareBase from './ShareBase.vue'
 import SendIcon from '~icons/material-symbols/send-outline'
@@ -9,9 +8,7 @@ import MidAccountIcon from '~icons/mdi/account-outline'
 import ContentCopyIcon from '~icons/mdi/content-copy'
 import type { User } from '~/lib/types'
 import { ProjectRole } from '~/lib/enums'
-import { projectRoleTagColors } from '~/utils/userUtils'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { isEmail } from '~/utils/validation'
+import { extractSdkResponseErrorMsg, isEmail, projectRoleTagColors } from '~/utils'
 
 interface Props {
   show: boolean
@@ -26,7 +23,6 @@ interface Users {
 
 const { show, selectedUser } = defineProps<Props>()
 const emit = defineEmits(['closed', 'reload'])
-const toast = useToast()
 
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
@@ -92,10 +88,14 @@ const saveUser = async () => {
       })
       usersData.invitationToken = res.invite_token
     }
-    toast.success('Successfully updated the user details')
+    notification.success({
+      message: 'Successfully updated the user details',
+    })
   } catch (e: any) {
     console.error(e)
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -109,7 +109,9 @@ const copyUrl = async () => {
   if (!inviteUrl) return
 
   copy(inviteUrl)
-  toast.success('Copied shareable base url to clipboard!')
+  notification.success({
+    message: 'Copied shareable base url to clipboard!',
+  })
 
   $e('c:shared-base:copy-url')
 }

packages/nc-gui-v2/components/template/Editor.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { Form, notification } from 'ant-design-vue'
@@ -69,8 +68,6 @@ const data = reactive<{ title: string | null; name: string; tables: TableType[]
   tables: [],
 })
 
-const toast = useToast()
-
 const { addTab } = useTabs()
 
 const { sqlUi, project, loadTables } = useProject()
@@ -314,19 +311,19 @@ async function importTemplate() {
               const v = columns.value.find((c: Record<string, any>) => c.title === col.destCn) as Record<string, any>
               let input = row[col.srcCn]
               // parse potential boolean values
-              if (v.uidt == UITypes.Checkbox) {
+              if (v.uidt === UITypes.Checkbox) {
                 input = input.replace(/["']/g, '').toLowerCase().trim()
-                if (input == 'false' || input == 'no' || input == 'n') {
+                if (input === 'false' || input === 'no' || input === 'n') {
                   input = '0'
-                } else if (input == 'true' || input == 'yes' || input == 'y') {
+                } else if (input === 'true' || input === 'yes' || input === 'y') {
                   input = '1'
                 }
               } else if (v.uidt === UITypes.Number) {
-                if (input == '') {
+                if (input === '') {
                   input = null
                 }
               } else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) {
-                if (input == '') {
+                if (input === '') {
                   input = null
                 }
               }
@@ -442,7 +439,9 @@ async function importTemplate() {
         type: 'table',
       })
     } catch (e: any) {
-      toast.error(await extractSdkResponseErrorMsg(e))
+      notification.error({
+        message: await extractSdkResponseErrorMsg(e),
+      })
     } finally {
       isImporting.value = false
     }
@@ -526,16 +525,16 @@ onMounted(() => {
                 {{ column.name }}
               </span>
             </template>
-            <template #bodyCell="{ column, record, index }">
+            <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'source_column'">
                 <span>{{ record.srcCn }}</span>
               </template>
               <template v-else-if="column.key === 'destination_column'">
                 <a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
-                  <a-select-option v-for="(column, i) of columns" :key="i" :value="column.title">
+                  <a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
                     <div class="flex items-center">
-                      <component :is="getUIDTIcon(column.uidt)" />
-                      <span class="ml-2">{{ column.title }}</span>
+                      <component :is="getUIDTIcon(col.uidt)" />
+                      <span class="ml-2">{{ col.title }}</span>
                     </div>
                   </a-select-option>
                 </a-select>

packages/nc-gui-v2/components/webhook/Editor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Form } from 'ant-design-vue'
-import { useToast } from 'vue-toastification'
+import { Form, notification } from 'ant-design-vue'
 import { MetaInj } from '~/context'
 import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
 import { inject, reactive, useApi, useNuxtApp } from '#imports'
@@ -16,8 +15,6 @@ const { $e } = useNuxtApp()
 
 const { api, isLoading: loading } = useApi()
 
-const toast = useToast()
-
 const meta = inject(MetaInj)
 
 const useForm = Form.useForm
@@ -305,7 +302,9 @@ async function loadPluginList() {
       hook.eventOperation = `${hook.event} ${hook.operation}`
     }
   } catch (e: any) {
-    toast.error(extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -314,7 +313,9 @@ async function saveHooks() {
   try {
     await validate()
   } catch (_: any) {
-    toast.error('Invalid Form')
+    notification.error({
+      message: 'Invalid Form',
+    })
 
     loading.value = false
 
@@ -352,9 +353,13 @@ async function saveHooks() {
     //   });
     // }
 
-    toast.success('Webhook details updated successfully')
+    notification.success({
+      message: 'Webhook details updated successfully',
+    })
   } catch (e: any) {
-    toast.error(extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   } finally {
     loading.value = false
   }

packages/nc-gui-v2/components/webhook/List.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { MetaInj } from '~/context'
 import { inject, onMounted, ref, useNuxtApp } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 const emit = defineEmits(['edit'])
 
 const { $api, $e } = useNuxtApp()
 
-const toast = useToast()
-
 const hooks = ref<Record<string, any>[]>([])
 
 const meta = inject(MetaInj)
@@ -21,7 +20,9 @@ async function loadHooksList() {
       return hook
     })
   } catch (e: any) {
-    toast.error(e.message)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -33,12 +34,16 @@ async function deleteHook(item: Record<string, any>, index: number) {
     } else {
       hooks.value.splice(index, 1)
     }
-    toast.success('Hook deleted successfully')
+    notification.success({
+      message: 'Hook deleted successfully',
+    })
     if (!hooks.value.length) {
       hooks.value = []
     }
   } catch (e: any) {
-    toast.error(e.message)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 
   $e('a:webhook:delete')

packages/nc-gui-v2/components/webhook/Test.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { MetaInj } from '~/context'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
@@ -12,8 +12,6 @@ const { hook } = defineProps<Props>()
 
 const { $api } = useNuxtApp()
 
-const toast = useToast()
-
 const meta = inject(MetaInj)
 
 const sampleData = ref({
@@ -41,9 +39,13 @@ async function testWebhook() {
       payload: sampleData.value,
     })
 
-    toast.success('Webhook tested successfully')
+    notification.success({
+      message: 'Webhook tested successfully',
+    })
   } catch (e: any) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 

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

@@ -1,9 +1,8 @@
 import { createInjectionState } from '@vueuse/core'
-import { Form } from 'ant-design-vue'
+import { Form, notification } from 'ant-design-vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useToast } from 'vue-toastification'
 import { useColumn } from './useColumn'
 import { computed } from '#imports'
 import { useNuxtApp } from '#app'
@@ -25,7 +24,6 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const { sqlUi } = useProject()
     const { $api } = useNuxtApp()
     const { getMeta } = useMetas()
-    const toast = useToast()
 
     const idType = null
 
@@ -178,12 +176,21 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       try {
         console.log(formState, validators)
         if (!(await validate())) return
+      } catch (e) {
+        notification.error({
+          message: 'Form validation failed',
+        })
+        return
+      }
 
+      try {
         formState.value.table_name = meta.value.table_name
         formState.value.title = formState.value.column_name
         if (column?.value) {
           await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
-          toast.success('Column updated')
+          notification.success({
+            message: 'Column updated',
+          })
         } else {
           // todo : set additional meta for auto generated string id
           if (formState.value.uidt === UITypes.ID) {
@@ -201,12 +208,15 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
             getMeta(formState.value.childId, true).then(() => {})
           }
 
-          toast.success('Column created')
+          notification.success({
+            message: 'Column created',
+          })
         }
         onSuccess()
       } catch (e: any) {
-        const error = await extractSdkResponseErrorMsg(e)
-        if (error) toast.error(await extractSdkResponseErrorMsg(e))
+        notification.error({
+          message: await extractSdkResponseErrorMsg(e),
+        })
       }
     }
 

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

@@ -1,7 +1,6 @@
-import { Modal } from 'ant-design-vue'
+import { Modal, notification } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
 import { useProject } from './useProject'
 import { TabType } from '~/composables/useTabs'
 import { extractSdkResponseErrorMsg } from '~/utils'
@@ -15,7 +14,6 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   })
 
   const { $e, $api } = useNuxtApp()
-  const toast = useToast()
   const { getMeta, removeMeta } = useMetas()
   const { loadTables } = useProject()
   const { closeTab } = useTabs()
@@ -78,13 +76,13 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
                 return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`
               }),
             )
-            toast.info(
-              h('div', {
+            notification.info({
+              message: h('div', {
                 innerHTML: `<div style="padding:10px 4px">Unable to delete tables because of the following.
                 <br><br>${refColMsgs.join('<br>')}<br><br>
                 Delete them & try again</div>`,
               }),
-            )
+            })
             return
           }
 
@@ -99,10 +97,14 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
           await loadTables()
 
           removeMeta(table.id as string)
-          toast.info(`Deleted table ${table.title} successfully`)
+          notification.info({
+            message: `Deleted table ${table.title} successfully`,
+          })
           $e('a:table:delete')
         } catch (e: any) {
-          toast.error(await extractSdkResponseErrorMsg(e))
+          notification.error({
+            message: await extractSdkResponseErrorMsg(e),
+          })
         }
       },
     })

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Modal } from 'ant-design-vue'
+import { Modal, notification } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
 import { navigateTo } from '#app'
 import { computed, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
@@ -18,8 +17,6 @@ const { api, isLoading } = useApi()
 
 useSidebar({ hasSidebar: true, isOpen: true })
 
-const toast = useToast()
-
 const filterQuery = ref('')
 
 const projects = ref<ProjectType[]>()
@@ -48,7 +45,9 @@ const deleteProject = (project: ProjectType) => {
         await $api.project.delete(project.id as string)
         return projects.value?.splice(projects.value.indexOf(project), 1)
       } catch (e: any) {
-        return toast.error(await extractSdkResponseErrorMsg(e))
+        return notification.error({
+          message: await extractSdkResponseErrorMsg(e),
+        })
       }
     },
   })

packages/nc-gui-v2/pages/project/index/[id].vue

@@ -3,10 +3,9 @@ import { onMounted } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { ref } from 'vue'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { navigateTo, useRoute } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { projectTitleValidator } from '~/utils/validation'
+import { extractSdkResponseErrorMsg, projectTitleValidator } from '~/utils'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 import { nextTick, reactive, useSidebar } from '#imports'
 
@@ -14,8 +13,6 @@ const { api } = useApi()
 
 useSidebar({ hasSidebar: false })
 
-const toast = useToast()
-
 const route = useRoute()
 
 const nameValidationRules = [
@@ -32,10 +29,12 @@ const formState = reactive({
 
 const getProject = async () => {
   try {
-    const result: ProjectType = await $api.project.read(route.params.id as string)
+    const result: ProjectType = await api.project.read(route.params.id as string)
     formState.title = result.title as string
   } catch (e: any) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 
@@ -45,7 +44,9 @@ const renameProject = async () => {
 
     navigateTo(`/nc/${route.params.id}`)
   } catch (e: any) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 

packages/nc-gui-v2/pages/project/index/create-external.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { onMounted } from '@vue/runtime-core'
-import { Form, Modal } from 'ant-design-vue'
+import { Form, Modal, notification } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
-import { useToast } from 'vue-toastification'
 import { computed, ref, useSidebar, watch } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { ClientType } from '~/lib'
@@ -27,8 +26,6 @@ const { $api, $e } = useNuxtApp()
 
 useSidebar({ hasSidebar: false })
 
-const toast = useToast()
-
 const { t } = useI18n()
 
 const formState = $ref<ProjectCreateForm>({
@@ -145,8 +142,9 @@ const createProject = async () => {
     $e('a:project:create:extdb')
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    // todo: toast
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
   loading.value = false
 }
@@ -187,12 +185,16 @@ const testConnection = async () => {
         })
       } else {
         testSuccess.value = false
-        toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
+        notification.error({
+          message: `${t('msg.error.dbConnectionFailed')} ${result.message}`,
+        })
       }
     }
   } catch (e: any) {
     testSuccess.value = false
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { nextTick, reactive, ref, useApi, useSidebar } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -14,8 +14,6 @@ const { api, isLoading } = useApi()
 
 useSidebar({ hasSidebar: false })
 
-const toast = useToast()
-
 const nameValidationRules = [
   {
     required: true,
@@ -37,7 +35,9 @@ const createProject = async () => {
 
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    toast.error(await extractSdkResponseErrorMsg(e))
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
   }
 }
 

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Modal } from 'ant-design-vue'
+import { Modal, notification } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
 import { navigateTo } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
@@ -33,7 +32,6 @@ const navDrawerOptions = [
 const route = useRoute()
 
 const { $api } = useNuxtApp()
-const toast = useToast()
 
 const response = await $api.project.list({})
 const projects = $ref(response.list)
@@ -50,8 +48,10 @@ const deleteProject = (project: ProjectType) => {
       try {
         await $api.project.delete(project.id as string)
         projects.splice(projects.indexOf(project), 1)
-      } catch (e) {
-        toast.error(await extractSdkResponseErrorMsg(e))
+      } catch (e: any) {
+        notification.error({
+          message: await extractSdkResponseErrorMsg(e),
+        })
       }
     },
   })