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

feat(scenarios): require environment for scenario runs

Browse Source 
- require environmentId when creating runs in API and MCP tools

- pass selected environment data into step execution helpers

- prompt for environment selection before running scenarios in UI
This commit is contained in:
ars9
2026-04-11 00:12:21 +03:00
parent d8ea2d0126
commit 56d23f913d
13 changed files with 237 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/api/client.ts
+5 -2
View File
@@ -192,8 +192,11 @@ export const scenarios = {
remove(id: string): Promise<void> {
return request(`/scenarios/${id}`, { method: 'DELETE' });
},
run(id: string): Promise<ScenarioRun> {
return request(`/scenarios/${id}/run`, { method: 'POST' });
run(id: string, environmentId: string): Promise<ScenarioRun> {
return request(`/scenarios/${id}/run`, {
method: 'POST',
body: JSON.stringify({ environmentId }),
});
},
getRun(scenarioId: string, runId: string): Promise<ScenarioRunDetail> {
return request(`/scenarios/${scenarioId}/run/${runId}`);
client/src/api/types.ts
+1
View File
@@ -98,6 +98,7 @@ export type LogLevel = 'log' | 'warn' | 'error';
export interface ScenarioRun {
id: string;
scenarioId: string;
environmentId: string;
scenario?: Pick<Scenario, 'id' | 'name'>;
status: ScenarioRunStatus;
stepRuns?: ScenarioRunStep[];
client/src/i18n/locales/en.json
+5 -1
View File
@@ -145,7 +145,11 @@
"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"
"cred_form_alias_required": "Alias is required",
"run_modal_title": "Select environment",
"run_modal_env_label": "Environment",
"run_modal_no_env": "No environments found. Create an environment before running a scenario.",
"run_modal_env_required": "Please select an environment"
},
"theme": {
"switch_to_light": "Switch to light theme",
client/src/pages/run/RunsPage.tsx
+61 -4
View File
@@ -2,13 +2,21 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Play, ClipboardList, Activity } from 'lucide-react';
import { scenarios, runs } from '../../api';
import type { Scenario, ScenarioRun, ScenarioRunStep, ScenarioRunStatus } from '../../api';
import { environments, scenarios, runs } from '../../api';
import type {
Environment,
Scenario,
ScenarioRun,
ScenarioRunStep,
ScenarioRunStatus,
} from '../../api';
import {
AutoRefreshIndicator,
Badge,
Breadcrumbs,
Button,
Modal,
Select,
Table,
Timestamp,
UuidBadge,
@@ -45,6 +53,10 @@ export function RunsPage() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [pulseKey, setPulseKey] = useState(0);
const [runModalOpen, setRunModalOpen] = useState(false);
const [running, setRunning] = useState(false);
const [envs, setEnvs] = useState<Environment[]>([]);
const [selectedEnvId, setSelectedEnvId] = useState('');
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const hasDataRef = useRef(false);
@@ -72,13 +84,31 @@ export function RunsPage() {
};
}, [load]);
useEffect(() => {
environments
.list(1, 200)
.then((res) => {
setEnvs(res.data);
setSelectedEnvId((prev) => prev || res.data[0]?.id || '');
})
.catch(() => {});
}, []);
const handleRun = async () => {
if (!selectedEnvId) {
toast.error(t('scenarios.run_modal_env_required'));
return;
}
setRunning(true);
try {
const run = await scenarios.run(id!);
const run = await scenarios.run(id!, selectedEnvId);
toast.success('Scenario run started');
navigate(`/scenarios/${id}/runs/${run.id}`);
setRunModalOpen(false);
} catch (err) {
toast.error((err as Error).message);
} finally {
setRunning(false);
}
};
@@ -119,7 +149,7 @@ export function RunsPage() {
/>
<div className={styles.toolbarActions}>
<AutoRefreshIndicator active pulseKey={pulseKey} error={!!error} onClick={load} />
<Button size="sm" onClick={handleRun}>
<Button size="sm" onClick={() => setRunModalOpen(true)}>
<Play size={14} />
{t('runs.action_run')}
</Button>
@@ -136,6 +166,33 @@ export function RunsPage() {
pageSizeOptions={[10, 20, 50]}
onRowClick={(r) => navigate(`/scenarios/${id}/runs/${r.id}`)}
/>
<Modal
open={runModalOpen}
title={t('scenarios.run_modal_title')}
onClose={() => !running && setRunModalOpen(false)}
footer={(
<>
<Button variant="secondary" onClick={() => setRunModalOpen(false)} disabled={running}>
Cancel
</Button>
<Button variant="primary" onClick={handleRun} disabled={running || !selectedEnvId}>
{t('runs.action_run')}
</Button>
</>
)}
>
{envs.length === 0 ? (
<p>{t('scenarios.run_modal_no_env')}</p>
) : (
<Select
label={t('scenarios.run_modal_env_label')}
value={selectedEnvId}
onChange={(e) => setSelectedEnvId(e.target.value)}
options={envs.map((env) => ({ value: env.id, label: env.name }))}
/>
)}
</Modal>
</div>
);
}
client/src/pages/scenario/ScenarioDetailPage.tsx
+50 -4
View File
@@ -3,8 +3,8 @@ import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Play, Pencil, Plus, History, Trash2, Upload, GripVertical, ClipboardList } from 'lucide-react';
import { stringify as yamlStringify } from 'yaml';
import { scenarios, steps, scenarioCredentials, credentials as credentialsApi } from '../../api';
import type { Scenario, ScenarioStep, ScenarioCredential, Credential } from '../../api';
import { environments, scenarios, steps, scenarioCredentials, credentials as credentialsApi } from '../../api';
import type { Scenario, ScenarioStep, ScenarioCredential, Credential, Environment } from '../../api';
import {
Breadcrumbs,
Button,
@@ -42,6 +42,10 @@ export function ScenarioDetailPage() {
const [draggedStepId, setDraggedStepId] = useState<string | null>(null);
const [dragOverStepId, setDragOverStepId] = useState<string | null>(null);
const [reorderingSteps, setReorderingSteps] = useState(false);
const [runModalOpen, setRunModalOpen] = useState(false);
const [running, setRunning] = useState(false);
const [envs, setEnvs] = useState<Environment[]>([]);
const [selectedEnvId, setSelectedEnvId] = useState('');
const [pendingDelete, setPendingDelete] = useState<
{ type: 'scenario' } | { type: 'step'; id: string } | { type: 'credential'; id: string } | null
>(null);
@@ -61,6 +65,13 @@ export function ScenarioDetailPage() {
.list(1, 200)
.then((r) => setAllCredentials(r.data))
.catch(() => {});
environments
.list(1, 200)
.then((r) => {
setEnvs(r.data);
setSelectedEnvId((prev) => prev || r.data[0]?.id || '');
})
.catch(() => {});
}, [id]);
const reloadScenario = async () => {
@@ -72,12 +83,20 @@ export function ScenarioDetailPage() {
const handleRun = async () => {
if (!scenario) return;
if (!selectedEnvId) {
toast.error(t('scenarios.run_modal_env_required'));
return;
}
setRunning(true);
try {
const run = await scenarios.run(scenario.id);
const run = await scenarios.run(scenario.id, selectedEnvId);
toast.success('Scenario run started');
navigate(`/scenarios/${id}/runs/${run.id}`);
setRunModalOpen(false);
} catch (err) {
toast.error((err as Error).message);
} finally {
setRunning(false);
}
};
@@ -306,7 +325,7 @@ export function ScenarioDetailPage() {
/>
{scenario && (
<div className={styles.toolbarActions}>
<Button size="sm" onClick={handleRun}>
<Button size="sm" onClick={() => setRunModalOpen(true)}>
<Play size={14} />
{t('scenarios.action_run')}
</Button>
@@ -507,6 +526,33 @@ export function ScenarioDetailPage() {
{pendingDelete?.type === 'credential' && 'Are you sure you want to remove this credential from scenario?'}
{pendingDelete?.type === 'scenario' && 'Are you sure you want to delete this scenario?'}
</Modal>
<Modal
open={runModalOpen}
title={t('scenarios.run_modal_title')}
onClose={() => !running && setRunModalOpen(false)}
footer={(
<>
<Button variant="secondary" onClick={() => setRunModalOpen(false)} disabled={running}>
Cancel
</Button>
<Button variant="primary" onClick={handleRun} disabled={running || !selectedEnvId}>
{t('scenarios.action_run')}
</Button>
</>
)}
>
{envs.length === 0 ? (
<p>{t('scenarios.run_modal_no_env')}</p>
) : (
<Select
label={t('scenarios.run_modal_env_label')}
value={selectedEnvId}
onChange={(e) => setSelectedEnvId(e.target.value)}
options={envs.map((env) => ({ value: env.id, label: env.name }))}
/>
)}
</Modal>
</div>
);
}
client/src/pages/scenario/ScenariosPage.tsx
+62 -9
View File
@@ -3,12 +3,13 @@ import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Play, Plus, Trash2, Download, ClipboardList } from 'lucide-react';
import { parse as yamlParse } from 'yaml';
import { scenarios } from '../../api';
import type { Scenario } from '../../api';
import { environments, scenarios } from '../../api';
import type { Environment, Scenario } from '../../api';
import {
Breadcrumbs,
Button,
Modal,
Select,
Table,
type TableColumn,
Timestamp,
@@ -26,13 +27,19 @@ export function ScenariosPage() {
const [error, setError] = useState<string | null>(null);
const [deleteId, setDeleteId] = useState<string | null>(null);
const [deleting, setDeleting] = useState(false);
const [runScenarioId, setRunScenarioId] = useState<string | null>(null);
const [running, setRunning] = useState(false);
const [envs, setEnvs] = useState<Environment[]>([]);
const [selectedEnvId, setSelectedEnvId] = useState('');
const fileInputRef = useRef<HTMLInputElement>(null);
const load = useCallback(() => {
scenarios
.list()
.then((res) => setItems(res.data))
Promise.all([scenarios.list(), environments.list(1, 200)])
.then(([scenarioRes, envRes]) => {
setItems(scenarioRes.data);
setEnvs(envRes.data);
})
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, []);
@@ -41,13 +48,25 @@ export function ScenariosPage() {
load();
}, [load]);
const handleRun = async (id: string) => {
const openRunModal = (id: string) => {
setRunScenarioId(id);
if (!selectedEnvId && envs.length > 0) {
setSelectedEnvId(envs[0].id);
}
};
const handleRun = async () => {
if (!runScenarioId || !selectedEnvId) return;
setRunning(true);
try {
const run = await scenarios.run(id);
const run = await scenarios.run(runScenarioId, selectedEnvId);
toast.success('Scenario run started');
navigate(`/scenarios/${id}/runs/${run.id}`);
navigate(`/scenarios/${runScenarioId}/runs/${run.id}`);
setRunScenarioId(null);
} catch (err) {
toast.error((err as Error).message);
} finally {
setRunning(false);
}
};
@@ -94,7 +113,14 @@ export function ScenariosPage() {
align: 'right',
render: (s) => (
<span style={{ display: 'inline-flex', gap: 6 }}>
<Button size="sm" title={t('scenarios.action_run')} onClick={() => handleRun(s.id)}>
<Button
size="sm"
title={t('scenarios.action_run')}
onClick={(e) => {
e.stopPropagation();
openRunModal(s.id);
}}
>
<Play size={14} />
</Button>
<Button
@@ -163,6 +189,33 @@ export function ScenariosPage() {
>
Are you sure you want to delete this scenario?
</Modal>
<Modal
open={runScenarioId != null}
title={t('scenarios.run_modal_title')}
onClose={() => !running && setRunScenarioId(null)}
footer={(
<>
<Button variant="secondary" onClick={() => setRunScenarioId(null)} disabled={running}>
Cancel
</Button>
<Button variant="primary" onClick={handleRun} disabled={running || !selectedEnvId}>
{t('scenarios.action_run')}
</Button>
</>
)}
>
{envs.length === 0 ? (
<p>{t('scenarios.run_modal_no_env')}</p>
) : (
<Select
label={t('scenarios.run_modal_env_label')}
value={selectedEnvId}
onChange={(e) => setSelectedEnvId(e.target.value)}
options={envs.map((env) => ({ value: env.id, label: env.name }))}
/>
)}
</Modal>
</div>
);
}