From 761ca6eacc48d4633c04166641ac35a9bb0e9ad3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 12 Aug 2022 17:11:56 +0800
Subject: [PATCH] refactor(gui-v2): use message instead of notification

---
 .../components/cell/attachment/utils.ts       |  6 +--
 .../dashboard/settings/AppStore.vue           | 14 ++---
 .../dashboard/settings/Metadata.vue           | 10 ++--
 .../components/dashboard/settings/UIAcl.vue   | 10 ++--
 .../settings/app-store/AppInstall.vue         | 22 +++-----
 .../components/dlg/AirtableImport.vue         | 10 ++--
 .../nc-gui-v2/components/dlg/QuickImport.vue  | 33 ++++--------
 .../nc-gui-v2/components/dlg/TableRename.vue  | 12 ++---
 .../nc-gui-v2/components/dlg/ViewCreate.vue   | 10 ++--
 .../nc-gui-v2/components/dlg/ViewDelete.vue   | 12 ++---
 .../components/smartsheet-header/Menu.vue     | 14 ++---
 .../smartsheet-toolbar/MoreActions.vue        | 14 ++---
 .../smartsheet-toolbar/ShareView.vue          | 18 ++-----
 .../smartsheet-toolbar/SharedViewList.vue     | 10 ++--
 .../nc-gui-v2/components/smartsheet/Form.vue  | 29 +++--------
 .../components/smartsheet/sidebar/MenuTop.vue | 12 ++---
 .../smartsheet/sidebar/RenameableMenuItem.vue |  7 +--
 .../smartsheet/sidebar/menu/ApiSnippet.vue    |  4 +-
 .../smartsheet/sidebar/toolbar/LockMenu.vue   | 14 ++---
 .../tabs/auth/ApiTokenManagement.vue          | 22 +++-----
 .../components/tabs/auth/UserManagement.vue   | 34 ++++---------
 .../tabs/auth/user-management/ShareBase.vue   | 26 +++-------
 .../tabs/auth/user-management/UsersModal.vue  | 14 ++---
 .../nc-gui-v2/components/template/Editor.vue  | 51 ++++---------------
 .../nc-gui-v2/components/webhook/Editor.vue   | 18 ++-----
 .../nc-gui-v2/components/webhook/List.vue     | 14 ++---
 .../nc-gui-v2/components/webhook/Test.vue     | 10 ++--
 .../composables/useColumnCreateStore.ts       | 18 ++-----
 .../composables/useExpandedFormStore.ts       |  9 ++--
 .../composables/useGlobal/actions.ts          |  9 +---
 .../nc-gui-v2/composables/useLTARStore.ts     | 27 +++-------
 .../composables/useSmartsheetRowStore.ts      |  7 +--
 packages/nc-gui-v2/composables/useTable.ts    | 20 +++-----
 packages/nc-gui-v2/composables/useViewData.ts | 45 +++++-----------
 packages/nc-gui-v2/pages/index/index.vue      |  6 +--
 .../nc-gui-v2/pages/project/index/[id].vue    | 10 ++--
 .../pages/project/index/create-external.vue   | 14 ++---
 .../nc-gui-v2/pages/project/index/create.vue  |  6 +--
 packages/nc-gui-v2/pages/projects/index.vue   |  6 +--
 39 files changed, 174 insertions(+), 453 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index 7d9bf002ab..bbfa6b86e4 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -1,4 +1,4 @@
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import FileSaver from 'file-saver'
 import { computed, inject, ref, useApi, useFileDialog, useInjectionState, useProject, watch } from '#imports'
 import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj } from '~/context'
@@ -88,9 +88,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
           newAttachments.push(...data)
         } catch (e: any) {
-          notification.error({
-            message: e.message || 'Some internal error occurred',
-          })
+          message.error(e.message || 'Some internal error occurred')
         }
       }
 
diff --git a/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue b/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
index 90b268e94a..b848d4456b 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notification } from 'ant-design-vue'
+import { message } 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'
@@ -23,9 +23,7 @@ const fetchPluginApps = async () => {
       parsedInput: p.input && JSON.parse(p.input),
     }))
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -35,15 +33,11 @@ const resetPlugin = async () => {
       input: undefined,
       active: false,
     })
-    notification.success({
-      message: 'Plugin uninstalled successfully',
-    })
+    message.success('Plugin uninstalled successfully')
     showPluginUninstallModal = false
     await fetchPluginApps()
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:appstore:reset', { app: pluginApp.title })
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
index 215ead1339..909fcad2a3 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Metadata.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { h, useNuxtApp, useProject } from '#imports'
 import MdiReload from '~icons/mdi/reload'
 import MdiDatabaseSync from '~icons/mdi/database-sync'
@@ -38,14 +38,10 @@ async function syncMetaDiff() {
 
     isLoading = true
     await $api.project.metaDiffSync(project.value.id)
-    notification.info({
-      message: 'Table metadata recreated successfully',
-    })
+    message.info('Table metadata recreated successfully')
     await loadMetaDiff()
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   } finally {
     isLoading = false
   }
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 10123db7b3..4aaaf11afe 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg, viewIcons } from '~/utils'
 import { computed, h, useNuxtApp, useProject } from '#imports'
 
