@flowdular/sdk 0.2.4 → 0.3.1

package/modules/directory/src/client/ScimTokensView.tsrx

@@ -0,0 +1,587 @@
+import { useEffect, useMemo } from 'octane';
+import {
+	Alert,
+	Button,
+	ConfirmDialog,
+	DatePicker,
+	Drawer,
+	EmptyState,
+	Filters,
+	FormField,
+	Icon,
+	PageHeader,
+	Pagination,
+	SearchField,
+	Select,
+	TableCard,
+	Tag,
+	ToastHost,
+	toasts,
+	type TableAction,
+	type TableColumn,
+} from '@flowdular/sdk/ui';
+import { activeLocale, t } from '@flowdular/sdk/client';
+import { useValue } from 'segment-state';
+import {
+	SCIM_TOKEN_STATUSES,
+	TOKEN_SORT_KEYS,
+	type ScimToken,
+	type TokenSortKey,
+} from '../domain/types.ts';
+import {
+	createScimToken,
+	directoryErrorMessage,
+	DirectoryApiError,
+	loadScimTokens,
+	revokeScimToken,
+	rotateScimToken,
+} from './api.ts';
+import {
+	expiryFieldValue,
+	expiryToTimestamp,
+	rotateAction,
+	tableEmpty,
+	timestampLabel,
+	tokenDisplayStatus,
+	tokenStatusLabel,
+	tokenStatusTone,
+} from './presentation.ts';
+import {
+	createScimTokensClientState,
+	FIRST_PAGE,
+	hasNextPage,
+	PAGE_SIZE,
+	pageCursor,
+	pageLoaded,
+	sortingState,
+	sortOf,
+	turnTo,
+	type ListPaging,
+	type ListSort,
+} from './state.ts';
+
+export interface ScimTokensViewProps {
+	readonly csrfToken: string;
+	readonly canManage: boolean;
+}
+
+/** The server refuses an expiry that has passed or is more than a year out. */
+const MAX_TOKEN_LIFETIME_MS = 365 * 24 * 60 * 60 * 1_000;
+
+/** One listing per pause in the typing, not one per keystroke. */
+const SEARCH_DEBOUNCE_MS = 300;
+
+interface TokenFilters {
+	readonly query: string;
+	readonly status: ScimToken['status'] | '';
+}
+
+function columns(): readonly TableColumn<ScimToken>[] {
+	return [
+		{
+			key: 'label',
+			header: t('directory.tokens.column.label'),
+			width: '30%',
+			value: (token) => token.label,
+			cell: (token) => <b>{token.label}</b>,
+		},
+		{
+			key: 'status',
+			header: t('directory.tokens.column.status'),
+			width: '14%',
+			cell: (token) =>
+				<Tag
+					tone={tokenStatusTone(tokenDisplayStatus(token))}
+					dot
+				>{tokenStatusLabel(tokenDisplayStatus(token))}</Tag>,
+		},
+		{
+			key: 'tokenFingerprint',
+			header: t('directory.tokens.column.fingerprint'),
+			width: '24%',
+			cell: (token) => <span class="ui-mono">{token.tokenFingerprint}</span>,
+		},
+		{
+			key: 'lastUsedAt',
+			header: t('directory.tokens.column.lastUsed'),
+			width: '16%',
+			cell: (token) => timestampLabel(token.lastUsedAt),
+		},
+		{
+			key: 'expiresAt',
+			header: t('directory.tokens.column.expires'),
+			width: '16%',
+			cell: (token) => token.expiresAt === null
+				? t('directory.tokens.neverExpires')
+				: timestampLabel(token.expiresAt),
+		},
+	];
+}
+
+export function ScimTokensView(props: ScimTokensViewProps) @{
+	const client = useMemo(() => createScimTokensClientState(), []);
+	const [tokens] = useValue(client.state.tokens);
+	const [status, setStatus] = useValue(client.state.status);
+	const [error, setError] = useValue(client.state.error);
+	const [query, setQuery] = useValue(client.state.query);
+	const [appliedQuery] = useValue(client.state.appliedQuery);
+	const [statusFilter, setStatusFilter] = useValue(client.state.statusFilter);
+	const [sort] = useValue(client.state.sort);
+	const [paging] = useValue(client.state.paging);
+	const [filtersOpen, setFiltersOpen] = useValue(client.state.filtersOpen);
+	const [editorOpen] = useValue(client.state.editorOpen);
+	const [selectedId, setSelectedId] = useValue(client.state.selectedId);
+	const [expiresAt, setExpiresAt] = useValue(client.state.expiresAt);
+	const [revealed] = useValue(client.state.revealedToken);
+	const [confirm, setConfirm] = useValue(client.state.confirm);
+	const selected = tokens.find((token) => token.id === selectedId) ?? null;
+	const locale = activeLocale();
+	const term = query.trim();
+	const filtered = appliedQuery !== '' || statusFilter !== '';
+
+	/* The server sorts, narrows and cuts the page, so every argument travels
+   explicitly: a control change and the load it starts happen in one render,
+   where the state hook still reads the value before the change. */
+	const load = async (
+		filters: TokenFilters,
+		order: ListSort<TokenSortKey>,
+		target: ListPaging,
+	) => {
+		const ticket = client.loads.begin();
+		setStatus('loading');
+		setError('');
+		try {
+			const page = await loadScimTokens({
+				q: filters.query,
+				status: filters.status,
+				sort: order.sort,
+				direction: order.direction,
+				cursor: pageCursor(target),
+				limit: PAGE_SIZE,
+			});
+			if (!client.loads.isLatest(ticket)) return;
+			client.store.act((transaction) => {
+				transaction.set(client.state.tokens, page.items);
+				transaction.set(client.state.appliedQuery, filters.query);
+				transaction.set(
+					client.state.paging,
+					pageLoaded(target, page.page.nextCursor),
+				);
+				transaction.set(client.state.status, 'idle');
+			}, 'directory/tokens-loaded');
+		} catch (loadError) {
+			if (!client.loads.isLatest(ticket)) return;
+			setError(directoryErrorMessage(loadError, 'directory.tokens.error.load'));
+			setStatus(
+				loadError instanceof DirectoryApiError && loadError.status === 403
+					? 'denied'
+					: 'error',
+			);
+		}
+	};
+
+	const refresh = () => load(
+		{ query: appliedQuery, status: statusFilter },
+		sort,
+		paging,
+	);
+
+	/* A changed filter or sort is a new listing: it starts from the first page. */
+	const restart = (filters: TokenFilters, order: ListSort<TokenSortKey>) => {
+		client.store.act((transaction) => {
+			transaction.set(client.state.sort, order);
+			transaction.set(client.state.paging, FIRST_PAGE);
+		}, 'directory/tokens-restart');
+		void load(filters, order, FIRST_PAGE);
+	};
+
+	const turn = (pageIndex: number) => {
+		const target = turnTo(paging, pageIndex);
+		if (target === paging) return;
+		void load({ query: appliedQuery, status: statusFilter }, sort, target);
+	};
+
+	useEffect(() => {
+		void refresh();
+	}, []);
+
+	/* The listing is read when the timer fires, not when it was set: a filter
+   or sort changed during the pause belongs to the load this starts. */
+	useEffect(() => {
+		if (term === appliedQuery) return;
+		const timer = setTimeout(() => {
+			const query = client.store.get(client.state.query).trim();
+			if (query === client.store.get(client.state.appliedQuery)) return;
+			restart(
+				{ query, status: client.store.get(client.state.statusFilter) },
+				client.store.get(client.state.sort),
+			);
+		}, SEARCH_DEBOUNCE_MS);
+		return () => clearTimeout(timer);
+	}, [term]);
+
+	const openNew = () => {
+		client.store.act((transaction) => {
+			transaction.set(client.state.selectedId, '');
+			transaction.set(client.state.revealedToken, '');
+			transaction.set(client.state.expiresAt, '');
+			transaction.set(client.state.error, '');
+			transaction.set(client.state.editorOpen, true);
+		}, 'directory/token-new');
+	};
+
+	/* Closing the drawer is what drops the token value: it is never returned
+   again, and nothing else in the screen holds it. */
+	const closeEditor = () => {
+		client.store.act((transaction) => {
+			transaction.set(client.state.editorOpen, false);
+			transaction.set(client.state.revealedToken, '');
+			transaction.set(client.state.confirm, null);
+			transaction.set(client.state.error, '');
+		}, 'directory/token-close');
+	};
+
+	const submit = async (event: SubmitEvent) => {
+		event.preventDefault();
+		const form = new FormData(event.currentTarget as HTMLFormElement);
+		const label = String(form.get('label') ?? '').trim();
+		setStatus('submitting');
+		setError('');
+		try {
+			const issued = await createScimToken(
+				{ label, expiresAt: expiryToTimestamp(expiresAt) },
+				props.csrfToken,
+			);
+			await refresh();
+			client.store.act((transaction) => {
+				transaction.set(client.state.selectedId, issued.record.id);
+				transaction.set(client.state.revealedToken, issued.token);
+				transaction.set(client.state.status, 'idle');
+			}, 'directory/token-created');
+			toasts.success(t('directory.tokens.notice.created'));
+		} catch (submitError) {
+			setError(
+				directoryErrorMessage(submitError, 'directory.tokens.error.save'),
+			);
+			setStatus('idle');
+		}
+	};
+
+	const rotate = async () => {
+		if (!selected) return;
+		const id = selected.id;
+		setConfirm(null);
+		setStatus('submitting');
+		setError('');
+		try {
+			const issued = await rotateScimToken(
+				id,
+				selected.expiresAt,
+				props.csrfToken,
+			);
+			await refresh();
+			client.store.act((transaction) => {
+				transaction.set(client.state.selectedId, id);
+				transaction.set(client.state.revealedToken, issued.token);
+				transaction.set(client.state.editorOpen, true);
+				transaction.set(client.state.status, 'idle');
+			}, 'directory/token-rotated');
+			toasts.success(t('directory.tokens.notice.rotated'));
+		} catch (rotateError) {
+			setError(
+				directoryErrorMessage(rotateError, 'directory.tokens.error.action'),
+			);
+			setStatus('idle');
+		}
+	};
+
+	const revoke = async () => {
+		if (!selected) return;
+		const id = selected.id;
+		setConfirm(null);
+		setStatus('submitting');
+		setError('');
+		try {
+			await revokeScimToken(id, props.csrfToken);
+			await refresh();
+			setSelectedId('');
+			toasts.success(t('directory.tokens.notice.revoked'));
+		} catch (revokeError) {
+			setError(
+				directoryErrorMessage(revokeError, 'directory.tokens.error.action'),
+			);
+			setStatus('idle');
+		}
+	};
+
+	const rowActions = (token: ScimToken): readonly TableAction[] => {
+		if (!props.canManage || token.status !== 'active') return [];
+		const rotate = rotateAction(token);
+		return [
+			{
+				id: 'rotate',
+				label: rotate.label,
+				icon: 'refresh',
+				disabled: rotate.disabled,
+				reason: rotate.reason,
+				onSelect: () => {
+					setSelectedId(token.id);
+					setConfirm('rotate');
+				},
+			},
+			{
+				id: 'revoke',
+				label: t('directory.tokens.action.revoke'),
+				icon: 'x',
+				tone: 'danger',
+				onSelect: () => {
+					setSelectedId(token.id);
+					setConfirm('revoke');
+				},
+			},
+		];
+	};
+
+	<div class="ui-view">
+		<PageHeader
+			eyebrow={t('directory.common.administration')}
+			title={t('directory.tokens.title')}
+			description={t('directory.tokens.description')}
+		>
+			<Button
+				size="sm"
+				disabled={status === 'denied'}
+				onClick={() => void refresh()}
+			>
+				<Icon name="refresh" size={14} />
+				{status === 'loading'
+					? t('directory.common.refreshing')
+					: t('directory.common.refresh')}
+			</Button>
+			@if (props.canManage) {
+				<Button
+					size="sm"
+					variant="primary"
+					disabled={status === 'denied'}
+					onClick={openNew}
+				>
+					<Icon name="plus" size={14} />
+					{t('directory.tokens.action.new')}
+				</Button>
+			}
+		</PageHeader>
+		@if (status === 'denied') {
+			<section class="ui-card">
+				<EmptyState icon="shield" title={t('directory.common.accessDenied')}>{t(
+					'directory.tokens.denied',
+				)}</EmptyState>
+			</section>
+		} @else {
+			<>
+				@if (error && !editorOpen) {
+					<Alert>{error}</Alert>
+				}
+				<TableCard
+					title={t('directory.tokens.table.title')}
+					search={<SearchField
+						value={query}
+						placeholder={t('directory.tokens.search.placeholder')}
+						label={t('directory.tokens.search.label')}
+						onInput={setQuery}
+					/>}
+					filters={<Filters
+						open={filtersOpen}
+						onToggle={() => setFiltersOpen(!filtersOpen)}
+						activeCount={statusFilter === '' ? 0 : 1}
+						label={t('directory.common.filters')}
+					>
+						<Select
+							id="directory-tokens-status"
+							label={t('directory.tokens.filter.status')}
+							value={statusFilter}
+							options={[
+								{ value: '', label: t('directory.tokens.filter.allStatuses') },
+								...SCIM_TOKEN_STATUSES.map(
+									(entry) => ({
+										value: entry,
+										label: tokenStatusLabel(entry),
+									}),
+								),
+							]}
+							onChange={(value) => {
+								const next = value as ScimToken['status'] | '';
+								setStatusFilter(next);
+								restart({ query: appliedQuery, status: next }, sort);
+							}}
+						/>
+					</Filters>}
+					caption={t('directory.tokens.table.caption')}
+					columns={columns()}
+					rows={tokens}
+					rowKey={(token) => token.id}
+					mode="server"
+					sorting
+					sortingState={sortingState(sort)}
+					onSortingChange={(sorts) => restart(
+						{ query: appliedQuery, status: statusFilter },
+						sortOf(sorts, TOKEN_SORT_KEYS, 'label'),
+					)}
+					pagination={{
+						pageIndex: paging.pageIndex,
+						pageSize: PAGE_SIZE,
+						hasMore: hasNextPage(paging),
+						onPageChange: turn,
+					}}
+					status={status === 'loading' && tokens.length === 0
+						? 'loading'
+						: 'idle'}
+					loadingLabel={t('directory.tokens.table.loading')}
+					filtered={filtered}
+					empty={tableEmpty(status, {
+						icon: 'key',
+						title: t('directory.tokens.empty.title'),
+						hint: t('directory.tokens.empty.hint'),
+					})}
+					emptyFiltered={tableEmpty(status, {
+						icon: 'search',
+						title: t('directory.tokens.emptyFiltered.title'),
+						hint: t('directory.tokens.emptyFiltered.hint'),
+					})}
+					selectedKey={selected?.id}
+					actions={rowActions}
+					actionsLabel={t('directory.common.actions')}
+					actionsWidth="220px"
+					after={<Pagination
+						pageIndex={paging.pageIndex}
+						pageSize={PAGE_SIZE}
+						hasMore={hasNextPage(paging)}
+						onPageChange={turn}
+						label={t('directory.tokens.pagination.label')}
+						previousLabel={t('directory.common.pagination.previous')}
+						nextLabel={t('directory.common.pagination.next')}
+						summary={(page) => t('directory.common.pagination.summary', {
+							page: page.pageIndex + 1,
+							from: page.from,
+						})}
+					/>}
+					noteIcon="shield"
+					note={t('directory.tokens.note')}
+				/>
+			</>
+		}
+		<Drawer
+			open={editorOpen}
+			title={revealed
+				? t('directory.tokens.drawer.issuedTitle')
+				: t('directory.tokens.drawer.newTitle')}
+			subtitle={revealed
+				? t('directory.tokens.drawer.issuedSubtitle')
+				: t('directory.tokens.drawer.newSubtitle')}
+			onClose={closeEditor}
+		>
+			@if (revealed) {
+				<div class="ui-drawer__body">
+					<div class="ui-form">
+						<Alert tone="warning">{t('directory.tokens.reveal.warning')}</Alert>
+						<FormField
+							label={t('directory.tokens.reveal.label')}
+							help={t('directory.tokens.reveal.help')}
+						>
+							<input
+								class="ui-input ui-mono"
+								value={revealed}
+								readOnly
+								autoFocus
+							/>
+						</FormField>
+						<div class="ui-form__actions">
+							<Button variant="primary" onClick={closeEditor}>{t(
+								'directory.tokens.reveal.done',
+							)}</Button>
+						</div>
+					</div>
+				</div>
+			} @else {
+				<form class="ui-drawer__form" onSubmit={(event) => void submit(event)}>
+					<div class="ui-drawer__body">
+						<div class="ui-form">
+							<FormField
+								label={t('directory.tokens.form.label')}
+								help={t('directory.tokens.form.labelHelp')}
+								required
+							>
+								<input
+									class="ui-input"
+									name="label"
+									minlength={2}
+									maxlength={120}
+									autoFocus
+									required
+								/>
+							</FormField>
+							<DatePicker
+								id="directory-token-expiry"
+								kind="datetime"
+								label={t('directory.tokens.form.expiry')}
+								help={t('directory.tokens.form.expiryHelp')}
+								locale={locale}
+								value={{ from: expiresAt, to: expiresAt }}
+								min={expiryFieldValue(Date.now())}
+								max={expiryFieldValue(Date.now() + MAX_TOKEN_LIFETIME_MS)}
+								openLabel={t('directory.common.openCalendar')}
+								previousMonthLabel={t('directory.common.previousMonth')}
+								nextMonthLabel={t('directory.common.nextMonth')}
+								onChange={(next) => setExpiresAt(next.from)}
+							/>
+							@if (error) {
+								<Alert>{error}</Alert>
+							}
+						</div>
+					</div>
+					<div class="ui-drawer__foot">
+						<small>{t('directory.tokens.form.note')}</small>
+						<div class="ui-form__actions">
+							<Button onClick={closeEditor}>{t(
+								'directory.common.cancel',
+							)}</Button>
+							<Button
+								variant="primary"
+								type="submit"
+								disabled={status === 'submitting'}
+							>
+								{status === 'submitting'
+									? t('directory.common.saving')
+									: t('directory.tokens.form.create')}
+							</Button>
+						</div>
+					</div>
+				</form>
+			}
+		</Drawer>
+		<ConfirmDialog
+			open={confirm === 'rotate'}
+			title={t('directory.tokens.rotate.title')}
+			confirmLabel={t('directory.tokens.action.rotate')}
+			tone="primary"
+			busy={status === 'submitting'}
+			onConfirm={() => void rotate()}
+			onCancel={() => setConfirm(null)}
+		>{t('directory.tokens.rotate.description', {
+			label: selected?.label ?? '',
+		})}</ConfirmDialog>
+		<ConfirmDialog
+			open={confirm === 'revoke'}
+			title={t('directory.tokens.revoke.title')}
+			confirmLabel={t('directory.tokens.action.revoke')}
+			busy={status === 'submitting'}
+			onConfirm={() => void revoke()}
+			onCancel={() => setConfirm(null)}
+		>{t('directory.tokens.revoke.description', {
+			label: selected?.label ?? '',
+		})}</ConfirmDialog>
+		<ToastHost
+			label={t('directory.common.messages')}
+			closeLabel={t('directory.common.close')}
+		/>
+	</div>
+}