implemented navigation within source browser

scm-ui/src/repos/sources/components/FileTree.js

@@ -13,17 +13,40 @@ const styles = {
 
 type Props = {
   tree: SourcesCollection,
+  path: string,
+  baseUrl: string,
 
   // context props
   classes: any,
   t: string => string
 };
 
+export function findParent(path: string) {
+  if (path.endsWith("/")) {
+    path = path.substring(path, path.length - 1);
+  }
+
+  const index = path.lastIndexOf("/");
+  if (index > 0) {
+    return path.substring(0, index);
+  }
+  return "";
+}
+
 class FileTree extends React.Component<Props> {
   render() {
-    const { tree, classes, t } = this.props;
+    const { tree, path, baseUrl, classes, t } = this.props;
+    const baseUrlWithRevision = baseUrl + "/" + tree.revision;
 
-    const files = tree._embedded.files;
+    const files = [];
+    if (path) {
+      files.push({
+        name: "..",
+        path: findParent(path),
+        directory: true
+      });
+    }
+    files.push(...tree._embedded.files);
 
     return (
       <table className="table table-hover table-sm is-fullwidth">
@@ -38,7 +61,11 @@ class FileTree extends React.Component<Props> {
         </thead>
         <tbody>
           {files.map(file => (
-            <FileTreeLeaf key={file.name} file={file} />
+            <FileTreeLeaf
+              key={file.name}
+              file={file}
+              baseUrl={baseUrlWithRevision}
+            />
           ))}
         </tbody>
       </table>

scm-ui/src/repos/sources/components/FileTree.test.js

@@ -0,0 +1,12 @@
+// @flow
+
+import { findParent } from "./FileTree";
+
+describe("find parent tests", () => {
+  it("should return the parent path", () => {
+    expect(findParent("src/main/js/")).toBe("src/main");
+    expect(findParent("src/main/js")).toBe("src/main");
+    expect(findParent("src/main")).toBe("src");
+    expect(findParent("src")).toBe("");
+  });
+});

scm-ui/src/repos/sources/components/FileTreeLeaf.js

@@ -1,5 +1,5 @@
 //@flow
-import React from "react";
+import * as React from "react";
 import injectSheet from "react-jss";
 import { DateFromNow } from "@scm-manager/ui-components";
 import FileSize from "./FileSize";
@@ -15,25 +15,46 @@ const styles = {
 
 type Props = {
   file: File,
+  baseUrl: string,
 
   // context props
   classes: any
 };
 
 class FileTreeLeaf extends React.Component<Props> {
+  createLink = (file: File) => {
+    let link = this.props.baseUrl;
+    if (file.path) {
+      link += "/" + file.path + "/";
+    }
+    return link;
+  };
+
+  createFileIcon = (file: File) => {
+    if (file.directory) {
+      return (
+        <Link to={this.createLink(file)}>
+          <FileIcon file={file} />
+        </Link>
+      );
+    }
+    return <FileIcon file={file} />;
+  };
+
+  createFileName = (file: File) => {
+    if (file.directory) {
+      return <Link to={this.createLink(file)}>{file.name}</Link>;
+    }
+    return file.name;
+  };
+
   render() {
     const { file, classes } = this.props;
 
     return (
       <tr>
-        <td className={classes.iconColumn}>
-          <Link to="#todo">
-            <FileIcon file={file} />
-          </Link>
-        </td>
-        <td>
-          <Link to="#todo">{file.name}</Link>
-        </td>
+        <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
+        <td>{this.createFileName(file)}</td>
         <td>
           <FileSize bytes={file.length} />
         </td>