improve display of committer and co-authors in changeset overview

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> {
-  render() {
-    const { changeset } = this.props;
-    if (!changeset.author) {
-      return null;
-    }
+type PersonType = {
+  name: string;
+  mail?: string;
+};
 
-    const { name, mail } = changeset.author;
-    if (mail) {
-      return this.withExtensionPoint(this.renderWithMail(name, mail));
-    }
-    return this.withExtensionPoint(<>{name}</>);
-  }
+type PersonProps = {
+  person: PersonType;
+};
 
-  renderWithMail(name: string, mail: string) {
-    const { t } = this.props;
+const Person: FC<PersonProps> = ({ person }) => {
+  const [t] = useTranslation("repos");
+  if (person.mail) {
     return (
-      <a href={"mailto:" + mail} title={t("changeset.author.mailto") + " " + mail}>
-        {name}
+      <a href={"mailto:" + person.mail} title={t("changeset.author.mailto") + " " + person.mail}>
+        {person.name}
       </a>
     );
   }
+  return <>{person.name}</>;
+};
 
-  getCoAuthorsFromChangeset() {
-    return this.props.changeset.trailers.filter(p => p.trailerType === "Co-authored-by").map(trailer => trailer.person);
-  }
+type PersonsProps = {
+  persons: PersonType[];
+  label: string;
+};
 
-  renderCoAuthors() {
-    const { t } = this.props;
-    const coAuthors = this.getCoAuthorsFromChangeset();
-
-    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;
+const Persons: FC<PersonsProps> = ({ persons, label }) => {
+  const [t] = useTranslation("repos");
+  if (persons.length === 1) {
     return (
       <>
-        {t("changeset.author.prefix")} {child}
-        {this.renderCoAuthors()}
+        {t(label)} <Person person={persons[0]} />
       </>
     );
   }
+  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);