test(playwright): add test for icon change

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

packages/nc-gui/components.d.ts

@@ -50,7 +50,6 @@ declare module '@vue/runtime-core' {
     AntDesignMenuFoldOutlined: typeof import('~icons/ant-design/menu-fold-outlined')['default']
     AntDesignMenuUnfoldOutlined: typeof import('~icons/ant-design/menu-unfold-outlined')['default']
     APagination: typeof import('ant-design-vue/es')['Pagination']
-    APopover: typeof import('ant-design-vue/es')['Popover']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']

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

@@ -78,7 +78,6 @@ const initSortable = (el: Element) => {
   if (!base_id) return
   if (sortables[base_id]) sortables[base_id].destroy()
   Sortable.create(el as HTMLLIElement, {
-    // handle: '.nc-drag-icon',
     onEnd: async (evt) => {
       const offset = tables.value.findIndex((table) => table.base_id === base_id)
 
@@ -565,16 +564,21 @@ const setIcon = (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}`">
-                          <a-dropdown trigger="click" @click.stop destroy-popup-on-hide>
+                          <a-dropdown trigger="click" destroy-popup-on-hide @click.stop>
                             <div @click.stop>
                               <a-tooltip>
-                                <span v-if="table.meta?.icon" :key="table.meta?.icon">
+                                <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon">
-                                  <Icon :key="table.meta?.icon" class="text-xl" :icon="table.meta?.icon"></Icon>
+                                  <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)"
                                   v-else
-                                  class="nc-view-icon w-5"
+                                  class="nc-table-icon nc-view-icon w-5"
                                   :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
                                 />
 
@@ -585,20 +589,6 @@ const setIcon = (icon: string, table: TableType) => {
                               <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
                             </template>
                           </a-dropdown>
-
-                          <!--
-                                                    <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="icon(table)"
-                                                      class="nc-view-icon text-xs"
-                                                      :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                                                    /> -->
                         </div>
 
                         <div class="nc-tbl-title flex-1">

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

@@ -26,9 +26,9 @@ const selectIcon = (icon: string) => {
 </script>
 
 <template>
-  <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start">
+  <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" 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

@@ -47,9 +47,9 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
         <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
           <a-tab-pane v-for="(tab, i) of tabs" :key="i">
             <template #tab>
-              <div class="flex items-center gap-2 max-w-[110px]">
+              <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" />
+                  <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/pages/Dashboard/TreeView.ts

@@ -129,6 +129,27 @@ export class TreeViewPage extends BasePage {
     await importMenu.locator(`.ant-dropdown-menu-title-content:has-text("${title}")`).click();
   }
 
+  async changeTableIcon({ title, icon }: { title: string; icon: string }) {
+    await this.get().locator(`.nc-project-tree-tbl-${title} .nc-table-icon`).click();
+
+    await this.rootPage.getByTestId('nc-emoji-filter').type(icon);
+    await this.rootPage.getByTestId('nc-emoji-container').locator(`.nc-emoji-item >> svg`).first().click();
+
+    await this.rootPage.getByTestId('nc-emoji-container').isHidden();
+    await expect(
+      this.get().locator(`.nc-project-tree-tbl-${title} [data-testid="nc-icon-emojione:${icon}"]`)
+    ).toHaveCount(1);
+  }
+
+  async verifyTabIcon({ title, icon }: { title: string; icon: string }) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await expect(
+      this.rootPage.locator(
+        `[data-testid="nc-tab-title"]:has-text("${title}") [data-testid="nc-tab-icon-emojione:${icon}"]`
+      )
+    ).toBeVisible();
+  }
+
   // todo: Break this into smaller methods
   async validateRoleAccess(param: { role: string }) {
     // Add new table button

tests/playwright/tests/tableOperations.spec.ts

@@ -13,7 +13,7 @@ test.describe('Table Operations', () => {
     settings = dashboard.settings;
   });
 
-  test('Create, and delete table, verify in audit tab, rename City table and reorder tables', async () => {
+  test.only('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' });
 
@@ -46,5 +46,10 @@ test.describe('Table Operations', () => {
       destinationTable: 'Address',
     });
     await dashboard.treeView.verifyTable({ title: 'Address', index: 0 });
+
+    // verify table icon customization
+    await dashboard.treeView.openTable({ title: 'Address' });
+    await dashboard.treeView.changeTableIcon({ title: 'Address', icon: 'american-football' });
+    await dashboard.treeView.verifyTabIcon({ title: 'Address', icon: 'american-football' });
   });
 });