From 53993cfee7d41c9ef24215d947751f748721a224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Tue, 30 Jun 2020 18:11:23 +0200 Subject: [PATCH] Introduce new extension point for changeset description This new extension point will only be rendered when the old extension point is not bound. --- scm-ui/ui-components/src/SplitAndReplace.tsx | 4 +- .../src/__resources__/changesets.tsx | 50 ++++++++++++++++++- scm-ui/ui-components/src/index.ts | 1 + .../repos/changesets/ChangesetDescription.tsx | 45 +++++++++++++++++ .../src/repos/changesets/ChangesetRow.tsx | 15 +++--- .../repos/changesets/Changesets.stories.tsx | 48 +++++++++++------- .../src/repos/changesets/index.ts | 1 + .../changesets/ChangesetDetails.tsx | 7 +-- 8 files changed, 141 insertions(+), 30 deletions(-) create mode 100644 scm-ui/ui-components/src/repos/changesets/ChangesetDescription.tsx diff --git a/scm-ui/ui-components/src/SplitAndReplace.tsx b/scm-ui/ui-components/src/SplitAndReplace.tsx index 213e9ff5d5..9db88e9aaa 100644 --- a/scm-ui/ui-components/src/SplitAndReplace.tsx +++ b/scm-ui/ui-components/src/SplitAndReplace.tsx @@ -24,10 +24,10 @@ import React, { FC, ReactNode } from "react"; import textSplitAndReplace from "./textSplitAndReplace"; -type Replacement = { +export type Replacement = { textToReplace: string; replacement: ReactNode; - replaceAll: boolean; + replaceAll?: boolean; }; type Props = { diff --git a/scm-ui/ui-components/src/__resources__/changesets.tsx b/scm-ui/ui-components/src/__resources__/changesets.tsx index e53f6a9545..2743378ad4 100644 --- a/scm-ui/ui-components/src/__resources__/changesets.tsx +++ b/scm-ui/ui-components/src/__resources__/changesets.tsx @@ -218,6 +218,54 @@ const four: Changeset = { } }; +const five: Changeset = { + id: "d21cc6c359270aef2196796f4d96af65f51866dc", + author: { mail: "scm-admin@scm-manager.org", name: "SCM Administrator" }, + date: new Date("2020-06-09T05:39:50Z"), + description: "HOG-42 Change mail to arthur@guide.galaxy\n\n", + _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 changesets: PagedCollection = { page: 0, pageTotal: 1, @@ -246,5 +294,5 @@ const changesets: PagedCollection = { } }; -export { one, two, three, four }; +export { one, two, three, four, five }; export default changesets; diff --git a/scm-ui/ui-components/src/index.ts b/scm-ui/ui-components/src/index.ts index 19ba35a1f4..9a8049a7bd 100644 --- a/scm-ui/ui-components/src/index.ts +++ b/scm-ui/ui-components/src/index.ts @@ -78,6 +78,7 @@ export { default as CardColumnGroup } from "./CardColumnGroup"; export { default as CardColumn } from "./CardColumn"; export { default as CardColumnSmall } from "./CardColumnSmall"; export { default as CommaSeparatedList } from "./CommaSeparatedList"; +export { default as SplitAndReplace, Replacement } from "./SplitAndReplace"; export { default as comparators } from "./comparators"; diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetDescription.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetDescription.tsx new file mode 100644 index 0000000000..0e80212a27 --- /dev/null +++ b/scm-ui/ui-components/src/repos/changesets/ChangesetDescription.tsx @@ -0,0 +1,45 @@ +/* + * 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"; +import { useBinder } from "@scm-manager/ui-extensions"; +import { SplitAndReplace, Replacement } from "@scm-manager/ui-components"; + +type Props = { + changeset: Changeset; + value: string; +}; + +const ChangesetDescription: FC = ({ changeset, value }) => { + const binder = useBinder(); + + const replacements: Replacement[][] = binder.getExtensions("changeset.description.tokens", { + changeset, + value + }); + return r)} />; +}; + +export default ChangesetDescription; diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx index 0956f7f131..46a30a6fd4 100644 --- a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx +++ b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx @@ -34,6 +34,7 @@ import ChangesetId from "./ChangesetId"; import ChangesetAuthor from "./ChangesetAuthor"; import ChangesetTags from "./ChangesetTags"; import ChangesetButtonGroup from "./ChangesetButtonGroup"; +import ChangesetDescription from "./ChangesetDescription"; type Props = WithTranslation & { repository: Repository; @@ -100,7 +101,7 @@ class ChangesetRow extends React.Component { - + @@ -114,28 +115,28 @@ class ChangesetRow extends React.Component { }} renderAll={false} > - {description.title} +

- +

- +

- + - + - + { return `https://robohash.org/${person.mail}`; -} +}; const withAvatarFactory = (factory: (person: Person) => string, changeset: Changeset) => { const binder = new Binder("changeset stories"); @@ -53,21 +54,23 @@ const withAvatarFactory = (factory: (person: Person) => string, changeset: Chang ); }; +const withReplacements = (replacements: Replacement[][], changeset: Changeset) => { + const binder = new Binder("changeset stories"); + replacements.forEach(replacement => binder.bind("changeset.description.tokens", replacement)); + return ( + + + + ); +}; + storiesOf("Changesets", module) .addDecorator(story => {story()}) .addDecorator(storyFn => {storyFn()}) - .add("Default", () => ( - - )) - .add("With Committer", () => ( - - )) - .add("With Committer and Co-Author", () => ( - - )) - .add("With multiple Co-Authors", () => ( - - )) + .add("Default", () => ) + .add("With Committer", () => ) + .add("With Committer and Co-Author", () => ) + .add("With multiple Co-Authors", () => ) .add("With avatar", () => { return withAvatarFactory(person => hitchhiker, three); }) @@ -76,4 +79,15 @@ storiesOf("Changesets", module) }) .add("Co-Authors with avatar", () => { return withAvatarFactory(robohash, four); + }) + .add("Replacements", () => { + const link = HOG-42; + const mail = Arthur; + return withReplacements( + [ + [{ textToReplace: "HOG-42", replacement: link }], + [{ textToReplace: "arthur@guide.galaxy", replacement: mail }] + ], + five + ); }); diff --git a/scm-ui/ui-components/src/repos/changesets/index.ts b/scm-ui/ui-components/src/repos/changesets/index.ts index b4c83dd4c3..3fb6b39c72 100644 --- a/scm-ui/ui-components/src/repos/changesets/index.ts +++ b/scm-ui/ui-components/src/repos/changesets/index.ts @@ -27,6 +27,7 @@ export { changesets }; export { default as ChangesetAuthor, SingleContributor } from "./ChangesetAuthor"; export { default as ChangesetButtonGroup } from "./ChangesetButtonGroup"; +export { default as ChangesetDescription } from "./ChangesetDescription"; export { default as ChangesetDiff } from "./ChangesetDiff"; export { default as ChangesetId } from "./ChangesetId"; export { default as ChangesetList } from "./ChangesetList"; 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 6ba44c0c1d..657c47249d 100644 --- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx +++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx @@ -32,6 +32,7 @@ import { AvatarWrapper, Button, ChangesetAuthor, + ChangesetDescription, ChangesetDiff, ChangesetId, changesets, @@ -106,7 +107,7 @@ const ContributorToggleLine = styled.p` const ChangesetSummary = styled.div` display: flex; justify-content: space-between; -` +`; const SeparatedParents = styled.div` margin-left: 1em; @@ -180,7 +181,7 @@ class ChangesetDetails extends React.Component { }} renderAll={false} > - {description.title} +
@@ -217,7 +218,7 @@ class ChangesetDetails extends React.Component { }} renderAll={false} > - {item} +