render tags

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

@@ -8,6 +8,7 @@ import ChangesetId from "./ChangesetId";
 import injectSheet from "react-jss";
 import { DateFromNow } from "@scm-manager/ui-components";
 import ChangesetAuthor from "./ChangesetAuthor";
+import ChangesetTag from "./ChangesetTag";
 
 const styles = {
   pointer: {
@@ -34,11 +35,17 @@ class ChangesetRow extends React.Component<Props> {
     return <ChangesetId changeset={changeset} repository={repository} />;
   };
 
+  getTags = () => {
+    const { changeset } = this.props;
+    return changeset._embedded.tags || [];
+  };
+
   render() {
     const { changeset, classes } = this.props;
     const changesetLink = this.createLink(changeset);
     const dateFromNow = <DateFromNow date={changeset.date} />;
     const authorLine = <ChangesetAuthor changeset={changeset} />;
+
     return (
       <article className={classNames("media", classes.inner)}>
         <ChangesetAvatar changeset={changeset} />
@@ -56,9 +63,24 @@ class ChangesetRow extends React.Component<Props> {
             <div className="is-size-7">{authorLine}</div>
           </div>
         </div>
+        {this.renderTags()}
       </article>
     );
   }
+
+  renderTags = () => {
+    const tags = this.getTags();
+    if (tags.length > 0) {
+      return (
+        <div className="media-right">
+          {tags.map((tag: Tag) => {
+            return <ChangesetTag tag={tag} />;
+          })}
+        </div>
+      );
+    }
+    return null;
+  };
 }
 
 export default injectSheet(styles)(translate("repos")(ChangesetRow));

scm-ui/src/repos/components/changesets/ChangesetTag.js

@@ -0,0 +1,32 @@
+//@flow
+import React from "react";
+import type { Tag } from "@scm-manager/ui-types";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+
+const styles = {
+  spacing: {
+    marginRight: "4px"
+  }
+};
+
+type Props = {
+  tag: Tag,
+
+  // context props
+  classes: Object
+};
+
+class ChangesetTag extends React.Component<Props> {
+  render() {
+    const { tag, classes } = this.props;
+    return (
+      <span className="tag is-info">
+        <span className={classNames("fa", "fa-tag", classes.spacing)} />{" "}
+        {tag.name}
+      </span>
+    );
+  }
+}
+
+export default injectSheet(styles)(ChangesetTag);