From 83cc596c1368b7c136145cc0aebea30f46654ad0 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 10 Oct 2023 20:37:55 +0000
Subject: [PATCH 1/4] fix: better ux for duplicate modals

---
 .../components/dashboard/TreeView/index.vue   | 50 +---------------
 .../components/dlg/ProjectDuplicate.vue       | 58 ++++++++++++++++--
 .../components/dlg/SharedBaseDuplicate.vue    |  2 +
 .../nc-gui/components/dlg/TableDuplicate.vue  | 60 ++++++++++++++++++-
 4 files changed, 115 insertions(+), 55 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/index.vue b/packages/nc-gui/components/dashboard/TreeView/index.vue
index b0a593cb0b..267434577e 100644
--- a/packages/nc-gui/components/dashboard/TreeView/index.vue
+++ b/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,
   })
 
diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index e8af9a317d..85b9f7e1c3 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/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
   }
 }
diff --git a/packages/nc-gui/components/dlg/SharedBaseDuplicate.vue b/packages/nc-gui/components/dlg/SharedBaseDuplicate.vue
index fd290ffba9..17147b0cbc 100644
--- a/packages/nc-gui/components/dlg/SharedBaseDuplicate.vue
+++ b/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>
diff --git a/packages/nc-gui/components/dlg/TableDuplicate.vue b/packages/nc-gui/components/dlg/TableDuplicate.vue
index 2c4ee4b70c..1bb43a1e18 100644
--- a/packages/nc-gui/components/dlg/TableDuplicate.vue
+++ b/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()
   }
 }
 

From e117bf6d4809d7cc9e380c4b14ef4434d53e7fa0 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 10 Oct 2023 20:37:56 +0000
Subject: [PATCH 2/4] fix: keep duplicate modals open until job is completed

---
 packages/nc-gui/components/dlg/ProjectDuplicate.vue | 12 ++++++++++--
 packages/nc-gui/components/dlg/TableDuplicate.vue   |  6 ++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index 85b9f7e1c3..f3f2fbe5ea 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
@@ -128,7 +128,15 @@ const isEaster = ref(false)
 </script>
 
 <template>
-  <GeneralModal v-if="base" v-model:visible="dialogShow" class="!w-[30rem]" wrap-class-name="nc-modal-base-duplicate">
+  <GeneralModal
+    v-if="base"
+    v-model:visible="dialogShow"
+    :closable="!isLoading"
+    :mask-closable="!isLoading"
+    :keyboard="!isLoading"
+    class="!w-[30rem]"
+    wrap-class-name="nc-modal-base-duplicate"
+  >
     <div>
       <div class="prose-xl font-bold self-center" @dblclick="isEaster = !isEaster">
         {{ $t('general.duplicate') }} {{ $t('objects.project') }}
@@ -147,7 +155,7 @@ const isEaster = ref(false)
       </div>
     </div>
     <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">
-      <NcButton key="back" type="secondary" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton>
+      <NcButton v-if="!isLoading" key="back" type="secondary" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton>
       <NcButton key="submit" v-e="['a:base:duplicate']" :loading="isLoading" @click="_duplicate"
         >{{ $t('general.confirm') }}
       </NcButton>
diff --git a/packages/nc-gui/components/dlg/TableDuplicate.vue b/packages/nc-gui/components/dlg/TableDuplicate.vue
index 1bb43a1e18..91549cedea 100644
--- a/packages/nc-gui/components/dlg/TableDuplicate.vue
+++ b/packages/nc-gui/components/dlg/TableDuplicate.vue
@@ -115,10 +115,12 @@ const isEaster = ref(false)
   <GeneralModal
     v-model:visible="dialogShow"
     :class="{ active: dialogShow }"
+    :closable="!isLoading"
+    :mask-closable="!isLoading"
+    :keyboard="!isLoading"
     centered
     wrap-class-name="nc-modal-table-duplicate"
     :footer="null"
