@makolabs/ripple 3.0.9 → 3.0.11

package/dist/user-management/UserManagement.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
-	import { PageHeader, Button, cn } from '../index.js';
+	import { PageHeader, Button, TabGroup, cn } from '../index.js';
 	import UserTable from './UserTable.svelte';
 	import UserModal from './UserModal.svelte';
 	import UserViewModal from './UserViewModal.svelte';
+	import UserApproveModal from './UserApproveModal.svelte';
 	import type {
 		User,
 		UserManagementProps,
@@ -42,6 +43,23 @@
 	let selectedUsers = new SvelteSet<string>();
 	let bulkAction = $state<'delete' | ''>('');
 
+	// Pending approval state — gated on the FULL workflow (list + approve + reject).
+	// If an adapter exposes only listing without both mutations, the tab stays hidden
+	// to avoid action buttons that throw or silently no-op.
+	const pendingEnabled = $derived(
+		typeof adapter.getPendingUsers === 'function' &&
+			typeof adapter.approveUser === 'function' &&
+			typeof adapter.rejectUser === 'function'
+	);
+	let activeTab = $state<'active' | 'pending'>('active');
+	let pendingUsers = $state<User[]>([]);
+	let totalPending = $state(0);
+	let pendingPage = $state(1);
+	let pendingPageSize = $state(10);
+	let pendingLoading = $state(false);
+	let showApproveModal = $state(false);
+	let userToApprove = $state<User | null>(null);
+
 	// Derived states
 	const hasSelectedUsers = $derived(selectedUsers.size > 0);
 
@@ -66,8 +84,20 @@
 		}
 	}
 
-	// Refresh the query cache to get fresh data
+	// Refresh the query cache and re-fetch.
+	//
+	// SvelteKit `query()` results are cached per-arg-combo. After a mutating
+	// `command()`, the cache is stale — calling the query again returns the
+	// old data until `.refresh()` is invoked. We detect a query by the
+	// presence of a `.refresh` method and invalidate before re-fetching.
+	// Plain async-function adapters (no caching) skip this branch.
 	async function refreshUsersQuery() {
+		const fn = adapter.getUsers as typeof adapter.getUsers & {
+			refresh?: () => Promise<unknown>;
+		};
+		if (typeof fn.refresh === 'function') {
+			await fn.refresh();
+		}
 		await loadUsers();
 	}
 
@@ -255,9 +285,110 @@
 		}
 	}
 
+	// Pending users: load + refresh + approve + reject
+	async function loadPendingUsers() {
+		if (!adapter.getPendingUsers) return;
+		try {
+			pendingLoading = true;
+			const result = await adapter.getPendingUsers({
+				page: pendingPage,
+				pageSize: pendingPageSize
+			});
+			pendingUsers = result.users.map((u) => ({ ...u }));
+			totalPending = result.totalUsers;
+		} catch (error) {
+			console.error('Error loading pending users:', error);
+			toast.error('Failed to load pending users');
+		} finally {
+			pendingLoading = false;
+		}
+	}
+
+	async function refreshPendingQuery() {
+		if (!adapter.getPendingUsers) return;
+		const fn = adapter.getPendingUsers as typeof adapter.getPendingUsers & {
+			refresh?: () => Promise<unknown>;
+		};
+		if (typeof fn.refresh === 'function') {
+			await fn.refresh();
+		}
+		await loadPendingUsers();
+	}
+
+	function openApproveModal(user: User) {
+		userToApprove = user;
+		showApproveModal = true;
+	}
+
+	async function handleApproveUser({ userId, role }: { userId: string; role: string }) {
+		if (!adapter.approveUser) {
+			throw new Error('approveUser is not configured on the adapter');
+		}
+		const result = await adapter.approveUser({ userId, role });
+		// The user is approved AND we hold their one-time API key. A refresh failure
+		// here must NOT lose that key — surface a soft warning instead of throwing.
+		try {
+			await Promise.all([refreshPendingQuery(), refreshUsersQuery()]);
+		} catch (error) {
+			console.error('Error refreshing users after approval:', error);
+			toast.warning(
+				'User approved, but the lists failed to refresh. Reload the page to sync the latest state.'
+			);
+		}
+		return result;
+	}
+
+	async function handleRejectUser(user: User) {
+		if (!adapter.rejectUser) return;
+		if (
+			!confirm(
+				`Reject ${user.email_addresses?.[0]?.email_address ?? user.id}? This permanently deletes them from your identity provider.`
+			)
+		) {
+			return;
+		}
+		// Optimistic removal — capture both previous list AND total so a paginated
+		// failure rollback restores the true count, not just the visible page length.
+		const previous = pendingUsers;
+		const previousTotal = totalPending;
+		pendingUsers = pendingUsers.filter((u) => u.id !== user.id);
+		totalPending = Math.max(0, totalPending - 1);
+		try {
+			await adapter.rejectUser(user.id);
+			await refreshPendingQuery();
+		} catch (error) {
+			console.error('Error rejecting user:', error);
+			toast.error('Failed to reject user');
+			pendingUsers = previous;
+			totalPending = previousTotal;
+			throw error;
+		}
+	}
+
+	function handlePendingPageChange(page: number) {
+		pendingPage = page;
+		loadPendingUsers();
+	}
+
+	function handlePendingPageSizeChange(size: number) {
+		pendingPageSize = size;
+		pendingPage = 1;
+		loadPendingUsers();
+	}
+
+	function handleTabChange(value: string) {
+		activeTab = value === 'pending' ? 'pending' : 'active';
+		if (activeTab === 'pending') {
+			loadPendingUsers();
+		}
+	}
+
 	// Initialize on mount
 	onMount(async () => {
 		await loadUsers();
+		if (pendingEnabled) {
+			await loadPendingUsers();
+		}
 	});
 </script>
 
