fix: better ux for duplicate modals

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

@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import type { TableType } from 'nocodb-sdk'
-import { message } from 'ant-design-vue'
 
 import ProjectWrapper from './ProjectWrapper.vue'
 
-import type { TabType } from '#imports'
-
 import {
   TreeViewInj,
   computed,
@@ -22,16 +19,13 @@ import {
   useNuxtApp,
   useRoles,
   useTablesStore,
-  useTabs,
 } from '#imports'
 
 import { useRouter } from '#app'
 
 const { isUIAllowed } = useRoles()
 
-const { addTab } = useTabs()
-
-const { $e, $poller } = useNuxtApp()
+const { $e } = useNuxtApp()
 
 const router = useRouter()
 
@@ -45,22 +39,14 @@ const { bases, basesList, activeProjectId } = storeToRefs(basesStore)
 
 const { isWorkspaceLoading } = storeToRefs(useWorkspace())
 
-const { openTable } = useTablesStore()
-
 const baseCreateDlg = ref(false)
 
 const baseStore = useBase()
 
-const { loadTables } = baseStore
-
-const { tables, isSharedBase } = storeToRefs(baseStore)
-
-const { t } = useI18n()
+const { isSharedBase } = storeToRefs(baseStore)
 
 const { activeTable: _activeTable } = storeToRefs(useTablesStore())
 
-const { refreshCommandPalette } = useCommandPalette()
-
 const contextMenuTarget = reactive<{ type?: 'base' | 'source' | 'table' | 'main' | 'layout'; value?: any }>({})
 
 const setMenuContext = (type: 'base' | 'source' | 'table' | 'main' | 'layout', value?: any) => {
@@ -120,38 +106,6 @@ const duplicateTable = async (table: TableType) => {
   const { close } = useDialog(resolveComponent('DlgTableDuplicate'), {
     'modelValue': isOpen,
     'table': table,
-    'onOk': async (jobData: { id: string }) => {
-      $poller.subscribe(
-        { id: jobData.id },
-        async (data: {
-          id: string
-          status?: string
-          data?: {
-            error?: {
-              message: string
-            }
-            message?: string
-            result?: any
-          }
-        }) => {
-          if (data.status !== 'close') {
-            if (data.status === JobStatus.COMPLETED) {
-              await loadTables()
-              refreshCommandPalette()
-              const newTable = tables.value.find((el) => el.id === data?.data?.result?.id)
-              if (newTable) addTab({ title: newTable.title, id: newTable.id, type: newTable.type as TabType })
-
-              openTable(newTable!)
-            } else if (data.status === JobStatus.FAILED) {
-              message.error(t('msg.error.failedToDuplicateTable'))
-              await loadTables()
-            }
-          }
-        },
-      )
-
-      $e('a:table:duplicate')
-    },
     'onUpdate:modelValue': closeDialog,
   })
 

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
 import type { BaseType } from 'nocodb-sdk'
-import { useVModel } from '#imports'
+import { isEeUI, useVModel } from '#imports'
 
 const props = defineProps<{
   modelValue: boolean
@@ -15,6 +15,15 @@ const { refreshCommandPalette } = useCommandPalette()
 
 const { api } = useApi()
 
+const { $e, $poller } = useNuxtApp()
+
+const basesStore = useBases()
+
+const { loadProjects, createProject: _createProject } = basesStore
+const { bases } = storeToRefs(basesStore)
+
+const { navigateToProject } = useGlobal()
+
 const dialogShow = useVModel(props, 'modelValue', emit)
 
 const options = ref({
@@ -57,12 +66,53 @@ const _duplicate = async () => {
         }),
       },
     })
-    props.onOk(jobData as any)
+
+    await loadProjects('workspace')
+
+    $poller.subscribe(
+      { id: jobData.id },
+      async (data: {
+        id: string
+        status?: string
+        data?: {
+          error?: {
+            message: string
+          }
+          message?: string
+          result?: any
+        }
+      }) => {
+        if (data.status !== 'close') {
+          if (data.status === JobStatus.COMPLETED) {
+            await loadProjects('workspace')
+            const base = bases.value.get(jobData.base_id)
+
+            // open project after duplication
+            if (base) {
+              await navigateToProject({
+                workspaceId: isEeUI ? base.fk_workspace_id : undefined,
+                baseId: base.id,
+                type: base.type,
+              })
+            }
+            refreshCommandPalette()
+            isLoading.value = false
+            dialogShow.value = false
+          } else if (data.status === JobStatus.FAILED) {
+            message.error('Failed to duplicate project')
+            await loadProjects('workspace')
+            refreshCommandPalette()
+            isLoading.value = false
+            dialogShow.value = false
+          }
+        }
+      },
+    )
+
+    $e('a:base:duplicate')
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
     isLoading.value = false
-    refreshCommandPalette()
     dialogShow.value = false
   }
 }

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

@@ -94,6 +94,8 @@ const _duplicate = async () => {
     $e('a:base:duplicate-shared-base')
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+    isLoading.value = false
+    dialogShow.value = false
   }
 }
 </script>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { TableType } from 'nocodb-sdk'
+import { message } from 'ant-design-vue'
 import { useVModel } from '#imports'
+import type { TabType } from '#imports'
 
 const props = defineProps<{
   modelValue: boolean
@@ -14,6 +16,26 @@ const { api } = useApi()
 
 const dialogShow = useVModel(props, 'modelValue', emit)
 
+const { addTab } = useTabs()
+
+const { $e, $poller } = useNuxtApp()
+
+const basesStore = useBases()
+
+const { createProject: _createProject } = basesStore
+
+const { openTable } = useTablesStore()
+
+const baseStore = useBase()
+
+const { loadTables } = baseStore
+
+const { tables } = storeToRefs(baseStore)
+
+const { t } = useI18n()
+
+const { activeTable: _activeTable } = storeToRefs(useTablesStore())
+
 const { refreshCommandPalette } = useCommandPalette()
 
 const options = ref({
@@ -37,13 +59,45 @@ const _duplicate = async () => {
   try {
     isLoading.value = true
     const jobData = await api.dbTable.duplicate(props.table.base_id!, props.table.id!, { options: optionsToExclude.value })
-    props.onOk(jobData as any)
+
+    $poller.subscribe(
+      { id: jobData.id },
+      async (data: {
+        id: string
+        status?: string
+        data?: {
+          error?: {
+            message: string
+          }
+          message?: string
+          result?: any
+        }
+      }) => {
+        if (data.status !== 'close') {
+          if (data.status === JobStatus.COMPLETED) {
+            await loadTables()
+            refreshCommandPalette()
+            const newTable = tables.value.find((el) => el.id === data?.data?.result?.id)
+            if (newTable) addTab({ title: newTable.title, id: newTable.id, type: newTable.type as TabType })
+
+            openTable(newTable!)
+            isLoading.value = false
+            dialogShow.value = false
+          } else if (data.status === JobStatus.FAILED) {
+            message.error(t('msg.error.failedToDuplicateTable'))
+            await loadTables()
+            isLoading.value = false
+            dialogShow.value = false
+          }
+        }
+      },
+    )
+
+    $e('a:table:duplicate')
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
     isLoading.value = false
     dialogShow.value = false
-    refreshCommandPalette()
   }
 }