feat(scenarios): add step title, scenario credentials, and environment context in executor
- add nullable title column to scenario steps; exposed in create/edit forms and step table - add scenario-credential join (many-to-many with CredentialEntity) with CRUD endpoints - expose environment URLs in code executor helpers via helpers.env and helpers.getEnvUrl() - resolve and cache environment per run from the login step's environmentName in scheduler - add section spacing and step table title column to ScenarioDetailPage
This commit is contained in:
+10
-1
@@ -1,6 +1,6 @@
|
||||
import { NavLink, Navigate, Route, Routes } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Globe, KeyRound, Monitor, ClipboardList, Activity } from 'lucide-react';
|
||||
import { Globe, KeyRound, Monitor, ClipboardList, Activity, KeySquare } from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import styles from './App.module.css';
|
||||
import { SidePanel, ThemeSwitcher } from './ui';
|
||||
@@ -21,9 +21,14 @@ import { EditStepPage } from './pages/scenario/EditStepPage';
|
||||
import { RunsPage } from './pages/run/RunsPage';
|
||||
import { RunDetailPage } from './pages/run/RunDetailPage';
|
||||
import { AllRunsPage } from './pages/run/AllRunsPage';
|
||||
import { CredentialsPage } from './pages/credential/CredentialsPage';
|
||||
import { CreateCredentialPage } from './pages/credential/CreateCredentialPage';
|
||||
import { EditCredentialPage } from './pages/credential/EditCredentialPage';
|
||||
import { CredentialDetailPage } from './pages/credential/CredentialDetailPage';
|
||||
|
||||
const NAV: { path: string; labelKey: string; Icon: LucideIcon }[] = [
|
||||
{ path: '/environments', labelKey: 'nav.environments', Icon: Globe },
|
||||
{ path: '/credentials', labelKey: 'nav.credentials', Icon: KeySquare },
|
||||
{ path: '/keys', labelKey: 'nav.keys', Icon: KeyRound },
|
||||
{ path: '/sessions', labelKey: 'nav.sessions', Icon: Monitor },
|
||||
{ path: '/scenarios', labelKey: 'nav.scenarios', Icon: ClipboardList },
|
||||
@@ -78,6 +83,10 @@ export default function App() {
|
||||
<Route path="/scenarios/:id/runs" element={<RunsPage />} />
|
||||
<Route path="/scenarios/:id/runs/:runId" element={<RunDetailPage />} />
|
||||
<Route path="/scenarios/:id" element={<ScenarioDetailPage />} />
|
||||
<Route path="/credentials" element={<CredentialsPage />} />
|
||||
<Route path="/credentials/new" element={<CreateCredentialPage />} />
|
||||
<Route path="/credentials/:id/edit" element={<EditCredentialPage />} />
|
||||
<Route path="/credentials/:id" element={<CredentialDetailPage />} />
|
||||
<Route path="/runs" element={<AllRunsPage />} />
|
||||
<Route path="*" element={<Navigate to="/scenarios" replace />} />
|
||||
</Routes>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import type {
|
||||
PaginatedResponse,
|
||||
Credential,
|
||||
Environment,
|
||||
KeysResponse,
|
||||
ScenarioCredential,
|
||||
Session,
|
||||
Scenario,
|
||||
ScenarioRun,
|
||||
@@ -30,6 +32,32 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
return JSON.parse(text) as T;
|
||||
}
|
||||
|
||||
// ── Credentials ───────────────────────────────────────────────────────────────
|
||||
|
||||
export const credentials = {
|
||||
list(page = 1, limit = 50): Promise<PaginatedResponse<Credential>> {
|
||||
return request(`/credentials?page=${page}&limit=${limit}`);
|
||||
},
|
||||
get(id: number): Promise<Credential> {
|
||||
return request(`/credentials/${id}`);
|
||||
},
|
||||
create(name: string, data?: string): Promise<Credential> {
|
||||
return request('/credentials', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name, data }),
|
||||
});
|
||||
},
|
||||
update(id: number, patch: Partial<Pick<Credential, 'name' | 'data'>>): Promise<Credential> {
|
||||
return request(`/credentials/${id}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(patch),
|
||||
});
|
||||
},
|
||||
remove(id: number): Promise<void> {
|
||||
return request(`/credentials/${id}`, { method: 'DELETE' });
|
||||
},
|
||||
};
|
||||
|
||||
// ── Environments ──────────────────────────────────────────────────────────────
|
||||
|
||||
export const environments = {
|
||||
@@ -132,9 +160,28 @@ export const runs = {
|
||||
},
|
||||
};
|
||||
|
||||
// ── Scenario Steps ────────────────────────────────────────────────────────────
|
||||
// ── Scenario Credentials ──────────────────────────────────────────────────────
|
||||
|
||||
export const scenarioCredentials = {
|
||||
list(scenarioId: number): Promise<ScenarioCredential[]> {
|
||||
return request(`/scenarios/${scenarioId}/credentials`);
|
||||
},
|
||||
add(scenarioId: number, credentialId: number, alias: string): Promise<ScenarioCredential> {
|
||||
return request(`/scenarios/${scenarioId}/credentials`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ credentialId, alias }),
|
||||
});
|
||||
},
|
||||
remove(scenarioId: number, scCredId: number): Promise<void> {
|
||||
return request(`/scenarios/${scenarioId}/credentials/${scCredId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// ── Scenario Steps ────────────────────────────────────────────────────────────
|
||||
export interface CreateStepPayload {
|
||||
title?: string;
|
||||
order: number;
|
||||
type: 'login' | 'exec' | 'sign';
|
||||
sessionName: string;
|
||||
@@ -143,6 +190,7 @@ export interface CreateStepPayload {
|
||||
}
|
||||
|
||||
export interface UpdateStepPayload {
|
||||
title?: string;
|
||||
order?: number;
|
||||
type?: 'login' | 'exec' | 'sign';
|
||||
sessionName?: string;
|
||||
|
||||
@@ -24,6 +24,17 @@ export interface Environment {
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// ── Credentials ───────────────────────────────────────────────────────────────
|
||||
|
||||
export interface Credential {
|
||||
id: number;
|
||||
name: string;
|
||||
data: string | null;
|
||||
lastUsedAt: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// ── Keys ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface KeysResponse {
|
||||
@@ -53,6 +64,7 @@ export interface ScenarioStep {
|
||||
scenarioId: number;
|
||||
order: number;
|
||||
type: StepType;
|
||||
title: string | null;
|
||||
sessionName: string;
|
||||
execCode: string | null;
|
||||
validateCode: string | null;
|
||||
@@ -60,10 +72,20 @@ export interface ScenarioStep {
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ScenarioCredential {
|
||||
id: number;
|
||||
scenarioId: number;
|
||||
credentialId: number;
|
||||
alias: string;
|
||||
credential: Credential;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Scenario {
|
||||
id: number;
|
||||
name: string;
|
||||
steps?: ScenarioStep[];
|
||||
scenarioCredentials?: ScenarioCredential[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@@ -3,11 +3,13 @@
|
||||
"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_credential": "Credential {{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": {
|
||||
"environments": "Environments",
|
||||
"credentials": "Credentials",
|
||||
"keys": "Keys",
|
||||
"sessions": "Sessions",
|
||||
"scenarios": "Scenarios",
|
||||
@@ -44,8 +46,32 @@
|
||||
"field_updated": "Updated",
|
||||
"section_urls": "URLs"
|
||||
},
|
||||
"credentials": {
|
||||
"title": "Credentials",
|
||||
"empty": "No credentials yet.",
|
||||
"loading": "Loading…",
|
||||
"menu_label": "Credential options",
|
||||
"action_edit": "Edit",
|
||||
"action_delete": "Delete",
|
||||
"action_add": "Add credential",
|
||||
"action_save": "Create",
|
||||
"action_update": "Save changes",
|
||||
"action_cancel": "Cancel",
|
||||
"create_title": "New Credential",
|
||||
"edit_title": "Edit Credential",
|
||||
"form_name": "Name",
|
||||
"form_name_placeholder": "e.g. staging-api-key",
|
||||
"form_name_required": "Name is required",
|
||||
"form_data": "Data (JSON)",
|
||||
"form_data_placeholder": "{\"token\": \"…\"}",
|
||||
"form_data_invalid_json": "Must be valid JSON",
|
||||
"field_id": "ID",
|
||||
"field_last_used": "Last Used",
|
||||
"field_created": "Created",
|
||||
"field_updated": "Updated",
|
||||
"section_data": "Data"
|
||||
},
|
||||
"keys": {
|
||||
"title": "Keys",
|
||||
"col_name": "Key name",
|
||||
"empty": "No key files found."
|
||||
},
|
||||
@@ -81,6 +107,7 @@
|
||||
"field_updated": "Updated",
|
||||
"steps_heading": "Steps",
|
||||
"step_order": "#",
|
||||
"step_title": "Title",
|
||||
"step_type": "Type",
|
||||
"step_session": "Session",
|
||||
"step_updated": "Updated",
|
||||
@@ -94,7 +121,22 @@
|
||||
"edit_title": "Edit Scenario",
|
||||
"form_name": "Name",
|
||||
"form_name_placeholder": "e.g. Login flow",
|
||||
"form_name_required": "Name is required"
|
||||
"form_name_required": "Name is required",
|
||||
"credentials_heading": "Credentials",
|
||||
"cred_empty": "No credentials assigned.",
|
||||
"cred_col_alias": "Alias",
|
||||
"cred_col_name": "Credential",
|
||||
"cred_col_added": "Added",
|
||||
"cred_action_add": "Add credential",
|
||||
"cred_action_remove": "Remove",
|
||||
"cred_action_save": "Add",
|
||||
"cred_action_cancel": "Cancel",
|
||||
"cred_form_cred": "Credential",
|
||||
"cred_form_cred_placeholder": "Select credential…",
|
||||
"cred_form_cred_required": "Select a credential",
|
||||
"cred_form_alias": "Alias",
|
||||
"cred_form_alias_placeholder": "e.g. api_key",
|
||||
"cred_form_alias_required": "Alias is required"
|
||||
},
|
||||
"theme": {
|
||||
"switch_to_light": "Switch to light theme",
|
||||
@@ -121,6 +163,8 @@
|
||||
"action_cancel": "Cancel",
|
||||
"form_order": "Order",
|
||||
"form_order_invalid": "Order must be a non-negative integer",
|
||||
"form_title": "Title",
|
||||
"form_title_placeholder": "e.g. Check login page",
|
||||
"form_type": "Type",
|
||||
"form_session": "Session name",
|
||||
"form_session_placeholder": "e.g. my-session",
|
||||
|
||||
@@ -6,14 +6,15 @@
|
||||
}
|
||||
|
||||
.sectionHeading {
|
||||
margin: var(--space-6) 0 var(--space-3);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.stepsSection {
|
||||
margin-top: var(--space-2);
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
@@ -311,3 +312,15 @@
|
||||
.envDetailUrlVal a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Code block ────────────────────────────────────────────────────────── */
|
||||
|
||||
.codeBlock {
|
||||
margin: 0;
|
||||
font-family: var(--font-mono, ui-monospace, monospace);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { credentials } from '../../api';
|
||||
import { Breadcrumbs, Button, Card, Input, Textarea } from '../../ui';
|
||||
import styles from '../Page.module.css';
|
||||
|
||||
export function CreateCredentialPage() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [data, setData] = useState('');
|
||||
const [nameError, setNameError] = useState('');
|
||||
const [dataError, setDataError] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
let valid = true;
|
||||
if (!name.trim()) {
|
||||
setNameError(t('credentials.form_name_required'));
|
||||
valid = false;
|
||||
}
|
||||
if (data.trim()) {
|
||||
try {
|
||||
JSON.parse(data.trim());
|
||||
} catch {
|
||||
setDataError(t('credentials.form_data_invalid_json'));
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
if (!valid) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const credential = await credentials.create(name.trim(), data.trim() || undefined);
|
||||
navigate(`/credentials/${credential.id}`);
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.pageToolbar}>
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: t('credentials.title'), onClick: () => navigate('/credentials') },
|
||||
{ label: t('credentials.create_title') },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<Card className={styles.formCard}>
|
||||
<div className={styles.formFields}>
|
||||
<Input
|
||||
label={t('credentials.form_name')}
|
||||
placeholder={t('credentials.form_name_placeholder')}
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
setNameError('');
|
||||
}}
|
||||
error={nameError || undefined}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<Textarea
|
||||
label={t('credentials.form_data')}
|
||||
placeholder={t('credentials.form_data_placeholder')}
|
||||
value={data}
|
||||
onChange={(e) => {
|
||||
setData(e.target.value);
|
||||
setDataError('');
|
||||
}}
|
||||
error={dataError || undefined}
|
||||
rows={6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formActions}>
|
||||
<Button type="button" variant="secondary" onClick={() => navigate('/credentials')}>
|
||||
{t('credentials.action_cancel')}
|
||||
</Button>
|
||||
<Button type="submit" loading={saving}>
|
||||
{t('credentials.action_save')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Pencil, Trash2 } from 'lucide-react';
|
||||
import { credentials } from '../../api';
|
||||
import type { Credential } from '../../api';
|
||||
import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../../ui';
|
||||
import styles from '../Page.module.css';
|
||||
|
||||
export function CredentialDetailPage() {
|
||||
const { t } = useTranslation();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [credential, setCredential] = useState<Credential | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
credentials
|
||||
.get(Number(id))
|
||||
.then(setCredential)
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!credential) return;
|
||||
await credentials.remove(credential.id);
|
||||
navigate('/credentials');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.pageToolbar}>
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: t('credentials.title'), onClick: () => navigate('/credentials') },
|
||||
{ label: credential?.name ?? `#${id}` },
|
||||
]}
|
||||
/>
|
||||
{credential && (
|
||||
<div className={styles.toolbarActions}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/credentials/${credential.id}/edit`)}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
{t('credentials.action_edit')}
|
||||
</Button>
|
||||
<Button variant="danger" size="sm" onClick={handleDelete}>
|
||||
<Trash2 size={14} />
|
||||
{t('credentials.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_credential', { id }) : error}
|
||||
</Notification>
|
||||
)}
|
||||
|
||||
{loading && <p className={styles.muted}>{t('credentials.loading')}</p>}
|
||||
|
||||
{credential && (
|
||||
<>
|
||||
<div className={styles.detailMeta}>
|
||||
<DescriptionList
|
||||
layout="comfortable"
|
||||
items={[
|
||||
{ term: t('credentials.field_id'), detail: credential.id },
|
||||
{
|
||||
term: t('credentials.field_last_used'),
|
||||
detail: credential.lastUsedAt ? (
|
||||
<Timestamp value={credential.lastUsedAt} />
|
||||
) : (
|
||||
'—'
|
||||
),
|
||||
},
|
||||
{
|
||||
term: t('credentials.field_created'),
|
||||
detail: <Timestamp value={credential.createdAt} />,
|
||||
},
|
||||
{
|
||||
term: t('credentials.field_updated'),
|
||||
detail: <Timestamp value={credential.updatedAt} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{credential.data && (
|
||||
<>
|
||||
<h2 className={styles.sectionHeading}>{t('credentials.section_data')}</h2>
|
||||
<Card>
|
||||
<pre className={styles.codeBlock}>
|
||||
{(() => {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(credential.data), null, 2);
|
||||
} catch {
|
||||
return credential.data;
|
||||
}
|
||||
})()}
|
||||
</pre>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Settings, Pencil, Trash2, Plus } from 'lucide-react';
|
||||
import { credentials } from '../../api';
|
||||
import type { Credential } from '../../api';
|
||||
import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp } from '../../ui';
|
||||
import styles from '../Page.module.css';
|
||||
|
||||
function CredentialCard({
|
||||
credential,
|
||||
onDelete,
|
||||
}: {
|
||||
credential: Credential;
|
||||
onDelete: (id: number) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const header = (
|
||||
<div className={styles.envCardHeader}>
|
||||
<span className={styles.envCardName}>{credential.name}</span>
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<ContextMenu
|
||||
align="right"
|
||||
trigger={
|
||||
<Button variant="ghost" size="sm" aria-label={t('credentials.menu_label')}>
|
||||
<Settings size={14} />
|
||||
</Button>
|
||||
}
|
||||
items={[
|
||||
{
|
||||
label: t('credentials.action_edit'),
|
||||
icon: <Pencil size={14} />,
|
||||
onClick: () => navigate(`/credentials/${credential.id}/edit`),
|
||||
},
|
||||
{
|
||||
label: t('credentials.action_delete'),
|
||||
icon: <Trash2 size={14} />,
|
||||
variant: 'danger',
|
||||
onClick: () => onDelete(credential.id),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const footer = (
|
||||
<div className={styles.envCardFooter}>
|
||||
<span className={styles.envCardId}>#{credential.id}</span>
|
||||
<Timestamp value={credential.updatedAt} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={styles.envCard}
|
||||
header={header}
|
||||
headerVariant="primary"
|
||||
footer={footer}
|
||||
onClick={() => navigate(`/credentials/${credential.id}`)}
|
||||
>
|
||||
<DescriptionList
|
||||
layout="compact"
|
||||
truncate
|
||||
items={[
|
||||
{
|
||||
term: t('credentials.field_last_used'),
|
||||
detail: credential.lastUsedAt ? <Timestamp value={credential.lastUsedAt} /> : '—',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function AddCredentialCard() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className={styles.envCardAdd}>
|
||||
<Button variant="ghost" onClick={() => navigate('/credentials/new')}>
|
||||
<Plus size={16} />
|
||||
{t('credentials.action_add')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CredentialsPage() {
|
||||
const { t } = useTranslation();
|
||||
const [items, setItems] = useState<Credential[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = () => {
|
||||
credentials
|
||||
.list()
|
||||
.then((res) => setItems(res.data))
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await credentials.remove(id);
|
||||
setItems((prev) => prev.filter((c) => c.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs items={[{ label: t('credentials.title') }]} className={styles.breadcrumbs} />
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
{loading ? (
|
||||
<p className={styles.muted}>{t('credentials.loading')}</p>
|
||||
) : (
|
||||
<div className={styles.envGrid}>
|
||||
{items.map((credential) => (
|
||||
<CredentialCard key={credential.id} credential={credential} onDelete={handleDelete} />
|
||||
))}
|
||||
<AddCredentialCard />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { credentials } from '../../api';
|
||||
import type { Credential } from '../../api';
|
||||
import { Breadcrumbs, Button, Card, Input, Textarea } from '../../ui';
|
||||
import styles from '../Page.module.css';
|
||||
|
||||
export function EditCredentialPage() {
|
||||
const { t } = useTranslation();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [credential, setCredential] = useState<Credential | null>(null);
|
||||
const [name, setName] = useState('');
|
||||
const [data, setData] = useState('');
|
||||
const [nameError, setNameError] = useState('');
|
||||
const [dataError, setDataError] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
credentials
|
||||
.get(Number(id))
|
||||
.then((c) => {
|
||||
setCredential(c);
|
||||
setName(c.name);
|
||||
setData(c.data ?? '');
|
||||
})
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
let valid = true;
|
||||
if (!name.trim()) {
|
||||
setNameError(t('credentials.form_name_required'));
|
||||
valid = false;
|
||||
}
|
||||
if (data.trim()) {
|
||||
try {
|
||||
JSON.parse(data.trim());
|
||||
} catch {
|
||||
setDataError(t('credentials.form_data_invalid_json'));
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
if (!valid) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
await credentials.update(Number(id), {
|
||||
name: name.trim(),
|
||||
data: data.trim() || null,
|
||||
});
|
||||
navigate(`/credentials/${id}`);
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.pageToolbar}>
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: t('credentials.title'), onClick: () => navigate('/credentials') },
|
||||
{
|
||||
label: credential?.name ?? `#${id}`,
|
||||
onClick: () => navigate(`/credentials/${id}`),
|
||||
},
|
||||
{ label: t('credentials.edit_title') },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
{loading && <p className={styles.muted}>{t('credentials.loading')}</p>}
|
||||
|
||||
{!loading && credential && (
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<Card className={styles.formCard}>
|
||||
<div className={styles.formFields}>
|
||||
<Input
|
||||
label={t('credentials.form_name')}
|
||||
placeholder={t('credentials.form_name_placeholder')}
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
setNameError('');
|
||||
}}
|
||||
error={nameError || undefined}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<Textarea
|
||||
label={t('credentials.form_data')}
|
||||
placeholder={t('credentials.form_data_placeholder')}
|
||||
value={data}
|
||||
onChange={(e) => {
|
||||
setData(e.target.value);
|
||||
setDataError('');
|
||||
}}
|
||||
error={dataError || undefined}
|
||||
rows={6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formActions}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => navigate(`/credentials/${id}`)}
|
||||
>
|
||||
{t('credentials.action_cancel')}
|
||||
</Button>
|
||||
<Button type="submit" loading={saving}>
|
||||
{t('credentials.action_update')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -16,6 +16,7 @@ export function CreateStepPage() {
|
||||
|
||||
const [scenario, setScenario] = useState<Scenario | null>(null);
|
||||
const [order, setOrder] = useState('0');
|
||||
const [title, setTitle] = useState('');
|
||||
const [type, setType] = useState<StepType>('exec');
|
||||
const [sessionName, setSessionName] = useState('');
|
||||
const [execCode, setExecCode] = useState('');
|
||||
@@ -45,6 +46,7 @@ export function CreateStepPage() {
|
||||
try {
|
||||
await steps.create(Number(id), {
|
||||
order: Number(order),
|
||||
title: title.trim() || undefined,
|
||||
type,
|
||||
sessionName: sessionName.trim(),
|
||||
execCode: execCode.trim() || undefined,
|
||||
@@ -86,6 +88,12 @@ export function CreateStepPage() {
|
||||
onChange={(e) => setOrder(e.target.value)}
|
||||
error={errors.order}
|
||||
/>
|
||||
<Input
|
||||
label={t('steps.form_title')}
|
||||
placeholder={t('steps.form_title_placeholder')}
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
label={t('steps.form_type')}
|
||||
value={type}
|
||||
|
||||
@@ -16,6 +16,7 @@ export function EditStepPage() {
|
||||
const [scenario, setScenario] = useState<Scenario | null>(null);
|
||||
const [step, setStep] = useState<ScenarioStep | null>(null);
|
||||
const [order, setOrder] = useState('');
|
||||
const [title, setTitle] = useState('');
|
||||
const [type, setType] = useState<StepType>('exec');
|
||||
const [sessionName, setSessionName] = useState('');
|
||||
const [execCode, setExecCode] = useState('');
|
||||
@@ -33,6 +34,7 @@ export function EditStepPage() {
|
||||
setScenario(sc);
|
||||
setStep(st);
|
||||
setOrder(String(st.order));
|
||||
setTitle(st.title ?? '');
|
||||
setType(st.type);
|
||||
setSessionName(st.sessionName);
|
||||
setExecCode(st.execCode ?? '');
|
||||
@@ -63,6 +65,7 @@ export function EditStepPage() {
|
||||
try {
|
||||
await steps.update(Number(id), Number(stepId), {
|
||||
order: Number(order),
|
||||
title: title.trim() || undefined,
|
||||
type,
|
||||
sessionName: sessionName.trim(),
|
||||
execCode: execCode.trim() || undefined,
|
||||
@@ -109,6 +112,12 @@ export function EditStepPage() {
|
||||
}}
|
||||
error={orderError || undefined}
|
||||
/>
|
||||
<Input
|
||||
label={t('steps.form_title')}
|
||||
placeholder={t('steps.form_title_placeholder')}
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
label={t('steps.form_type')}
|
||||
value={type}
|
||||
|
||||
@@ -2,15 +2,17 @@ import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Play, Pencil, Plus, History, Trash2 } from 'lucide-react';
|
||||
import { scenarios, steps } from '../../api';
|
||||
import type { Scenario, ScenarioStep } from '../../api';
|
||||
import { scenarios, steps, scenarioCredentials, credentials as credentialsApi } from '../../api';
|
||||
import type { Scenario, ScenarioStep, ScenarioCredential, Credential } from '../../api';
|
||||
import {
|
||||
Badge,
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
Card,
|
||||
DescriptionList,
|
||||
Input,
|
||||
Notification,
|
||||
Select,
|
||||
Table,
|
||||
Timestamp,
|
||||
type TableColumn,
|
||||
@@ -31,13 +33,30 @@ export function ScenarioDetailPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Credentials state
|
||||
const [scenarioCreds, setScenarioCreds] = useState<ScenarioCredential[]>([]);
|
||||
const [allCredentials, setAllCredentials] = useState<Credential[]>([]);
|
||||
const [addCredOpen, setAddCredOpen] = useState(false);
|
||||
const [addCredId, setAddCredId] = useState('');
|
||||
const [addAlias, setAddAlias] = useState('');
|
||||
const [addCredError, setAddCredError] = useState('');
|
||||
const [addAliasError, setAddAliasError] = useState('');
|
||||
const [addCredSaving, setAddCredSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
scenarios
|
||||
.get(Number(id))
|
||||
.then(setScenario)
|
||||
.then((s) => {
|
||||
setScenario(s);
|
||||
setScenarioCreds(s.scenarioCredentials ?? []);
|
||||
})
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
credentialsApi
|
||||
.list(1, 200)
|
||||
.then((r) => setAllCredentials(r.data))
|
||||
.catch(() => {});
|
||||
}, [id]);
|
||||
|
||||
const handleRun = async () => {
|
||||
@@ -59,6 +78,34 @@ export function ScenarioDetailPage() {
|
||||
);
|
||||
};
|
||||
|
||||
const handleAddCredential = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
let valid = true;
|
||||
if (!addCredId) { setAddCredError(t('scenarios.cred_form_cred_required')); valid = false; }
|
||||
if (!addAlias.trim()) { setAddAliasError(t('scenarios.cred_form_alias_required')); valid = false; }
|
||||
if (!valid) return;
|
||||
setAddCredSaving(true);
|
||||
try {
|
||||
const sc = await scenarioCredentials.add(Number(id), Number(addCredId), addAlias.trim());
|
||||
// Re-fetch the credential object since the response may not include it
|
||||
const full = await scenarioCredentials.list(Number(id));
|
||||
setScenarioCreds(full);
|
||||
void sc;
|
||||
setAddCredOpen(false);
|
||||
setAddCredId('');
|
||||
setAddAlias('');
|
||||
} catch (err) {
|
||||
setAddCredError((err as Error).message);
|
||||
} finally {
|
||||
setAddCredSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveCredential = async (scCredId: number) => {
|
||||
await scenarioCredentials.remove(Number(id), scCredId);
|
||||
setScenarioCreds((prev) => prev.filter((sc) => sc.id !== scCredId));
|
||||
};
|
||||
|
||||
const stepColumns: TableColumn<ScenarioStep>[] = [
|
||||
{ key: 'order', header: t('scenarios.step_order'), render: (s) => s.order, width: 60 },
|
||||
{
|
||||
@@ -67,7 +114,11 @@ export function ScenarioDetailPage() {
|
||||
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: 'title',
|
||||
header: t('scenarios.step_title'),
|
||||
render: (s) => s.title ?? <span style={{ color: 'var(--color-text-muted)', fontStyle: 'italic' }}>{s.sessionName}</span>,
|
||||
},
|
||||
{
|
||||
key: 'updated',
|
||||
header: t('scenarios.step_updated'),
|
||||
@@ -108,6 +159,40 @@ export function ScenarioDetailPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const credColumns: TableColumn<ScenarioCredential>[] = [
|
||||
{ key: 'alias', header: t('scenarios.cred_col_alias'), render: (sc) => sc.alias },
|
||||
{
|
||||
key: 'name',
|
||||
header: t('scenarios.cred_col_name'),
|
||||
render: (sc) => sc.credential?.name ?? `#${sc.credentialId}`,
|
||||
},
|
||||
{
|
||||
key: 'added',
|
||||
header: t('scenarios.cred_col_added'),
|
||||
width: 140,
|
||||
render: (sc) => <Timestamp value={sc.createdAt} />,
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
width: 60,
|
||||
align: 'right',
|
||||
render: (sc) => (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
title={t('scenarios.cred_action_remove')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveCredential(sc.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.pageToolbar}>
|
||||
@@ -199,6 +284,68 @@ export function ScenarioDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Credentials section ──────────────────────────────────── */}
|
||||
<div className={styles.stepsSection}>
|
||||
<div className={styles.sectionToolbar}>
|
||||
<h2 className={styles.sectionHeading}>{t('scenarios.credentials_heading')}</h2>
|
||||
<Button size="sm" onClick={() => setAddCredOpen((v) => !v)}>
|
||||
<Plus size={14} />
|
||||
{t('scenarios.cred_action_add')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{addCredOpen && (
|
||||
<Card className={styles.formCard} style={{ marginBottom: 'var(--space-4)' }}>
|
||||
<form onSubmit={handleAddCredential} noValidate>
|
||||
<div className={styles.formFields}>
|
||||
<Select
|
||||
label={t('scenarios.cred_form_cred')}
|
||||
value={addCredId}
|
||||
onChange={(e) => { setAddCredId(e.target.value); setAddCredError(''); }}
|
||||
error={addCredError || undefined}
|
||||
options={[
|
||||
{ value: '', label: t('scenarios.cred_form_cred_placeholder') },
|
||||
...allCredentials.map((c) => ({ value: String(c.id), label: c.name })),
|
||||
]}
|
||||
/>
|
||||
<Input
|
||||
label={t('scenarios.cred_form_alias')}
|
||||
placeholder={t('scenarios.cred_form_alias_placeholder')}
|
||||
value={addAlias}
|
||||
onChange={(e) => { setAddAlias(e.target.value); setAddAliasError(''); }}
|
||||
error={addAliasError || undefined}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.formActions}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => { setAddCredOpen(false); setAddCredId(''); setAddAlias(''); }}
|
||||
>
|
||||
{t('scenarios.cred_action_cancel')}
|
||||
</Button>
|
||||
<Button type="submit" size="sm" loading={addCredSaving}>
|
||||
{t('scenarios.cred_action_save')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{scenarioCreds.length > 0 ? (
|
||||
<Table
|
||||
columns={credColumns}
|
||||
data={scenarioCreds}
|
||||
rowKey={(sc) => sc.id}
|
||||
loading={false}
|
||||
emptyMessage=""
|
||||
/>
|
||||
) : (
|
||||
<p className={styles.muted}>{t('scenarios.cred_empty')}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
font-family: var(--font-family);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
font-family: var(--font-family-mono, monospace);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
width: 100%;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.textarea::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.textarea:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.textarea:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
.hasError {
|
||||
border-color: var(--color-error-fg);
|
||||
}
|
||||
.hasError:focus {
|
||||
border-color: var(--color-error-fg);
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-error-fg);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { useId } from 'react';
|
||||
import styles from './Textarea.module.css';
|
||||
|
||||
export interface TextareaProps
|
||||
extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
|
||||
label?: string;
|
||||
hint?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function Textarea({ label, hint, error, className, ...props }: TextareaProps) {
|
||||
const id = useId();
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
{label && (
|
||||
<label htmlFor={id} className={styles.label}>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<textarea
|
||||
id={id}
|
||||
className={[styles.textarea, error ? styles.hasError : '', className]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}
|
||||
aria-invalid={error ? true : undefined}
|
||||
{...props}
|
||||
/>
|
||||
{error ? (
|
||||
<span id={`${id}-error`} className={styles.error} role="alert">
|
||||
{error}
|
||||
</span>
|
||||
) : hint ? (
|
||||
<span id={`${id}-hint`} className={styles.hint}>
|
||||
{hint}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,9 @@ export type { BadgeProps, BadgeVariant } from './Badge/Badge';
|
||||
export { Input } from './Input/Input';
|
||||
export type { InputProps } from './Input/Input';
|
||||
|
||||
export { Textarea } from './Textarea/Textarea';
|
||||
export type { TextareaProps } from './Textarea/Textarea';
|
||||
|
||||
export { Select } from './Select/Select';
|
||||
export type { SelectProps, SelectOption } from './Select/Select';
|
||||
|
||||
|
||||
@@ -13,6 +13,7 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/environments': 'http://localhost:13000',
|
||||
'/credentials': 'http://localhost:13000',
|
||||
'/sessions': 'http://localhost:13000',
|
||||
'/scenarios': 'http://localhost:13000',
|
||||
'/keys': 'http://localhost:13000',
|
||||
|
||||
Reference in New Issue
Block a user