@@ -275,14 +406,29 @@
 		layout="horizontal"
 		class="mb-6"
 	>
-		<Button onclick={openCreateModal} color="primary">
-			{@render PlusIcon()}
-			Add User
-		</Button>
+		{#if activeTab === 'active'}
+			<Button onclick={openCreateModal} color="primary">
+				{@render PlusIcon()}
+				Add User
+			</Button>
+		{/if}
 	</PageHeader>
 
+	{#if pendingEnabled}
+		<TabGroup
+			tabs={[
+				{ value: 'active', label: `Active (${totalUsers})` },
+				{ value: 'pending', label: `Pending (${totalPending})` }
+			]}
+			selected={activeTab}
+			onchange={handleTabChange}
+			class="mb-4"
+			testId="user-management-tabs"
+		/>
+	{/if}
+
 	<!-- Bulk Actions Bar -->
-	{#if hasSelectedUsers}
+	{#if activeTab === 'active' && hasSelectedUsers}
 		<div
 			class="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-amber-200 bg-amber-50 p-4"
 		>
@@ -307,19 +453,33 @@
 	{/if}
 
 	<!-- Users Table Component -->
-	<UserTable
-		{users}
-		{loading}
-		{currentPage}
-		{pageSize}
-		{totalUsers}
-		onpagechange={handlePageChange}
-		onpagesizechange={handlePageSizeChange}
-		onsort={handleSort}
-		onview={openViewModal}
-		onedit={openEditModal}
-		ondelete={handleDeleteUser}
-	/>
+	{#if activeTab === 'active'}
+		<UserTable
+			{users}
+			{loading}
+			{currentPage}
+			{pageSize}
+			{totalUsers}
+			onpagechange={handlePageChange}
+			onpagesizechange={handlePageSizeChange}
+			onsort={handleSort}
+			onview={openViewModal}
+			onedit={openEditModal}
+			ondelete={handleDeleteUser}
+		/>
+	{:else}
+		<UserTable
+			users={pendingUsers}
+			loading={pendingLoading}
+			currentPage={pendingPage}
+			pageSize={pendingPageSize}
+			totalUsers={totalPending}
+			onpagechange={handlePendingPageChange}
+			onpagesizechange={handlePendingPageSizeChange}
+			onapprove={openApproveModal}
+			onreject={handleRejectUser}
+		/>
+	{/if}
 
 	<!-- User View Modal -->
 	<UserViewModal
@@ -340,4 +500,15 @@
 		onsave={handleUserSave}
 		onclose={handleModalClose}
 	/>
+
+	<!-- Approve Pending User Modal -->
+	{#if pendingEnabled}
+		<UserApproveModal
+			bind:open={showApproveModal}
+			user={userToApprove}
+			{roles}
+			onapprove={handleApproveUser}
+			onclose={() => (userToApprove = null)}
+		/>
+	{/if}
 </div>