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
2026-04-09 23:37:21 +03:00
parent 1f3a604940
commit 1efbbb38a3
34 changed files with 1362 additions and 14 deletions
@@ -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>
+  );
+}