From a7585b4fc0252319d51139419a6d80c6c4d28842 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Mon, 8 Jun 2020 14:32:06 +0200 Subject: [PATCH] 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/public/locales/de/repos.json | 9 -- scm-ui/ui-webapp/public/locales/en/repos.json | 10 --- .../changesets/ChangesetDetails.tsx | 58 +------------ .../changesets/ContributorTable.tsx | 87 +++++++++++++++++++ .../main/resources/locales/de/plugins.json | 11 +++ .../main/resources/locales/en/plugins.json | 11 +++ 6 files changed, 111 insertions(+), 75 deletions(-) create mode 100644 scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json index ac1ceee497..b24089af5b 100644 --- a/scm-ui/ui-webapp/public/locales/de/repos.json +++ b/scm-ui/ui-webapp/public/locales/de/repos.json @@ -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": { diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json index fc3158dbaf..9bbc57ff19 100644 --- a/scm-ui/ui-webapp/public/locales/en/repos.json +++ b/scm-ui/ui-webapp/public/locales/en/repos.json @@ -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": { diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx index 84f506749b..4f6cce71ae 100644 --- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx +++ b/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 { constructor(props: Props) { super(props); @@ -74,28 +71,6 @@ class ChangesetDetails extends React.Component { }; } - 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 { const id = ; const date = ; - const trailersByType = this.getTrailersByType(); - - const trailerTable = ( - - - {t("changeset.author.label") + ":"} - - - {trailersByType.map(trailer => ( - - {t("changeset.trailer.type." + trailer.type) + ":"} - - - ))} -
- - {changeset?.author?.name} - -
- {trailer.persons - .map(person => ( - - {person.name} - - )) - .reduce((prev, curr) => [prev, ", ", curr])} -
- ); - return ( <>
@@ -155,7 +101,7 @@ class ChangesetDetails extends React.Component {
- {trailerTable} +

diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx new file mode 100644 index 0000000000..13e1a19a59 --- /dev/null +++ b/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx @@ -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 = ({ 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 ( + + + {t("changeset.trailer.type.author") + ":"} + + + {getTrailersByType().map(trailer => ( + + {t("changeset.trailer.type." + trailer.type) + ":"} + + + ))} +
+ + {changeset?.author?.name} + +
+ {trailer.persons + .map(person => ( + + {person.name} + + )) + .reduce((prev, curr) => [prev, ", ", curr])} +
+ ); +}; + +export default ContributorTable; diff --git a/scm-webapp/src/main/resources/locales/de/plugins.json b/scm-webapp/src/main/resources/locales/de/plugins.json index 77b6aadb8a..0aa96adf14 100644 --- a/scm-webapp/src/main/resources/locales/de/plugins.json +++ b/scm-webapp/src/main/resources/locales/de/plugins.json @@ -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", diff --git a/scm-webapp/src/main/resources/locales/en/plugins.json b/scm-webapp/src/main/resources/locales/en/plugins.json index 1cce4f266e..f42133c4af 100644 --- a/scm-webapp/src/main/resources/locales/en/plugins.json +++ b/scm-webapp/src/main/resources/locales/en/plugins.json @@ -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",