Collapse changed files file-tree (#5451)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Anbraten <6918444+anbraten@users.noreply.github.com>

web/src/views/repo/pipeline/PipelineChangedFiles.vue

@@ -28,8 +28,27 @@ useWPTitle(
   ]),
 );
 
+function collapseNode(node: TreeNode): TreeNode {
+  if (!node.isDirectory) return node;
+  const collapsedChildren = node.children.map(collapseNode);
+  let currentNode = { ...node, children: collapsedChildren };
+
+  while (currentNode.children.length === 1 && currentNode.children[0].isDirectory) {
+    const onlyChild = currentNode.children[0];
+    currentNode = {
+      name: `${currentNode.name}/${onlyChild.name}`,
+      path: onlyChild.path,
+      isDirectory: true,
+      children: onlyChild.children,
+    };
+  }
+
+  return currentNode;
+}
+
 const fileTree = computed(() =>
-  (pipeline.value.changed_files ?? []).reduce((acc, file) => {
+  (pipeline.value.changed_files ?? [])
+    .reduce((acc, file) => {
       const parts = file.split('/');
       let currentLevel = acc;
 
@@ -50,6 +69,7 @@ const fileTree = computed(() =>
       });
 
       return acc;
-  }, [] as TreeNode[]),
+    }, [] as TreeNode[])
+    .map(collapseNode),
 );
 </script>