From 8042a00de3e6b175989151b8025e981ac6b6fb51 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 00:58:57 +0200
Subject: [PATCH] fix(nc-gui): correctly update tab after renaming table

---
 .../nc-gui/components/dlg/TableRename.vue     | 34 +++++++++----------
 .../components/general/TruncateText.vue       |  8 +++--
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 1ef7c89f0a..e2f6f86bad 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TableType } from 'nocodb-sdk'
+import type { ComponentPublicInstance } from '@vue/runtime-core'
 import {
   Form,
   computed,
@@ -12,6 +13,7 @@ import {
   useNuxtApp,
   useProject,
   useTabs,
+  useVModel,
   validateTableName,
   watchEffect,
 } from '#imports'
@@ -21,7 +23,7 @@ interface Props {
   tableMeta: TableType
 }
 
-const { modelValue = false, tableMeta } = defineProps<Props>()
+const { tableMeta, ...props } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue', 'updated'])
 
@@ -31,20 +33,13 @@ const { $e, $api } = useNuxtApp()
 
 const { setMeta } = useMetas()
 
-const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v) {
-    emit('update:modelValue', v)
-  },
-})
+const dialogShow = useVModel(props, 'modelValue', emit)
 
 const { updateTab } = useTabs()
 
 const { loadTables, tables, project, isMysql, isMssql, isPg } = useProject()
 
-const inputEl = $ref<any>()
+const inputEl = $ref<ComponentPublicInstance>()
 
 let loading = $ref(false)
 
@@ -104,11 +99,13 @@ watchEffect(
   () => {
     if (tableMeta?.title) formState.title = `${tableMeta.title}`
 
-    // todo: replace setTimeout and follow better approach
     nextTick(() => {
-      const input = inputEl?.$el
-      input.setSelectionRange(0, formState.title.length)
-      input.focus()
+      const input = inputEl?.$el as HTMLInputElement
+
+      if (input) {
+        input.setSelectionRange(0, formState.title.length)
+        input.focus()
+      }
     })
   },
   { flush: 'post' },
@@ -128,14 +125,17 @@ const renameTable = async () => {
 
     await loadTables()
 
-    updateTab({ id: tableMeta.id }, { title: formState.title })
-
     // update metas
-    await setMeta(await $api.dbTable.read(tableMeta.id as string))
+    const newMeta = await $api.dbTable.read(tableMeta.id as string)
+    await setMeta(newMeta)
+
+    updateTab({ id: tableMeta.id }, { title: newMeta.title })
 
     // Table renamed successfully
     message.success(t('msg.success.tableRenamed'))
+
     $e('a:table:rename')
+
     dialogShow.value = false
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
diff --git a/packages/nc-gui/components/general/TruncateText.vue b/packages/nc-gui/components/general/TruncateText.vue
index 01b74659d9..aa59415e39 100644
--- a/packages/nc-gui/components/general/TruncateText.vue
+++ b/packages/nc-gui/components/general/TruncateText.vue
@@ -20,12 +20,14 @@ interface Props {
 
 const { placement = 'bottom', length = 20 } = defineProps<Props>()
 
-const text = ref()
+const text = ref<HTMLDivElement>()
 
-const enableTooltip = computed(() => text.value?.textContent.length > length)
+const enableTooltip = computed(() => text.value?.textContent?.length && text.value?.textContent?.length > length)
 
 const shortName = computed(() =>
-  text.value?.textContent.length > length ? `${text.value?.textContent.substr(0, length - 3)}...` : text.value?.textContent,
+  text.value?.textContent?.length && text.value?.textContent.length > length
+    ? `${text.value?.textContent?.substr(0, length - 3)}...`
+    : text.value?.textContent,
 )
 </script>