move changesets and avatar components to ui-components

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

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

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

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

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

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

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

@@ -0,0 +1,98 @@
+//@flow
+import React from "react";
+import type { Changeset, Repository, Tag } from "@scm-manager/ui-types";
+
+import classNames from "classnames";
+import {Interpolate, translate} from "react-i18next";
+import ChangesetId from "./ChangesetId";
+import injectSheet from "react-jss";
+import {DateFromNow} from "../..";
+import ChangesetAuthor from "./ChangesetAuthor";
+import ChangesetTag from "./ChangesetTag";
+
+import {parseDescription} from "./changesets";
+import {AvatarWrapper, AvatarImage} from "../../avatar";
+
+const styles = {
+  pointer: {
+    cursor: "pointer"
+  },
+  changesetGroup: {
+    marginBottom: "1em"
+  },
+  withOverflow: {
+    overflow: "auto"
+  }
+};
+
+type Props = {
+  repository: Repository,
+  changeset: Changeset,
+  t: any,
+  classes: any
+};
+
+class ChangesetRow extends React.Component<Props> {
+  createLink = (changeset: Changeset) => {
+    const { repository } = this.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} />;
+    const description = parseDescription(changeset.description);
+
+    return (
+      <article className={classNames("media", classes.inner)}>
+        <AvatarWrapper>
+          <div>
+            <figure className="media-left">
+              <p className="image is-64x64">
+                <AvatarImage person={changeset.author} />
+              </p>
+            </figure>
+          </div>
+        </AvatarWrapper>
+        <div className={classNames("media-content", classes.withOverflow)}>
+          <div className="content">
+            <p className="is-ellipsis-overflow">
+              <strong>{description.title}</strong>
+              <br />
+              <Interpolate
+                i18nKey="changesets.changeset.summary"
+                id={changesetLink}
+                time={dateFromNow}
+              />
+            </p>{" "}
+            <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 key={tag.name} tag={tag} />;
+          })}
+        </div>
+      );
+    }
+    return null;
+  };
+}
+
+export default injectSheet(styles)(translate("repos")(ChangesetRow));

scm-ui-components/packages/ui-components/src/repos/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);

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

@@ -0,0 +1,25 @@
+// @flow
+export type Description = {
+  title: string,
+  message: string
+};
+
+export function parseDescription(description?: string): Description {
+  const desc = description ? description : "";
+  const lineBreak = desc.indexOf("\n");
+
+  let title;
+  let message = "";
+
+  if (lineBreak > 0) {
+    title = desc.substring(0, lineBreak);
+    message = desc.substring(lineBreak + 1);
+  } else {
+    title = desc;
+  }
+
+  return {
+    title,
+    message
+  };
+}

scm-ui-components/packages/ui-components/src/repos/changesets/changesets.test.js

@@ -0,0 +1,22 @@
+// @flow
+
+import {parseDescription} from "./changesets";
+
+describe("parseDescription tests", () => {
+  it("should return a description with title and message", () => {
+    const desc = parseDescription("Hello\nTrillian");
+    expect(desc.title).toBe("Hello");
+    expect(desc.message).toBe("Trillian");
+  });
+
+  it("should return a description with title and without message", () => {
+    const desc = parseDescription("Hello Trillian");
+    expect(desc.title).toBe("Hello Trillian");
+  });
+
+  it("should return an empty description for undefined", () => {
+    const desc = parseDescription();
+    expect(desc.title).toBe("");
+    expect(desc.message).toBe("");
+  });
+});

scm-ui-components/packages/ui-components/src/repos/changesets/index.js

@@ -0,0 +1,9 @@
+// @flow
+import * as changesets from "./changesets";
+export { changesets };
+
+export { default as ChangesetAuthor } from "./ChangesetAuthor";
+export { default as ChangesetId } from "./ChangesetId";
+export { default as ChangesetList } from "./ChangesetList";
+export { default as ChangesetRow } from "./ChangesetRow";
+export { default as ChangesetTag } from "./ChangesetTag";