refactor(gui): code cleanup

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

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

@@ -6,6 +6,9 @@ import { emojiIcons } from '#imports'
 const emit = defineEmits(['selectIcon'])
 let search = $ref('')
 
+// keep a variable to load icons with infinite scroll
+// set initial value to 60 to load first 60 icons (index - `0 - 59`)
+// and next value will be 120 and shows first 120 icons ( index - `0 - 129`)
 let toIndex = $ref(60)
 
 const filteredIcons = computed(() => {
@@ -13,6 +16,7 @@ const filteredIcons = computed(() => {
 })
 
 const load = () => {
+  // increment `toIndex` to include next set of icons
   toIndex += Math.min(filteredIcons.value.length, toIndex + 60)
   if (toIndex > filteredIcons.value.length) {
     toIndex = filteredIcons.value.length
@@ -28,7 +32,13 @@ const selectIcon = (icon: string) => {
 <template>
   <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container">
     <div @click.stop>
-      <input v-model="search" data-testid="nc-emoji-filter" class="p-1 text-xs border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
+      <input
+        v-model="search"
+        data-testid="nc-emoji-filter"
+        class="p-1 text-xs border-1 w-full overflow-y-auto"
+        placeholder="Search"
+        @input="toIndex = 60"
+      />
     </div>
     <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)">

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -49,7 +49,12 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
             <template #tab>
               <div class="flex items-center gap-2 max-w-[110px]" data-testid="nc-tab-title">
                 <div class="flex items-center">
-                  <Icon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" :data-testid="`nc-tab-icon-${tab.meta?.icon}`"/>
+                  <Icon
+                    v-if="tab.meta?.icon"
+                    :icon="tab.meta?.icon"
+                    class="text-xl"
+                    :data-testid="`nc-tab-icon-${tab.meta?.icon}`"
+                  />
                   <component :is="icon(tab)" v-else class="text-sm" />
                 </div>
 

tests/playwright/tests/tableOperations.spec.ts

@@ -13,7 +13,7 @@ test.describe('Table Operations', () => {
     settings = dashboard.settings;
   });
 
-  test.only('Create, and delete table, verify in audit tab, rename City table, update icon and reorder tables', async () => {
+  test('Create, and delete table, verify in audit tab, rename City table, update icon and reorder tables', async () => {
     await dashboard.treeView.createTable({ title: 'tablex' });
     await dashboard.treeView.verifyTable({ title: 'tablex' });