refactor(client): group pages by entity and add scenario/step crud
- move environment, scenario, session pages into entity subdirs - add CreateScenarioPage and EditScenarioPage - add CreateStepPage and EditStepPage with order/type/session/code fields - add per-step edit and delete row actions on ScenarioDetailPage - add step api methods (get, create, update, remove) to api client - add sectionToolbar, formField, fieldLabel, textarea css utilities
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Play, Pencil, Plus, Trash2 } from 'lucide-react';
|
||||
import { scenarios, steps } 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 handleDeleteStep = async (stepId: number) => {
|
||||
await steps.remove(Number(id), stepId);
|
||||
setScenario((prev) =>
|
||||
prev ? { ...prev, steps: prev.steps.filter((s) => s.id !== stepId) } : prev,
|
||||
);
|
||||
};
|
||||
|
||||
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} />,
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
width: 80,
|
||||
align: 'right',
|
||||
render: (s) => (
|
||||
<span style={{ display: 'inline-flex', gap: 6 }}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
title={t('steps.action_edit')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/scenarios/${id}/steps/${s.id}/edit`);
|
||||
}}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
title={t('steps.action_delete')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteStep(s.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
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="secondary" size="sm" onClick={() => navigate(`/scenarios/${id}/edit`)}>
|
||||
<Pencil size={14} />
|
||||
{t('scenarios.action_edit')}
|
||||
</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}>
|
||||
<div className={styles.sectionToolbar}>
|
||||
<h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
|
||||
<Button size="sm" onClick={() => navigate(`/scenarios/${id}/steps/new`)}>
|
||||
<Plus size={14} />
|
||||
{t('steps.action_add')}
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
columns={stepColumns}
|
||||
data={scenario.steps}
|
||||
rowKey={(s) => s.id}
|
||||
loading={false}
|
||||
emptyMessage=""
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{scenario.steps.length === 0 && (
|
||||
<div className={styles.stepsSection}>
|
||||
<div className={styles.sectionToolbar}>
|
||||
<h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
|
||||
<Button size="sm" onClick={() => navigate(`/scenarios/${id}/steps/new`)}>
|
||||
<Plus size={14} />
|
||||
{t('steps.action_add')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user