@@ -47,13 +47,9 @@ async function saveUIAcl() {
       project.value.id,
       tables.filter((t) => t.edited),
     )
-    notification.success({
-      message: 'Updated UI ACL for tables successfully',
-    })
+    message.success('Updated UI ACL for tables successfully')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
   $e('a:proj-meta:ui-acl')
 }
diff --git a/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue b/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
index 118f3abb05..5928084ef0 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { notification } from 'ant-design-vue'
+import { message } 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'
@@ -53,13 +53,9 @@ const saveSettings = async () => {
     })
 
     emits('saved')
-    notification.success({
-      message: plugin?.formDetails.msgOnInstall || 'Plugin settings saved successfully',
-    })
+    message.success(plugin?.formDetails.msgOnInstall || 'Plugin settings saved successfully')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   } finally {
     loadingAction = null
   }
@@ -77,18 +73,12 @@ const testSettings = async () => {
     })
 
     if (res) {
-      notification.success({
-        message: 'Successfully tested plugin settings',
-      })
+      message.success('Successfully tested plugin settings')
     } else {
-      notification.info({
-        message: 'Invalid credentials',
-      })
+      message.info('Invalid credentials')
     }
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   } finally {
     loadingAction = null
   }
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 5612f8c870..9447dd8192 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import io from 'socket.io-client'
 import type { Socket } from 'socket.io-client'
-import { Form, notification } from 'ant-design-vue'
+import { Form, message } from 'ant-design-vue'
 import type { Card as AntCard } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
 import MdiCloseCircleOutlineIcon from '~icons/mdi/close-circle-outline'
@@ -103,9 +103,7 @@ async function createOrUpdate() {
       syncSource.value = data
     }
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -156,9 +154,7 @@ async function sync() {
       },
     })
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 0fed2f81e9..3419c19594 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Form, notification } from 'ant-design-vue'
+import { Form, message } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
 import type { UploadChangeParam } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
@@ -132,9 +132,7 @@ async function handlePreImport() {
       await validate()
       await parseAndExtractData(importState.url, '')
     } catch (e: any) {
-      notification.error({
-        message: await extractSdkResponseErrorMsg(e),
-      })
+      message.error(await extractSdkResponseErrorMsg(e))
     }
   } else if (activeKey.value === 'jsonEditorTab') {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor), '')
@@ -147,9 +145,7 @@ async function handleImport() {
     loading.value = true
     await templateEditorRef.value.importTemplate()
   } catch (e: any) {
-    return notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    return message.error(await extractSdkResponseErrorMsg(e))
   } finally {
     loading.value = false
   }
@@ -163,9 +159,7 @@ async function parseAndExtractData(val: any, name: string) {
     importColumns.value = []
     const templateGenerator: any = getAdapter(name, val)
     if (!templateGenerator) {
-      notification.error({
-        message: 'Template Generator cannot be found!',
-      })
+      message.error('Template Generator cannot be found!')
       return
     }
     await templateGenerator.init()
@@ -176,18 +170,13 @@ async function parseAndExtractData(val: any, name: string) {
     if (importOnly) importColumns.value = templateGenerator.getColumns()
     templateEditorModal.value = true
   } catch (e: any) {
-    console.log(e)
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
 function rejectDrop(fileList: any[]) {
-  fileList.map((file) => {
-    return notification.error({
-      message: `Failed to upload file ${file.name}`,
-    })
+  fileList.map((_) => {
+    return message.error('Template Generator cannot be found!')
   })
 }
 
@@ -204,13 +193,9 @@ function handleChange(info: UploadChangeParam) {
     reader.readAsArrayBuffer(info.file.originFileObj)
   }
   if (status === 'done') {
-    notification.success({
-      message: `Uploaded file ${info.file.name} successfully`,
-    })
+    message.success(`Uploaded file ${info.file.name} successfully`)
   } else if (status === 'error') {
-    notification.error({
-      message: `Failed to upload file ${info.file.name}`,
-    })
+    message.error(`Failed to upload file ${info.file.name}`)
   }
 }
 
diff --git a/packages/nc-gui-v2/components/dlg/TableRename.vue b/packages/nc-gui-v2/components/dlg/TableRename.vue
index 011e241099..3b58660782 100644
--- a/packages/nc-gui-v2/components/dlg/TableRename.vue
+++ b/packages/nc-gui-v2/components/dlg/TableRename.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { watchEffect } from '@vue/runtime-core'
-import { Form, notification } from 'ant-design-vue'
+import { Form, message } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
 import { useProject, useTabs } from '#imports'
 import { extractSdkResponseErrorMsg, validateTableName } from '~/utils'
@@ -76,15 +76,11 @@ const renameTable = async () => {
     dialogShow.value = false
     loadTables()
     updateTab({ id: tableMeta?.id }, { title: formState.title })
-    notification.success({
-      message: 'Table renamed successfully',
-    })
+    message.success('Table renamed successfully')
     $e('a:table:rename')
     dialogShow.value = false
-  } catch (e) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
   }
   loading = false
 }
diff --git a/packages/nc-gui-v2/components/dlg/ViewCreate.vue b/packages/nc-gui-v2/components/dlg/ViewCreate.vue
index 4062fd1e45..15932b905b 100644
--- a/packages/nc-gui-v2/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/ViewCreate.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance } from '@vue/runtime-core'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import type { Form as AntForm } from 'ant-design-vue'
 import { capitalize, inject } from '@vue/runtime-core'
 import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
