added translation and used styled table instead of list

scm-ui/public/locales/de/repos.json

@@ -43,6 +43,10 @@
     "title": "Repository erstellen",
     "subtitle": "Erstellen eines neuen Repository"
   },
+  "branchesOverview": {
+    "title": "Übersicht aller verfügbaren Branches",
+    "branches": "Branches"
+  },
   "changesets": {
     "errorTitle": "Fehler",
     "errorSubtitle": "Changesets konnten nicht abgerufen werden",

scm-ui/public/locales/en/repos.json

@@ -43,6 +43,10 @@
     "title": "Create Repository",
     "subtitle": "Create a new repository"
   },
+  "branchesOverview": {
+    "title": "Overview of all branches",
+    "branches": "Branches"
+  },
   "changesets": {
     "errorTitle": "Error",
     "errorSubtitle": "Could not fetch changesets",

scm-ui/src/repos/containers/BranchesOverview.js

@@ -1,12 +1,21 @@
 // @flow
 import React from "react";
-import {fetchBranches, getBranches, getFetchBranchesFailure, isFetchBranchesPending} from "../modules/branches";
+import {
+  fetchBranches,
+  getBranches,
+  getFetchBranchesFailure,
+  isFetchBranchesPending
+} from "../modules/branches";
 import { connect } from "react-redux";
 import type { Branch, Repository } from "@scm-manager/ui-types";
 import { compose } from "redux";
 import { translate } from "react-i18next";
-import {withRouter} from "react-router-dom";
+import {Link, withRouter} from "react-router-dom";
-import {ErrorNotification, Loading} from "@scm-manager/ui-components";
+import {
+  ErrorNotification,
+  Loading,
+  Subtitle
+} from "@scm-manager/ui-components";
 
 type Props = {
   repository: Repository,
@@ -24,19 +33,13 @@ type Props = {
 };
 class BranchesOverview extends React.Component<Props> {
   componentDidMount() {
-    const {
+    const { fetchBranches, repository } = this.props;
-      fetchBranches,
-      repository
-    } = this.props;
 
     fetchBranches(repository);
   }
 
   render() {
-    const {
+    const { loading, error, t } = this.props;
-      loading,
-      error,
-    } = this.props;
 
     if (error) {
       return <ErrorNotification error={error} />;
@@ -46,7 +49,19 @@ class BranchesOverview extends React.Component<Props> {
       return <Loading />;
     }
 
-    return <>{this.renderBranches()}</>;
+    return (
+      <>
+        <Subtitle subtitle={t("branchesOverview.title")} />
+        <table className="card-table table is-hoverable is-fullwidth">
+          <thead>
+            <tr>
+              <th>{t("branchesOverview.branches")}</th>
+            </tr>
+          </thead>
+          <tbody>{this.renderBranches()}</tbody>
+        </table>
+      </>
+    );
   }
 
   renderBranches() {
@@ -55,11 +70,16 @@ class BranchesOverview extends React.Component<Props> {
     let branchesList = null;
     if (branches) {
       branchesList = (
-        <ul>
+        <>
           {branches.map((branch, index) => {
-            return <li key={index}>{branch.name}</li>;
+            const to = `../branch/${encodeURIComponent(branch.name)}/changesets/`;
+            return (
+              <tr>
+                <td key={index}><Link to={to}>{branch.name}</Link></td>
+              </tr>
+            );
           })}
-        </ul>
+        </>
       );
     }
     return branchesList;
@@ -84,7 +104,7 @@ const mapDispatchToProps = dispatch => {
   return {
     fetchBranches: (repository: Repository) => {
       dispatch(fetchBranches(repository));
-    },
+    }
   };
 };