Merged changes

scm-ui/src/repos/components/ChangesetAuthor.js

@@ -0,0 +1,27 @@
+//@flow
+
+import React from "react";
+import type { Changeset } from "@scm-manager/ui-types";
+
+type Props = {
+  changeset: Changeset
+};
+
+export default class ChangesetAuthor extends React.Component<Props> {
+  render() {
+    const { changeset } = this.props;
+    return (
+      <>
+        {changeset.author.name}{" "}
+        <a
+          className="is-hidden-mobile"
+          href={"mailto:" + changeset.author.mail}
+        >
+          &lt;
+          {changeset.author.mail}
+          &gt;
+        </a>
+      </>
+    );
+  }
+}

scm-ui/src/repos/components/ChangesetId.js

@@ -0,0 +1,25 @@
+//@flow
+
+import { Link } from "react-router-dom";
+import React from "react";
+import type { Repository, Changeset } from "@scm-manager/ui-types";
+
+type Props = {
+  repository: Repository,
+  changeset: Changeset
+};
+
+export default class ChangesetId extends React.Component<Props> {
+  render() {
+    const { repository, changeset } = this.props;
+    return (
+      <Link
+        to={`/repo/${repository.namespace}/${repository.name}/changeset/${
+          changeset.id
+        }`}
+      >
+        {changeset.id.substr(0, 7)}
+      </Link>
+    );
+  }
+}

scm-ui/src/repos/components/ChangesetList.js

@@ -0,0 +1,22 @@
+// @flow
+import ChangesetRow from "./ChangesetRow";
+import React from "react";
+import type { Changeset, Repository } from "@scm-manager/ui-types";
+import classNames from "classnames";
+
+type Props = {
+  repository: Repository,
+  changesets: Changeset[]
+};
+
+class ChangesetList extends React.Component<Props> {
+  render() {
+    const { repository, changesets } = this.props;
+    const content = changesets.map((changeset, index) => {
+      return <ChangesetRow key={index} repository={repository} changeset={changeset} />;
+    });
+    return <div className={classNames("box")}>{content}</div>;
+  }
+}
+
+export default ChangesetList;

scm-ui/src/repos/components/ChangesetRow.js

@@ -1,11 +1,13 @@
 //@flow
 import React from "react";
-import type { Changeset } from "@scm-manager/ui-types";
+import type { Changeset, Repository } from "@scm-manager/ui-types";
 import classNames from "classnames";
 import { translate, Interpolate } from "react-i18next";
 import ChangesetAvatar from "./ChangesetAvatar";
+import ChangesetId from "./ChangesetId";
 import injectSheet from "react-jss";
 import { DateFromNow } from "@scm-manager/ui-components";
+import ChangesetAuthor from "./ChangesetAuthor";
 
 const styles = {
   pointer: {
@@ -13,10 +15,14 @@ const styles = {
   },
   changesetGroup: {
     marginBottom: "1em"
+  },
+  withOverflow: {
+    overflow: "auto"
   }
 };
 
 type Props = {
+  repository: Repository,
   changeset: Changeset,
   t: any,
   classes: any
@@ -24,32 +30,21 @@ type Props = {
 
 class ChangesetRow extends React.Component<Props> {
   createLink = (changeset: Changeset) => {
-    return <a href={`/repo/changeset/${changeset.id}`}>{changeset.id}</a>;
+    const { repository } = this.props;
+    return <ChangesetId changeset={changeset} repository={repository} />;
   };
 
   render() {
-    const { changeset, t, classes } = this.props;
+    const { changeset, classes } = this.props;
     const changesetLink = this.createLink(changeset);
     const dateFromNow = <DateFromNow date={changeset.date} />;
-    const authorLine = (
-      <>
-        {changeset.author.name}{" "}
-        <a
-          className="is-hidden-mobile"
-          href={"mailto:" + changeset.author.mail}
-        >
-          &lt;
-          {changeset.author.mail}
-          &gt;
-        </a>
-      </>
-    );
+    const authorLine = <ChangesetAuthor changeset={changeset}/>;
     return (
       <article className={classNames("media", classes.inner)}>
         <figure className="media-left">
           <ChangesetAvatar changeset={changeset} />
         </figure>
-        <div className="media-content">
+        <div className={classNames("media-content", classes.withOverflow)}>
           <div className="content">
             <p className="is-ellipsis-overflow">
               {changeset.description}

scm-ui/src/repos/components/ChangesetTable.js

@@ -1,21 +0,0 @@
-// @flow
-import ChangesetRow from "./ChangesetRow";
-import React from "react";
-import type { Changeset } from "@scm-manager/ui-types";
-import classNames from "classnames";
-
-type Props = {
-  changesets: Changeset[]
-};
-
-class ChangesetTable extends React.Component<Props> {
-  render() {
-    const { changesets } = this.props;
-    const content = changesets.map((changeset, index) => {
-      return <ChangesetRow key={index} changeset={changeset} />;
-    });
-    return <div className={classNames("box")}>{content}</div>;
-  }
-}
-
-export default ChangesetTable;

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

@@ -22,7 +22,7 @@ import {
   getBranchNames
 } from "../../repos/modules/branches";
 import type { PagedCollection, Repository } from "@scm-manager/ui-types";
-import ChangesetTable from "../components/ChangesetTable";
+import ChangesetList from "../components/ChangesetList";
 import DropDown from "../components/DropDown";
 import { withRouter } from "react-router-dom";
 
@@ -84,7 +84,7 @@ class Changesets extends React.Component<State, Props> {
 
   renderTable = () => {
     const branch = this.props.match.params.branch;
-    const { changesets, branchNames } = this.props;
+    const { repository, changesets, branchNames } = this.props;
 
     if (branchNames && branchNames.length > 0) {
       return (
@@ -95,12 +95,12 @@ class Changesets extends React.Component<State, Props> {
             preselectedOption={branch}
             optionSelected={branch => this.branchChanged(branch)}
           />
-          <ChangesetTable changesets={changesets} />
+          <ChangesetList repository={repository} changesets={changesets} />
         </div>
       );
     }
 
-    return <ChangesetTable changesets={changesets} />;
+    return <ChangesetList changesets={changesets} />;
   };
 
   renderPaginator() {