fix: StartToolModal hardcoded tool types caused UUID parse error
- Fetch real tool types from API instead of hardcoded string names - Use actual tool type UUID (id) as select value - Remove fake 'terminal' option — terminal is a feature, not a tool type - Show display_name in dropdown, handle loading/error states Quality gates: tsc --noEmit clean
This commit is contained in:
@@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Icon } from "./icon";
|
import { Icon } from "./icon";
|
||||||
|
import { listToolTypes, type ToolType } from "../api/tool_types";
|
||||||
|
import { useAsyncData } from "../hooks/use-async-data";
|
||||||
import type { Workspace } from "../types/workspace";
|
import type { Workspace } from "../types/workspace";
|
||||||
|
|
||||||
export interface StartToolModalProps {
|
export interface StartToolModalProps {
|
||||||
@@ -20,6 +22,12 @@ export function StartToolModal({
|
|||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: toolTypes,
|
||||||
|
status,
|
||||||
|
error: loadError,
|
||||||
|
} = useAsyncData<ToolType[]>(listToolTypes, []);
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!toolTypeId) {
|
if (!toolTypeId) {
|
||||||
@@ -56,13 +64,21 @@ export function StartToolModal({
|
|||||||
id="tool-type"
|
id="tool-type"
|
||||||
value={toolTypeId}
|
value={toolTypeId}
|
||||||
onChange={(e) => setToolTypeId(e.target.value)}
|
onChange={(e) => setToolTypeId(e.target.value)}
|
||||||
disabled={submitting}
|
disabled={submitting || status === "loading"}
|
||||||
>
|
>
|
||||||
<option value="">Select a tool...</option>
|
<option value="">Select a tool...</option>
|
||||||
<option value="code-server">Code Server</option>
|
{toolTypes?.map((tt) => (
|
||||||
<option value="jupyter-notebook">Jupyter Notebook</option>
|
<option key={tt.id} value={tt.id}>
|
||||||
<option value="terminal">Terminal</option>
|
{tt.display_name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
{status === "loading" && (
|
||||||
|
<span className="muted">Loading tools...</span>
|
||||||
|
)}
|
||||||
|
{loadError && (
|
||||||
|
<span className="error-text">{loadError}</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="config-profile">Config Profile (optional)</label>
|
<label htmlFor="config-profile">Config Profile (optional)</label>
|
||||||
@@ -88,7 +104,7 @@ export function StartToolModal({
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary"
|
className="btn btn-primary"
|
||||||
disabled={submitting}
|
disabled={submitting || status !== "ready"}
|
||||||
>
|
>
|
||||||
{submitting ? "Starting..." : "Start Tool"}
|
{submitting ? "Starting..." : "Start Tool"}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user