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

feat(scenarios): add detail page, comfortable DescriptionList layout, and environment card refactor

Browse Source 
- Add ScenarioDetailPage with DescriptionList, steps table, run/delete actions
- Add /scenarios/:id route
- Add i18n keys for scenario detail fields, steps columns, and 404 error
- Add 'comfortable' and 'inline' layout variants to DescriptionList (with compact as default stacked)
- Apply layout="comfortable" to session, environment, and scenario detail pages
- Apply layout="compact" to EnvironmentsPage card DescriptionList
- Refactor EnvironmentsPage card to use ContextMenu (view/edit/delete) with icons
- Add ScenariosPage clickable rows, Play icon (primary) and Trash2 icon (danger) action buttons
- Add Page.module.css sectionHeading and stepsSection utility classes
- Fix Notification.tsx and Table.tsx formatting (prettier)
This commit is contained in:
ars9
2026-04-09 19:16:49 +03:00
parent d342637eb6
commit a5f87b904e
14 changed files with 275 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.tsx
+2
View File
@@ -8,6 +8,7 @@ import { KeysPage } from './pages/KeysPage';
import { SessionsPage } from './pages/SessionsPage';
import { SessionDetailPage } from './pages/SessionDetailPage';
import { ScenariosPage } from './pages/ScenariosPage';
import { ScenarioDetailPage } from './pages/ScenarioDetailPage';
import { NavLink, Navigate, Route, Routes } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Globe, KeyRound, Monitor, ClipboardList } from 'lucide-react';
@@ -61,6 +62,7 @@ export default function App() {
<Route path="/sessions" element={<SessionsPage />} />
<Route path="/sessions/:id" element={<SessionDetailPage />} />
<Route path="/scenarios" element={<ScenariosPage />} />
<Route path="/scenarios/:id" element={<ScenarioDetailPage />} />
<Route path="*" element={<Navigate to="/scenarios" replace />} />
</Routes>
</main>
client/src/i18n/locales/en.json
+13 -1
View File
@@ -3,6 +3,7 @@
"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.",
"not_found_scenario": "Scenario {{id}} does not exist or has been deleted.",
"generic": "Something went wrong. Please try again."
},
"nav": {
@@ -70,8 +71,19 @@
"col_name": "Name",
"col_updated": "Updated",
"empty": "No scenarios yet.",
"loading": "Loading…",
"action_run": "Run",
"action_delete": "Delete"
"action_delete": "Delete",
"field_id": "ID",
"field_name": "Name",
"field_steps": "Steps",
"field_created": "Created",
"field_updated": "Updated",
"steps_heading": "Steps",
"step_order": "#",
"step_type": "Type",
"step_session": "Session",
"step_updated": "Updated"
},
"theme": {
"switch_to_light": "Switch to light theme",
client/src/pages/CreateEnvironmentPage.tsx
+1 -5
View File
@@ -91,11 +91,7 @@ export function CreateEnvironmentPage() {
</div>
<div className={styles.formActions}>
<Button
type="button"
variant="secondary"
onClick={() => navigate('/environments')}
>
<Button type="button" variant="secondary" onClick={() => navigate('/environments')}>
{t('environments.action_cancel')}
</Button>
<Button type="submit" loading={saving}>
client/src/pages/EnvironmentDetailPage.tsx
+7 -1
View File
@@ -41,7 +41,11 @@ export function EnvironmentDetailPage() {
/>
{env && (
<div className={styles.toolbarActions}>
<Button variant="secondary" size="sm" onClick={() => navigate(`/environments/${env.id}/edit`)}>
<Button
variant="secondary"
size="sm"
onClick={() => navigate(`/environments/${env.id}/edit`)}
>
<Pencil size={14} />
{t('environments.action_edit')}
</Button>
@@ -68,6 +72,7 @@ export function EnvironmentDetailPage() {
<>
<div className={styles.detailMeta}>
<DescriptionList
layout="comfortable"
items={[
{ term: t('environments.field_id'), detail: env.id },
{
@@ -88,6 +93,7 @@ export function EnvironmentDetailPage() {
<p className={styles.muted}>{t('environments.no_urls')}</p>
) : (
<DescriptionList
layout="comfortable"
items={Object.entries(env.urls)
.filter(([, v]) => v)
.map(([key, value]) => ({
client/src/pages/EnvironmentsPage.tsx
+33 -27
View File
@@ -15,32 +15,34 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: n
const header = (
<div className={styles.envCardHeader}>
<span className={styles.envCardName}>{env.name}</span>
<div onClick={(e) => e.stopPropagation()}><ContextMenu
align="right"
trigger={
<Button variant="ghost" size="sm" aria-label={t('environments.menu_label')}>
<Settings size={14} />
</Button>
}
items={[
{
label: t('environments.action_view'),
icon: <ExternalLink size={14} />,
onClick: () => navigate(`/environments/${env.id}`),
},
{
label: t('environments.action_edit'),
icon: <Pencil size={14} />,
onClick: () => navigate(`/environments/${env.id}/edit`),
},
{
label: t('environments.action_delete'),
icon: <Trash2 size={14} />,
variant: 'danger',
onClick: () => onDelete(env.id),
},
]}
/></div>
<div onClick={(e) => e.stopPropagation()}>
<ContextMenu
align="right"
trigger={
<Button variant="ghost" size="sm" aria-label={t('environments.menu_label')}>
<Settings size={14} />
</Button>
}
items={[
{
label: t('environments.action_view'),
icon: <ExternalLink size={14} />,
onClick: () => navigate(`/environments/${env.id}`),
},
{
label: t('environments.action_edit'),
icon: <Pencil size={14} />,
onClick: () => navigate(`/environments/${env.id}/edit`),
},
{
label: t('environments.action_delete'),
icon: <Trash2 size={14} />,
variant: 'danger',
onClick: () => onDelete(env.id),
},
]}
/>
</div>
</div>
);
@@ -60,7 +62,11 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: n
onClick={() => navigate(`/environments/${env.id}`)}
>
{urlEntries.length > 0 && (
<DescriptionList truncate items={urlEntries.map(([key, value]) => ({ term: key, detail: value }))} />
<DescriptionList
layout="compact"
truncate
items={urlEntries.map(([key, value]) => ({ term: key, detail: value }))}
/>
)}
{urlEntries.length === 0 && (
<p className={styles.envCardEmpty}>{t('environments.no_urls')}</p>
client/src/pages/Page.module.css
+11
View File
@@ -5,6 +5,17 @@
color: var(--color-text);
}
.sectionHeading {
margin: var(--space-6) 0 var(--space-3);
font-size: var(--font-size-md);
font-weight: 600;
color: var(--color-text);
}
.stepsSection {
margin-top: var(--space-2);
}
.breadcrumbs {
margin-bottom: var(--space-4);
}
client/src/pages/ScenarioDetailPage.tsx
+141
View File
@@ -0,0 +1,141 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Play, Trash2 } from 'lucide-react';
import { scenarios } from '../api';
import type { Scenario, ScenarioStep } from '../api';
import {
Badge,
Breadcrumbs,
Button,
Card,
DescriptionList,
Notification,
Table,
Timestamp,
type TableColumn,
} from '../ui';
import styles from './Page.module.css';
const STEP_TYPE_VARIANT: Record<string, 'info' | 'warning' | 'success'> = {
login: 'success',
exec: 'info',
sign: 'warning',
};
export function ScenarioDetailPage() {
const { t } = useTranslation();
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const [scenario, setScenario] = useState<(Scenario & { steps: ScenarioStep[] }) | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!id) return;
scenarios
.get(Number(id))
.then(setScenario)
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, [id]);
const handleRun = async () => {
if (!scenario) return;
await scenarios.run(scenario.id);
};
const handleDelete = async () => {
if (!scenario) return;
await scenarios.remove(scenario.id);
navigate('/scenarios');
};
const stepColumns: TableColumn<ScenarioStep>[] = [
{ key: 'order', header: t('scenarios.step_order'), render: (s) => s.order, width: 60 },
{
key: 'type',
header: t('scenarios.step_type'),
width: 90,
render: (s) => <Badge variant={STEP_TYPE_VARIANT[s.type] ?? 'neutral'}>{s.type}</Badge>,
},
{ key: 'session', header: t('scenarios.step_session'), render: (s) => s.sessionName },
{
key: 'updated',
header: t('scenarios.step_updated'),
width: 140,
render: (s) => <Timestamp value={s.updatedAt} />,
},
];
return (
<div>
<div className={styles.pageToolbar}>
<Breadcrumbs
items={[
{ label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
{ label: scenario?.name ?? `#${id}` },
]}
/>
{scenario && (
<div className={styles.toolbarActions}>
<Button size="sm" onClick={handleRun}>
<Play size={14} />
{t('scenarios.action_run')}
</Button>
<Button variant="danger" size="sm" onClick={handleDelete}>
<Trash2 size={14} />
{t('scenarios.action_delete')}
</Button>
</div>
)}
</div>
{error && (
<Notification
variant="error"
title={error.startsWith('404') ? t('errors.not_found') : undefined}
>
{error.startsWith('404') ? t('errors.not_found_scenario', { id }) : error}
</Notification>
)}
{loading && <p className={styles.muted}>{t('scenarios.loading')}</p>}
{scenario && (
<>
<Card>
<DescriptionList
layout="comfortable"
items={[
{ term: t('scenarios.field_id'), detail: scenario.id },
{ term: t('scenarios.field_name'), detail: scenario.name },
{ term: t('scenarios.field_steps'), detail: scenario.steps.length },
{
term: t('scenarios.field_created'),
detail: <Timestamp value={scenario.createdAt} />,
},
{
term: t('scenarios.field_updated'),
detail: <Timestamp value={scenario.updatedAt} />,
},
]}
/>
</Card>
{scenario.steps.length > 0 && (
<div className={styles.stepsSection}>
<h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
<Table
columns={stepColumns}
data={scenario.steps}
rowKey={(s) => s.id}
loading={false}
emptyMessage=""
/>
</div>
)}
</>
)}
</div>
);
}
client/src/pages/ScenariosPage.tsx
+14 -5
View File
@@ -1,5 +1,7 @@
import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Play, Trash2 } from 'lucide-react';
import { scenarios } from '../api';
import type { Scenario } from '../api';
import { Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../ui';
@@ -7,6 +9,7 @@ import styles from './Page.module.css';
export function ScenariosPage() {
const { t } = useTranslation();
const navigate = useNavigate();
const [items, setItems] = useState<Scenario[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -45,15 +48,20 @@ export function ScenariosPage() {
{
key: 'actions',
header: '',
width: 140,
width: 100,
align: 'right',
render: (s) => (
<span style={{ display: 'inline-flex', gap: 6 }}>
<Button size="sm" onClick={() => handleRun(s.id)}>
{t('scenarios.action_run')}
<Button size="sm" title={t('scenarios.action_run')} onClick={() => handleRun(s.id)}>
<Play size={14} />
</Button>
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
{t('scenarios.action_delete')}
<Button
variant="danger"
size="sm"
title={t('scenarios.action_delete')}
onClick={() => handleDelete(s.id)}
>
<Trash2 size={14} />
</Button>
</span>
),
@@ -72,6 +80,7 @@ export function ScenariosPage() {
emptyMessage={t('scenarios.empty')}
pageSize={10}
pageSizeOptions={[10, 25, 50]}
onRowClick={(s) => navigate(`/scenarios/${s.id}`)}
/>
</div>
);
client/src/pages/SessionDetailPage.tsx
+5 -1
View File
@@ -60,6 +60,7 @@ export function SessionDetailPage() {
{session && (
<Card>
<DescriptionList
layout="comfortable"
items={[
{ term: t('sessions.field_id'), detail: session.id },
{ term: t('sessions.field_name'), detail: session.sessionName },
@@ -71,7 +72,10 @@ export function SessionDetailPage() {
</Badge>
),
},
{ term: t('sessions.field_token'), detail: <code className={styles.codeInline}>{session.token}</code> },
{
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} /> : '—',
client/src/pages/SessionsPage.tsx
+1 -3
View File
@@ -39,9 +39,7 @@ export function SessionsPage() {
key: 'status',
header: t('sessions.col_status'),
width: 100,
render: (s) => (
<Badge variant={s.status === 'open' ? 'success' : 'error'}>{s.status}</Badge>
),
render: (s) => <Badge variant={s.status === 'open' ? 'success' : 'error'}>{s.status}</Badge>,
},
{
key: 'lastUsed',
client/src/ui/DescriptionList/DescriptionList.module.css
+32
View File
@@ -45,3 +45,35 @@
max-width: 100%;
}
/* ── Layout modifiers ───────────────────────────────────────── */
.inline .row {
flex-direction: row;
align-items: baseline;
gap: var(--space-3);
}
.inline .term {
min-width: 120px;
}
.comfortable {
gap: 0;
}
.comfortable .row {
padding: var(--space-4) 0;
}
.comfortable .row:first-child {
padding-top: 0;
}
.comfortable .term {
margin-bottom: var(--space-1);
}
.comfortable .detail {
font-size: var(--font-size-md);
}
client/src/ui/DescriptionList/DescriptionList.tsx
+8 -3
View File
@@ -15,14 +15,19 @@ export interface DescriptionListItem {
export interface DescriptionListProps {
items: DescriptionListItem[];
/** 'compact' stacks term above detail; 'inline' places them side by side (default) */
layout?: 'inline' | 'compact';
/** 'compact' stacks term above detail; 'inline' places them side by side; 'comfortable' adds generous spacing with dividers (default) */
layout?: 'inline' | 'compact' | 'comfortable';
/** Truncate detail values with ellipsis; full value shown in a tooltip on hover */
truncate?: boolean;
className?: string;
}
export function DescriptionList({ items, layout = 'inline', truncate, className }: DescriptionListProps) {
export function DescriptionList({
items,
layout = 'inline',
truncate,
className,
}: DescriptionListProps) {
return (
<dl className={[styles.list, styles[layout], className].filter(Boolean).join(' ')}>
{items.map((item, i) => (
client/src/ui/Notification/Notification.tsx
+4 -9
View File
@@ -11,19 +11,14 @@ export interface NotificationProps {
}
const ICONS: Record<NotificationVariant, React.ReactNode> = {
info: <Info size={16} />,
info: <Info size={16} />,
success: <CheckCircle2 size={16} />,
error: <AlertCircle size={16} />,
error: <AlertCircle size={16} />,
warning: <AlertTriangle size={16} />,
note: <StickyNote size={16} />,
note: <StickyNote size={16} />,
};
export function Notification({
variant = 'info',
title,
children,
className,
}: NotificationProps) {
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>
client/src/ui/Table/Table.tsx
+3 -1
View File
@@ -82,7 +82,9 @@ export function Table<T>({
visibleData.map((row) => (
<tr
key={rowKey(row)}
className={[styles.tr, onRowClick ? styles.clickable : ''].filter(Boolean).join(' ')}
className={[styles.tr, onRowClick ? styles.clickable : '']
.filter(Boolean)
.join(' ')}
onClick={onRowClick ? () => onRowClick(row) : undefined}
>
{columns.map((col) => (