feat(sessions): add detail page, Notification component, and session API improvements

- add SessionDetailPage with breadcrumbs, DescriptionList, status badge, masked token - add Notification component (info/success/error/warning/note variants) for contextual messages - use Notification for 404 errors on session and environment detail pages - add GET /sessions/:id endpoint; sanitize token (head…tail) and strip cookies/localStorage - change DELETE /sessions/:id to return 204 No Content so client redirect works correctly - add onRowClick prop to Table for clickable rows; stop propagation on actions column - update status badges: open=success (green), closed=error (red) on both list and detail
2026-04-09 19:00:16 +03:00
parent 097c747993
commit d342637eb6
14 changed files with 290 additions and 11 deletions
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Trash2 } from 'lucide-react';
+import { sessions } from '../api';
+import type { Session } from '../api';
+import { Badge, Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../ui';
+import styles from './Page.module.css';
+
+export function SessionDetailPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    sessions
+      .get(Number(id))
+      .then(setSession)
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleDelete = async () => {
+    if (!session) return;
+    await sessions.remove(session.id);
+    navigate('/sessions');
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('sessions.title'), onClick: () => navigate('/sessions') },
+            { label: session?.sessionName ?? `#${id}` },
+          ]}
+        />
+        {session && (
+          <Button variant="danger" size="sm" onClick={handleDelete}>
+            <Trash2 size={14} />
+            {t('sessions.action_delete')}
+          </Button>
+        )}
+      </div>
+
+      {error && (
+        <Notification
+          variant="error"
+          title={error.startsWith('404') ? t('errors.not_found') : undefined}
+        >
+          {error.startsWith('404') ? t('errors.not_found_session', { id }) : error}
+        </Notification>
+      )}
+      {loading && <p className={styles.muted}>{t('sessions.loading')}</p>}
+
+      {session && (
+        <Card>
+          <DescriptionList
+            items={[
+              { term: t('sessions.field_id'), detail: session.id },
+              { term: t('sessions.field_name'), detail: session.sessionName },
+              {
+                term: t('sessions.field_status'),
+                detail: (
+                  <Badge variant={session.status === 'open' ? 'success' : 'error'}>
+                    {session.status}
+                  </Badge>
+                ),
+              },
+              { term: t('sessions.field_token'), detail: <code className={styles.codeInline}>{session.token}</code> },
+              {
+                term: t('sessions.field_lastUsed'),
+                detail: session.lastUsedAt ? <Timestamp value={session.lastUsedAt} /> : '—',
+              },
+              {
+                term: t('sessions.field_created'),
+                detail: <Timestamp value={session.createdAt} />,
+              },
+              {
+                term: t('sessions.field_updated'),
+                detail: <Timestamp value={session.updatedAt} />,
+              },
+            ]}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}