Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 06:55:47 +01:00
Code Issues Packages Projects Releases Activity

improve display of committer and co-authors in changeset overview

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-06-09 11:41:03 +02:00
parent a19840ad21
commit d61a60e1cd
5 changed files with 402 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
scm-ui/ui-components/src/__resources__/changesets.tsx Normal file
View File

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

130
scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
View File

@@ -21,68 +21,116 @@
* 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;
};
type PersonType = {
name: string;
mail?: string;
};
type PersonProps = {
person: PersonType;
};
const Person: FC<PersonProps> = ({ person }) => {
const [t] = useTranslation("repos");
if (person.mail) {
return (
<a href={"mailto:" + person.mail} title={t("changeset.author.mailto") + " " + person.mail}>
{person.name}
</a>
);
}
return <>{person.name}</>;
};
type PersonsProps = {
persons: PersonType[];
label: string;
};
const Persons: FC<PersonsProps> = ({ persons, label }) => {
const [t] = useTranslation("repos");
if (persons.length === 1) {
return (
<>
{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 } = this.props;
if (!changeset.author) {
return null;
const { changeset, t } = this.props;
const authorLine = [];
if (changeset.author) {
authorLine.push(<Persons persons={[changeset.author]} label={"changesets.authors.authoredBy"} />);
}
const { name, mail } = changeset.author;
if (mail) {
return this.withExtensionPoint(this.renderWithMail(name, mail));
}
return this.withExtensionPoint(<>{name}</>);
const commiters = this.getCommiters();
if (commiters.length > 0) {
authorLine.push(<Persons persons={commiters} label={"changesets.authors.committedBy"} />);
}
renderWithMail(name: string, mail: string) {
const { t } = this.props;
return (
<a href={"mailto:" + mail} title={t("changeset.author.mailto") + " " + mail}>
{name}
</a>
);
}
getCoAuthorsFromChangeset() {
return this.props.changeset.trailers.filter(p => p.trailerType === "Co-authored-by").map(trailer => trailer.person);
}
renderCoAuthors() {
const { t } = this.props;
const coAuthors = this.getCoAuthorsFromChangeset();
const coAuthors = this.getCoAuthors();
if (coAuthors.length > 0) {
const authorLabel = t("changeset.coAuthor.label", { count: coAuthors.length });
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 (
<>
{" " + t("changeset.coAuthor.prefix") + " "}
<a title={authorLabel + ":\n" + coAuthors.map(person => "- " + person.name).join("\n")}>
{coAuthors.length + " " + authorLabel}
</a>
{authorLine.map((p, i) => {
if (i === 0) {
return <>{p}</>;
} else if (i + 1 === authorLine.length) {
return (
<>
{" "}
{t("changesets.authors.and")} {p}{" "}
</>
);
} else {
return <>, {p}</>;
}
})}
</>
);
}
return null;
getCoAuthors() {
return this.filterTrailersByType("Co-authored-by");
}
withExtensionPoint(child: any) {
const { t } = this.props;
return (
<>
{t("changeset.author.prefix")} {child}
{this.renderCoAuthors()}
</>
);
getCommiters() {
return this.filterTrailersByType("Committed-by");
}
filterTrailersByType(t: string) {
return this.props.changeset.trailers.filter(p => p.trailerType === t).map(trailer => trailer.person);
}
}

2
scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
View File

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

51
scm-ui/ui-components/src/repos/changesets/Changesets.stories.tsx Normal file
View File

@@ -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} />
));

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

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