feat(archive): complete recorded session lifecycle

apps/control-station/src/components/ObservationSessionSelect.tsx

@@ -1,4 +1,5 @@
-import { Dropdown, Icon } from "@nodedc/ui-react";
+import { useState } from "react";
+import { ConfirmationModal, Dropdown, Icon } from "@nodedc/ui-react";
 
 import {
   type ObservationSessionReplayLaunch,
@@ -93,7 +94,7 @@ function sessionDescription(session: ObservationSessionSummary): string {
 }
 
 export function ObservationSessionSelect({
-  limit = 3,
+  limit = 100,
   disabled = false,
   blockedReason = null,
   onReplayBegin,
@@ -116,6 +117,7 @@ export function ObservationSessionSelect({
     outcome: ObservationReplayOutcome,
   ) => void | Promise<void>;
 }) {
+  const [deleteTarget, setDeleteTarget] = useState<ObservationSessionSummary | null>(null);
   const sessions = useObservationSessions({
     limit,
     replayEnabled: blockedReason === null,
@@ -130,7 +132,7 @@ export function ObservationSessionSelect({
       : "Сохранённые сессии";
   const presentedTriggerCopy = blockedReason ?? triggerCopy;
 
-  return (
+  return <>
     <Dropdown
       className="observation-session-select"
       placement="bottom-end"
@@ -184,33 +186,48 @@ export function ObservationSessionSelect({
             <div className="observation-session-menu__list">
               {sessions.items.map((session) => {
                 const pending = sessions.replayingSessionId === session.id;
+                const deleting = sessions.deletingSessionId === session.id;
                 const failed = sessions.failedSessionId === session.id;
                 const visualState = observationSessionVisualState(session, { pending, failed });
                 return (
-                  <button
+                  <div
                     key={session.id}
-                    type="button"
-                    className="nodedc-dropdown-option observation-session-option"
-                    disabled={pending || !session.replayable}
-                    onClick={() => {
-                      void sessions.replay(session.id).then((accepted) => {
-                        if (accepted) close();
-                      });
-                    }}
+                    className="observation-session-option"
+                    data-deleting={deleting ? "true" : undefined}
                   >
-                    <span className="nodedc-dropdown-option__icon">
-                      <i data-session-visual-state={visualState} aria-hidden="true" />
-                    </span>
-                    <span className="nodedc-dropdown-option__body">
-                      <span className="nodedc-dropdown-option__label">{session.label}</span>
-                      <span className="nodedc-dropdown-option__description">
-                        {sessionDescription(session)}
+                    <button
+                      type="button"
+                      className="nodedc-dropdown-option observation-session-option__open"
+                      disabled={pending || deleting || !session.replayable}
+                      onClick={() => {
+                        void sessions.replay(session.id).then((accepted) => {
+                          if (accepted) close();
+                        });
+                      }}
+                    >
+                      <span className="nodedc-dropdown-option__icon">
+                        <i data-session-visual-state={visualState} aria-hidden="true" />
                       </span>
-                    </span>
-                    <span className="observation-session-option__state">
-                      {observationSessionVisualLabel(visualState)}
-                    </span>
-                  </button>
+                      <span className="nodedc-dropdown-option__body">
+                        <span className="nodedc-dropdown-option__label">{session.label}</span>
+                        <span className="nodedc-dropdown-option__description">
+                          {sessionDescription(session)}
+                        </span>
+                      </span>
+                      <span className="observation-session-option__state">
+                        {deleting ? "Удаление…" : observationSessionVisualLabel(visualState)}
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      className="observation-session-option__delete"
+                      aria-label={`Удалить сохранённую сессию ${session.label}`}
+                      disabled={pending || deleting}
+                      onClick={() => setDeleteTarget(session)}
+                    >
+                      <Icon name="trash" size={15} />
+                    </button>
+                  </div>
                 );
               })}
             </div>
@@ -242,5 +259,29 @@ export function ObservationSessionSelect({
         </div>
       )}
     </Dropdown>
-  );
+    <ConfirmationModal
+      open={deleteTarget !== null}
+      title="Удалить сохранённую сессию?"
+      description={deleteTarget ? <>
+        <strong>{deleteTarget.label}</strong>
+        <p>
+          Сессия, исходные данные наблюдения, подготовленная Rerun-запись и
+          видеоматериалы будут удалены с этого сервера без возможности восстановления.
+        </p>
+        {sessions.error && sessions.deletingSessionId === null ? (
+          <p className="observation-session-delete-error" role="alert">{sessions.error}</p>
+        ) : null}
+      </> : null}
+      confirmLabel="Удалить сессию"
+      pendingLabel="Удаление…"
+      danger
+      onClose={() => {
+        if (sessions.deletingSessionId === null) setDeleteTarget(null);
+      }}
+      onConfirm={async () => {
+        if (!deleteTarget) return;
+        if (await sessions.remove(deleteTarget.id)) setDeleteTarget(null);
+      }}
+    />
+  </>;
 }