@@ -125,16 +125,12 @@ async function onSubmit() {
       }
 
       if (data) {
-        notification.success({
-          message: 'View created successfully',
-        })
+        message.success('View created successfully')
 
         emits('created', data)
       }
     } catch (e: any) {
-      notification.error({
-        message: e.message,
-      })
+      message.error(e.message)
     }
 
     vModel.value = false
diff --git a/packages/nc-gui-v2/components/dlg/ViewDelete.vue b/packages/nc-gui-v2/components/dlg/ViewDelete.vue
index 1aefbaabc7..0e531aba88 100644
--- a/packages/nc-gui-v2/components/dlg/ViewDelete.vue
+++ b/packages/nc-gui-v2/components/dlg/ViewDelete.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import { onKeyStroke, useApi, useNuxtApp, useVModel } from '#imports'
 
@@ -34,15 +34,9 @@ async function onDelete() {
   try {
     await api.dbView.delete(props.view.id)
 
-    notification.success({
-      message: 'View deleted successfully',
-      duration: 3,
-    })
+    message.success('View deleted successfully')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-      duration: 3,
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   emits('deleted')
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 8852bde0e6..2d652a390b 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, notification } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useNuxtApp } from '#app'
@@ -36,9 +36,7 @@ const deleteColumn = () =>
         await $api.dbTableColumn.delete(column?.value?.id as string)
         getMeta(meta?.value?.id as string, true)
       } catch (e) {
-        notification.error({
-          message: await extractSdkResponseErrorMsg(e),
-        })
+        message.error(await extractSdkResponseErrorMsg(e))
       }
     },
   })
@@ -47,13 +45,9 @@ const setAsPrimaryValue = async () => {
   try {
     await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
     getMeta(meta?.value?.id as string, true)
-    notification.success({
-      message: 'Successfully updated as primary column',
-    })
+    message.success('Successfully updated as primary column')
   } catch (e) {
-    notification.error({
-      message: 'Failed to update primary column',
-    })
+    message.error('Failed to update primary column')
   }
 }
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 2b7a87c235..74669ff137 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -2,7 +2,7 @@
 import * as XLSX from 'xlsx'
 import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 import { ActiveViewInj, MetaInj } from '~/context'
