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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user