changed BranchView component to container and simplified BranchTable with new BranchRow

scm-ui/src/repos/branches/components/BranchRow.js

@@ -0,0 +1,25 @@
+// @flow
+import React from "react";
+import { Link } from "react-router-dom";
+import type { Branch } from "@scm-manager/ui-types";
+
+type Props = {
+  baseUrl: string,
+  branch: Branch
+};
+
+export default class BranchRow extends React.Component<Props> {
+  renderLink(to: string, label: string) {
+    return <Link to={to}>{label} <span className="tag is-dark">Default</span></Link>;
+  }
+
+  render() {
+    const { baseUrl, branch } = this.props;
+    const to = `${baseUrl}/${encodeURIComponent(branch.name)}/info`;
+    return (
+      <tr>
+        <td>{this.renderLink(to, branch.name)}</td>
+      </tr>
+    );
+  }
+}

scm-ui/src/repos/branches/components/BranchTable.js

@@ -1,8 +1,8 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
+import BranchRow from "./BranchRow";
 import type { Branch } from "@scm-manager/ui-types";
-import { Link } from "react-router-dom";
 
 type Props = {
   baseUrl: string,
@@ -10,9 +10,9 @@ type Props = {
   branches: Branch[]
 };
 
-class UserTable extends React.Component<Props> {
+class BranchTable extends React.Component<Props> {
   render() {
-    const { baseUrl, branches, t } = this.props;
+    const { t } = this.props;
     return (
       <table className="card-table table is-hoverable is-fullwidth">
         <thead>
@@ -20,21 +20,21 @@ class UserTable extends React.Component<Props> {
             <th>{t("branches.table.branches")}</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody>{this.renderRow()}</tbody>
-          {branches.map((branch, index) => {
-            const to = `${baseUrl}/${encodeURIComponent(branch.name)}/info`;
-            return (
-              <tr>
-                <td key={index}>
-                  <Link to={to}>{branch.name}</Link>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
       </table>
     );
   }
+
+  renderRow() {
+    const { baseUrl, branches } = this.props;
+    let rowContent = null;
+    if (branches) {
+      rowContent = branches.map((branch, index) => {
+        return <BranchRow key={index} baseUrl={baseUrl} branch={branch} />;
+      });
+    }
+    return rowContent;
+  }
 }
 
-export default translate("users")(UserTable);
+export default translate("users")(BranchTable);

scm-ui/src/repos/branches/containers/BranchView.js

@@ -1,12 +1,15 @@
 // @flow
 import React from "react";
-import BranchDetailTable from "./BranchDetailTable";
+import BranchDetailTable from "../components/BranchDetailTable";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import type { Repository, Branch } from "@scm-manager/ui-types";
+import {connect} from "react-redux";
+import {translate} from "react-i18next";
+import {getBranch} from "../../modules/branches";
 
 type Props = {
   repository: Repository,
-  branch?: Branch // TODO: get branch from props
+  branch: Branch // TODO: get branch from props
 };
 
 class BranchView extends React.Component<Props> {
@@ -28,4 +31,15 @@ class BranchView extends React.Component<Props> {
   }
 }
 
-export default BranchView;
+const mapStateToProps = (state, ownProps) => {
+  const { repository } = ownProps;
+  const branch = getBranch(state, repository, "VisualStudio"); // TODO: !!!
+  return {
+    repository,
+    branch
+  };
+};
+
+export default connect(
+  mapStateToProps
+)(translate("repos")(BranchView));

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

@@ -24,7 +24,7 @@ import { translate } from "react-i18next";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
 import BranchesOverview from "../branches/containers/BranchesOverview";
-import BranchView from "../branches/components/BranchView";
+import BranchView from "../branches/containers/BranchView";
 import CreateBranch from "../branches/containers/CreateBranch";
 import Permissions from "../permissions/containers/Permissions";