@@ -94,19 +94,13 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
       }
       offset = +headers['nc-export-offset']
       if (offset > -1) {
-        notification.info({
-          message: 'Downloading more files',
-        })
+        message.info('Downloading more files')
       } else {
-        notification.success({
-          message: 'Successfully exported all table data',
-        })
+        message.success('Successfully exported all table data')
       }
     }
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 </script>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 7b967d147e..c03942f0c0 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -2,7 +2,7 @@
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { computed } from 'vue'
-import { message, notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
@@ -70,13 +70,9 @@ async function saveAllowCSVDownload() {
     await $api.dbViewShare.update(shared.value.id, {
       meta,
     } as any)
-    notification.success({
-      message: 'Successfully updated',
-    })
+    message.success('Successfully updated')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
   if (allowCSVDownload?.value) {
     $e('a:view:share:enable-csv-download')
@@ -90,13 +86,9 @@ const saveShareLinkPassword = async () => {
     await $api.dbViewShare.update(shared.value.id, {
       password: shared.value.password,
     })
-    notification.success({
-      message: 'Successfully updated',
-    })
+    message.success('Successfully updated')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:view:share:enable-pwd')
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 9733c5d5ac..91dfc5fb82 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
-import { message, notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { onMounted, useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
@@ -80,14 +80,10 @@ const copyLink = (view: SharedViewType) => {
 const deleteLink = async (id: string) => {
   try {
     await $api.dbViewShare.delete(id)
-    notification.success({
-      message: 'Deleted shared view successfully',
-    })
+    message.success('Deleted shared view successfully')
     await loadSharedViewsList()
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 </script>
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 34ce001247..725256cb7c 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
 import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 import { computed, inject, onClickOutside, useDebounceFn } from '#imports'
 import { ActiveViewInj, IsFormInj, MetaInj } from '~/context'
@@ -65,10 +65,7 @@ const activeRow = ref('')
 
 function updateView() {
   if ((formViewData.value?.subheading?.length || 0) > 255) {
-    notification.error({
-      message: 'Data too long for Form Description',
-      duration: 3,
-    })
+    message.error('Data too long for Form Description')
     return
   }
 
@@ -79,12 +76,7 @@ async function submitForm() {
   try {
     await formRef.value?.validateFields()
   } catch (e: any) {
-    e.errorFields.map((f: Record<string, any>) =>
-      notification.error({
-        message: f.errors.join(','),
-        duration: 3,
-      }),
-    )
+    e.errorFields.map((f: Record<string, any>) => message.error(f.errors.join(',')))
     return
   }
 
@@ -154,10 +146,7 @@ function onMove(event: any) {
 
 function hideColumn(idx: number) {
   if (isDbRequired(localColumns.value[idx]) || localColumns.value[idx].required) {
-    notification.info({
-      message: "Required field can't be moved",
-      duration: 3,
-    })
+    message.info("Required field can't be moved")
     return
   }
 
@@ -203,10 +192,7 @@ async function checkSMTPStatus() {
     const emailPluginActive = await $api.plugin.status('SMTP')
     if (!emailPluginActive) {
       emailMe.value = false
-      notification.info({
-        message: 'Please activate SMTP plugin in App store for enabling email notification',
-        duration: 3,
-      })
+      message.info('Please activate SMTP plugin in App store for enabling email notification')
     }
   }
 }
@@ -277,10 +263,7 @@ const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
     try {
       $api.dbView.formColumnUpdate(col.id, col)
     } catch (e: any) {
-      notification.error({
-        message: await extractSdkResponseErrorMsg(e),
-        duration: 3,
-      })
+      message.error(await extractSdkResponseErrorMsg(e))
     }
   }
 }, 250)
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 1ee2300dfc..89558695ad 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -2,7 +2,7 @@
 import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import type { SortableEvent } from 'sortablejs'
 import type { Menu as AntMenu } from 'ant-design-vue'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import Sortable from 'sortablejs'
 import RenameableMenuItem from './RenameableMenuItem.vue'
@@ -147,15 +147,9 @@ async function onRename(view: ViewType) {
       order: String(view.order),
     })
 
-    notification.success({
-      message: 'View renamed successfully',
-      duration: 3,
-    })
+    message.success('View renamed successfully')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-      duration: 3,
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index 1e9186be49..3a196e4719 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ViewTypes } from 'nocodb-sdk'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { viewIcons } from '~/utils'
 import { onKeyStroke, useDebounceFn, useNuxtApp, useVModel } from '#imports'
 
@@ -104,10 +104,7 @@ async function onRename() {
   const isValid = props.onValidate(vModel.value)
 
   if (isValid !== true) {
-    notification.error({
-      message: isValid,
-      duration: 2,
-    })
+    message.error(isValid)
 
     onCancel()
     return
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
index 4dfb0299a2..d9ad67610d 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import HTTPSnippet from 'httpsnippet'
 import { useClipboard } from '@vueuse/core'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj } from '~/context'
 
 const props = defineProps<Props>()
@@ -110,7 +110,7 @@ api.dbViewRow.list(
 
 const onCopyToClipboard = () => {
   copy(code)
-  notification.info({ message: 'Copied to clipboard' })
+  message.info('Copied to clipboard')
 }
 
 const afterVisibleChange = (visible: boolean) => {
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
index 795e0dadce..917c62bc37 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { computed, useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
@@ -20,9 +20,7 @@ async function changeLockType(type: LockType) {
   $e('a:grid:lockmenu', { lockType: type })
 
   if (type === 'personal') {
-    return notification.info({
-      message: 'Coming soon',
-    })
+    return message.info('Coming soon')
   }
   try {
     ;(view.value as any).lock_type = type
@@ -30,13 +28,9 @@ async function changeLockType(type: LockType) {
       lock_type: type,
     })
 
-    notification.success({
-      message: `Successfully Switched to ${type} view`,
-    })
+    message.success(`Successfully Switched to ${type} view`)
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
index 971b96f814..dc3624c5c7 100644
--- a/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { useClipboard } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -40,9 +40,7 @@ const copyToken = (token: string | undefined) => {
   if (!token) return
 
   copy(token)
-  notification.info({
-    message: 'Copied to clipboard',
-  })
+  message.info('Copied to clipboard')
 
   $e('c:api-token:copy')
 }
@@ -53,15 +51,11 @@ const generateToken = async () => {
 
     await $api.apiToken.create(project.id, selectedTokenData)
     showNewTokenModal = false
-    notification.success({
-      message: 'Token generated successfullyd',
-    })
+    message.success('Token generated successfully')
     selectedTokenData = {}
     await loadApiTokens()
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:api-token:generate')
@@ -73,15 +67,11 @@ const deleteToken = async () => {
 
     await $api.apiToken.delete(project.id, selectedTokenData.token)
 
-    notification.success({
-      message: 'Token deleted successfully',
-    })
+    message.success('Token deleted successfully')
     await loadApiTokens()
     showDeleteTokenModal = false
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:api-token:delete')
diff --git a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index 354a662e87..d14fffcf4b 100644
--- a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useClipboard, watchDebounced } from '@vueuse/core'
-import { notification } from 'ant-design-vue'
+import { message } 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'
@@ -52,9 +52,7 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
     totalRows = response.users.pageInfo.totalRows ?? 0
     users = response.users.list as User[]
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -63,14 +61,10 @@ const inviteUser = async (user: User) => {
     if (!project.value?.id) return
 
     await $api.auth.projectUserAdd(project.value.id, user)
-    notification.success({
-      message: 'Successfully added user to project',
-    })
+    message.success('Successfully added user to project')
     await loadUsers()
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:user:add')
@@ -81,15 +75,11 @@ const deleteUser = async () => {
     if (!project.value?.id || !selectedUser?.id) return
 
     await $api.auth.projectUserRemove(project.value.id, selectedUser.id)
-    notification.success({
-      message: 'Successfully deleted user from project',
-    })
+    message.success('Successfully deleted user from project')
     await loadUsers()
     showUserDeleteModal = false
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   } finally {
     showUserDeleteModal = false
   }
@@ -117,14 +107,10 @@ const resendInvite = async (user: User) => {
 
   try {
     await $api.auth.projectUserResendInvite(project.value.id, user.id)
-    notification.success({
-      message: 'Invite email sent successfully',
-    })
+    message.success('Invite email sent successfully')
     await loadUsers()
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:user:resend-invite')
@@ -136,9 +122,7 @@ const copyInviteUrl = (user: User) => {
   const getInviteUrl = (token: string) => `${dashboardUrl}/user/authentication/signup/${token}`
 
   copy(getInviteUrl(user.invite_token))
-  notification.success({
-    message: 'Invite url copied to clipboard',
-  })
+  message.success('Invite url copied to clipboard')
 }
 
 onMounted(async () => {
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
index ef150d6633..148b8d7e6a 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { onMounted, useClipboard, useNuxtApp, useProject } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
@@ -39,9 +39,7 @@ const loadBase = async () => {
       role: res.roles,
     }
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -56,9 +54,7 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
     base = res ?? {}
     base!.role = role
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:shared-base:enable', { role })
@@ -71,9 +67,7 @@ const disableSharedBase = async () => {
     await $api.project.sharedBaseDisable(project.value.id)
     base = null
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:shared-base:disable')
@@ -91,9 +85,7 @@ const recreate = async () => {
 
     base = { ...newBase, role: base?.role }
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:shared-base:recreate')
@@ -104,9 +96,7 @@ const copyUrl = async () => {
 
   await copy(url)
 
-  notification.success({
-    message: 'Copied shareable base url to clipboard!',
-  })
+  message.success('Copied shareable base url to clipboard!')
 
   $e('c:shared-base:copy-url')
 }
@@ -130,9 +120,7 @@ width="100%"
 height="700"
 style="background: transparent; border: 1px solid #ddd"></iframe>`)
 
-  notification.success({
-    message: 'Copied embeddable html code!',
-  })
+  message.success('Copied embeddable html code!')
 
   $e('c:shared-base:copy-embed-frame')
 }
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
index 521aae3f21..4a6fd02182 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Form, notification } from 'ant-design-vue'
+import { Form, message } from 'ant-design-vue'
 import { useClipboard } from '@vueuse/core'
 import ShareBase from './ShareBase.vue'
 import SendIcon from '~icons/material-symbols/send-outline'
@@ -89,14 +89,10 @@ const saveUser = async () => {
       })
       usersData.invitationToken = res.invite_token
     }
-    notification.success({
-      message: 'Successfully updated the user details',
-    })
+    message.success('Successfully updated the user details')
   } catch (e: any) {
     console.error(e)
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -108,9 +104,7 @@ const copyUrl = async () => {
   if (!inviteUrl) return
 
   copy(inviteUrl)
-  notification.success({
-    message: 'Copied shareable base url to clipboard!',
-  })
+  message.success('Copied shareable base url to clipboard!')
 
   $e('c:shared-base:copy-url')
 }
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 58fcbc5b95..4739448a47 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
-import { Form, notification } from 'ant-design-vue'
+import { Form, message } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import { computed, onMounted } from '#imports'
 import { extractSdkResponseErrorMsg, fieldRequiredValidator, getUIDTIcon } from '~/utils'
@@ -181,10 +181,7 @@ function missingRequiredColumnsValidation() {
       (c.pk ? !c.ai && !c.cdf : !c.cdf && c.rqd) && !srcDestMapping.value.some((r) => r.destCn === c.title),
   )
   if (missingRequiredColumns.length) {
-    notification.error({
-      message: `Following columns are required : ${missingRequiredColumns.map((c) => c.title).join(', ')}`,
-      duration: 3,
-    })
+    message.error(`Following columns are required : ${missingRequiredColumns.map((c) => c.title).join(', ')}`)
     return false
   }
   return true
@@ -192,10 +189,7 @@ function missingRequiredColumnsValidation() {
 
 function atLeastOneEnabledValidation() {
   if (srcDestMapping.value.filter((v) => v.enabled === true).length === 0) {
-    notification.error({
-      message: 'At least one column has to be selected',
-      duration: 3,
-    })
+    message.error('At least one column has to be selected')
     return false
   }
   return true
@@ -210,18 +204,12 @@ function fieldsValidation(record: Record<string, any>) {
   const tableName = meta?.value.title || ''
 
   if (!record.destCn) {
-    notification.error({
-      message: `Cannot find the destination column for ${record.srcCn}`,
-      duration: 3,
-    })
+    message.error(`Cannot find the destination column for ${record.srcCn}`)
     return false
   }
 
   if (srcDestMapping.value.filter((v) => v.destCn === record.destCn).length > 1) {
-    notification.error({
-      message: 'Duplicate mapping found, please remove one of the mapping',
-      duration: 3,
-    })
+    message.error('Duplicate mapping found, please remove one of the mapping')
     return false
   }
 
@@ -234,10 +222,7 @@ function fieldsValidation(record: Record<string, any>) {
         .slice(0, maxRowsToParse)
         .some((r: Record<string, any>) => r[record.srcCn] === null || r[record.srcCn] === undefined || r[record.srcCn] === '')
     ) {
-      notification.error({
-        message: 'null value violates not-null constraint',
-        duration: 3,
-      })
+      message.error('null value violates not-null constraint')
     }
   }
 
@@ -250,10 +235,7 @@ function fieldsValidation(record: Record<string, any>) {
             (r: Record<string, any>) => r[record.sourceCn] !== null && r[record.srcCn] !== undefined && isNaN(+r[record.srcCn]),
           )
       ) {
-        notification.error({
-          message: 'Source data contains some invalid numbers',
-          duration: 3,
-        })
+        message.error('Source data contains some invalid numbers')
         return false
       }
       break
@@ -280,10 +262,7 @@ function fieldsValidation(record: Record<string, any>) {
           return false
         })
       ) {
-        notification.error({
-          message: 'Source data contains some invalid boolean values',
-          duration: 3,
-        })
+        message.error('Source data contains some invalid boolean values')
         return false
       }
       break
@@ -340,15 +319,9 @@ async function importTemplate() {
       // reload table
       reloadHook.trigger()
 
-      notification.success({
-        message: 'Successfully imported table data',
-        duration: 3,
-      })
+      message.success('Successfully imported table data')
     } catch (e: any) {
-      notification.error({
-        message: e.message,
-        duration: 3,
-      })
+      message.error(e.message)
     } finally {
       isImporting.value = false
     }
@@ -439,9 +412,7 @@ async function importTemplate() {
         type: 'table',
       })
     } catch (e: any) {
-      notification.error({
-        message: await extractSdkResponseErrorMsg(e),
-      })
+      message.error(await extractSdkResponseErrorMsg(e))
     } finally {
       isImporting.value = false
     }
diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 8c2940322a..c83fea2798 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Form, notification } from 'ant-design-vue'
+import { Form, message } from 'ant-design-vue'
 import { MetaInj } from '~/context'
 import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
 import { inject, reactive, useApi, useNuxtApp } from '#imports'
@@ -302,9 +302,7 @@ async function loadPluginList() {
       hook.eventOperation = `${hook.event} ${hook.operation}`
     }
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -313,9 +311,7 @@ async function saveHooks() {
   try {
     await validate()
   } catch (_: any) {
-    notification.error({
-      message: 'Invalid Form',
-    })
+    message.error('Invalid Form')
 
     loading.value = false
 
@@ -353,13 +349,9 @@ async function saveHooks() {
     //   });
     // }
 
-    notification.success({
-      message: 'Webhook details updated successfully',
-    })
+    message.success('Webhook details updated successfully')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   } finally {
     loading.value = false
   }
diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index 157f76426e..c05cfdaa50 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { MetaInj } from '~/context'
 import { inject, onMounted, ref, useNuxtApp } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
@@ -20,9 +20,7 @@ async function loadHooksList() {
       return hook
     })
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -34,16 +32,12 @@ async function deleteHook(item: Record<string, any>, index: number) {
     } else {
       hooks.value.splice(index, 1)
     }
-    notification.success({
-      message: 'Hook deleted successfully',
-    })
+    message.success('Hook deleted successfully')
     if (!hooks.value.length) {
       hooks.value = []
     }
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 
   $e('a:webhook:delete')
diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 77497c068e..1a45f1f806 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { MetaInj } from '~/context'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
@@ -39,13 +39,9 @@ async function testWebhook() {
       payload: sampleData.value,
     })
 
-    notification.success({
-      message: 'Webhook tested successfully',
-    })
+    message.success('Webhook tested successfully')
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 1114089db6..260eea6f85 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -1,5 +1,5 @@
 import { createInjectionState } from '@vueuse/core'
-import { Form, notification } from 'ant-design-vue'
+import { Form, message } from 'ant-design-vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
@@ -177,9 +177,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
         console.log(formState, validators)
         if (!(await validate())) return
       } catch (e) {
-        notification.error({
-          message: 'Form validation failed',
-        })
+        message.error('Form validation failed')
         return
       }
 
@@ -188,9 +186,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
         // formState.value.title = formState.value.column_name
         if (column?.value) {
           await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
-          notification.success({
-            message: 'Column updated',
-          })
+          message.success('Column updated')
         } else {
           // todo : set additional meta for auto generated string id
           if (formState.value.uidt === UITypes.ID) {
@@ -208,15 +204,11 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
             getMeta(formState.value.childId, true).then(() => {})
           }
 
-          notification.success({
-            message: 'Column created',
-          })
+          message.success('Column created')
         }
         onSuccess?.()
       } catch (e: any) {
-        notification.error({
-          message: await extractSdkResponseErrorMsg(e),
-        })
+        message.error(await extractSdkResponseErrorMsg(e))
       }
     }
 
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 6db77e2669..de5d7874cd 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -1,7 +1,7 @@
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { message, notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
 import { useApi, useInjectionState, useProject, useProvideSmartsheetRowStore } from '#imports'
 import { NOCO } from '~/lib'
@@ -161,14 +161,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       // this.$emit('input', this.localState);
       // this.$emit('update:isNew', false);
 
-      notification.success({
-        message: `${primaryValue.value || 'Row'} updated successfully.`,
-        // position: 'bottom-right',
-      })
+      message.success(`${primaryValue.value || 'Row'} updated successfully.`)
 
       changedColumns.value = new Set()
     } catch (e: any) {
-      notification.error({ message: `Failed to update row`, description: await extractSdkResponseErrorMsg(e) })
+      message.error(`Failed to update row: ${await extractSdkResponseErrorMsg(e)}`)
     }
     $e('a:row-expand:add')
     return data
diff --git a/packages/nc-gui-v2/composables/useGlobal/actions.ts b/packages/nc-gui-v2/composables/useGlobal/actions.ts
index f0d8e8a7b9..4b0a8e0511 100644
--- a/packages/nc-gui-v2/composables/useGlobal/actions.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/actions.ts
@@ -1,4 +1,4 @@
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import type { Actions, State } from './types'
 import { useNuxtApp } from '#imports'
 
@@ -40,12 +40,7 @@ export function useGlobalActions(state: State): Actions {
         }
       })
       .catch((err) => {
-        notification.error({
-          // todo: add translation
-          message: err.message || 'You have been signed out.',
-        })
-        console.error(err)
-
+        message.error(err.message || 'You have been signed out.')
         signOut()
       })
   }
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index d247346e0c..08fae40172 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,6 +1,6 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { Modal, notification } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
 import { useInjectionState, useMetas, useProject } from '#imports'
 import { NOCO } from '~/lib'
 import type { Row } from '~/composables'
@@ -104,10 +104,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           )
         }
       } catch (e: any) {
-        notification.error({
-          message: 'Failed to load list',
-          description: await extractSdkResponseErrorMsg(e),
-        })
+        message.error(`Failed to load list: ${await extractSdkResponseErrorMsg(e)}`)
       }
     }
 
@@ -129,10 +126,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           },
         )
       } catch (e: any) {
-        notification.error({
-          message: 'Failed to load children list',
-          description: await extractSdkResponseErrorMsg(e),
-        })
+        message.error(`Failed to load children list: ${await extractSdkResponseErrorMsg(e)}`)
       }
     }
 
@@ -147,10 +141,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             reloadData?.()
             await loadChildrenList()
           } catch (e: any) {
-            notification.error({
-              message: 'Delete failed',
-              description: await extractSdkResponseErrorMsg(e),
-            })
+            message.error(`Delete failed: ${await extractSdkResponseErrorMsg(e)}`)
           }
         },
       })
@@ -182,10 +173,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           getRelatedTableRowId(row) as string,
         )
       } catch (e: any) {
-        notification.error({
-          message: 'Unlink failed',
-          description: await extractSdkResponseErrorMsg(e),
-        })
+        message.error(`Unlink failed: ${await extractSdkResponseErrorMsg(e)}`)
       }
       reloadData?.()
       // todo: reload table data and children list
@@ -221,10 +209,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         )
         await loadChildrenList()
       } catch (e: any) {
-        notification.error({
-          message: 'Linking failed',
-          description: await extractSdkResponseErrorMsg(e),
-        })
+        message.error(`Linking failed: ${await extractSdkResponseErrorMsg(e)}`)
       }
 
       // todo: reload table data and child list
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index c07b52ae79..bc9a59aa37 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -1,4 +1,4 @@
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
@@ -52,10 +52,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         relatedRowId,
       )
     } catch (e: any) {
-      notification.error({
-        message: 'Linking failed',
-        description: await extractSdkResponseErrorMsg(e),
-      })
+      message.error(await extractSdkResponseErrorMsg(e))
     }
   }
 
diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts
index 546c6cd2b8..e0dc39c4aa 100644
--- a/packages/nc-gui-v2/composables/useTable.ts
+++ b/packages/nc-gui-v2/composables/useTable.ts
@@ -1,4 +1,4 @@
-import { Modal, notification } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useProject } from './useProject'
@@ -76,13 +76,13 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
                 return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`
               }),
             )
-            notification.info({
-              message: h('div', {
+            message.info(
+              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>`,
+              <br><br>${refColMsgs.join('<br>')}<br><br>
+              Delete them & try again</div>`,
               }),
-            })
+            )
             return
           }
 
@@ -97,14 +97,10 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
           await loadTables()
 
           removeMeta(table.id as string)
-          notification.info({
-            message: `Deleted table ${table.title} successfully`,
-          })
+          message.info(`Deleted table ${table.title} successfully`)
           $e('a:table:delete')
         } catch (e: any) {
-          notification.error({
-            message: await extractSdkResponseErrorMsg(e),
-          })
+          message.error(await extractSdkResponseErrorMsg(e))
         }
       },
     })
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 78defc3423..393a0ed9c5 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,6 +1,6 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 import { NOCO } from '~/lib'
@@ -135,10 +135,7 @@ export function useViewData(
       })
       syncCount()
     } catch (error: any) {
-      notification.error({
-        message: 'Row insert failed',
-        description: await extractSdkResponseErrorMsg(error),
-      })
+      message.error(await extractSdkResponseErrorMsg(error))
     }
   }
 
@@ -180,10 +177,7 @@ export function useViewData(
               .then(() => {})
           */
     } catch (error: any) {
-      notification.error({
-        message: 'Row update failed',
-        description: await extractSdkResponseErrorMsg(error),
-      })
+      message.error(`Row update failed ${await extractSdkResponseErrorMsg(e)}`)
     }
   }
 
@@ -221,14 +215,13 @@ export function useViewData(
     )
 
     if (res.message) {
-      notification.info({
-        message: 'Row delete failed',
-        description: h('div', {
+      message.info(
+        `Row delete failed: ${h('div', {
           innerHTML: `<div style="padding:10px 4px">Unable to delete row with ID ${id} because of the following:
-                <br><br>${res.message.join('<br>')}<br><br>
-                Clear the data first & try again</div>`,
-        }),
-      })
+              <br><br>${res.message.join('<br>')}<br><br>
+              Clear the data first & try again</div>`,
+        })}`,
+      )
       return false
     }
     return true
@@ -251,10 +244,7 @@ export function useViewData(
       formattedData.value.splice(rowIndex, 1)
       syncCount()
     } catch (e: any) {
-      notification.error({
-        message: 'Failed to delete row',
-        description: await extractSdkResponseErrorMsg(e),
-      })
+      message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
     }
   }
 
@@ -279,10 +269,7 @@ export function useViewData(
         }
         formattedData.value.splice(row, 1)
       } catch (e: any) {
-        return notification.error({
-          message: 'Failed to delete row',
-          description: await extractSdkResponseErrorMsg(e),
-        })
+        return message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
       }
     }
     syncCount()
@@ -316,10 +303,7 @@ export function useViewData(
         }))
         .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order) as Record<string, any>
     } catch (e: any) {
-      return notification.error({
-        message: 'Failed to set form data',
-        description: await extractSdkResponseErrorMsg(e),
-      })
+      return message.error(`Failed to set form data: ${await extractSdkResponseErrorMsg(e)}`)
     }
   }
 
@@ -328,10 +312,7 @@ export function useViewData(
       if (!viewMeta?.value?.id || !view) return
       await $api.dbView.formUpdate(viewMeta.value.id, view)
     } catch (e: any) {
-      return notification.error({
-        message: 'Failed to update form view',
-        description: await extractSdkResponseErrorMsg(e),
-      })
+      return message.error(`Failed to update form view: ${await extractSdkResponseErrorMsg(e)}`)
     }
   }
 
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index b3e26a021c..75bc87d53a 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, notification } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { navigateTo } from '#app'
 import { computed, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
@@ -45,9 +45,7 @@ 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 notification.error({
-          message: await extractSdkResponseErrorMsg(e),
-        })
+        return message.error(await extractSdkResponseErrorMsg(e))
       }
     },
   })
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index 7adfdeea60..a3e1415eca 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -3,7 +3,7 @@ import { onMounted } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { ref } from 'vue'
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { navigateTo, useRoute } from '#app'
 import { extractSdkResponseErrorMsg, projectTitleValidator } from '~/utils'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
@@ -32,9 +32,7 @@ const getProject = async () => {
     const result: ProjectType = await api.project.read(route.params.id as string)
     formState.title = result.title as string
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
@@ -44,9 +42,7 @@ const renameProject = async () => {
 
     navigateTo(`/nc/${route.params.id}`)
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui-v2/pages/project/index/create-external.vue b/packages/nc-gui-v2/pages/project/index/create-external.vue
index 405660c896..e8a1f233fa 100644
--- a/packages/nc-gui-v2/pages/project/index/create-external.vue
+++ b/packages/nc-gui-v2/pages/project/index/create-external.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted } from '@vue/runtime-core'
-import { Form, Modal, notification } from 'ant-design-vue'
+import { Form, Modal, message } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
 import { computed, ref, useSidebar, watch } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
@@ -142,9 +142,7 @@ const createProject = async () => {
     $e('a:project:create:extdb')
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
   loading.value = false
 }
@@ -185,16 +183,12 @@ const testConnection = async () => {
         })
       } else {
         testSuccess.value = false
-        notification.error({
-          message: `${t('msg.error.dbConnectionFailed')} ${result.message}`,
-        })
+        message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
       }
     }
   } catch (e: any) {
     testSuccess.value = false
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index 797625f87a..074635a384 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/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 { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { nextTick, reactive, ref, useApi, useSidebar } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -35,9 +35,7 @@ const createProject = async () => {
 
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index b9b5635df6..17c5125f53 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, notification } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { navigateTo } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils'
@@ -49,9 +49,7 @@ const deleteProject = (project: ProjectType) => {
         await $api.project.delete(project.id as string)
         projects.splice(projects.indexOf(project), 1)
       } catch (e: any) {
-        notification.error({
-          message: await extractSdkResponseErrorMsg(e),
-        })
+        message.error(await extractSdkResponseErrorMsg(e))
       }
     },
   })