structured branch code and translations

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

@@ -43,10 +43,18 @@
     "title": "Repository erstellen",
     "subtitle": "Erstellen eines neuen Repository"
   },
-  "branchesOverview": {
-    "title": "Übersicht aller verfügbaren Branches",
-    "branches": "Branches",
-    "createButton": "Branch erstellen"
+  "branches": {
+    "overview": {
+      "title": "Übersicht aller verfügbaren Branches",
+      "createButton": "Branch erstellen"
+    },
+    "table": {
+      "branches": "Branches"
+    }
+  },
+  "branch": {
+    "name": "Name",
+    "repository": "Repository"
   },
   "changesets": {
     "errorTitle": "Fehler",

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

@@ -43,10 +43,18 @@
     "title": "Create Repository",
     "subtitle": "Create a new repository"
   },
-  "branchesOverview": {
-    "title": "Overview of all branches",
-    "branches": "Branches",
-    "createButton": "Create Branch"
+  "branches": {
+    "overview": {
+      "title": "Overview of all branches",
+      "createButton": "Create Branch"
+    },
+    "table": {
+      "branches": "Branches"
+    }
+  },
+  "branch": {
+    "name": "Name",
+    "repository": "Repository"
   },
   "changesets": {
     "errorTitle": "Error",

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

@@ -0,0 +1,35 @@
+//@flow
+import React from "react";
+import type { Repository, Branch } from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+
+type Props = {
+  repository: Repository,
+  branch: Branch,
+  // context props
+  t: string => string
+};
+
+class BranchDetailTable extends React.Component<Props> {
+  render() {
+    const { repository, branch, t } = this.props;
+    return (
+      <table className="table">
+        <tbody>
+          <tr>
+            <td className="has-text-weight-semibold">{t("branch.name")}</td>
+            <td>branch.name</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">
+              {t("branch.repository")}
+            </td>
+            <td>{repository.name}</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate("repos")(BranchDetailTable);

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

@@ -0,0 +1,40 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { Branch } from "@scm-manager/ui-types";
+import { Link } from "react-router-dom";
+
+type Props = {
+  baseUrl: string,
+  t: string => string,
+  branches: Branch[]
+};
+
+class UserTable extends React.Component<Props> {
+  render() {
+    const { baseUrl, branches, t } = this.props;
+    return (
+      <table className="card-table table is-hoverable is-fullwidth">
+        <thead>
+        <tr>
+          <th>{t("branches.table.branches")}</th>
+        </tr>
+        </thead>
+        <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>
+    );
+  }
+}
+
+export default translate("users")(UserTable);

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

@@ -0,0 +1,31 @@
+// @flow
+import React from "react";
+import BranchDetailTable from "./BranchDetailTable";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { Repository, Branch } from "@scm-manager/ui-types";
+
+type Props = {
+  repository: Repository,
+  branch?: Branch // TODO: get branch from props
+};
+
+class BranchView extends React.Component<Props> {
+  render() {
+    const { repository, branch } = this.props;
+    return (
+      <div>
+        <BranchDetailTable repository={repository} branch={branch} />
+        <hr />
+        <div className="content">
+          <ExtensionPoint
+            name="repos.branch-details.information"
+            renderAll={true}
+            props={{ branch }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BranchView;

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

@@ -5,21 +5,23 @@ import {
   getBranches,
   getFetchBranchesFailure,
   isFetchBranchesPending
-} from "../modules/branches";
+} 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 { withRouter } from "react-router-dom";
 import {
   CreateButton,
   ErrorNotification,
   Loading,
   Subtitle
 } from "@scm-manager/ui-components";
+import BranchTable from "../components/BranchTable";
 
 type Props = {
   repository: Repository,
+  baseUrl: string,
   loading: boolean,
   error: Error,
   branches: Branch[],
@@ -41,7 +43,7 @@ class BranchesOverview extends React.Component<Props> {
   }
 
   render() {
-    const { loading, error, t } = this.props;
+    const { baseUrl, loading, error, branches, t } = this.props;
 
     if (error) {
       return <ErrorNotification error={error} />;
@@ -53,46 +55,18 @@ class BranchesOverview extends React.Component<Props> {
 
     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>
+        <Subtitle subtitle={t("branches.overview.title")} />
+        <BranchTable baseUrl={baseUrl} branches={branches} />
         {this.renderCreateButton()}
       </>
     );
   }
 
-  renderBranches() {
-    const { branches } = this.props;
-
-    let branchesList = null;
-    if (branches) {
-      branchesList = (
-        <>
-          {branches.map((branch, index) => {
-            const to = `../branch/${encodeURIComponent(branch.name)}/changesets/`;
-            return (
-              <tr>
-                <td key={index}><Link to={to}>{branch.name}</Link></td>
-              </tr>
-            );
-          })}
-        </>
-      );
-    }
-    return branchesList;
-  }
-
   renderCreateButton() {
     const { showCreateButton, t } = this.props;
     if (showCreateButton || true ) { // TODO
       return (
-        <CreateButton label={t("branchesOverview.createButton")} link="/create" />
+        <CreateButton label={t("branches.overview.createButton")} link="./create" />
       );
     }
     return null;

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

@@ -0,0 +1,18 @@
+// @flow
+import React from "react";
+import { Subtitle } from "@scm-manager/ui-components";
+
+class CreateBranch extends React.Component<> {
+  render() {
+    const { t } = this.props;
+
+    return (
+      <>
+        <Subtitle subtitle={t("branches.create.title")} />
+        <p>Create placeholder</p>
+      </>
+    );
+  }
+}
+
+export default CreateBranch;

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

@@ -1,13 +0,0 @@
-// @flow
-import React from "react";
-
-class CreateBranch extends React.Component<> {
-
-  render() {
-    return (
-      <p>Create placeholder</p>
-    );
-  }
-}
-
-export default CreateBranch;

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

@@ -23,8 +23,9 @@ import {
 import { translate } from "react-i18next";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
-import BranchesOverview from "./BranchesOverview";
-import CreateBranch from "./CreateBranch";
+import BranchesOverview from "../branches/containers/BranchesOverview";
+import BranchView from "../branches/components/BranchView";
+import CreateBranch from "../branches/containers/CreateBranch";
 import Permissions from "../permissions/containers/Permissions";
 
 import type { History } from "history";
@@ -168,6 +169,15 @@ class RepositoryRoot extends React.Component<Props> {
                   />
                 )}
               />
+              <Route
+                path={`${url}/branch/:branch/info`}
+                render={() => (
+                  <BranchView
+                    repository={repository}
+                    baseUrl={`${url}/branch`}
+                  />
+                )}
+              />
               <Route
                 path={`${url}/branch/:branch/changesets`}
                 render={() => (
@@ -181,7 +191,12 @@ class RepositoryRoot extends React.Component<Props> {
               <Route
                 path={`${url}/branches`}
                 exact={true}
-                render={() => <BranchesOverview repository={repository} />}
+                render={() => (
+                  <BranchesOverview
+                    repository={repository}
+                    baseUrl={`${url}/branch`}
+                  />
+                )}
               />
               <Route
                 path={`${url}/branches/create`}

scm-ui/src/users/components/table/UserTable.js

@@ -9,8 +9,6 @@ type Props = {
   users: User[]
 };
 
-;
-
 class UserTable extends React.Component<Props> {
   render() {
     const { users, t } = this.props;