Merge pull request #4714 from nocodb/fix/4713-table-icon

Fix:  GUI Treeview - table icon toggling in multi datasource view

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

@@ -896,18 +896,37 @@ const setIcon = async (icon: string, table: TableType) => {
                         <template #title>{{ table.table_name }}</template>
                         <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                            <MdiDragVertical
-                              v-if="isUIAllowed('treeview-drag-n-drop')"
-                              :class="`nc-child-draggable-icon-${table.title}`"
-                              class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                              @click.stop.prevent
-                            />
-
+                            <component
+                              :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
+                              trigger="click"
+                              destroy-popup-on-hide
+                              class="flex items-center"
+                              @click.stop
+                            >
+                              <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
+                                      :key="table.meta?.icon"
+                                      :data-testid="`nc-icon-${table.meta?.icon}`"
+                                      class="text-xl"
+                                      :icon="table.meta?.icon"
+                                    ></Icon>
+                                  </span>
                                   <component
                                     :is="icon(table)"
-                              class="nc-view-icon text-xs"
-                              :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                    v-else
+                                    class="nc-table-icon nc-view-icon w-5"
+                                    :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
                                   />
+
+                                  <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
+                                </component>
+                              </div>
+                              <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
+                                <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
+                              </template>
+                            </component>
                           </div>
 
                           <div class="nc-tbl-title flex-1">

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -201,11 +201,11 @@ const iframeCode = computed(() => {
   if (!sharedViewUrl.value) return
 
   return `<iframe class="nc-embed"
-"src="${sharedViewUrl.value}?embed"
-frameborder="0"
-width="100%"
-height="700"
-style="background: transparent; border: 1px solid #ddd"/>`
+  src="${sharedViewUrl.value}?embed"
+  frameborder="0"
+  width="100%"
+  height="700"
+  style="background: transparent; border: 1px solid #ddd"/>`
 })
 
 const copyIframeCode = async () => {
@@ -251,7 +251,7 @@ const copyIframeCode = async () => {
         <div class="flex-1 h-min text-xs text-gray-500">{{ sharedViewUrl }}</div>
 
         <a v-e="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
-          <MdiOpenInNew class="text-sm text-gray-500 mt-2" />
+          <MdiOpenInNew class="text-sm text-gray-500" />
         </a>
 
         <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />

packages/nc-gui/pages/index/index/index.vue

@@ -17,7 +17,6 @@ import {
   useApi,
   useBreakpoints,
   useCopy,
-  useGlobal,
   useNuxtApp,
   useUIPermission,
 } from '#imports'
@@ -38,8 +37,6 @@ const filterQuery = ref('')
 
 const projects = ref<ProjectType[]>()
 
-const { appInfo } = useGlobal()
-
 const loadProjects = async () => {
   const response = await api.project.list({})
   projects.value = response.list