feat(gui): show table icon in LTAR and UI acl

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -576,10 +576,10 @@ const setIcon = async (icon: string, table: TableType) => {
                             :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
                             trigger="click"
                             destroy-popup-on-hide
-                            @click.stop
                             class="flex items-center"
+                            @click.stop
                           >
-                            <div @click.stop class="flex items-center">
+                            <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
@@ -606,7 +606,9 @@ const setIcon = async (icon: string, table: TableType) => {
                         </div>
 
                         <div class="nc-tbl-title flex-1">
-                          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{ table.title }}</GeneralTruncateText>
+                          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
+                            table.title
+                          }}</GeneralTruncateText>
                         </div>
 
                         <a-dropdown

packages/nc-gui/components/dashboard/settings/UIAcl.vue

@@ -159,7 +159,17 @@ const columns = [
           </template>
 
           <template #bodyCell="{ record, column }">
-            <div v-if="column.name === 'table_name'">{{ record._ptn }}</div>
+            <div v-if="column.name === 'table_name'">
+              <div class="flex items-center gap-1">
+                <div class="min-w-5 flex items-center justify-center">
+                  <GeneralTableIcon
+                    :meta="{ meta: record.table_meta, type: record.ptype }"
+                    class="text-gray-500"
+                  ></GeneralTableIcon>
+                </div>
+                <span class="overflow-ellipsis min-w-0 shrink-1">{{ record._ptn }}</span>
+              </div>
+            </div>
 
             <div v-if="column.name === 'view_name'">
               <div class="flex items-center">

packages/nc-gui/components/general/TableIcon.vue

@@ -11,11 +11,11 @@ const { meta: tableMeta } = defineProps<{
   <IcIcon
     v-if="tableMeta.meta?.icon"
     :data-testid="`nc-icon-${tableMeta.meta?.icon}`"
-    class="text-xl"
+    class="text-lg"
     :icon="tableMeta.meta?.icon"
   ></IcIcon>
 
-  <MdiEyeCircleOutline v-else-if="tableMeta.meta?.type === 'view'" class="w-5" />
+  <MdiEyeCircleOutline v-else-if="tableMeta?.type === 'view'" class="w-5" />
   <MdiTableLarge v-else class="w-5" />
 </template>
 

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -73,7 +73,13 @@ const filterOption = (value: string, option: { key: string }) => option.key.toLo
           @change="onDataTypeChange"
         >
           <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
-            {{ table.title }}
+            <div class="flex items-center gap-2">
+              <div class="min-w-5 flex items-center justify-center">
+                <GeneralTableIcon :meta="table" class="text-gray-500"></GeneralTableIcon>
+              </div>
+
+              <span class="overflow-ellipsis min-w-0 shrink-1">{{ table.title }}</span>
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>

packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts

@@ -78,6 +78,7 @@ export async function xcVisibilityMetaGet(
         ptype: model.type,
         tn: view.title,
         _tn: view.title,
+        table_meta: model.meta,
         ...view,
         disabled: { ...defaultDisabled },
       };