feat(snippets): add snippets entity, crud, and auto-browser-per-run

- add Snippet entity with name, description, code; full CRUD backend - add snippets pages (list, create, edit, detail) and nav entry - add runSnippet helper in code-executor using new Function with args array - add result param to execute() so validateCode can access exec output - remove sessionName from steps; each run now spawns its own fresh browser - fix waitForURL race by polling localStorage for token instead
2026-04-10 00:22:51 +03:00
parent 1efbbb38a3
commit 1164289173
26 changed files with 876 additions and 89 deletions
@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Pencil, Trash2 } from 'lucide-react';
+import { snippets } from '../../api';
+import type { Snippet } from '../../api';
+import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../../ui';
+import styles from '../Page.module.css';
+
+export function SnippetDetailPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [snippet, setSnippet] = useState<Snippet | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    snippets
+      .get(Number(id))
+      .then(setSnippet)
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleDelete = async () => {
+    if (!snippet) return;
+    await snippets.remove(snippet.id);
+    navigate('/snippets');
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('snippets.title'), onClick: () => navigate('/snippets') },
+            { label: snippet?.name ?? `#${id}` },
+          ]}
+        />
+        {snippet && (
+          <div className={styles.toolbarActions}>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => navigate(`/snippets/${snippet.id}/edit`)}
+            >
+              <Pencil size={14} />
+              {t('snippets.action_edit')}
+            </Button>
+            <Button variant="danger" size="sm" onClick={handleDelete}>
+              <Trash2 size={14} />
+              {t('snippets.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_snippet', { id }) : error}
+        </Notification>
+      )}
+
+      {loading && <p className={styles.muted}>{t('snippets.loading')}</p>}
+
+      {snippet && (
+        <>
+          <div className={styles.detailMeta}>
+            <DescriptionList
+              layout="comfortable"
+              items={[
+                { term: t('snippets.field_id'), detail: snippet.id },
+                { term: t('snippets.field_name'), detail: snippet.name },
+                {
+                  term: t('snippets.field_description'),
+                  detail: snippet.description ?? '—',
+                },
+                {
+                  term: t('snippets.field_created'),
+                  detail: <Timestamp value={snippet.createdAt} />,
+                },
+                {
+                  term: t('snippets.field_updated'),
+                  detail: <Timestamp value={snippet.updatedAt} />,
+                },
+              ]}
+            />
+          </div>
+
+          <div className={styles.stepsSection}>
+            <div className={styles.sectionHeader}>
+              <h2 className={styles.sectionHeading}>{t('snippets.section_code')}</h2>
+            </div>
+            <Card>
+              <pre className={styles.codeBlock}>{snippet.code}</pre>
+            </Card>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}