Merge pull request #2933 from opral/felixhaeberle/sherl-85-project-se…

…lection-should-focus-on-name-instead-of-paths

project selection should focus on name instead of paths | Sherlock

.changeset/neat-snakes-wonder.md

@@ -0,0 +1,5 @@
+---
+"vs-code-extension": patch
+---
+
+project selection focus on name instead of paths

inlang/source-code/ide-extension/src/utilities/project/project.test.ts

@@ -104,6 +104,11 @@ vi.mock("@lix-js/client", () => ({
 
 describe("createProjectViewNodes", () => {
 	const mockContext = {} as vscode.ExtensionContext
+	const mockWorkspaceFolder = {
+		uri: {
+			fsPath: "/path/to/workspace",
+		},
+	} as vscode.WorkspaceFolder
 
 	beforeEach(() => {
 		vi.resetAllMocks()
@@ -123,9 +128,12 @@ describe("createProjectViewNodes", () => {
 			selectedProjectPath: "/path/to/project2",
 		})
 
-		const nodes = createProjectViewNodes({ context: mockContext })
+		const nodes = createProjectViewNodes({
+			context: mockContext,
+			workspaceFolder: mockWorkspaceFolder,
+		})
 		expect(nodes.length).toBe(2)
-		expect(nodes[0]?.label).toBe("to/project1")
+		expect(nodes[0]?.label).toBe("project1")
 		expect(nodes[1]?.isSelected).toBe(true)
 	})
 
@@ -135,7 +143,10 @@ describe("createProjectViewNodes", () => {
 			projectsInWorkspace: [],
 			selectedProjectPath: "/path/to/project2",
 		})
-		const nodes = createProjectViewNodes({ context: mockContext })
+		const nodes = createProjectViewNodes({
+			context: mockContext,
+			workspaceFolder: mockWorkspaceFolder,
+		})
 		expect(nodes).toEqual([])
 	})
 
@@ -149,7 +160,10 @@ describe("createProjectViewNodes", () => {
 			],
 			selectedProjectPath: "/path/to/project2",
 		})
-		const nodes = createProjectViewNodes({ context: mockContext })
+		const nodes = createProjectViewNodes({
+			context: mockContext,
+			workspaceFolder: mockWorkspaceFolder,
+		})
 		expect(nodes.some((node) => node.label === "")).toBe(true)
 	})
 })
@@ -159,8 +173,9 @@ describe("getTreeItem", () => {
 
 	it("should return a TreeItem for a given ProjectViewNode", () => {
 		const node: ProjectViewNode = {
-			label: "TestProject",
+			label: "testProject",
 			path: "/path/to/testproject",
+			relativePath: "./path/to/testproject",
 			isSelected: true,
 			collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
 			context: mockContext,
@@ -175,7 +190,8 @@ describe("getTreeItem", () => {
 			nodeishFs: {} as NodeishFilesystem,
 			workspaceFolder,
 		})
-		expect(treeItem.label).toBe("TestProject")
+		expect(treeItem.label).toBe("testProject")
+		expect(treeItem.description).toBe("./path/to/testproject")
 		expect(treeItem.tooltip).toBe("/path/to/testproject")
 		expect(treeItem.iconPath).toBeInstanceOf(vscode.ThemeIcon)
 	})
@@ -188,6 +204,7 @@ describe("handleTreeSelection", () => {
 		const selectedNode: ProjectViewNode = {
 			label: "SelectedProject",
 			path: "/path/to/selected",
+			relativePath: "./path/to/selected",
 			isSelected: true,
 			collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
 			context: mockContext,
@@ -217,6 +234,7 @@ describe("handleTreeSelection", () => {
 		const selectedNode: ProjectViewNode = {
 			label: "SelectedProject",
 			path: "/path/to/selected",
+			relativePath: "./path/to/selected",
 			isSelected: true,
 			collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
 			context: mockContext,
@@ -248,6 +266,7 @@ describe("handleTreeSelection", () => {
 		const selectedNode: ProjectViewNode = {
 			label: "selected/project.inlang",
 			path: "/path/to/selected/project.inlang",
+			relativePath: "./path/to/selected/project.inlang",
 			isSelected: true,
 			collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
 			context: mockContext,

inlang/source-code/ide-extension/src/utilities/project/project.ts

@@ -14,13 +14,15 @@ let projectViewNodes: ProjectViewNode[] = []
 export interface ProjectViewNode {
 	label: string
 	path: string
+	relativePath: string
 	isSelected: boolean
 	collapsibleState: vscode.TreeItemCollapsibleState
 	context: vscode.ExtensionContext
 }
 
 export function createProjectViewNodes(args: {
 	context: vscode.ExtensionContext
+	workspaceFolder: vscode.WorkspaceFolder
 }): ProjectViewNode[] {
 	const projectsInWorkspace = state().projectsInWorkspace
 
@@ -42,11 +44,15 @@ export function createProjectViewNodes(args: {
 		}
 
 		const projectPath = typeof project.projectPath === "string" ? project.projectPath : ""
-		const projectName = projectPath.split("/").slice(-2).join("/")
+		const projectName = projectPath.split("/").slice(-1).join("/").replace(".inlang", "")
+		const cleanedPath = projectPath.replace(/\/[^/]*\.inlang/g, "")
+		const relativePath =
+			"./" + normalizePath(cleanedPath.replace(args.workspaceFolder.uri.fsPath, "./"))
 
 		return {
 			label: projectName,
 			path: project.projectPath,
+			relativePath: relativePath,
 			isSelected: project.projectPath === state().selectedProjectPath,
 			collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
 			context: args.context,
@@ -64,6 +70,7 @@ export function getTreeItem(args: {
 	return {
 		label: args.element.label,
 		tooltip: args.element.path,
+		description: args.element.relativePath,
 		iconPath: args.element.isSelected
 			? new vscode.ThemeIcon("pass-filled", new vscode.ThemeColor("sideBar.foreground"))
 			: new vscode.ThemeIcon("circle-large-outline", new vscode.ThemeColor("sideBar.foreground")),
@@ -144,7 +151,8 @@ export function createTreeDataProvider(args: {
 	return {
 		getTreeItem: (element: ProjectViewNode) =>
 			getTreeItem({ element, nodeishFs: args.nodeishFs, workspaceFolder: args.workspaceFolder }),
-		getChildren: () => createProjectViewNodes({ context: args.context }),
+		getChildren: () =>
+			createProjectViewNodes({ context: args.context, workspaceFolder: args.workspaceFolder }),
 		onDidChangeTreeData: CONFIGURATION.EVENTS.ON_DID_PROJECT_TREE_VIEW_CHANGE.event,
 	}
 }