refactor: unify session creation form into CreateSessionForm component

2026-05-23 16:26:35 +02:00
parent cd4eba9803
commit 2e9ca52cdb
4 changed files with 327 additions and 349 deletions
@@ -0,0 +1,283 @@
+import { useState, useEffect } from "react";
+import { Icon } from "./icon";
+import { createInstance, startInstance, type ToolInstance } from "../api/sessions";
+import type { Project } from "../types";
+import type { GitRepository } from "../api/git_repositories";
+import type { ToolType } from "../api/tool_types";
+import { listSSHKeys, type SSHKey } from "../api/ssh_keys";
+
+interface CreateSessionFormProps {
+  projects: Project[];
+  repositories: GitRepository[];
+  toolTypes: ToolType[];
+  fixedProjectId?: string;
+  fixedRepoId?: string;
+  showCloneMode?: boolean;
+  onProjectChange?: (projectId: string) => void;
+  onSuccess?: (instance: ToolInstance) => void;
+  onCancel?: () => void;
+  submitLabel?: string;
+  className?: string;
+}
+
+export const CreateSessionForm = ({
+  projects,
+  repositories,
+  toolTypes,
+  fixedProjectId,
+  fixedRepoId,
+  showCloneMode = false,
+  onProjectChange,
+  onSuccess,
+  onCancel,
+  submitLabel = "Create Session",
+  className = "",
+}: CreateSessionFormProps) => {
+  const [selectedProject, setSelectedProject] = useState(fixedProjectId || "");
+  const [selectedRepo, setSelectedRepo] = useState(fixedRepoId || "");
+  const [selectedToolType, setSelectedToolType] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [cloneMode, setCloneMode] = useState<"mount" | "clone">("mount");
+  const [branch, setBranch] = useState("main");
+  const [sshKeys, setSshKeys] = useState<SSHKey[]>([]);
+  
+  const [status, setStatus] = useState<"idle" | "creating" | "error">("idle");
+  const [progress, setProgress] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  // Load SSH keys when clone mode is shown
+  useEffect(() => {
+    if (!showCloneMode) return;
+    const loadKeys = async () => {
+      try {
+        const keys = await listSSHKeys();
+        setSshKeys(keys);
+      } catch {
+        // ignore
+      }
+    };
+    void loadKeys();
+  }, [showCloneMode]);
+
+  // Filter repositories by selected project
+  const availableRepos = selectedProject
+    ? repositories.filter((r) => r.project_id === selectedProject)
+    : [];
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    const projectId = fixedProjectId || selectedProject;
+    const repoId = fixedRepoId || selectedRepo;
+
+    if (!projectId || !repoId || !selectedToolType) {
+      setError("Project, repository, and tool type are required");
+      return;
+    }
+
+    if (showCloneMode && cloneMode === "clone") {
+      const repo = repositories.find((r) => r.id === repoId);
+      if (!repo?.ssh_key_id) {
+        setError("Repository must have an SSH key assigned for clone mode");
+        return;
+      }
+    }
+
+    setStatus("creating");
+    setProgress("Creating instance...");
+
+    try {
+      const instance = await createInstance(
+        projectId,
+        repoId,
+        selectedToolType,
+        displayName || undefined,
+        showCloneMode ? cloneMode : undefined,
+        showCloneMode && cloneMode === "clone" ? branch : undefined
+      );
+
+      setProgress("Starting container...");
+      await startInstance(projectId, repoId, instance.id);
+
+      // Reset form
+      if (!fixedProjectId) setSelectedProject("");
+      if (!fixedRepoId) setSelectedRepo("");
+      setSelectedToolType("");
+      setDisplayName("");
+      setCloneMode("mount");
+      setBranch("main");
+      setStatus("idle");
+      
+      onSuccess?.(instance);
+    } catch {
+      setStatus("error");
+      setError("Failed to create session");
+      setProgress("");
+    }
+  };
+
+  const isSubmitting = status === "creating";
+
+  return (
+    <div className={`create-session-form-wrapper ${className}`}>
+      {isSubmitting && (
+        <div className="loading-overlay">
+          <div className="loading-content">
+            <Icon name="loading" size="lg" />
+            <p>{progress || "Creating session..."}</p>
+          </div>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="stack create-session-form">
+        <div className="form-row">
+          {!fixedProjectId && (
+            <label className="form-field">
+              Project
+              <select
+                value={selectedProject}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  setSelectedProject(value);
+                  setSelectedRepo("");
+                  onProjectChange?.(value);
+                }}
+                disabled={isSubmitting}
+              >
+                <option value="">Select project...</option>
+                {projects.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          {!fixedRepoId && (
+            <label className="form-field">
+              Repository
+              <select
+                value={selectedRepo}
+                onChange={(e) => setSelectedRepo(e.target.value)}
+                disabled={!selectedProject || isSubmitting}
+              >
+                <option value="">Select repository...</option>
+                {availableRepos.map((r) => (
+                  <option key={r.id} value={r.id}>
+                    {r.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          <label className="form-field">
+            Tool Type
+            <select
+              value={selectedToolType}
+              onChange={(e) => setSelectedToolType(e.target.value)}
+              disabled={isSubmitting}
+            >
+              <option value="">Select tool...</option>
+              {toolTypes.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.display_name}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+
+        {showCloneMode && (
+          <div className="form-row">
+            <label className="form-field">
+              Repository Access
+              <div className="radio-group">
+                <label className="radio-label">
+                  <input
+                    type="radio"
+                    name="cloneMode"
+                    value="mount"
+                    checked={cloneMode === "mount"}
+                    onChange={(e) => setCloneMode(e.target.value as "mount" | "clone")}
+                    disabled={isSubmitting}
+                  />
+                  Mount (live sync)
+                </label>
+                <label className="radio-label">
+                  <input
+                    type="radio"
+                    name="cloneMode"
+                    value="clone"
+                    checked={cloneMode === "clone"}
+                    onChange={(e) => setCloneMode(e.target.value as "mount" | "clone")}
+                    disabled={isSubmitting}
+                  />
+                  Clone fresh copy
+                </label>
+              </div>
+            </label>
+
+            {cloneMode === "clone" && (
+              <label className="form-field">
+                Branch
+                <input
+                  type="text"
+                  value={branch}
+                  onChange={(e) => setBranch(e.target.value)}
+                  placeholder="main"
+                  disabled={isSubmitting}
+                />
+              </label>
+            )}
+          </div>
+        )}
+
+        <label className="form-field">
+          Display Name (optional)
+          <input
+            type="text"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            placeholder="My Development Environment"
+            disabled={isSubmitting}
+          />
+        </label>
+
+        {error && <p className="error-text">{error}</p>}
+
+        <div className="form-actions">
+          {onCancel && (
+            <button
+              className="secondary-button"
+              type="button"
+              onClick={onCancel}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </button>
+          )}
+          <button
+            className="primary-button"
+            type="submit"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              <>
+                <Icon name="loading" size="sm" />
+                Creating...
+              </>
+            ) : (
+              <>
+                <Icon name="add" size="sm" />
+                {submitLabel}
+              </>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
@@ -4,7 +4,6 @@ import { Icon } from "./icon";
 import type { ToolInstance } from "../api/sessions";
 import {
  checkInstanceHealth,
-  createInstance,
  deleteInstance,
  listInstances,
  recreateInstanceTunnel,
@@ -13,6 +12,7 @@ import {
  stopInstance,
 } from "../api/sessions";
 import type { ToolType } from "../api/tool_types";
+import { CreateSessionForm } from "./create-session-form";

 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";

@@ -27,8 +27,6 @@ export const InstanceList = ({ projectId, repoId, toolTypes }: InstanceListProps
  const [instances, setInstances] = useState<ToolInstance[]>([]);
  const [loading, setLoading] = useState(false);
  const [showCreate, setShowCreate] = useState(false);
-  const [selectedToolType, setSelectedToolType] = useState("");
-  const [displayName, setDisplayName] = useState("");
  const [error, setError] = useState<string | null>(null);
  
  // Stop confirmation
@@ -83,18 +81,9 @@ export const InstanceList = ({ projectId, repoId, toolTypes }: InstanceListProps
    return () => clearInterval(interval);
  }, [instances, projectId, repoId]);

-  const handleCreate = async () => {
-    if (!selectedToolType) return;
-    setError(null);
-    try {
-      await createInstance(projectId, repoId, selectedToolType, displayName || undefined);
-      setShowCreate(false);
-      setSelectedToolType("");
-      setDisplayName("");
-      await loadInstances();
-    } catch {
-      setError("Failed to create instance");
-    }
+  const handleCreateSuccess = async () => {
+    setShowCreate(false);
+    await loadInstances();
  };

  const handleStart = async (instanceId: string) => {
@@ -309,48 +298,16 @@ export const InstanceList = ({ projectId, repoId, toolTypes }: InstanceListProps
        <div className="dialog-overlay" role="dialog" aria-modal="true">
          <div className="dialog">
            <h2>Launch Tool</h2>
-            <div className="stack">
-              <label className="form-field">
-                Tool Type
-                <select
-                  value={selectedToolType}
-                  onChange={(e) => setSelectedToolType(e.target.value)}
-                >
-                  <option value="">Select a tool...</option>
-                  {toolTypes.map((tool) => (
-                    <option key={tool.id} value={tool.id}>
-                      {tool.display_name}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label className="form-field">
-                Display Name (optional)
-                <input
-                  type="text"
-                  value={displayName}
-                  onChange={(e) => setDisplayName(e.target.value)}
-                  placeholder="My Development Environment"
-                />
-              </label>
-              <div className="dialog-actions">
-                <button
-                  className="secondary-button"
-                  onClick={() => setShowCreate(false)}
-                  type="button"
-                >
-                  Cancel
-                </button>
-                <button
-                  className="primary-button"
-                  onClick={() => void handleCreate()}
-                  disabled={!selectedToolType}
-                  type="button"
-                >
-                  Launch
-                </button>
-              </div>
-            </div>
+            <CreateSessionForm
+              projects={[]}
+              repositories={[]}
+              toolTypes={toolTypes}
+              fixedProjectId={projectId}
+              fixedRepoId={repoId}
+              onSuccess={handleCreateSuccess}
+              onCancel={() => setShowCreate(false)}
+              submitLabel="Launch"
+            />
          </div>
        </div>
      )}