feat: Add user ID filter to authentication page (#1666)

* feat: Add user ID filter to authentication page - Add UserFilter component following Functions/Datastore UI pattern - Users can now filter by User ID in authentication section

* move auth filter to table header

* removed unused import

* add import

* fix merge conflict

* address review comments: revert unrelated changes

* fix: correct pagination store import path

* fix: restore original structure and variable naming

* revert to the original logic

* fix: merge conflicts not properly synced

---------

Co-authored-by: David Dal Busco <[email protected]>

Author: tinkerer-shubh

src/frontend/src/lib/components/auth/User.svelte

@@ -29,6 +29,7 @@
 </script>
 
 <tr>
+	<td class="filter-cell"></td>
 	<td class="actions">
 		<div class="actions-tools">
 			<ButtonTableAction icon="info" ariaLabel={$i18n.users.view_details} onaction={openModal} />

src/frontend/src/lib/components/auth/UserFilter.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import IconFilter from '$lib/components/icons/IconFilter.svelte';
+	import PopoverApply from '$lib/components/ui/PopoverApply.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { listParamsStore } from '$lib/stores/list-params.store';
+
+	let owner = $state($listParamsStore.filter.owner ?? '');
+
+	let visible: boolean = $state(false);
+
+	// eslint-disable-next-line require-await
+	const apply = async () => {
+		listParamsStore.setFilter({
+			matcher: $listParamsStore.filter.matcher,
+			owner
+		});
+
+		visible = false;
+	};
+
+	$effect(() => {
+		if (visible) {
+			return;
+		}
+
+		// Avoid glitch
+		setTimeout(() => {
+			owner = $listParamsStore.filter.owner ?? '';
+		}, 250);
+	});
+</script>
+
+<PopoverApply ariaLabel={$i18n.filter.title} onapply={apply} bind:visible>
+	{#snippet icon()}
+		<IconFilter size="18px" />
+	{/snippet}
+
+	<label for="filter-owner">{$i18n.users.identifier}</label>
+
+	<input
+		bind:value={owner}
+		id="filter-owner"
+		name="filter-owner"
+		type="text"
+		placeholder={$i18n.filter.placeholder_owners}
+		autocomplete="off"
+		data-1p-ignore
+	/>
+</PopoverApply>
+
+<style lang="scss">
+	@use '../../styles/mixins/dialog';
+
+	@include dialog.apply;
+</style>

src/frontend/src/lib/components/auth/Users.svelte

@@ -3,11 +3,13 @@
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { getContext, setContext, untrack } from 'svelte';
 	import User from '$lib/components/auth/User.svelte';
+	import UserFilter from '$lib/components/auth/UserFilter.svelte';
 	import DataCount from '$lib/components/data/DataCount.svelte';
 	import DataPaginator from '$lib/components/data/DataPaginator.svelte';
 	import { listUsers } from '$lib/services/user/users.services';
 	import { authStore } from '$lib/stores/auth.store';
 	import { i18n } from '$lib/stores/i18n.store';
+	import { listParamsStore } from '$lib/stores/list-params.store';
 	import { initPaginationContext } from '$lib/stores/pagination.context.store';
 	import { toasts } from '$lib/stores/toasts.store';
 	import { versionStore } from '$lib/stores/version.store';
@@ -37,6 +39,7 @@
 			const { users, matches_length, items_length } = await listUsers({
 				satelliteId,
 				startAfter: $startAfter,
+				filter: $listParamsStore.filter,
 				identity: $authStore.identity
 			});
 
@@ -62,6 +65,7 @@
 
 	$effect(() => {
 		$versionStore;
+		$listParamsStore;
 
 		untrack(() => {
 			list();
@@ -73,7 +77,7 @@
 	let innerWidth = $state(0);
 
 	let colspan = $derived(
-		innerWidth >= 1024 ? 5 : innerWidth >= 768 ? 4 : innerWidth >= 576 ? 3 : 2
+		innerWidth >= 1024 ? 6 : innerWidth >= 768 ? 5 : innerWidth >= 576 ? 4 : 3
 	);
 </script>
 
@@ -83,6 +87,9 @@
 	<table>
 		<thead>
 			<tr>
+				<th class="filter-column">
+					<UserFilter />
+				</th>
 				<th class="tools"></th>
 				<th class="identifier"> {$i18n.users.identifier} </th>
 				<th class="providers"> {$i18n.users.provider} </th>
@@ -114,6 +121,15 @@
 <style lang="scss">
 	@use '../../styles/mixins/media';
 
+	.table-container {
+		padding: 0 0 var(--padding);
+	}
+
+	.filter-column {
+		width: 48px;
+		padding: var(--padding-0_5x);
+	}
+
 	.tools {
 		width: 60px;
 	}
@@ -157,4 +173,9 @@
 			width: inherit;
 		}
 	}
+
+	th {
+		padding-top: 0;
+		padding-bottom: var(--padding-0_25x);
+	}
 </style>

src/frontend/src/lib/services/user/users.services.ts

@@ -3,16 +3,21 @@ import { listDocs008 } from '$lib/api/satellites.deprecated.api';
 import { SATELLITE_v0_0_9 } from '$lib/constants/version.constants';
 import { isSatelliteFeatureSupported } from '$lib/services/feature.services';
 import type { OptionIdentity } from '$lib/types/itentity';
-import type { ListParams } from '$lib/types/list';
+import type { ListFilter, ListParams } from '$lib/types/list';
 import type { User } from '$lib/types/user';
 import { toKeyUser } from '$lib/utils/user.utils';
 import type { Principal } from '@dfinity/principal';
 
 export const listUsers = async ({
 	startAfter,
 	satelliteId,
+	filter,
 	identity
-}: Pick<ListParams, 'startAfter'> & { satelliteId: Principal; identity: OptionIdentity }): Promise<{
+}: Pick<ListParams, 'startAfter'> & {
+	satelliteId: Principal;
+	filter: ListFilter;
+	identity: OptionIdentity;
+}): Promise<{
 	users: [string, User][];
 	matches_length: bigint;
 	items_length: bigint;