Move trailers to own component

We have to use a dedicated component because we have to use the
translations from 'plugins', so that other plugins can contribute their
own trailer types with their own descriptions.

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -38,6 +38,7 @@ import {
   DateFromNow,
   Level
 } from "@scm-manager/ui-components";
+import ContributorTable from "./ContributorTable";
 
 type Props = WithTranslation & {
   changeset: Changeset;
@@ -62,10 +63,6 @@ const BottomMarginLevel = styled(Level)`
   margin-bottom: 1rem !important;
 `;
 
-const SizedTd = styled.td`
-  width: 10rem;
-`;
-
 class ChangesetDetails extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -74,28 +71,6 @@ class ChangesetDetails extends React.Component<Props, State> {
     };
   }
 
-  collectAvailableTrailerTypes() {
-    const { changeset } = this.props;
-
-    // @ts-ignore
-    return [...new Set(changeset.trailers.map(trailer => trailer.trailerType))];
-  }
-
-  getPersonsByTrailersType(type: string) {
-    const { changeset } = this.props;
-    return changeset.trailers?.filter(trailer => trailer.trailerType === type).map(t => t.person);
-  }
-
-  getTrailersByType() {
-    const availableTrailerTypes: string[] = this.collectAvailableTrailerTypes();
-
-    const personsByTrailerType = [];
-    for (const type of availableTrailerTypes) {
-      personsByTrailerType.push({ type, persons: this.getPersonsByTrailersType(type) });
-    }
-    return personsByTrailerType;
-  }
-
   render() {
     const { changeset, repository, t } = this.props;
     const { collapsed } = this.state;
@@ -104,35 +79,6 @@ class ChangesetDetails extends React.Component<Props, State> {
     const id = <ChangesetId repository={repository} changeset={changeset} link={false} />;
     const date = <DateFromNow date={changeset.date} />;
 
-    const trailersByType = this.getTrailersByType();
-
-    const trailerTable = (
-      <table>
-        <tr>
-          <SizedTd>{t("changeset.author.label") + ":"}</SizedTd>
-          <td>
-            <a title={changeset?.author?.mail} href={"mailto:" + changeset?.author?.mail}>
-              {changeset?.author?.name}
-            </a>
-          </td>
-        </tr>
-        {trailersByType.map(trailer => (
-          <tr>
-            <SizedTd>{t("changeset.trailer.type." + trailer.type) + ":"}</SizedTd>
-            <td className="shorten-text is-marginless">
-              {trailer.persons
-                .map(person => (
-                  <a title={person.mail} href={"mailto:" + person.mail}>
-                    {person.name}
-                  </a>
-                ))
-                .reduce((prev, curr) => [prev, ", ", curr])}
-            </td>
-          </tr>
-        ))}
-      </table>
-    );
-
     return (
       <>
         <div className={classNames("content", "is-marginless")}>
@@ -155,7 +101,7 @@ class ChangesetDetails extends React.Component<Props, State> {
               </RightMarginP>
             </AvatarWrapper>
             <div className="media-content">
-              {trailerTable}
+              <ContributorTable changeset={changeset} />
               <p>
                 <Trans i18nKey="repos:changeset.summary" components={[id, date]} />
               </p>