@flowdular/sdk 0.1.0

package/modules/sandbox/src/client/SandboxAccessView.tsrx

@@ -0,0 +1,191 @@
+import { useEffect, useMemo } from 'octane';
+import { Alert, Button, Drawer, Icon, Kpi, PageHeader } from '@flowdular/sdk/ui';
+import { t } from '@flowdular/sdk/client';
+import { useValue } from 'segment-state';
+import {
+	grantSandboxAccess,
+	loadSandboxAccess,
+	loadSandboxSessions,
+	revokeSandboxAccess,
+	type GrantSandboxAccessRequest,
+} from './api.ts';
+import { SandboxGrantForm } from './SandboxGrantForm.tsrx';
+import { SandboxGrantList } from './SandboxGrantList.tsrx';
+import { SandboxSessionList } from './SandboxSessionList.tsrx';
+import { createSandboxClientState } from './state.ts';
+import { grantState } from './presentation.ts';
+
+export interface SandboxAccessViewProps {
+	readonly csrfToken: string;
+	readonly canReadSessions: boolean;
+}
+
+function message(error: unknown, fallback: string): string {
+	return error instanceof Error ? error.message : fallback;
+}
+
+export function SandboxAccessView(props: SandboxAccessViewProps) @{
+	const sandbox = useMemo(() => createSandboxClientState(), []);
+	const [grants] = useValue(sandbox.state.grants);
+	const [candidates] = useValue(sandbox.state.candidates);
+	const [sessions] = useValue(sandbox.state.sessions);
+	const [sandboxUrl] = useValue(sandbox.state.sandboxUrl);
+	const [selectedAccountId, setSelectedAccountId] = useValue(
+		sandbox.state.selectedAccountId,
+	);
+	const [status, setStatus] = useValue(sandbox.state.status);
+	const [error, setError] = useValue(sandbox.state.error);
+	const [formOpen, setFormOpen] = useValue(sandbox.state.formOpen);
+	const activeGrants = grants.filter(
+		(grant) => grantState(grant, Date.now()) === 'active',
+	);
+
+	const refresh = async () => {
+		setStatus('loading');
+		setError('');
+		try {
+			const snapshot = await loadSandboxAccess();
+			const records = props.canReadSessions ? await loadSandboxSessions() : [];
+			sandbox.store.act((transaction) => {
+				transaction.set(sandbox.state.grants, snapshot.grants);
+				transaction.set(sandbox.state.candidates, snapshot.candidates);
+				transaction.set(sandbox.state.sandboxUrl, snapshot.sandbox.url);
+				transaction.set(sandbox.state.sessions, records);
+			}, 'sandbox/loaded');
+		} catch (loadError) {
+			setError(message(loadError, t('sandbox.error.load')));
+		} finally {
+			setStatus('idle');
+		}
+	};
+
+	useEffect(() => {
+		void refresh();
+	}, []);
+
+	const submit = async (input: GrantSandboxAccessRequest) => {
+		setStatus('submitting');
+		setError('');
+		try {
+			await grantSandboxAccess(input, props.csrfToken);
+			setSelectedAccountId('');
+			setFormOpen(false);
+			await refresh();
+		} catch (grantError) {
+			setError(message(grantError, t('sandbox.error.grant')));
+			setStatus('idle');
+		}
+	};
+
+	const revoke = async (accountId: string) => {
+		setStatus('submitting');
+		setError('');
+		try {
+			await revokeSandboxAccess(accountId, props.csrfToken);
+			await refresh();
+		} catch (revokeError) {
+			setError(message(revokeError, t('sandbox.error.revoke')));
+			setStatus('idle');
+		}
+	};
+
+	<div class="ui-view">
+		<PageHeader
+			eyebrow={t('sandbox.page.eyebrow')}
+			title={t('sandbox.access.title')}
+			description={t('sandbox.access.description')}
+		>
+			<Button size="sm" onClick={() => void refresh()}>
+				<Icon name="refresh" size={14} />
+				{t('sandbox.action.refresh')}
+			</Button>
+			<Button
+				size="sm"
+				onClick={() => window.open(sandboxUrl, '_blank', 'noopener')}
+				disabled={!sandboxUrl}
+			>
+				<Icon name="external" size={14} />
+				{t('sandbox.action.open')}
+			</Button>
+			<Button size="sm" variant="primary" onClick={() => setFormOpen(true)}>
+				<Icon name="plus" size={14} />
+				{t('sandbox.access.grant')}
+			</Button>
+		</PageHeader>
+		<div class="ui-kpi-grid">
+			<Kpi
+				label={t('sandbox.kpi.activeAccess')}
+				value={status === 'loading' ? '…' : String(activeGrants.length)}
+				note={t('sandbox.kpi.activeAccessNote')}
+			/>
+			<Kpi
+				label={t('sandbox.sessions.title')}
+				value={props.canReadSessions
+					? String(sessions.length)
+					: t('sandbox.value.na')}
+				note={t('sandbox.kpi.sessionsNote')}
+			/>
+			<Kpi
+				label={t('sandbox.kpi.address')}
+				value={sandboxUrl
+					? t('sandbox.kpi.configured')
+					: t('sandbox.kpi.unset')}
+				note={<span class="ui-mono">
+					{sandboxUrl || t('sandbox.kpi.startHint')}
+				</span>}
+			/>
+		</div>
+		@if (error) {
+			<Alert>{error}</Alert>
+		}
+		<section class="ui-card">
+			<div class="ui-card__head">
+				<span class="ui-card__title">
+					{t('sandbox.access.listTitle')}
+					<small>{t('sandbox.access.count', {
+						active: activeGrants.length,
+						total: grants.length,
+					})}</small>
+				</span>
+			</div>
+			<SandboxGrantList
+				grants={grants}
+				busy={status === 'submitting'}
+				onRevoke={(accountId) => void revoke(accountId)}
+			/>
+			<p class="ui-note">
+				<Icon name="shield" size={14} />
+				<span>{t('sandbox.access.note')}</span>
+			</p>
+		</section>
+		@if (props.canReadSessions) {
+			<section class="ui-card">
+				<div class="ui-card__head">
+					<span class="ui-card__title">
+						{t('sandbox.sessions.title')}
+						<small>{t('sandbox.sessions.count', {
+							count: sessions.length,
+						})}</small>
+					</span>
+				</div>
+				<SandboxSessionList sessions={sessions} />
+			</section>
+		}
+		<Drawer
+			open={formOpen}
+			title={t('sandbox.drawer.title')}
+			subtitle={t('sandbox.drawer.subtitle')}
+			onClose={() => setFormOpen(false)}
+		>
+			<SandboxGrantForm
+				candidates={candidates}
+				selectedAccountId={selectedAccountId}
+				busy={status === 'submitting'}
+				error=""
+				onSelect={setSelectedAccountId}
+				onCancel={() => setFormOpen(false)}
+				onSubmit={(input) => void submit(input)}
+			/>
+		</Drawer>
+	</div>
+}

