From 66bba0d9cfdd5dc7e7144a04fef38cfac3e15324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Wed, 19 Sep 2018 14:15:15 +0200
Subject: [PATCH] Add link to changeset id and use date from now

---
 .../src/changesets/components/ChangesetRow.js | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/scm-ui/src/changesets/components/ChangesetRow.js b/scm-ui/src/changesets/components/ChangesetRow.js
index 9892b0eb34..cb8691206a 100644
--- a/scm-ui/src/changesets/components/ChangesetRow.js
+++ b/scm-ui/src/changesets/components/ChangesetRow.js
@@ -1,10 +1,11 @@
 //@flow
 import React from "react";
-import type {Changeset} from "@scm-manager/ui-types";
+import type { Changeset } from "@scm-manager/ui-types";
 import classNames from "classnames";
-import {translate} from "react-i18next";
+import { translate, Interpolate } from "react-i18next";
 import ChangesetAvatar from "./ChangesetAvatar";
 import injectSheet from "react-jss";
+import { DateFromNow } from "@scm-manager/ui-components";
 
 const styles = {
   pointer: {
@@ -23,12 +24,13 @@ type Props = {
 
 class ChangesetRow extends React.Component<Props> {
   createLink = (changeset: Changeset) => {
-    return `/repo/changeset/${changeset.id}`;
+    return <a href={`/repo/changeset/${changeset.id}`}>{changeset.id}</a>;
   };
 
   render() {
     const { changeset, t, classes } = this.props;
     const changesetLink = this.createLink(changeset);
+    const dateFromNow = <DateFromNow date={changeset.date} />;
     const authorLine = (
       <>
         {changeset.author.name}{" "}
@@ -42,26 +44,26 @@ class ChangesetRow extends React.Component<Props> {
         </a>
       </>
     );
-    // todo: i18n
     return (
-        <article className={classNames("media", classes.inner)}>
-          <figure className="media-left">
-            <ChangesetAvatar changeset={changeset} />
-          </figure>
-          <div className="media-content">
-            <div className="content">
-              <p className="is-ellipsis-overflow">
-                {changeset.description}
-                <br />
-                {t("changeset.summary", {
-                  id: changeset.id,
-                  time: changeset.date
-                })}
-              </p>
-              <p className="is-size-7">{authorLine}</p>
-            </div>
+      <article className={classNames("media", classes.inner)}>
+        <figure className="media-left">
+          <ChangesetAvatar changeset={changeset} />
+        </figure>
+        <div className="media-content">
+          <div className="content">
+            <p className="is-ellipsis-overflow">
+              {changeset.description}
+              <br />
+              <Interpolate
+                i18nKey="changeset.summary"
+                id={changesetLink}
+                time={dateFromNow}
+              />
+            </p>{" "}
+            <p className="is-size-7">{authorLine}</p>
           </div>
-        </article>
+        </div>
+      </article>
     );
   }
 }