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,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>
+  );
+}