package/modules/sandbox/src/client/SandboxGrantForm.tsrx

@@ -0,0 +1,134 @@
+import { Alert, Button, FormField } from '@flowdular/sdk/ui';
+import { t } from '@flowdular/sdk/client';
+import { SANDBOX_GRANT_CAPABILITIES } from '../acl/permissions.ts';
+import type { SandboxAccessCandidate } from '../domain/types.ts';
+import type { GrantSandboxAccessRequest } from './api.ts';
+import { capabilityLabel } from './presentation.ts';
+
+export interface SandboxGrantFormProps {
+	readonly candidates: readonly SandboxAccessCandidate[];
+	readonly selectedAccountId: string;
+	readonly busy: boolean;
+	readonly error: string;
+	readonly onSelect: (accountId: string) => void;
+	readonly onCancel: () => void;
+	readonly onSubmit: (input: GrantSandboxAccessRequest) => void;
+}
+
+function formValue(form: FormData, key: string): string {
+	const value = form.get(key);
+	return typeof value === 'string' ? value : '';
+}
+
+function expiryTimestamp(days: string): number | null {
+	const value = Number(days);
+	if (!Number.isFinite(value) || value <= 0) return null;
+	return Date.now() + Math.min(value, 365) * 24 * 60 * 60 * 1000;
+}
+
+export function SandboxGrantForm(props: SandboxGrantFormProps) @{
+	const selected = props.candidates.find(
+		(candidate) => candidate.accountId === props.selectedAccountId,
+	);
+	const available = selected?.availableCapabilities ?? [];
+
+	const submit = (event: SubmitEvent) => {
+		event.preventDefault();
+		const element = event.currentTarget as HTMLFormElement;
+		const form = new FormData(element);
+		props.onSubmit({
+			accountId: formValue(form, 'accountId'),
+			capabilities: form.getAll('capabilities').filter(
+				(value) => typeof value === 'string',
+			) as readonly string[],
+			expiresAt: expiryTimestamp(formValue(form, 'expiryDays')),
+			note: formValue(form, 'note') || null,
+		});
+	};
+
+	<form class="ui-drawer__form" onSubmit={submit}>
+		<div class="ui-drawer__body">
+			<div class="ui-form">
+				<FormField
+					label={t('sandbox.form.member')}
+					help={t('sandbox.form.memberHelp')}
+					required
+				>
+					<select
+						class="ui-select"
+						name="accountId"
+						value={props.selectedAccountId}
+						onChange={(event) => props.onSelect(event.currentTarget.value)}
+						required
+					>
+						<option value="">{t('sandbox.form.selectMember')}</option>
+						@for (const candidate of props.candidates; key candidate.accountId) {
+							<option
+								value={candidate.accountId}
+								disabled={candidate.availableCapabilities.length === 0}
+							>
+								{candidate.displayName + ' · ' + candidate.email}
+							</option>
+						}
+					</select>
+				</FormField>
+				<div class="ui-field">
+					<span class="ui-label">{t('sandbox.form.capabilities')}</span>
+					@if (available.length === 0) {
+						<span class="ui-help">{t('sandbox.form.noCapabilities')}</span>
+					} @else {
+						<div class="ui-choices">
+							@for (const capability of SANDBOX_GRANT_CAPABILITIES; key capability) {
+								<label class="ui-checkbox">
+									<input
+										type="checkbox"
+										name="capabilities"
+										value={capability}
+										defaultChecked={capability === 'sandbox.access.use'}
+										disabled={!available.includes(capability)}
+									/>
+									<span>{capabilityLabel(capability)}</span>
+								</label>
+							}
+						</div>
+					}
+					<span class="ui-help">{t('sandbox.form.requiredCapability')}</span>
+				</div>
+				<div class="ui-form__row">
+					<FormField
+						label={t('sandbox.form.expiry')}
+						help={t('sandbox.form.expiryHelp')}
+					>
+						<input
+							class="ui-input"
+							name="expiryDays"
+							type="number"
+							min="1"
+							max="365"
+							step="1"
+						/>
+					</FormField>
+					<FormField label={t('sandbox.form.note')}>
+						<input class="ui-input" name="note" maxlength={280} />
+					</FormField>
+				</div>
+				@if (props.error) {
+					<Alert>{props.error}</Alert>
+				}
+			</div>
+		</div>
+		<div class="ui-drawer__foot">
+			<small>{t('sandbox.form.footer')}</small>
+			<div class="ui-form__actions">
+				<Button onClick={props.onCancel}>{t('sandbox.action.cancel')}</Button>
+				<Button
+					variant="primary"
+					type="submit"
+					disabled={props.busy || available.length === 0}
+				>
+					{props.busy ? t('sandbox.action.saving') : t('sandbox.access.grant')}
+				</Button>
+			</div>
+		</div>
+	</form>
+}

