fix(app): allow collapsing the parent folder of a selected file (#500)

The file explorer had a useEffect that re-enforced expansion of every
ancestor of `selectedEntryPath` whenever `expandedPaths` changed. As a
result, the moment a user collapsed the parent folder of a file they
had just opened, the effect re-added that folder to the expanded set
and the folder appeared stuck open.

Selection and expansion are orthogonal: clicking a file should not
dictate that its parent folder stays open forever. There is also no
current caller that sets `selectedEntryPath` from outside the tree, so
the reveal-on-external-selection use case the effect was designed for
is unused. Delete the effect and its two now-dead helpers. If a future
"Reveal in Explorer" action is introduced, it can expand ancestors at
the call site.

Adds an E2E regression test that reproduces the original scenario:
expand a folder, open an image, collapse the parent folder, assert
children are hidden. Also asserts an unrelated sibling folder still
expands after the image is open, guarding against any future regression
that makes the bug global.
This commit is contained in:
Mohamed Boudra
2026-04-19 16:49:09 +08:00
committed by GitHub
parent 128d6668ae
commit 8991d34f78
3 changed files with 102 additions and 58 deletions
@@ -0,0 +1,61 @@
import { test } from "./fixtures";
import {
collapseFolder,
expandFolder,
expectExplorerEntryHidden,
expectExplorerEntryVisible,
expectFileTabOpen,
openFileExplorer,
openFileFromExplorer,
} from "./helpers/file-explorer";
import { gotoWorkspace } from "./helpers/launcher";
import { createTempGitRepo } from "./helpers/workspace";
import {
connectWorkspaceSetupClient,
type WorkspaceSetupDaemonClient,
} from "./helpers/workspace-setup";
let tempRepo: { path: string; cleanup: () => Promise<void> };
let workspaceId: string;
let seedClient: WorkspaceSetupDaemonClient;
test.beforeAll(async () => {
tempRepo = await createTempGitRepo("file-explorer-collapse-", {
files: [
{ path: "assets/logo.png", content: "image bytes for explorer e2e\n" },
{ path: "docs/guide.md", content: "# Guide\n" },
],
});
seedClient = await connectWorkspaceSetupClient();
const result = await seedClient.openProject(tempRepo.path);
if (!result.workspace) {
throw new Error(result.error ?? "Failed to seed workspace");
}
workspaceId = String(result.workspace.id);
});
test.afterAll(async () => {
await seedClient?.close();
await tempRepo?.cleanup();
});
test.describe("File explorer collapse", () => {
test("collapses an opened image file parent folder and still expands other folders", async ({
page,
}) => {
await gotoWorkspace(page, workspaceId);
await openFileExplorer(page);
await expandFolder(page, "assets");
await expectExplorerEntryVisible(page, "logo.png");
await openFileFromExplorer(page, "logo.png");
await expectFileTabOpen(page, "assets/logo.png");
await collapseFolder(page, "assets");
await expectExplorerEntryHidden(page, "logo.png");
await expandFolder(page, "docs");
await expectExplorerEntryVisible(page, "guide.md");
});
});
+41
View File
@@ -0,0 +1,41 @@
import { expect, type Page } from "@playwright/test";
function fileExplorerTree(page: Page) {
return page.getByTestId("file-explorer-tree-scroll");
}
function fileExplorerEntry(page: Page, name: string) {
return fileExplorerTree(page).getByText(name, { exact: true }).first();
}
export async function openFileExplorer(page: Page): Promise<void> {
await page.getByRole("button", { name: "Open explorer" }).first().click();
await page.getByTestId("explorer-tab-files").click();
await expect(fileExplorerTree(page)).toBeVisible({ timeout: 30_000 });
}
export async function expandFolder(page: Page, folderName: string): Promise<void> {
await fileExplorerEntry(page, folderName).click();
}
export async function collapseFolder(page: Page, folderName: string): Promise<void> {
await fileExplorerEntry(page, folderName).click();
}
export async function openFileFromExplorer(page: Page, fileName: string): Promise<void> {
await fileExplorerEntry(page, fileName).click();
}
export async function expectExplorerEntryVisible(page: Page, name: string): Promise<void> {
await expect(fileExplorerEntry(page, name)).toBeVisible({ timeout: 30_000 });
}
export async function expectExplorerEntryHidden(page: Page, name: string): Promise<void> {
await expect(fileExplorerEntry(page, name)).toBeHidden({ timeout: 30_000 });
}
export async function expectFileTabOpen(page: Page, filePath: string): Promise<void> {
await expect(page.getByTestId(`workspace-tab-file_${filePath}`).first()).toBeVisible({
timeout: 30_000,
});
}
@@ -195,35 +195,6 @@ export function FileExplorerPane({
});
}, [hasWorkspaceScope, requestDirectoryListing, workspaceStateKey]);
// Expand ancestor directories when a file is selected (e.g., from an inline path click)
useEffect(() => {
if (!selectedEntryPath || !workspaceStateKey) {
return;
}
const parentDir = getParentDirectory(selectedEntryPath);
const ancestors = getAncestorDirectories(parentDir);
const newPaths = ancestors.filter((path) => !expandedPaths.has(path));
if (newPaths.length === 0) {
return;
}
setExpandedPathsForWorkspace(workspaceStateKey, [...Array.from(expandedPaths), ...newPaths]);
newPaths.forEach((path) => {
if (!directories.has(path)) {
void requestDirectoryListing(path, {
recordHistory: false,
setCurrentPath: false,
});
}
});
}, [
directories,
workspaceStateKey,
expandedPaths,
requestDirectoryListing,
selectedEntryPath,
setExpandedPathsForWorkspace,
]);
const handleToggleDirectory = useCallback(
(entry: ExplorerEntry) => {
if (!workspaceStateKey) {
@@ -682,35 +653,6 @@ function buildTreeRows({
return rows;
}
function getParentDirectory(path: string): string {
const normalized = path.replace(/\/+$/, "");
if (!normalized || normalized === ".") {
return ".";
}
const lastSlash = normalized.lastIndexOf("/");
if (lastSlash === -1) {
return ".";
}
const dir = normalized.slice(0, lastSlash);
return dir.length > 0 ? dir : ".";
}
function getAncestorDirectories(directory: string): string[] {
const trimmed = directory.replace(/^\.\/+/, "").replace(/\/+$/, "");
if (!trimmed || trimmed === ".") {
return ["."];
}
const parts = trimmed.split("/").filter(Boolean);
const ancestors: string[] = ["."];
let acc = "";
for (const part of parts) {
acc = acc ? `${acc}/${part}` : part;
ancestors.push(acc);
}
return ancestors;
}
function getErrorRecoveryPath(state: AgentFileExplorerState | undefined): string {
if (!state) {
return ".";