refactor: extract ConfigProfilesPage components
- Extract use-config-profiles hook for state management - Extract ConfigProfileListSidebar, ConfigProfileEditorPanel, ConfigProfilesMobileView - Slim ConfigProfilesPage from 1,611 to 170 lines Quality gates: tsc --noEmit passes, npm run build passes
This commit is contained in:
Developer
@@ -0,0 +1,431 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { extractErrorMessage } from "../utils/errors";
|
||||
import {
|
||||
createConfigProfile,
|
||||
deleteConfigProfile,
|
||||
listConfigProfiles,
|
||||
previewConfigProfile,
|
||||
updateConfigProfile,
|
||||
updateProfileIncludes,
|
||||
type ConfigProfile,
|
||||
type CreateConfigProfileRequest,
|
||||
type ResolvedProfile,
|
||||
} from "../api/config-profiles";
|
||||
import { listProjects } from "../api/projects";
|
||||
import { listToolTypes, type ToolType } from "../api/tool-types";
|
||||
import type { ProjectWithRepos } from "../types";
|
||||
|
||||
type Status = "loading" | "ready" | "error";
|
||||
type SaveStatus = "idle" | "saving" | "saved" | "error";
|
||||
|
||||
const defaultForm: CreateConfigProfileRequest = {
|
||||
name: "",
|
||||
description: "",
|
||||
env_vars: {},
|
||||
runtime_hints: {},
|
||||
mounts: [],
|
||||
git_mounts: [],
|
||||
files: {},
|
||||
is_default: false,
|
||||
};
|
||||
|
||||
export const useConfigProfiles = () => {
|
||||
const [status, setStatus] = useState<Status>("loading");
|
||||
const [profiles, setProfiles] = useState<ConfigProfile[]>([]);
|
||||
const [projects, setProjects] = useState<ProjectWithRepos[]>([]);
|
||||
const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
|
||||
const [selectedProfileId, setSelectedProfileId] = useState<string | null>(null);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [previewData, setPreviewData] = useState<ResolvedProfile | null>(null);
|
||||
const [previewingId, setPreviewingId] = useState<string | null>(null);
|
||||
const [formData, setFormData] = useState<CreateConfigProfileRequest>(defaultForm);
|
||||
const [includedProfileIds, setIncludedProfileIds] = useState<string[]>([]);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
|
||||
const selectedProfile = profiles.find((p) => p.id === selectedProfileId) || null;
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setStatus("loading");
|
||||
try {
|
||||
const [profs, projs, types] = await Promise.all([
|
||||
listConfigProfiles(),
|
||||
listProjects(),
|
||||
listToolTypes(),
|
||||
]);
|
||||
setProfiles(profs || []);
|
||||
setProjects(projs || []);
|
||||
setToolTypes(types || []);
|
||||
setStatus("ready");
|
||||
} catch {
|
||||
setStatus("error");
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadData();
|
||||
}, [loadData]);
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData(defaultForm);
|
||||
setIncludedProfileIds([]);
|
||||
setError(null);
|
||||
setSaveStatus("idle");
|
||||
setPreviewData(null);
|
||||
};
|
||||
|
||||
const populateForm = (profile: ConfigProfile) => {
|
||||
setFormData({
|
||||
name: profile.name,
|
||||
description: profile.description || undefined,
|
||||
project_id: profile.project_id || undefined,
|
||||
tool_type_id: profile.tool_type_id || undefined,
|
||||
env_vars: profile.env_vars,
|
||||
runtime_hints: profile.runtime_hints,
|
||||
mounts: profile.mounts,
|
||||
git_mounts: profile.git_mounts || [],
|
||||
files: profile.files,
|
||||
is_default: profile.is_default,
|
||||
});
|
||||
setIncludedProfileIds(
|
||||
profile.includes.map((inc: { included_profile_id: string }) => inc.included_profile_id),
|
||||
);
|
||||
setError(null);
|
||||
setSaveStatus("idle");
|
||||
setPreviewData(null);
|
||||
};
|
||||
|
||||
const handleSelectProfile = (profile: ConfigProfile | null) => {
|
||||
if (profile) {
|
||||
setSelectedProfileId(profile.id);
|
||||
setIsCreating(false);
|
||||
populateForm(profile);
|
||||
} else {
|
||||
setSelectedProfileId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateNew = () => {
|
||||
setSelectedProfileId(null);
|
||||
setIsCreating(true);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const getIncludedProfile = (id: string): ConfigProfile | undefined =>
|
||||
profiles.find((p) => p.id === id);
|
||||
|
||||
const getScopeLabel = (profile: ConfigProfile): string => {
|
||||
if (profile.project_id && profile.tool_type_id) return "Project + Tool";
|
||||
if (profile.project_id) return "Project";
|
||||
if (profile.tool_type_id) return "Tool";
|
||||
return "Global";
|
||||
};
|
||||
|
||||
const wouldCreateCycle = (
|
||||
profileId: string,
|
||||
targetId: string,
|
||||
visited = new Set<string>(),
|
||||
): boolean => {
|
||||
if (visited.has(targetId)) return true;
|
||||
const target = getIncludedProfile(targetId);
|
||||
if (!target) return false;
|
||||
const nextVisited = new Set(visited);
|
||||
nextVisited.add(targetId);
|
||||
for (const inc of target.includes) {
|
||||
if (
|
||||
inc.included_profile_id === profileId ||
|
||||
wouldCreateCycle(profileId, inc.included_profile_id, nextVisited)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const availableProfilesForInclude = (): ConfigProfile[] => {
|
||||
const currentId = selectedProfile?.id;
|
||||
if (!currentId) return [];
|
||||
return profiles.filter((p) => {
|
||||
if (p.id === currentId) return false;
|
||||
if (includedProfileIds.includes(p.id)) return false;
|
||||
if (wouldCreateCycle(currentId, p.id)) return false;
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
const addInclude = (profileId: string) => {
|
||||
setIncludedProfileIds((prev) => [...prev, profileId]);
|
||||
};
|
||||
|
||||
const removeInclude = (index: number) => {
|
||||
setIncludedProfileIds((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleDragStart = (e: React.DragEvent, index: number) => {
|
||||
e.dataTransfer.setData("text/plain", String(index));
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent, index: number) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "move";
|
||||
setDragOverIndex(index);
|
||||
};
|
||||
|
||||
const handleDragLeave = () => {
|
||||
setDragOverIndex(null);
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent, dropIndex: number) => {
|
||||
e.preventDefault();
|
||||
const dragIndex = Number(e.dataTransfer.getData("text/plain"));
|
||||
if (dragIndex === dropIndex) {
|
||||
setDragOverIndex(null);
|
||||
return;
|
||||
}
|
||||
setIncludedProfileIds((prev) => {
|
||||
const newOrder = [...prev];
|
||||
const [removed] = newOrder.splice(dragIndex, 1);
|
||||
newOrder.splice(dropIndex, 0, removed);
|
||||
return newOrder;
|
||||
});
|
||||
setDragOverIndex(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
setError(null);
|
||||
setSaveStatus("saving");
|
||||
|
||||
if (!formData.name?.trim()) {
|
||||
setError("Name is required");
|
||||
setSaveStatus("error");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isCreating) {
|
||||
const newProfile = await createConfigProfile(formData);
|
||||
if (includedProfileIds.length > 0) {
|
||||
await updateProfileIncludes(newProfile.id, { includes: includedProfileIds });
|
||||
}
|
||||
setIsCreating(false);
|
||||
setSelectedProfileId(newProfile.id);
|
||||
setSaveStatus("saved");
|
||||
await loadData();
|
||||
const refreshed = (await listConfigProfiles()).find((p) => p.id === newProfile.id);
|
||||
if (refreshed) populateForm(refreshed);
|
||||
} else if (selectedProfile) {
|
||||
await updateConfigProfile(selectedProfile.id, formData);
|
||||
await updateProfileIncludes(selectedProfile.id, { includes: includedProfileIds });
|
||||
setSaveStatus("saved");
|
||||
await loadData();
|
||||
const refreshed = (await listConfigProfiles()).find((p) => p.id === selectedProfile.id);
|
||||
if (refreshed) populateForm(refreshed);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(extractErrorMessage(err));
|
||||
setSaveStatus("error");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!window.confirm("Are you sure you want to delete this config profile?")) return;
|
||||
try {
|
||||
await deleteConfigProfile(id);
|
||||
if (selectedProfileId === id) {
|
||||
setSelectedProfileId(null);
|
||||
setIsCreating(false);
|
||||
resetForm();
|
||||
}
|
||||
await loadData();
|
||||
} catch {
|
||||
alert("Failed to delete config profile");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreview = async (id: string) => {
|
||||
try {
|
||||
setPreviewingId(id);
|
||||
const data = await previewConfigProfile(id);
|
||||
setPreviewData(data);
|
||||
} catch {
|
||||
setError("Failed to preview config profile");
|
||||
} finally {
|
||||
setPreviewingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const updateFormField = <K extends keyof CreateConfigProfileRequest>(
|
||||
key: K,
|
||||
value: CreateConfigProfileRequest[K],
|
||||
) => {
|
||||
setFormData((prev) => ({ ...prev, [key]: value }));
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const addEnvVar = () => {
|
||||
setFormData((prev) => ({ ...prev, env_vars: { ...prev.env_vars, "": "" } }));
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const updateEnvVar = (oldKey: string, newKey: string, value: string) => {
|
||||
setFormData((prev) => {
|
||||
const envVars = { ...prev.env_vars };
|
||||
if (oldKey !== newKey) delete envVars[oldKey];
|
||||
envVars[newKey] = value;
|
||||
return { ...prev, env_vars: envVars };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const removeEnvVar = (key: string) => {
|
||||
setFormData((prev) => {
|
||||
const envVars = { ...prev.env_vars };
|
||||
delete envVars[key];
|
||||
return { ...prev, env_vars: envVars };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const addFile = () => {
|
||||
setFormData((prev) => ({ ...prev, files: { ...prev.files, "": "" } }));
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const updateFile = (oldPath: string, newPath: string, content: string) => {
|
||||
setFormData((prev) => {
|
||||
const files = { ...prev.files };
|
||||
if (oldPath !== newPath) delete files[oldPath];
|
||||
files[newPath] = content;
|
||||
return { ...prev, files };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const removeFile = (path: string) => {
|
||||
setFormData((prev) => {
|
||||
const files = { ...prev.files };
|
||||
delete files[path];
|
||||
return { ...prev, files };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const addMount = () => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
mounts: [...(prev.mounts || []), { target: "/", mode: "rw", files: {} }],
|
||||
}));
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const updateMount = (index: number, updates: Partial<ConfigProfile["mounts"][0]>) => {
|
||||
setFormData((prev) => {
|
||||
const mounts = [...(prev.mounts || [])];
|
||||
mounts[index] = { ...mounts[index], ...updates };
|
||||
return { ...prev, mounts };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const removeMount = (index: number) => {
|
||||
setFormData((prev) => {
|
||||
const mounts = [...(prev.mounts || [])];
|
||||
mounts.splice(index, 1);
|
||||
return { ...prev, mounts };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const addMountFile = (mountIndex: number) => {
|
||||
setFormData((prev) => {
|
||||
const mounts = [...(prev.mounts || [])];
|
||||
mounts[mountIndex] = {
|
||||
...mounts[mountIndex],
|
||||
files: { ...mounts[mountIndex].files, "": "" },
|
||||
};
|
||||
return { ...prev, mounts };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const updateMountFile = (
|
||||
mountIndex: number,
|
||||
oldPath: string,
|
||||
newPath: string,
|
||||
content: string,
|
||||
) => {
|
||||
setFormData((prev) => {
|
||||
const mounts = [...(prev.mounts || [])];
|
||||
const files = { ...mounts[mountIndex].files };
|
||||
if (oldPath !== newPath) delete files[oldPath];
|
||||
files[newPath] = content;
|
||||
mounts[mountIndex] = { ...mounts[mountIndex], files };
|
||||
return { ...prev, mounts };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
const removeMountFile = (mountIndex: number, path: string) => {
|
||||
setFormData((prev) => {
|
||||
const mounts = [...(prev.mounts || [])];
|
||||
const files = { ...mounts[mountIndex].files };
|
||||
delete files[path];
|
||||
mounts[mountIndex] = { ...mounts[mountIndex], files };
|
||||
return { ...prev, mounts };
|
||||
});
|
||||
setSaveStatus("idle");
|
||||
};
|
||||
|
||||
return {
|
||||
status,
|
||||
profiles,
|
||||
projects,
|
||||
toolTypes,
|
||||
selectedProfile,
|
||||
selectedProfileId,
|
||||
isCreating,
|
||||
saveStatus,
|
||||
error,
|
||||
previewData,
|
||||
previewingId,
|
||||
formData,
|
||||
includedProfileIds,
|
||||
dragOverIndex,
|
||||
loadData,
|
||||
handleSelectProfile,
|
||||
handleCreateNew,
|
||||
handleSubmit,
|
||||
handleDelete,
|
||||
handlePreview,
|
||||
updateFormField,
|
||||
addEnvVar,
|
||||
updateEnvVar,
|
||||
removeEnvVar,
|
||||
addFile,
|
||||
updateFile,
|
||||
removeFile,
|
||||
addMount,
|
||||
updateMount,
|
||||
removeMount,
|
||||
addMountFile,
|
||||
updateMountFile,
|
||||
removeMountFile,
|
||||
getIncludedProfile,
|
||||
getScopeLabel,
|
||||
availableProfilesForInclude,
|
||||
addInclude,
|
||||
removeInclude,
|
||||
handleDragStart,
|
||||
handleDragOver,
|
||||
handleDragLeave,
|
||||
handleDrop,
|
||||
setPreviewData,
|
||||
setFormData,
|
||||
setSaveStatus,
|
||||
setIncludedProfileIds,
|
||||
populateForm,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user