improve display of committer and co-authors in changeset overview

scm-ui/ui-components/src/__resources__/changesets.tsx

@@ -0,0 +1,250 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Changeset, PagedCollection } from "@scm-manager/ui-types";
+
+const one: Changeset = {
+  id: "a88567ef1e9528a700555cad8c4576b72fc7c6dd",
+  author: { mail: "scm-admin@scm-manager.org", name: "SCM Administrator" },
+  date: new Date("2020-06-09T06:34:47Z"),
+  description:
+    "The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive. The craft was stolen by then-President Zaphod Beeblebrox at the official launch of the ship, as he was supposed to be officiating the launch. Later, during the use of the Infinite Improbability Drive, the ship picked up Arthur Dent and Ford Prefect, who were floating unprotected in deep space in the same star sector, having just escaped the destruction of the same planet.\n\n",
+  trailers: [
+    {
+      trailerType: "Committed-by",
+      person: { mail: "zaphod.beeblebrox@hitchhiker.cm", name: "Zaphod Beeblebrox" }
+    },
+    { trailerType: "Co-authored-by", person: { mail: "ford.prefect@hitchhiker.com", name: "Ford Prefect" } }
+  ],
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/changesets/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
+    },
+    diff: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
+    },
+    sources: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/sources/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
+    },
+    modifications: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/modifications/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
+    },
+    diffParsed: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/a88567ef1e9528a700555cad8c4576b72fc7c6dd/parsed"
+    }
+  },
+  _embedded: {
+    tags: [],
+    branches: [],
+    parents: [
+      {
+        id: "d21cc6c359270aef2196796f4d96af65f51866dc",
+        _links: {
+          self: {
+            href:
+              "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/changesets/d21cc6c359270aef2196796f4d96af65f51866dc"
+          },
+          diff: {
+            href:
+              "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/d21cc6c359270aef2196796f4d96af65f51866dc"
+          }
+        }
+      }
+    ]
+  }
+};
+
+const two: Changeset = {
+  id: "d21cc6c359270aef2196796f4d96af65f51866dc",
+  author: { mail: "scm-admin@scm-manager.org", name: "SCM Administrator" },
+  date: new Date("2020-06-09T05:39:50Z"),
+  description: 'Change heading to "Heart Of Gold"\n\n',
+  trailers: [
+    {
+      trailerType: "Committed-by",
+      person: { mail: "zaphod.beeblebrox@hitchhiker.cm", name: "Zaphod Beeblebrox" }
+    }
+  ],
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/changesets/d21cc6c359270aef2196796f4d96af65f51866dc"
+    },
+    diff: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/d21cc6c359270aef2196796f4d96af65f51866dc"
+    },
+    sources: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/sources/d21cc6c359270aef2196796f4d96af65f51866dc"
+    },
+    modifications: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/modifications/d21cc6c359270aef2196796f4d96af65f51866dc"
+    },
+    diffParsed: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/d21cc6c359270aef2196796f4d96af65f51866dc/parsed"
+    }
+  },
+  _embedded: {
+    tags: [],
+    branches: [],
+    parents: [
+      {
+        id: "e163c8f632db571c9aa51a8eb440e37cf550b825",
+        _links: {
+          self: {
+            href:
+              "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/changesets/e163c8f632db571c9aa51a8eb440e37cf550b825"
+          },
+          diff: {
+            href:
+              "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/e163c8f632db571c9aa51a8eb440e37cf550b825"
+          }
+        }
+      }
+    ]
+  }
+};
+
+const three: Changeset = {
+  id: "e163c8f632db571c9aa51a8eb440e37cf550b825",
+  author: { mail: "scm-admin@scm-manager.org", name: "SCM Administrator" },
+  date: new Date("2020-06-09T05:25:16Z"),
+  description: "initialize repository",
+  trailers: [],
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/changesets/e163c8f632db571c9aa51a8eb440e37cf550b825"
+    },
+    diff: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/e163c8f632db571c9aa51a8eb440e37cf550b825"
+    },
+    sources: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/sources/e163c8f632db571c9aa51a8eb440e37cf550b825"
+    },
+    modifications: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/modifications/e163c8f632db571c9aa51a8eb440e37cf550b825"
+    },
+    diffParsed: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/e163c8f632db571c9aa51a8eb440e37cf550b825/parsed"
+    }
+  },
+  _embedded: { tags: [], branches: [], parents: [] }
+};
+
+const four: Changeset = {
+  id: "b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930",
+  author: { mail: "scm-admin@scm-manager.org", name: "SCM Administrator" },
+  date: new Date("2020-06-09T09:23:49Z"),
+  description: "Added design docs\n\n",
+  trailers: [
+    { trailerType: "Co-authored-by", person: { mail: "ford.prefect@hitchhiker.com", name: "Ford Prefect" } },
+    { trailerType: "Co-authored-by", person: { mail: "zaphod.beeblebrox@hitchhiker.cm", name: "Zaphod Beeblebrox" } },
+    { trailerType: "Co-authored-by", person: { mail: "trillian@hitchhiker.cm", name: "Tricia Marie McMillan" } }
+  ],
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/changesets/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
+    },
+    diff: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
+    },
+    sources: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/sources/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
+    },
+    modifications: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/modifications/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930"
+    },
+    diffParsed: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/b6c6f8fbd0d490936fae7d26ffdd4695cc2a0930/parsed"
+    }
+  },
+  _embedded: {
+    tags: [],
+    branches: [],
+    parents: [
+      {
+        id: "a88567ef1e9528a700555cad8c4576b72fc7c6dd",
+        _links: {
+          self: {
+            href:
+              "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/changesets/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
+          },
+          diff: {
+            href:
+              "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/diff/a88567ef1e9528a700555cad8c4576b72fc7c6dd"
+          }
+        }
+      }
+    ]
+  }
+};
+
+const changesets: PagedCollection = {
+  page: 0,
+  pageTotal: 1,
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/branches/master/changesets/?page=0&pageSize=10"
+    },
+    first: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/branches/master/changesets/?page=0&pageSize=10"
+    },
+    last: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/branches/master/changesets/?page=0&pageSize=10"
+    }
+  },
+  _embedded: {
+    changesets: [one, two, three, four],
+    branch: {
+      name: "master",
+      _links: {
+        self: { href: "http://localhost:8081/scm/api/v2/repositories/hitchhiker/heart-of-gold/branches/master" }
+      }
+    }
+  }
+};
+
+export { one, two, three, four };
+export default changesets;

scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx

@@ -21,69 +21,117 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
 import { Changeset } from "@scm-manager/ui-types";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
+import { binder } from "@scm-manager/ui-extensions";
 
 type Props = WithTranslation & {
   changeset: Changeset;
 };
 
-class ChangesetAuthor extends React.Component<Props> {
+type PersonType = {
-  render() {
+  name: string;
-    const { changeset } = this.props;
+  mail?: string;
-    if (!changeset.author) {
+};
-      return null;
-    }
 
-    const { name, mail } = changeset.author;
+type PersonProps = {
-    if (mail) {
+  person: PersonType;
-      return this.withExtensionPoint(this.renderWithMail(name, mail));
+};
-    }
-    return this.withExtensionPoint(<>{name}</>);
-  }
 
-  renderWithMail(name: string, mail: string) {
+const Person: FC<PersonProps> = ({ person }) => {
-    const { t } = this.props;
+  const [t] = useTranslation("repos");
+  if (person.mail) {
     return (
-      <a href={"mailto:" + mail} title={t("changeset.author.mailto") + " " + mail}>
+      <a href={"mailto:" + person.mail} title={t("changeset.author.mailto") + " " + person.mail}>
-        {name}
+        {person.name}
       </a>
     );
   }
+  return <>{person.name}</>;
+};
 
-  getCoAuthorsFromChangeset() {
+type PersonsProps = {
-    return this.props.changeset.trailers.filter(p => p.trailerType === "Co-authored-by").map(trailer => trailer.person);
+  persons: PersonType[];
-  }
+  label: string;
+};
 
-  renderCoAuthors() {
+const Persons: FC<PersonsProps> = ({ persons, label }) => {
-    const { t } = this.props;
+  const [t] = useTranslation("repos");
-    const coAuthors = this.getCoAuthorsFromChangeset();
+  if (persons.length === 1) {
-
-    if (coAuthors.length > 0) {
-      const authorLabel = t("changeset.coAuthor.label", { count: coAuthors.length });
-      return (
-        <>
-          {" " + t("changeset.coAuthor.prefix") + " "}
-          <a title={authorLabel + ":\n" + coAuthors.map(person => "- " + person.name).join("\n")}>
-            {coAuthors.length + " " + authorLabel}
-          </a>
-        </>
-      );
-    }
-
-    return null;
-  }
-
-  withExtensionPoint(child: any) {
-    const { t } = this.props;
     return (
       <>
-        {t("changeset.author.prefix")} {child}
+        {t(label)} <Person person={persons[0]} />
-        {this.renderCoAuthors()}
       </>
     );
   }
+  return (
+    <>
+      {t(label)}{" "}
+      <a title={label + ":\n" + persons.map(person => "- " + person.name).join("\n")}>
+        {t("changesets.authors.more", { count: persons.length })}
+      </a>
+    </>
+  );
+};
+
+class ChangesetAuthor extends React.Component<Props> {
+  render() {
+    const { changeset, t } = this.props;
+
+    const authorLine = [];
+
+    if (changeset.author) {
+      authorLine.push(<Persons persons={[changeset.author]} label={"changesets.authors.authoredBy"} />);
+    }
+
+    const commiters = this.getCommiters();
+    if (commiters.length > 0) {
+      authorLine.push(<Persons persons={commiters} label={"changesets.authors.committedBy"} />);
+    }
+
+    const coAuthors = this.getCoAuthors();
+    if (coAuthors.length > 0) {
+      authorLine.push(<Persons persons={coAuthors} label={"changesets.authors.coAuthoredBy"} />);
+    }
+
+    // extensions
+    const extensions = binder.getExtensions("changesets.author.suffix", this.props);
+    if (extensions) {
+      coAuthors.push(...extensions);
+    }
+
+    return (
+      <>
+        {authorLine.map((p, i) => {
+          if (i === 0) {
+            return <>{p}</>;
+          } else if (i + 1 === authorLine.length) {
+            return (
+              <>
+                {" "}
+                {t("changesets.authors.and")} {p}{" "}
+              </>
+            );
+          } else {
+            return <>, {p}</>;
+          }
+        })}
+      </>
+    );
+  }
+
+  getCoAuthors() {
+    return this.filterTrailersByType("Co-authored-by");
+  }
+
+  getCommiters() {
+    return this.filterTrailersByType("Committed-by");
+  }
+
+  filterTrailersByType(t: string) {
+    return this.props.changeset.trailers.filter(p => p.trailerType === t).map(trailer => trailer.person);
+  }
 }
 
 export default withTranslation("repos")(ChangesetAuthor);

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

@@ -123,7 +123,7 @@ class ChangesetRow extends React.Component<Props> {
                     <p className="is-hidden-desktop">
                       <Trans i18nKey="repos:changeset.shortSummary" components={[changesetId, dateFromNow]} />
                     </p>
-                    <AuthorWrapper className="is-size-7">
+                    <AuthorWrapper className="is-size-7 is-ellipsis-overflow">
                       <ChangesetAuthor changeset={changeset} />
                     </AuthorWrapper>
                   </Metadata>

scm-ui/ui-components/src/repos/changesets/Changesets.stories.tsx

@@ -0,0 +1,51 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+import styled from "styled-components";
+import { MemoryRouter } from "react-router-dom";
+import repository from "../../__resources__/repository";
+import ChangesetRow from "./ChangesetRow";
+import {one, two, three, four} from "../../__resources__/changesets";
+
+const Wrapper = styled.div`
+  margin: 2rem;
+`;
+
+storiesOf("Changesets", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(storyFn => <Wrapper className="box box-link-shadow">{storyFn()}</Wrapper>)
+  .add("Default", () => (
+    <ChangesetRow repository={repository} changeset={three} />
+  ))
+  .add("With Committer", () => (
+    <ChangesetRow repository={repository} changeset={two} />
+  ))
+  .add("With Committer and Co-Author", () => (
+    <ChangesetRow repository={repository} changeset={one} />
+  ))
+  .add("With multiple Co-Authors", () => (
+    <ChangesetRow repository={repository} changeset={four} />
+  ));

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -79,7 +79,14 @@
     "errorSubtitle": "Could not fetch changesets",
     "noChangesets": "No changesets found for this branch. The commits could have been removed.",
     "branchSelectorLabel": "Branches",
-    "collapseDiffs": "Collapse"
+    "collapseDiffs": "Collapse",
+    "authors": {
+      "and": "and",
+      "authoredBy": "Authored by",
+      "committedBy": "committed by",
+      "coAuthoredBy": "co authored by",
+      "more": "{{count}} more"
+    }
   },
   "changeset": {
     "description": "Description",