structured branch code and translations

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;