added translation and used styled table instead of list

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 {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 {ErrorNotification, Loading} from "@scm-manager/ui-components";
+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 {Link, withRouter} from "react-router-dom";
+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 {
-      fetchBranches,
-      repository
-    } = this.props;
+    const { fetchBranches, repository } = this.props;
 
     fetchBranches(repository);
   }
 
   render() {
-    const {
-      loading,
-      error,
-    } = this.props;
+    const { loading, error, t } = 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));
-    },
+    }
   };
 };