From b85cfd96a6e824c4434b69ab99a25a188e8aedb2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 2 Jun 2023 11:49:43 +0530
Subject: [PATCH 1/2] fix: on table create/duplicate after completion scroll to
 the new table in treeview

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 20 ++++++++++++++++++-
 .../nc-gui/components/dlg/TableCreate.vue     |  3 ++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 5940b634c5..58760fff5d 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { nextTick } from '@vue/runtime-core'
 import type { TableType } from 'nocodb-sdk'
 import type { Input } from 'ant-design-vue'
 import { Dropdown, Tooltip, message } from 'ant-design-vue'
 import Sortable from 'sortablejs'
 import GithubButton from 'vue-github-button'
-import { Icon } from '@iconify/vue'
 import type { VNodeRef } from '#imports'
 import {
   ClientType,
@@ -279,6 +279,15 @@ function openAirtableImportDialog(baseId?: string) {
   }
 }
 
+function scrollToTable(table: TableType) {
+  // get the table node in the tree view using the data-id attribute
+  const el = document.querySelector(`.nc-tree-item[data-id="${table?.id}"]`)
+  // scroll to the table node if found
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' })
+  }
+}
+
 function openTableCreateDialog(baseId?: string) {
   $e('c:table:create:navdraw')
 
@@ -288,6 +297,12 @@ function openTableCreateDialog(baseId?: string) {
     'modelValue': isOpen,
     'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
+    'onCreate': (table: TableType) => {
+      // on new table created scroll to the table in the tree view
+      nextTick(() => {
+        scrollToTable(table)
+      })
+    },
   })
 
   function closeDialog() {
@@ -405,6 +420,9 @@ const duplicateTable = async (table: TableType) => {
           await loadTables()
           const newTable = tables.value.find((el) => el.id === data?.result?.id)
           if (newTable) addTableTab(newTable)
+          await nextTick(() => {
+            scrollToTable(newTable)
+          })
         } else if (status === JobStatus.FAILED) {
           message.error('Failed to duplicate table')
           await loadTables()
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 3478159dc0..c1688a39fb 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
   baseId: string
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'create'])
 
 const dialogShow = useVModel(props, 'modelValue', emit)
 
@@ -40,6 +40,7 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
     type: TabType.TABLE,
   })
 
+  emit('create', table)
   dialogShow.value = false
 }, props.baseId)
 

From 803c83a487dd6de759620bc2da34b0bc720f2910 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 2 Jun 2023 19:20:57 +0530
Subject: [PATCH 2/2] fix: Icon as IconifyIcon

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue        | 9 +++++----
 packages/nc-gui/components/general/EmojiIcons.vue        | 4 ++--
 .../pages/[projectType]/[projectId]/index/index.vue      | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 58760fff5d..06fa11d13c 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { nextTick } from '@vue/runtime-core'
+import { Icon as IconifyIcon } from '@iconify/vue'
 import type { TableType } from 'nocodb-sdk'
 import type { Input } from 'ant-design-vue'
 import { Dropdown, Tooltip, message } from 'ant-design-vue'
@@ -734,12 +735,12 @@ const duplicateTable = async (table: TableType) => {
                             <div class="flex items-center" @click.stop>
                               <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
                                 <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
-                                  <Icon
+                                  <IconifyIcon
                                     :key="table.meta?.icon"
                                     :data-testid="`nc-icon-${table.meta?.icon}`"
                                     class="text-xl"
                                     :icon="table.meta?.icon"
-                                  ></Icon>
+                                  ></IconifyIcon>
                                 </span>
                                 <component
                                   :is="icon(table)"
@@ -1058,12 +1059,12 @@ const duplicateTable = async (table: TableType) => {
                               <div class="flex items-center" @click.stop>
                                 <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
                                   <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
-                                    <Icon
+                                    <IconifyIcon
                                       :key="table.meta?.icon"
                                       :data-testid="`nc-icon-${table.meta?.icon}`"
                                       class="text-xl"
                                       :icon="table.meta?.icon"
-                                    ></Icon>
+                                    ></IconifyIcon>
                                   </span>
                                   <component
                                     :is="icon(table)"
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index c07b505a97..e25467607b 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
 import InfiniteLoading from 'v3-infinite-loading'
 import { emojiIcons } from '#imports'
 
@@ -48,7 +48,7 @@ const selectIcon = (icon?: string) => {
       <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
         <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">
           <span class="cursor-pointer nc-emoji-item">
-            <Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon>
+            <IconifyIcon class="text-xl iconify" :icon="`emojione:${icon}`"></IconifyIcon>
           </span>
         </div>
         <InfiniteLoading @infinite="load"><span /></InfiniteLoading>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index a374aaaa8d..c31b960697 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
 import { TabMetaInj, iconMap, provide, storeToRefs, useGlobal, useSidebar, useTabs } from '#imports'
@@ -58,7 +58,7 @@ const hideSidebarOnClickOrTouchIfMobileMode = () => {
             <template #tab>
               <div class="flex items-center gap-2" data-testid="nc-tab-title">
                 <div class="flex items-center">
-                  <Icon
+                  <IconifyIcon
                     v-if="tab.meta?.icon"
                     :icon="tab.meta?.icon"
                     class="text-xl"