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,118 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Pencil, Trash2 } from 'lucide-react';
+import { credentials } from '../../api';
+import type { Credential } from '../../api';
+import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
+
+export function CredentialDetailPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [credential, setCredential] = useState<Credential | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    credentials
+      .get(Number(id))
+      .then(setCredential)
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleDelete = async () => {
+    if (!credential) return;
+    await credentials.remove(credential.id);
+    navigate('/credentials');
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('credentials.title'), onClick: () => navigate('/credentials') },
+            { label: credential?.name ?? `#${id}` },
+          ]}
+        />
+        {credential && (
+          <div className={styles.toolbarActions}>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => navigate(`/credentials/${credential.id}/edit`)}
+            >
+              <Pencil size={14} />
+              {t('credentials.action_edit')}
+            </Button>
+            <Button variant="danger" size="sm" onClick={handleDelete}>
+              <Trash2 size={14} />
+              {t('credentials.action_delete')}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {error && (
+        <Notification
+          variant="error"
+          title={error.startsWith('404') ? t('errors.not_found') : undefined}
+        >
+          {error.startsWith('404') ? t('errors.not_found_credential', { id }) : error}
+        </Notification>
+      )}
+
+      {loading && <p className={styles.muted}>{t('credentials.loading')}</p>}
+
+      {credential && (
+        <>
+          <div className={styles.detailMeta}>
+            <DescriptionList
+              layout="comfortable"
+              items={[
+                { term: t('credentials.field_id'), detail: credential.id },
+                {
+                  term: t('credentials.field_last_used'),
+                  detail: credential.lastUsedAt ? (
+                    <Timestamp value={credential.lastUsedAt} />
+                  ) : (
+                    '—'
+                  ),
+                },
+                {
+                  term: t('credentials.field_created'),
+                  detail: <Timestamp value={credential.createdAt} />,
+                },
+                {
+                  term: t('credentials.field_updated'),
+                  detail: <Timestamp value={credential.updatedAt} />,
+                },
+              ]}
+            />
+          </div>
+
+          {credential.data && (
+            <>
+              <h2 className={styles.sectionHeading}>{t('credentials.section_data')}</h2>
+              <Card>
+                <pre className={styles.codeBlock}>
+                  {(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(credential.data), null, 2);
+                    } catch {
+                      return credential.data;
+                    }
+                  })()}
+                </pre>
+              </Card>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}