Merge branch 'main' into feat-new-logo

e2e/tests/admin/alerts.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Alerts Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Alerts");
     });
   });

e2e/tests/admin/apikeys.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin API Keys Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("API Keys");
     });
   });

e2e/tests/admin/organizations.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Organizations Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Organizations");
     });
   });

e2e/tests/admin/poker-games.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Poker Games Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Battles");
     });
   });

e2e/tests/admin/team.spec.ts

@@ -46,7 +46,9 @@ test.describe("The Admin Team Page", () => {
       const team = await registeredPage.createTeam(testTeamName);
 
       await ap.goto(team.id);
-      await expect(ap.page.locator("h1")).toContainText(testTeamName);
+      await expect(
+        ap.page.locator('[data-testid="tablenav-title"]').nth(0),
+      ).toContainText(testTeamName);
     });
   });
 });

e2e/tests/admin/teams.spec.ts

@@ -45,7 +45,7 @@ test.describe("The Admin Teams Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Teams");
     });
   });

e2e/tests/admin/users.spec.ts

@@ -45,8 +45,8 @@ test.describe("The Admin Users Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
-      await expect(title).toHaveText("Users");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
+      await expect(title).toHaveText("Registered Users");
     });
   });
 });

e2e/tests/teams.spec.ts

@@ -19,10 +19,14 @@ test.describe("Teams page", () => {
       await teamsPage.goto();
 
       await expect(
-        teamsPage.page.locator("h2", { hasText: "Organizations" }),
+        teamsPage.page.locator('[data-testid="tablenav-title"]', {
+          hasText: "Organizations",
+        }),
       ).toBeVisible();
       await expect(
-        teamsPage.page.locator("h2", { hasText: "Teams" }),
+        teamsPage.page.locator('[data-testid="tablenav-title"]', {
+          hasText: "Teams",
+        }),
       ).toBeVisible();
     });
 
@@ -38,13 +42,19 @@ test.describe("Teams page", () => {
         });
 
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Departments" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Departments",
+          }),
         ).toBeVisible();
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Teams" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Teams",
+          }),
         ).toBeVisible();
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Users" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Users",
+          }),
         ).toBeVisible();
       });
     });
@@ -68,7 +78,9 @@ test.describe("Teams page", () => {
           teamsPage.page.locator("h2", { hasText: "Storyboards" }),
         ).toBeVisible();
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Users" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Users",
+          }),
         ).toBeVisible();
       });
     });

ui/src/components/global/AdminPageLayout.svelte → ui/src/components/AdminPageLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { AppConfig, appRoutes } from '../../config';
-  import LL from '../../i18n/i18n-svelte';
+  import { AppConfig, appRoutes } from '../config';
+  import LL from '../i18n/i18n-svelte';
 
   export let activePage = 'admin';
 

ui/src/components/icons/EyeIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  let klass = 'w-6 h-6';
+  export { klass as class };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  class="{klass}"
+>
+  <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"></path>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
+  ></path>
+</svg>

ui/src/components/table/CrudActions.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import LL from '../../i18n/i18n-svelte';
+  import EditIcon from '../icons/EditIcon.svelte';
+  import TrashIcon from '../icons/TrashIcon.svelte';
+  import EyeIcon from '../icons/EyeIcon.svelte';
+
+  export let detailsLink = '';
+  export let editBtnEnabled = true;
+  export let editBtnClickHandler = () => {};
+  export let editBtnTestId = 'edit';
+  export let deleteBtnEnabled = true;
+  export let deleteBtnClickHandler = () => {};
+  export let deleteBtnTestId = 'delete';
+</script>
+
+<div class="flex gap-2 justify-end items-center">
+  <slot />
+  {#if detailsLink !== ''}
+    <a href="{detailsLink}" class="hover:text-blue-500">
+      <EyeIcon />
+      <span class="sr-only">View Details</span>
+    </a>
+  {/if}
+  {#if editBtnEnabled}
+    <button
+      on:click="{editBtnClickHandler}"
+      class="hover:text-green-500"
+      data-testid="{editBtnTestId}"
+    >
+      <span class="sr-only">{$LL.edit()}</span>
+      <EditIcon />
+    </button>
+  {/if}
+  {#if deleteBtnEnabled}
+    <button
+      on:click="{deleteBtnClickHandler}"
+      class="hover:text-red-500"
+      data-testid="{deleteBtnTestId}"
+    >
+      <span class="sr-only">{$LL.delete()}</span>
+      <TrashIcon />
+    </button>
+  {/if}
+</div>

ui/src/components/table/HeadCol.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let type = 'default';
+</script>
+
+{#if type === 'default'}
+  <th scope="col" class="p-4">
+    <slot />
+  </th>
+{:else if type === 'action'}
+  <th scope="col" class="relative px-2 py-2">
+    <slot />
+  </th>
+{/if}

ui/src/components/global/table/RowCol.svelte → ui/src/components/table/RowCol.svelte

@@ -3,11 +3,11 @@
 </script>
 
 {#if type === 'default'}
-  <td class="px-6 py-4 whitespace-nowrap">
+  <td class="px-4 py-3 whitespace-nowrap font-medium">
     <slot />
   </td>
 {:else if type === 'action'}
-  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+  <td class="px-4 py-3 whitespace-nowrap text-right font-medium">
     <slot />
   </td>
 {/if}

ui/src/components/table/Table.svelte

@@ -0,0 +1,10 @@
+<div class="overflow-x-auto">
+  <table class="w-full text-sm text-left text-gray-700 dark:text-gray-200">
+    <thead
+      class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
+    >
+      <slot name="header" />
+    </thead>
+    <slot name="body" />
+  </table>
+</div>

ui/src/components/table/TableContainer.svelte

@@ -0,0 +1,5 @@
+<div
+  class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden"
+>
+  <slot />
+</div>