ars9/liqa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sessions): add detail page, Notification component, and session API improvements

Browse Source 
- add SessionDetailPage with breadcrumbs, DescriptionList, status badge, masked token
- add Notification component (info/success/error/warning/note variants) for contextual messages
- use Notification for 404 errors on session and environment detail pages
- add GET /sessions/:id endpoint; sanitize token (head…tail) and strip cookies/localStorage
- change DELETE /sessions/:id to return 204 No Content so client redirect works correctly
- add onRowClick prop to Table for clickable rows; stop propagation on actions column
- update status badges: open=success (green), closed=error (red) on both list and detail
This commit is contained in:
ars9
2026-04-09 19:00:16 +03:00
parent 097c747993
commit d342637eb6
14 changed files with 290 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.tsx
+2
View File
@@ -6,6 +6,7 @@ import { CreateEnvironmentPage } from './pages/CreateEnvironmentPage';
import { EditEnvironmentPage } from './pages/EditEnvironmentPage';
import { KeysPage } from './pages/KeysPage';
import { SessionsPage } from './pages/SessionsPage';
import { SessionDetailPage } from './pages/SessionDetailPage';
import { ScenariosPage } from './pages/ScenariosPage';
import { NavLink, Navigate, Route, Routes } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
@@ -58,6 +59,7 @@ export default function App() {
<Route path="/environments/:id" element={<EnvironmentDetailPage />} />
<Route path="/keys" element={<KeysPage />} />
<Route path="/sessions" element={<SessionsPage />} />
<Route path="/sessions/:id" element={<SessionDetailPage />} />
<Route path="/scenarios" element={<ScenariosPage />} />
<Route path="*" element={<Navigate to="/scenarios" replace />} />
</Routes>
client/src/api/client.ts
+8 -2
View File
@@ -21,8 +21,11 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
const text = await res.text().catch(() => res.statusText);
throw new Error(`${res.status} ${text}`);
}
if (res.status === 204) return undefined as T;
return res.json() as Promise<T>;
const contentLength = res.headers.get('content-length');
if (res.status === 204 || contentLength === '0') return undefined as T;
const text = await res.text();
if (!text) return undefined as T;
return JSON.parse(text) as T;
}
// ── Environments ──────────────────────────────────────────────────────────────
@@ -65,6 +68,9 @@ export const sessions = {
list(page = 1, limit = 50): Promise<PaginatedResponse<Session>> {
return request(`/sessions?page=${page}&limit=${limit}`);
},
get(id: number): Promise<Session> {
return request(`/sessions/${id}`);
},
remove(id: number): Promise<void> {
return request(`/sessions/${id}`, { method: 'DELETE' });
},
client/src/i18n/locales/en.json
+15 -1
View File
@@ -1,4 +1,10 @@
{
"errors": {
"not_found": "Not found",
"not_found_session": "Session {{id}} does not exist or has been deleted.",
"not_found_environment": "Environment {{id}} does not exist or has been deleted.",
"generic": "Something went wrong. Please try again."
},
"nav": {
"environments": "Environments",
"keys": "Keys",
@@ -48,7 +54,15 @@
"col_status": "Status",
"col_lastUsed": "Last Used",
"empty": "No sessions yet.",
"action_delete": "Delete"
"loading": "Loading…",
"action_delete": "Delete",
"field_id": "ID",
"field_name": "Name",
"field_token": "Token",
"field_status": "Status",
"field_created": "Created",
"field_updated": "Updated",
"field_lastUsed": "Last Used"
},
"scenarios": {
"title": "Scenarios",
client/src/pages/EnvironmentDetailPage.tsx
+9 -2
View File
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { Pencil, Trash2 } from 'lucide-react';
import { environments } from '../api';
import type { Environment } from '../api';
import { Breadcrumbs, Button, Card, DescriptionList, Timestamp } from '../ui';
import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../ui';
import styles from './Page.module.css';
export function EnvironmentDetailPage() {
@@ -53,7 +53,14 @@ export function EnvironmentDetailPage() {
)}
</div>
{error && <p className={styles.error}>{error}</p>}
{error && (
<Notification
variant="error"
title={error.startsWith('404') ? t('errors.not_found') : undefined}
>
{error.startsWith('404') ? t('errors.not_found_environment', { id }) : error}
</Notification>
)}
{loading && <p className={styles.muted}>{t('environments.loading')}</p>}
client/src/pages/Page.module.css
+11
View File
@@ -36,6 +36,17 @@
font-size: var(--font-size-sm);
}
.codeInline {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.85em;
padding: 0.15em 0.45em;
background: var(--color-code-bg, color-mix(in srgb, var(--color-bg-raised) 60%, var(--color-secondary) 40%));
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-secondary-fg);
word-break: break-all;
}
/* ── Environment cards ──────────────────────────────────────── */
.envGrid {
client/src/pages/SessionDetailPage.tsx
+93
View File
@@ -0,0 +1,93 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Trash2 } from 'lucide-react';
import { sessions } from '../api';
import type { Session } from '../api';
import { Badge, Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../ui';
import styles from './Page.module.css';
export function SessionDetailPage() {
const { t } = useTranslation();
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const [session, setSession] = useState<Session | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!id) return;
sessions
.get(Number(id))
.then(setSession)
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, [id]);
const handleDelete = async () => {
if (!session) return;
await sessions.remove(session.id);
navigate('/sessions');
};
return (
<div>
<div className={styles.pageToolbar}>
<Breadcrumbs
items={[
{ label: t('sessions.title'), onClick: () => navigate('/sessions') },
{ label: session?.sessionName ?? `#${id}` },
]}
/>
{session && (
<Button variant="danger" size="sm" onClick={handleDelete}>
<Trash2 size={14} />
{t('sessions.action_delete')}
</Button>
)}
</div>
{error && (
<Notification
variant="error"
title={error.startsWith('404') ? t('errors.not_found') : undefined}
>
{error.startsWith('404') ? t('errors.not_found_session', { id }) : error}
</Notification>
)}
{loading && <p className={styles.muted}>{t('sessions.loading')}</p>}
{session && (
<Card>
<DescriptionList
items={[
{ term: t('sessions.field_id'), detail: session.id },
{ term: t('sessions.field_name'), detail: session.sessionName },
{
term: t('sessions.field_status'),
detail: (
<Badge variant={session.status === 'open' ? 'success' : 'error'}>
{session.status}
</Badge>
),
},
{ term: t('sessions.field_token'), detail: <code className={styles.codeInline}>{session.token}</code> },
{
term: t('sessions.field_lastUsed'),
detail: session.lastUsedAt ? <Timestamp value={session.lastUsedAt} /> : '—',
},
{
term: t('sessions.field_created'),
detail: <Timestamp value={session.createdAt} />,
},
{
term: t('sessions.field_updated'),
detail: <Timestamp value={session.updatedAt} />,
},
]}
/>
</Card>
)}
</div>
);
}
client/src/pages/SessionsPage.tsx
+13 -4
View File
@@ -1,5 +1,7 @@
import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Trash2 } from 'lucide-react';
import { sessions } from '../api';
import type { Session } from '../api';
import { Badge, Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../ui';
@@ -7,6 +9,7 @@ import styles from './Page.module.css';
export function SessionsPage() {
const { t } = useTranslation();
const navigate = useNavigate();
const [items, setItems] = useState<Session[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -37,7 +40,7 @@ export function SessionsPage() {
header: t('sessions.col_status'),
width: 100,
render: (s) => (
<Badge variant={s.status === 'open' ? 'success' : 'neutral'}>{s.status}</Badge>
<Badge variant={s.status === 'open' ? 'success' : 'error'}>{s.status}</Badge>
),
},
{
@@ -49,11 +52,16 @@ export function SessionsPage() {
{
key: 'actions',
header: '',
width: 80,
width: 48,
align: 'right',
render: (s) => (
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
{t('sessions.action_delete')}
<Button
variant="danger"
size="sm"
title={t('sessions.action_delete')}
onClick={() => handleDelete(s.id)}
>
<Trash2 size={14} />
</Button>
),
},
@@ -71,6 +79,7 @@ export function SessionsPage() {
emptyMessage={t('sessions.empty')}
pageSize={10}
pageSizeOptions={[10, 25, 50]}
onRowClick={(s) => navigate(`/sessions/${s.id}`)}
/>
</div>
);
client/src/ui/Notification/Notification.module.css
+63
View File
@@ -0,0 +1,63 @@
.notification {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border-left: 3px solid;
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
}
.icon {
flex-shrink: 0;
margin-top: 1px;
display: flex;
}
.body {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.title {
margin: 0;
font-weight: 600;
}
.message {
margin: 0;
line-height: 1.5;
}
/* ── Variants ───────────────────────────────────────────────── */
.info {
background: var(--color-info-bg);
color: var(--color-info-fg);
border-left-color: var(--color-secondary-fg);
}
.success {
background: var(--color-success-bg);
color: var(--color-success-fg);
border-left-color: var(--color-primary-hover);
}
.error {
background: var(--color-error-bg);
color: var(--color-error-fg);
border-left-color: var(--color-danger);
}
.warning {
background: var(--color-warning-bg);
color: var(--color-warning-fg);
border-left-color: #E09000;
}
.note {
background: var(--color-neutral-bg);
color: var(--color-neutral-fg);
border-left-color: var(--color-border);
}
client/src/ui/Notification/Notification.tsx
+36
View File
@@ -0,0 +1,36 @@
import { AlertCircle, AlertTriangle, CheckCircle2, Info, StickyNote } from 'lucide-react';
import styles from './Notification.module.css';
export type NotificationVariant = 'info' | 'success' | 'error' | 'warning' | 'note';
export interface NotificationProps {
variant?: NotificationVariant;
title?: string;
children: React.ReactNode;
className?: string;
}
const ICONS: Record<NotificationVariant, React.ReactNode> = {
info: <Info size={16} />,
success: <CheckCircle2 size={16} />,
error: <AlertCircle size={16} />,
warning: <AlertTriangle size={16} />,
note: <StickyNote size={16} />,
};
export function Notification({
variant = 'info',
title,
children,
className,
}: NotificationProps) {
return (
<div className={[styles.notification, styles[variant], className].filter(Boolean).join(' ')}>
<span className={styles.icon}>{ICONS[variant]}</span>
<div className={styles.body}>
{title && <p className={styles.title}>{title}</p>}
<p className={styles.message}>{children}</p>
</div>
</div>
);
}
client/src/ui/Table/Table.module.css
+4
View File
@@ -43,6 +43,10 @@
background: var(--color-secondary-hover);
}
.clickable {
cursor: pointer;
}
.tr:not(:last-child) .td {
border-bottom: var(--border-width) solid var(--color-border);
}
client/src/ui/Table/Table.tsx
+9 -1
View File
@@ -21,6 +21,8 @@ export interface TableProps<T> {
pageSize?: number;
/** Offer a page-size selector when pagination is enabled */
pageSizeOptions?: number[];
/** Called when a row is clicked */
onRowClick?: (row: T) => void;
}
export function Table<T>({
@@ -32,6 +34,7 @@ export function Table<T>({
className,
pageSize: defaultPageSize,
pageSizeOptions,
onRowClick,
}: TableProps<T>) {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(defaultPageSize ?? 0);
@@ -77,12 +80,17 @@ export function Table<T>({
</tr>
) : (
visibleData.map((row) => (
<tr key={rowKey(row)} className={styles.tr}>
<tr
key={rowKey(row)}
className={[styles.tr, onRowClick ? styles.clickable : ''].filter(Boolean).join(' ')}
onClick={onRowClick ? () => onRowClick(row) : undefined}
>
{columns.map((col) => (
<td
key={col.key}
className={styles.td}
style={{ textAlign: col.align ?? 'left' }}
onClick={col.key === 'actions' ? (e) => e.stopPropagation() : undefined}
>
{col.render(row)}
</td>
client/src/ui/index.ts
+3
View File
@@ -33,5 +33,8 @@ export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMen
export { DescriptionList } from './DescriptionList/DescriptionList';
export type { DescriptionListProps, DescriptionListItem } from './DescriptionList/DescriptionList';
export { Notification } from './Notification/Notification';
export type { NotificationProps, NotificationVariant } from './Notification/Notification';
export { Table } from './Table/Table';
export type { TableProps, TableColumn } from './Table/Table';