package/modules/sandbox/src/client/SandboxGrantList.tsrx

@@ -0,0 +1,83 @@
+import { Table, Tag, type TableColumn } from '@flowdular/sdk/ui';
+import { t } from '@flowdular/sdk/client';
+import type { SandboxAccessGrant } from '../domain/types.ts';
+import {
+	capabilityLabel,
+	grantState,
+	grantTone,
+	timestamp,
+} from './presentation.ts';
+
+export interface SandboxGrantListProps {
+	readonly grants: readonly SandboxAccessGrant[];
+	readonly busy: boolean;
+	readonly onRevoke: (accountId: string) => void;
+}
+
+function capabilities(grant: SandboxAccessGrant): string {
+	return grant.capabilities.map(capabilityLabel).join(' · ');
+}
+
+function columns(now: number): readonly TableColumn<SandboxAccessGrant>[] {
+	return [
+		{
+			key: 'account',
+			header: t('sandbox.access.account'),
+			width: '26%',
+			cell: (grant) => <span class="ui-cell">
+				<b>{grant.displayName}</b>
+				<small class="ui-mono">{grant.email}</small>
+			</span>,
+		},
+		{
+			key: 'capabilities',
+			header: t('sandbox.access.capabilities'),
+			width: '36%',
+			cell: (grant) =>
+				<span class="ui-cell__muted">{capabilities(grant)}</span>,
+		},
+		{
+			key: 'status',
+			header: t('sandbox.access.status'),
+			width: '28%',
+			cell: (grant) => <span class="ui-table__state">
+				<Tag tone={grantTone(grantState(grant, now))} dot>{t(
+					'sandbox.grantState.' + grantState(grant, now),
+				)}</Tag>
+				<small>
+					{grant.expiresAt === null
+						? t('sandbox.access.noExpiry')
+						: t('sandbox.access.until', { date: timestamp(grant.expiresAt) })}
+				</small>
+			</span>,
+		},
+	];
+}
+
+export function SandboxGrantList(props: SandboxGrantListProps) @{
+	const now = Date.now();
+	<Table
+		caption={t('sandbox.access.caption')}
+		columns={columns(now)}
+		rows={props.grants}
+		rowKey={(grant) => grant.id}
+		empty={{
+			icon: 'flask',
+			title: t('sandbox.access.emptyTitle'),
+			hint: t('sandbox.access.empty'),
+		}}
+		actionsLabel={t('sandbox.access.actions')}
+		actions={(grant) => grant.revokedAt === null
+			? [
+					{
+						id: 'revoke',
+						label: t('sandbox.access.revoke'),
+						icon: 'x',
+						tone: 'danger',
+						disabled: props.busy,
+						onSelect: () => props.onRevoke(grant.accountId),
+					},
+				]
+			: []}
+	/>
+}

package/modules/sandbox/src/client/SandboxSessionList.tsrx

@@ -0,0 +1,56 @@
+import { Table, Tag, type TableColumn } from '@flowdular/sdk/ui';
+import { t } from '@flowdular/sdk/client';
+import type { SandboxSessionRecord } from '../domain/types.ts';
+import { sessionTone, timestamp } from './presentation.ts';
+
+export interface SandboxSessionListProps {
+	readonly sessions: readonly SandboxSessionRecord[];
+}
+
+function origin(session: SandboxSessionRecord): string {
+	return session.moduleId + ' · ' + session.driver + ' · ' + session.mode;
+}
+
+function columns(): readonly TableColumn<SandboxSessionRecord>[] {
+	return [
+		{
+			key: 'session',
+			header: t('sandbox.sessions.session'),
+			width: '50%',
+			cell: (session) => <span class="ui-cell">
+				<b>{session.title}</b>
+				<small class="ui-mono">{origin(session)}</small>
+			</span>,
+		},
+		{
+			key: 'state',
+			header: t('sandbox.sessions.state'),
+			width: '20%',
+			cell: (session) =>
+				<Tag tone={sessionTone(session.state)} dot>{t(
+					'sandbox.sessionState.' + session.state,
+				)}</Tag>,
+		},
+		{
+			key: 'updated',
+			header: t('sandbox.sessions.updated'),
+			width: '30%',
+			numeric: true,
+			cell: (session) => timestamp(session.updatedAt),
+		},
+	];
+}
+
+export function SandboxSessionList(props: SandboxSessionListProps) @{
+	<Table
+		caption={t('sandbox.sessions.caption')}
+		columns={columns()}
+		rows={props.sessions}
+		rowKey={(session) => session.id}
+		empty={{
+			icon: 'flask',
+			title: t('sandbox.sessions.emptyTitle'),
+			hint: t('sandbox.sessions.empty'),
+		}}
+	/>
+}

package/modules/sandbox/src/client/api.ts

@@ -0,0 +1,87 @@
+import type {
+	SandboxAccessCandidate,
+	SandboxAccessGrant,
+	SandboxSessionRecord,
+} from '../domain/types.ts';
+import { t } from '@flowdular/sdk/client/i18n';
+
+interface ErrorEnvelope {
+	readonly error?: { readonly message?: string };
+}
+
+export interface SandboxAccessSnapshot {
+	readonly sandbox: { readonly url: string };
+	readonly grants: readonly SandboxAccessGrant[];
+	readonly candidates: readonly SandboxAccessCandidate[];
+}
+
+export interface GrantSandboxAccessRequest {
+	readonly accountId: string;
+	readonly capabilities: readonly string[];
+	readonly expiresAt: number | null;
+	readonly note: string | null;
+}
+
+async function payload<T>(response: Response): Promise<T> {
+	const value = (await response.json()) as T & ErrorEnvelope;
+	if (!response.ok) {
+		throw new Error(value.error?.message ?? t('sandbox.error.request'));
+	}
+	return value;
+}
+
+export async function loadSandboxAccess(): Promise<SandboxAccessSnapshot> {
+	const response = await fetch('/api/sandbox/access', {
+		headers: { accept: 'application/json' },
+		credentials: 'same-origin',
+	});
+	return payload<SandboxAccessSnapshot>(response);
+}
+
+export async function loadSandboxSessions(): Promise<
+	readonly SandboxSessionRecord[]
+> {
+	const response = await fetch('/api/sandbox/sessions', {
+		headers: { accept: 'application/json' },
+		credentials: 'same-origin',
+	});
+	return (
+		await payload<{ readonly sessions: readonly SandboxSessionRecord[] }>(
+			response,
+		)
+	).sessions;
+}
+
+export async function grantSandboxAccess(
+	input: GrantSandboxAccessRequest,
+	csrfToken: string,
+): Promise<SandboxAccessGrant> {
+	const response = await fetch('/api/sandbox/access', {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+			'x-csrf-token': csrfToken,
+		},
+		credentials: 'same-origin',
+		body: JSON.stringify(input),
+	});
+	return (await payload<{ readonly grant: SandboxAccessGrant }>(response))
+		.grant;
+}
+
+export async function revokeSandboxAccess(
+	accountId: string,
+	csrfToken: string,
+): Promise<SandboxAccessGrant> {
+	const response = await fetch('/api/sandbox/access/revoke', {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+			'x-csrf-token': csrfToken,
+		},
+		credentials: 'same-origin',
+		body: JSON.stringify({ accountId }),
+	});
+	return (await payload<{ readonly grant: SandboxAccessGrant }>(response))
+		.grant;
+}

package/modules/sandbox/src/client/contribution.tsrx

@@ -0,0 +1,47 @@
+import { t, type ModuleClientContribution } from '@flowdular/sdk/client';
+import { SANDBOX_PERMISSIONS } from '../acl/permissions.ts';
+import translationsEn from '../../translations/en.json';
+import translationsPl from '../../translations/pl.json';
+import { SandboxAccessView } from './SandboxAccessView.tsrx';
+
+export interface SandboxClientContributionOptions {
+	readonly csrfToken: string;
+	readonly scopes: readonly string[];
+}
+
+export function createSandboxClientContribution(
+	options: SandboxClientContributionOptions,
+): ModuleClientContribution {
+	return {
+		moduleId: 'sandbox.core',
+		translations: { en: translationsEn, pl: translationsPl },
+		navigation: [
+			{
+				id: 'sandbox.navigation.access',
+				viewId: 'sandbox',
+				group: 'Development',
+				get label() {
+					return t('sandbox.navigation.sandbox');
+				},
+				glyph: 'flask',
+				get description() {
+					return t('sandbox.navigation.description');
+				},
+				scope: SANDBOX_PERMISSIONS.manage,
+				order: 50,
+			},
+		],
+		views: [
+			{
+				id: 'sandbox',
+				render: () =>
+					<SandboxAccessView
+						csrfToken={options.csrfToken}
+						canReadSessions={options.scopes.includes(
+							SANDBOX_PERMISSIONS.sessionsRead,
+						)}
+					/>,
+			},
+		],
+	};
+}

package/modules/sandbox/src/client/index.ts

@@ -0,0 +1,18 @@
+export { createSandboxClientContribution } from './contribution.tsrx';
+export type { SandboxClientContributionOptions } from './contribution.tsrx';
+export { SandboxAccessView } from './SandboxAccessView.tsrx';
+import type {
+	ModuleClientContext,
+	ModuleClientContribution,
+} from '@flowdular/sdk/client';
+import { createSandboxClientContribution as canonicalContribution } from './contribution.tsrx';
+
+/* Canonical entry used by the generated platform composition. */
+export function createClientContribution(
+	context: ModuleClientContext,
+): ModuleClientContribution {
+	return canonicalContribution({
+		csrfToken: context.csrfToken,
+		scopes: context.scopes,
+	});
+}

package/modules/sandbox/src/client/presentation.ts

@@ -0,0 +1,47 @@
+import type {
+	SandboxAccessGrant,
+	SandboxSessionState,
+} from '../domain/types.ts';
+import { activeLocale, t } from '@flowdular/sdk/client/i18n';
+
+export type GrantState = 'active' | 'expired' | 'revoked';
+
+export function grantState(grant: SandboxAccessGrant, now: number): GrantState {
+	if (grant.revokedAt !== null) return 'revoked';
+	if (grant.expiresAt !== null && grant.expiresAt <= now) return 'expired';
+	return 'active';
+}
+
+export function grantTone(
+	state: GrantState,
+): 'success' | 'warning' | 'neutral' {
+	if (state === 'active') return 'success';
+	return state === 'expired' ? 'warning' : 'neutral';
+}
+
+export function sessionTone(
+	state: SandboxSessionState,
+): 'success' | 'warning' | 'danger' | 'info' | 'neutral' {
+	if (state === 'accepted') return 'success';
+	if (state === 'failed' || state === 'blocked') return 'danger';
+	if (state === 'awaiting-approval') return 'warning';
+	if (state === 'draft' || state === 'archived' || state === 'deleted') {
+		return 'neutral';
+	}
+	return 'info';
+}
+
+export function capabilityLabel(capability: string): string {
+	const key = 'sandbox.capability.' + capability;
+	const translated = t(key);
+	return translated === key
+		? capability.replace('sandbox.', '').replace(/\./g, ' ')
+		: translated;
+}
+
+export function timestamp(value: number): string {
+	return new Intl.DateTimeFormat(activeLocale(), {
+		dateStyle: 'medium',
+		timeStyle: 'short',
+	}).format(new Date(value));
+}

package/modules/sandbox/src/client/state.ts

@@ -0,0 +1,20 @@
+import { cell, createStore } from 'segment-state';
+import type {
+	SandboxAccessCandidate,
+	SandboxAccessGrant,
+	SandboxSessionRecord,
+} from '../domain/types.ts';
+
+export function createSandboxClientState() {
+	const store = createStore({
+		grants: cell<readonly SandboxAccessGrant[]>([]),
+		candidates: cell<readonly SandboxAccessCandidate[]>([]),
+		sessions: cell<readonly SandboxSessionRecord[]>([]),
+		sandboxUrl: '',
+		selectedAccountId: '',
+		formOpen: false,
+		status: cell<'idle' | 'loading' | 'submitting'>('idle'),
+		error: '',
+	});
+	return { store, state: store.state };
+}