feat(KB-175): move file browser to header with workspace support
- Add workspace file APIs and hooks for session-scoped file browsing - Create WorkspaceSelector component for switching between workspaces - Update FileBrowserModal with workspace mode and improved UX - Add files button to header with workspace-aware file browsing - Add session files indicator to task cards for quick file access - Include comprehensive tests for all new components and hooks
This commit is contained in:
gsxdsm
@@ -6,319 +6,221 @@ import type { FileContentResponse, SaveFileResponse } from "../../api";
|
||||
|
||||
// Mock the api module
|
||||
vi.mock("../../api", () => ({
|
||||
fetchProjectFileContent: vi.fn(),
|
||||
saveProjectFileContent: vi.fn(),
|
||||
fetchWorkspaceFileContent: vi.fn(),
|
||||
saveWorkspaceFileContent: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockFetchProjectFileContent = vi.mocked(api.fetchProjectFileContent);
|
||||
const mockSaveProjectFileContent = vi.mocked(api.saveProjectFileContent);
|
||||
const mockFetchWorkspaceFileContent = vi.mocked(api.fetchWorkspaceFileContent);
|
||||
const mockSaveWorkspaceFileContent = vi.mocked(api.saveWorkspaceFileContent);
|
||||
|
||||
describe("useProjectFileEditor", () => {
|
||||
beforeEach(() => {
|
||||
mockFetchProjectFileContent.mockReset();
|
||||
mockSaveProjectFileContent.mockReset();
|
||||
mockFetchWorkspaceFileContent.mockReset();
|
||||
mockSaveWorkspaceFileContent.mockReset();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("initializes with empty content when no file selected", () => {
|
||||
it("initializes with empty content when no file is selected", () => {
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", null, true));
|
||||
|
||||
expect(result.current.content).toBe("");
|
||||
expect(result.current.originalContent).toBe("");
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(result.current.saving).toBe(false);
|
||||
expect(result.current.error).toBeNull();
|
||||
expect(result.current.hasChanges).toBe(false);
|
||||
expect(result.current.mtime).toBeNull();
|
||||
});
|
||||
|
||||
it("initializes with empty content when disabled", () => {
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", false));
|
||||
|
||||
expect(result.current.content).toBe("");
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(mockFetchProjectFileContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("fetches file content when filePath is provided and enabled", async () => {
|
||||
it("loads file content when file is selected", async () => {
|
||||
const mockResponse: FileContentResponse = {
|
||||
content: "console.log('hello');",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
};
|
||||
mockFetchProjectFileContent.mockResolvedValueOnce(mockResponse);
|
||||
mockFetchWorkspaceFileContent.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", true));
|
||||
|
||||
expect(result.current.loading).toBe(true);
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
expect(result.current.content).toBe("console.log('hello');");
|
||||
expect(result.current.originalContent).toBe("console.log('hello');");
|
||||
expect(result.current.mtime).toBe("2024-01-01T00:00:00Z");
|
||||
expect(result.current.hasChanges).toBe(false);
|
||||
expect(mockFetchProjectFileContent).toHaveBeenCalledWith("src/index.ts");
|
||||
expect(mockFetchWorkspaceFileContent).toHaveBeenCalledWith("project", "src/index.ts");
|
||||
});
|
||||
|
||||
it("tracks content changes", async () => {
|
||||
const mockResponse: FileContentResponse = {
|
||||
content: "console.log('hello');",
|
||||
content: "original content",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
size: 16,
|
||||
};
|
||||
mockFetchProjectFileContent.mockResolvedValueOnce(mockResponse);
|
||||
mockFetchWorkspaceFileContent.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", true));
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "file.txt", true));
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
expect(result.current.hasChanges).toBe(false);
|
||||
|
||||
// Edit content
|
||||
act(() => {
|
||||
result.current.setContent("console.log('world');");
|
||||
result.current.setContent("modified content");
|
||||
});
|
||||
|
||||
expect(result.current.content).toBe("console.log('world');");
|
||||
expect(result.current.content).toBe("modified content");
|
||||
expect(result.current.hasChanges).toBe(true);
|
||||
});
|
||||
|
||||
it("saves file content", async () => {
|
||||
it("saves changes successfully", async () => {
|
||||
const loadResponse: FileContentResponse = {
|
||||
content: "console.log('hello');",
|
||||
content: "original",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
size: 8,
|
||||
};
|
||||
const saveResponse: SaveFileResponse = {
|
||||
success: true,
|
||||
mtime: "2024-01-02T00:00:00Z",
|
||||
size: 22,
|
||||
size: 16,
|
||||
};
|
||||
|
||||
mockFetchProjectFileContent.mockResolvedValueOnce(loadResponse);
|
||||
mockSaveProjectFileContent.mockResolvedValueOnce(saveResponse);
|
||||
mockFetchWorkspaceFileContent.mockResolvedValueOnce(loadResponse);
|
||||
mockSaveWorkspaceFileContent.mockResolvedValueOnce(saveResponse);
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", true));
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "file.txt", true));
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
// Edit and save
|
||||
act(() => {
|
||||
result.current.setContent("console.log('world');");
|
||||
result.current.setContent("modified content");
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await result.current.save();
|
||||
});
|
||||
|
||||
expect(mockSaveProjectFileContent).toHaveBeenCalledWith("src/index.ts", "console.log('world');");
|
||||
expect(result.current.originalContent).toBe("console.log('world');");
|
||||
expect(result.current.hasChanges).toBe(false);
|
||||
expect(result.current.mtime).toBe("2024-01-02T00:00:00Z");
|
||||
});
|
||||
|
||||
it("does not save when there are no changes", async () => {
|
||||
const mockResponse: FileContentResponse = {
|
||||
content: "console.log('hello');",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
};
|
||||
mockFetchProjectFileContent.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", true));
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
// Try to save without changes
|
||||
await act(async () => {
|
||||
await result.current.save();
|
||||
});
|
||||
|
||||
expect(mockSaveProjectFileContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("handles fetch errors", async () => {
|
||||
mockFetchProjectFileContent.mockRejectedValueOnce(new Error("File not found"));
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/missing.ts", true));
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
expect(result.current.error).toBe("File not found");
|
||||
expect(result.current.content).toBe("");
|
||||
});
|
||||
|
||||
it("handles save errors", async () => {
|
||||
const loadResponse: FileContentResponse = {
|
||||
content: "console.log('hello');",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
};
|
||||
mockFetchProjectFileContent.mockResolvedValueOnce(loadResponse);
|
||||
mockSaveProjectFileContent.mockRejectedValueOnce(new Error("Permission denied"));
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", true));
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
// Edit and try to save
|
||||
act(() => {
|
||||
result.current.setContent("console.log('world');");
|
||||
});
|
||||
|
||||
let saveError: Error | undefined;
|
||||
await act(async () => {
|
||||
try {
|
||||
await result.current.save();
|
||||
} catch (err) {
|
||||
saveError = err as Error;
|
||||
}
|
||||
});
|
||||
|
||||
expect(saveError?.message).toBe("Permission denied");
|
||||
expect(result.current.error).toBe("Permission denied");
|
||||
// Original content should not be updated on error
|
||||
expect(result.current.originalContent).toBe("console.log('hello');");
|
||||
expect(result.current.hasChanges).toBe(true);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.save();
|
||||
});
|
||||
|
||||
expect(result.current.originalContent).toBe("modified content");
|
||||
expect(result.current.mtime).toBe("2024-01-02T00:00:00Z");
|
||||
expect(result.current.hasChanges).toBe(false);
|
||||
expect(mockSaveWorkspaceFileContent).toHaveBeenCalledWith("project", "file.txt", "modified content");
|
||||
});
|
||||
|
||||
it("clears content when filePath changes", async () => {
|
||||
const firstResponse: FileContentResponse = {
|
||||
content: "// file 1",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 10,
|
||||
};
|
||||
const secondResponse: FileContentResponse = {
|
||||
content: "// file 2",
|
||||
mtime: "2024-01-02T00:00:00Z",
|
||||
size: 10,
|
||||
};
|
||||
it("handles load errors", async () => {
|
||||
mockFetchWorkspaceFileContent.mockRejectedValueOnce(new Error("Failed to load file"));
|
||||
|
||||
mockFetchProjectFileContent
|
||||
.mockResolvedValueOnce(firstResponse)
|
||||
.mockResolvedValueOnce(secondResponse);
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "missing.txt", true));
|
||||
|
||||
const { result, rerender } = renderHook(
|
||||
({ filePath }) => useProjectFileEditor("/project", filePath, true),
|
||||
{ initialProps: { filePath: "file1.ts" } }
|
||||
);
|
||||
|
||||
await waitFor(() => expect(result.current.content).toBe("// file 1"));
|
||||
|
||||
// Change file
|
||||
rerender({ filePath: "file2.ts" });
|
||||
|
||||
await waitFor(() => expect(result.current.content).toBe("// file 2"));
|
||||
});
|
||||
|
||||
it("clears content when disabled", async () => {
|
||||
const mockResponse: FileContentResponse = {
|
||||
content: "console.log('hello');",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
};
|
||||
mockFetchProjectFileContent.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const { result, rerender } = renderHook(
|
||||
({ enabled }) => useProjectFileEditor("/project", "src/index.ts", enabled),
|
||||
{ initialProps: { enabled: true } }
|
||||
);
|
||||
|
||||
await waitFor(() => expect(result.current.content).toBe("console.log('hello');"));
|
||||
|
||||
// Disable
|
||||
rerender({ enabled: false });
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
expect(result.current.error).toBe("Failed to load file");
|
||||
expect(result.current.content).toBe("");
|
||||
expect(result.current.originalContent).toBe("");
|
||||
expect(result.current.mtime).toBeNull();
|
||||
});
|
||||
|
||||
it("clears error when content is edited", async () => {
|
||||
mockFetchProjectFileContent.mockRejectedValueOnce(new Error("File not found"));
|
||||
it("handles save errors", async () => {
|
||||
const loadResponse: FileContentResponse = {
|
||||
content: "original",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 8,
|
||||
};
|
||||
mockFetchWorkspaceFileContent.mockResolvedValueOnce(loadResponse);
|
||||
mockSaveWorkspaceFileContent.mockRejectedValueOnce(new Error("Failed to save file"));
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/missing.ts", true));
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "file.txt", true));
|
||||
|
||||
await waitFor(() => expect(result.current.error).toBe("File not found"));
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
// Edit content should clear error
|
||||
act(() => {
|
||||
result.current.setContent("new content");
|
||||
result.current.setContent("modified");
|
||||
});
|
||||
|
||||
await expect(result.current.save()).rejects.toThrow("Failed to save file");
|
||||
expect(result.current.error).toBe("Failed to save file");
|
||||
expect(result.current.hasChanges).toBe(true);
|
||||
});
|
||||
|
||||
it("does not load when disabled", async () => {
|
||||
renderHook(() => useProjectFileEditor("/project", "file.txt", false));
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
|
||||
expect(mockFetchWorkspaceFileContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not save when there are no changes", async () => {
|
||||
const loadResponse: FileContentResponse = {
|
||||
content: "original",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 8,
|
||||
};
|
||||
mockFetchWorkspaceFileContent.mockResolvedValueOnce(loadResponse);
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "file.txt", true));
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
await act(async () => {
|
||||
await result.current.save();
|
||||
});
|
||||
|
||||
expect(mockSaveWorkspaceFileContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("clears error when content changes", async () => {
|
||||
const loadResponse: FileContentResponse = {
|
||||
content: "original",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 8,
|
||||
};
|
||||
mockFetchWorkspaceFileContent.mockResolvedValueOnce(loadResponse);
|
||||
mockSaveWorkspaceFileContent.mockRejectedValueOnce(new Error("Save failed"));
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "file.txt", true));
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
|
||||
act(() => {
|
||||
result.current.setContent("modified");
|
||||
});
|
||||
|
||||
await expect(result.current.save()).rejects.toThrow("Save failed");
|
||||
expect(result.current.error).toBe("Save failed");
|
||||
|
||||
act(() => {
|
||||
result.current.setContent("modified again");
|
||||
});
|
||||
|
||||
expect(result.current.error).toBeNull();
|
||||
});
|
||||
|
||||
it("shows saving state during save operation", async () => {
|
||||
it("resets state when filePath becomes null", async () => {
|
||||
const loadResponse: FileContentResponse = {
|
||||
content: "console.log('hello');",
|
||||
content: "content",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
};
|
||||
const saveResponse: SaveFileResponse = {
|
||||
success: true,
|
||||
mtime: "2024-01-02T00:00:00Z",
|
||||
size: 22,
|
||||
size: 7,
|
||||
};
|
||||
mockFetchWorkspaceFileContent.mockResolvedValueOnce(loadResponse);
|
||||
|
||||
let resolveSave: (value: SaveFileResponse) => void;
|
||||
const savePromise = new Promise<SaveFileResponse>((resolve) => {
|
||||
resolveSave = resolve;
|
||||
});
|
||||
|
||||
mockFetchProjectFileContent.mockResolvedValueOnce(loadResponse);
|
||||
mockSaveProjectFileContent.mockReturnValueOnce(savePromise);
|
||||
|
||||
const { result } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", true));
|
||||
const { result, rerender } = renderHook(
|
||||
({ filePath }) => useProjectFileEditor("/project", filePath, true),
|
||||
{ initialProps: { filePath: "file.txt" } }
|
||||
);
|
||||
|
||||
await waitFor(() => expect(result.current.loading).toBe(false));
|
||||
expect(result.current.content).toBe("content");
|
||||
|
||||
// Edit and save
|
||||
act(() => {
|
||||
result.current.setContent("console.log('world');");
|
||||
});
|
||||
rerender({ filePath: null });
|
||||
|
||||
// Start save
|
||||
let savePromiseResolved = false;
|
||||
act(() => {
|
||||
result.current.save().then(() => {
|
||||
savePromiseResolved = true;
|
||||
});
|
||||
});
|
||||
|
||||
expect(result.current.saving).toBe(true);
|
||||
|
||||
// Complete save
|
||||
resolveSave!(saveResponse);
|
||||
await waitFor(() => expect(savePromiseResolved).toBe(true));
|
||||
|
||||
expect(result.current.saving).toBe(false);
|
||||
});
|
||||
|
||||
it("cancels in-flight fetch on unmount", async () => {
|
||||
let resolveFetch: (value: FileContentResponse) => void;
|
||||
const fetchPromise = new Promise<FileContentResponse>((resolve) => {
|
||||
resolveFetch = resolve;
|
||||
});
|
||||
mockFetchProjectFileContent.mockReturnValueOnce(fetchPromise);
|
||||
|
||||
const { unmount } = renderHook(() => useProjectFileEditor("/project", "src/index.ts", true));
|
||||
|
||||
// Unmount before fetch completes
|
||||
unmount();
|
||||
|
||||
// Complete the fetch after unmount
|
||||
resolveFetch!({
|
||||
content: "console.log('hello');",
|
||||
mtime: "2024-01-01T00:00:00Z",
|
||||
size: 21,
|
||||
});
|
||||
|
||||
// Wait a bit to ensure state update doesn't happen
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
|
||||
expect(mockFetchProjectFileContent).toHaveBeenCalledTimes(1);
|
||||
expect(result.current.content).toBe("");
|
||||
expect(result.current.originalContent).toBe("");
|
||||
expect(result.current.mtime).toBeNull();
|
||||
expect(result.current.error).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user