fix: use icon gts instead svg file + adapt test + use dropdown popover for action menu and design table

Author: remadex

doc-app/app/assets/icons/delete.gts

@@ -0,0 +1,20 @@
+import type { TOC } from '@ember/component/template-only';
+
+const DeleteIcon: TOC<{ Element: SVGSVGElement }> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    ...attributes
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+    />
+  </svg>
+</template>;
+
+export default DeleteIcon;

doc-app/app/assets/icons/edit.gts

@@ -0,0 +1,20 @@
+import type { TOC } from '@ember/component/template-only';
+
+const EditIcon: TOC<{ Element: SVGSVGElement }> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    ...attributes
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+    />
+  </svg>
+</template>;
+
+export default EditIcon;

doc-app/app/components/docs/ember-ui/prefabs/table-generic.gts

@@ -8,6 +8,8 @@ import type { TOC } from '@ember/component/template-only';
 import type { TpkSelectSignature } from '@triptyk/ember-input/components/tpk-select';
 import { hash } from '@ember/helper';
 import stringify from 'doc-app/helpers/to-string';
+import EditIcon from 'doc-app/assets/icons/edit.gts';
+import DeleteIcon from 'doc-app/assets/icons/delete.gts';
 
 const TpkSelectElement: TOC<
   TpkSelectSignature & {
@@ -36,6 +38,9 @@ export default class TpkTableGenericPrefabExample extends Component {
     entity: 'user',
     pageSizes: [10, 30, 50, 75],
     defaultSortColumn: 'firstName',
+    rowClick: (element: unknown) => {
+      console.log('Row clicked:', element);
+    },
     columns: [
       {
         field: 'lastName',
@@ -56,14 +61,18 @@ export default class TpkTableGenericPrefabExample extends Component {
     ],
     actionMenu: [
       {
-        icon: 'edit',
+        icon: <template><EditIcon class="size-4" /></template> as TOC<{
+          Element: SVGSVGElement;
+        }>,
         action: (element: unknown) => {
           console.log('Edit clicked', element);
         },
         name: 'Edit',
       },
       {
-        icon: 'delete',
+        icon: <template><DeleteIcon class="size-4" /></template> as TOC<{
+          Element: SVGSVGElement;
+        }>,
         action: (element: unknown) => {
           console.log('Delete clicked', element);
         },

doc-app/app/templates/dashboard/docs/ember-ui/prefabs/table-generic.gts

@@ -46,12 +46,12 @@ export default class TpkTableGenericPrefabDocs extends Component<TpkTableGeneric
       )
       actionMenu=(array
         (hash
-          icon="edit"
+          icon=(component EditIcon)
           action=this.onEdit
           name="Edit"
         )
         (hash
-          icon="delete"
+          icon=(component DeleteIcon)
           action=this.onDelete
           name="Delete"
         )

doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-password-test.gts

@@ -57,12 +57,7 @@ module(
       await renderComponent({
         disabled: false,
       });
-      assert
-        .dom('[data-test-tpk-password-toggle-button]')
-        .hasClass('tpk-password-toggle-button');
-      assert
-        .dom('[data-test-tpk-password-toggle-icon]')
-        .hasAttribute('src', /data:image\/svg\+xml/);
+      assert.dom('[data-test-tpk-password-toggle-icon-eye-shut]').exists();
     });
 
     test('Input type should be password', async function (assert) {
@@ -86,10 +81,10 @@ module(
         disabled: false,
       });
       await click('[data-test-tpk-password-toggle-button]');
-
+      assert.dom('[data-test-tpk-password-toggle-icon-eye]').exists();
       assert
-        .dom('[data-test-tpk-password-toggle-button] img')
-        .hasAttribute('src', /data:image\/svg\+xml/);
+        .dom('[data-test-tpk-password-toggle-icon-eye-shut]')
+        .doesNotExist();
     });
 
     test('When button is clicked twice, input type should be password', async function (assert) {

doc-app/tests/integration/components/ember-ui/action-menu-test.gts

@@ -3,26 +3,32 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { actionMenuObject } from 'doc-app/tests/pages/ember-actions-menu';
 import TpkActionsMenu from '@triptyk/ember-ui/components/tpk-actions-menu';
+import EditIcon from 'doc-app/assets/icons/edit.gts';
 
 module('Integration | Component | Action Menu', function (hooks) {
   setupRenderingTest(hooks);
 
-  async function renderActionMenu(assert: Assert, iconSrc?: string) {
+  async function renderActionMenu(assert: Assert) {
     const act = () => {
       assert.step('action');
     };
 
     return render(
       <template>
         <TpkActionsMenu as |Action|>
-          <Action @icon={{iconSrc}} @action={{act}}>
+          <Action @icon={{component EditIcon}} @action={{act}}>
             ActionText
           </Action>
         </TpkActionsMenu>
       </template>
     );
   }
 
+  test('actions list is not visible by default', async function (assert) {
+    await renderActionMenu(assert);
+    assert.false(actionMenuObject.areActionsVisible);
+  });
+
   test('when seeAllAction button is clicked, toggle actions visibility', async function (assert) {
     await renderActionMenu(assert);
     await actionMenuObject.seeAllAction();
@@ -40,17 +46,11 @@ module('Integration | Component | Action Menu', function (hooks) {
   });
 
   test('when icon is passed, icon is displayed', async function (assert) {
-    await renderActionMenu(assert, 'assets/action.svg');
+    await renderActionMenu(assert);
     await actionMenuObject.seeAllAction();
     assert.true(actionMenuObject.actions.objectAt(0).isIconRendered);
   });
 
-  test('when menu is opened, pressing ESC close it', async function (assert) {
-    await renderActionMenu(assert);
-    await actionMenuObject.escape();
-    assert.false(actionMenuObject.areActionsVisible);
-  });
-
   test('All base classes are present', async function (assert) {
     await renderActionMenu(assert);
     assert.dom('.actions').exists();

doc-app/tests/integration/components/ember-ui/prefabs/tpk-table-generic-prefab-test.gts

@@ -95,14 +95,12 @@ module(
     test('It passes correctly the actionMenu', async function (assert) {
       const actionMenu = [
         {
-          icon: 'edit',
           action: () => {
             assert.step('rowClick function called');
           },
           name: 'Edit',
         },
         {
-          icon: 'delete',
           action: () => {
             assert.step('delete function called');
           },
@@ -141,7 +139,7 @@ module(
       await renderComponent(tableParams);
       assert
         .dom('[data-test-table-generic-prefab] [data-test-row="1"]')
-        ?.hasText('Leroy Simon info@triptyk.eu');
+        ?.hasTextContaining('Leroy Simon info@triptyk.eu');
     });
 
     test('it passes a renderElement', async function (assert) {

doc-app/tests/integration/components/ember-ui/table-generic/component-test.gts

@@ -6,6 +6,7 @@ import { TableGenericUserWorker } from 'doc-app/tests/workers/table-generic';
 import { setupRenderingTest } from 'ember-qunit';
 import TpkTableGeneric from '@triptyk/ember-ui/components/tpk-table-generic';
 import stringify from 'doc-app/helpers/to-string';
+import DeleteIcon from 'doc-app/assets/icons/delete.gts';
 
 module('Integration | Component | table-generic', function (hooks) {
   setupRenderingTest(hooks);
@@ -73,7 +74,7 @@ module('Integration | Component | table-generic', function (hooks) {
               </Body.Cell>
               <Body.ActionMenu as |Action|>
                 <Action
-                  @icon="/assets/icons/delete.svg"
+                  @icon={{component DeleteIcon}}
                   @action={{deleteAction}}
                   data-test-delete
                 >

doc-app/tests/pages/ember-actions-menu.ts

@@ -3,21 +3,27 @@ import {
   collection,
   create,
   isPresent,
-  triggerable,
 } from 'ember-cli-page-object';
 
 export const actionMenuObject = create({
   scope: '[data-test-actions-menu]',
   seeAllAction: clickable('[data-test-actions-open-action]'),
-  areActionsVisible: isPresent('ul'),
-  escape: triggerable('keyup', undefined, {
-    eventProperties: { key: 'Escape' },
-  }),
+  areActionsVisible: isPopoverOpen('[data-test-actions-list]'),
   actions: collection(
     'ul li',
     create({
       trigger: clickable('button'),
-      isIconRendered: isPresent('img'),
+      isIconRendered: isPresent('svg'),
     })
   ),
 });
+
+function isPopoverOpen(selector: string) {
+  return {
+    isDescriptor: true,
+    get() {
+      const el = document.querySelector(selector);
+      return el?.matches(':popover-open') ?? false;
+    },
+  };
+}

doc-app/translations/en-us.yaml

@@ -2,6 +2,7 @@ global:
   on: 'on'
   results: 'results'
   results_by_page: 'results by page'
+  search: 'Search'
 
 docs:
   sections: