Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 15:35:49 +01:00
Code Issues Packages Projects Releases Activity

Move trailers to own component

Browse Source 
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.
This commit is contained in:
René Pfeuffer
2020-06-08 14:32:06 +02:00
parent 031605a327
commit a7585b4fc0
6 changed files with 111 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
scm-ui/ui-webapp/public/locales/de/repos.json
View File

@@ -100,15 +100,6 @@
"buttons": {
"details": "Details",
"sources": "Sources"
},
"trailer": {
"type": {
"Reviewed-by": "Reviewer",
"Co-authored-by": "Co-Autoren",
"Committed-by": "Committed von",
"Signed-off-by": "Signiert von",
"Pushed-by": "Pushed by"
}
}
},
"repositoryForm": {

10
scm-ui/ui-webapp/public/locales/en/repos.json
View File

@@ -100,16 +100,6 @@
"buttons": {
"details": "Details",
"sources": "Sources"
},
"trailer": {
"type": {
"Reviewed-by": "Reviewers",
"Co-authored-by": "Co-Authors",
"Committed-by": "Commit by",
"Signed-off-by": "Signed-off",
"Pushed-by": "Pushed by"
},
"person": "Person"
}
},
"repositoryForm": {

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

@@ -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>

87
scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx Normal file
View File

@@ -0,0 +1,87 @@
/*
* 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 React, { FC } from "react";
import { Changeset } from "@scm-manager/ui-types/src";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
type Props = {
changeset: Changeset;
};
const SizedTd = styled.td`
width: 10rem;
`;
const ContributorTable: FC<Props> = ({ changeset }) => {
const [t] = useTranslation("plugins");
const collectAvailableTrailerTypes = () => {
// @ts-ignore
return [...new Set(changeset.trailers.map(trailer => trailer.trailerType))];
};
const getPersonsByTrailersType = (type: string) => {
return changeset.trailers?.filter(trailer => trailer.trailerType === type).map(t => t.person);
};
const getTrailersByType = () => {
const availableTrailerTypes: string[] = collectAvailableTrailerTypes();
const personsByTrailerType = [];
for (const type of availableTrailerTypes) {
personsByTrailerType.push({ type, persons: getPersonsByTrailersType(type) });
}
return personsByTrailerType;
};
return (
<table>
<tr>
<SizedTd>{t("changeset.trailer.type.author") + ":"}</SizedTd>
<td>
<a title={changeset?.author?.mail} href={"mailto:" + changeset?.author?.mail}>
{changeset?.author?.name}
</a>
</td>
</tr>
{getTrailersByType().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>
);
};
export default ContributorTable;

11
scm-webapp/src/main/resources/locales/de/plugins.json
View File

@@ -1,4 +1,15 @@
{
"changeset": {
"trailer": {
"type": {
"author": "Autor",
"Reviewed-by": "Reviewer",
"Co-authored-by": "Co-Autoren",
"Committed-by": "Committed von",
"Signed-off-by": "Signiert von"
}
}
},
"permissions": {
"*": {
"displayName": "Globaler Administrator",

11
scm-webapp/src/main/resources/locales/en/plugins.json
View File

@@ -1,4 +1,15 @@
{
"changeset": {
"trailer": {
"type": {
"author": "Author",
"Reviewed-by": "Reviewers",
"Co-authored-by": "Co-Authors",
"Committed-by": "Commit by",
"Signed-off-by": "Signed-off"
}
}
},
"permissions": {
"*": {
"displayName": "Global administrator",