-    :closable="false"
     class="!w-[30rem]"
     @keydown.esc="dialogShow = false"
   >
@@ -140,7 +142,7 @@ const isEaster = ref(false)
       </div>
     </div>
     <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">
-      <NcButton key="back" type="secondary" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton>
+      <NcButton v-if="!isLoading" key="back" type="secondary" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton>
       <NcButton key="submit" v-e="['a:table:duplicate']" type="primary" :loading="isLoading" @click="_duplicate"
         >{{ $t('general.confirm') }}
       </NcButton>

From faf92b7c943e091bb5692097252a9b4fe53997eb Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 10 Oct 2023 20:37:56 +0000
Subject: [PATCH 3/4] fix: avoid refreshing before job completes

---
 packages/nc-gui/components/dlg/ProjectDuplicate.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index f3f2fbe5ea..89e65dd4b8 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
@@ -67,8 +67,6 @@ const _duplicate = async () => {
       },
     })
 
-    await loadProjects('workspace')
-
     $poller.subscribe(
       { id: jobData.id },
       async (data: {

From 0b6f145e46b2d9a5e6f1701045e108cedd1d1f09 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 10 Oct 2023 20:37:56 +0000
Subject: [PATCH 4/4] fix: disable checkboxes while loading

---
 packages/nc-gui/components/dlg/ProjectDuplicate.vue | 8 +++++---
 packages/nc-gui/components/dlg/TableDuplicate.vue   | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ProjectDuplicate.vue b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
index 89e65dd4b8..fbf172943e 100644
--- a/packages/nc-gui/components/dlg/ProjectDuplicate.vue
+++ b/packages/nc-gui/components/dlg/ProjectDuplicate.vue
@@ -147,9 +147,11 @@ const isEaster = ref(false)
       <a-divider class="!m-0 !p-0 !my-2" />
 
       <div class="text-xs p-2">
-        <a-checkbox v-model:checked="options.includeData">{{ $t('labels.includeData') }}</a-checkbox>
-        <a-checkbox v-model:checked="options.includeViews">{{ $t('labels.includeView') }}</a-checkbox>
-        <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks">{{ $t('labels.includeWebhook') }}</a-checkbox>
+        <a-checkbox v-model:checked="options.includeData" :disabled="isLoading">{{ $t('labels.includeData') }}</a-checkbox>
+        <a-checkbox v-model:checked="options.includeViews" :disabled="isLoading">{{ $t('labels.includeView') }}</a-checkbox>
+        <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks" :disabled="isLoading">
+          {{ $t('labels.includeWebhook') }}
+        </a-checkbox>
       </div>
     </div>
     <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">
diff --git a/packages/nc-gui/components/dlg/TableDuplicate.vue b/packages/nc-gui/components/dlg/TableDuplicate.vue
index 91549cedea..c6879ef320 100644
--- a/packages/nc-gui/components/dlg/TableDuplicate.vue
+++ b/packages/nc-gui/components/dlg/TableDuplicate.vue
@@ -136,9 +136,11 @@ const isEaster = ref(false)
       <a-divider class="!m-0 !p-0 !my-2" />
 
       <div class="text-xs p-2">
-        <a-checkbox v-model:checked="options.includeData">{{ $t('labels.includeData') }}</a-checkbox>
-        <a-checkbox v-model:checked="options.includeViews">{{ $t('labels.includeView') }}</a-checkbox>
-        <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks">{{ $t('labels.includeWebhook') }}</a-checkbox>
+        <a-checkbox v-model:checked="options.includeData" :disabled="isLoading">{{ $t('labels.includeData') }}</a-checkbox>
+        <a-checkbox v-model:checked="options.includeViews" :disabled="isLoading">{{ $t('labels.includeView') }}</a-checkbox>
+        <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks" :disabled="isLoading">
+          {{ $t('labels.includeWebhook') }}
+        </a-checkbox>
       </div>
     </div>
     <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">