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