From 418b05abaa3a1884b2fa28daab2cc4ba2df6d7e7 Mon Sep 17 00:00:00 2001 From: Philipp Czora Date: Fri, 28 Sep 2018 14:30:26 +0200 Subject: [PATCH] Bootstrapped Diff-Component --- scm-ui/package.json | 1 + scm-ui/src/repos/containers/RepositoryRoot.js | 14 ++++++ scm-ui/src/repos/containers/ScmDiff.js | 44 +++++++++++++++++++ scm-ui/styles/scm.scss | 5 +++ scm-ui/yarn.lock | 26 ++++++++++- 5 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 scm-ui/src/repos/containers/ScmDiff.js diff --git a/scm-ui/package.json b/scm-ui/package.json index 50ae39cd29..bf34ddd5fc 100644 --- a/scm-ui/package.json +++ b/scm-ui/package.json @@ -16,6 +16,7 @@ "i18next-fetch-backend": "^0.1.0", "moment": "^2.22.2", "react": "^16.4.2", + "react-diff-view": "^1.7.0", "react-dom": "^16.4.2", "react-i18next": "^7.9.0", "react-jss": "^8.6.0", diff --git a/scm-ui/src/repos/containers/RepositoryRoot.js b/scm-ui/src/repos/containers/RepositoryRoot.js index 2816cdb5c5..69efd4a857 100644 --- a/scm-ui/src/repos/containers/RepositoryRoot.js +++ b/scm-ui/src/repos/containers/RepositoryRoot.js @@ -25,6 +25,7 @@ import Edit from "../containers/Edit"; import type { History } from "history"; import EditNavLink from "../components/EditNavLink"; +import ScmDiff from "./ScmDiff"; type Props = { namespace: string, @@ -101,6 +102,16 @@ class RepositoryRoot extends React.Component { path={`${url}/edit`} component={() => } /> + ( + + )} + />
@@ -112,6 +123,9 @@ class RepositoryRoot extends React.Component { +
+ +
diff --git a/scm-ui/src/repos/containers/ScmDiff.js b/scm-ui/src/repos/containers/ScmDiff.js new file mode 100644 index 0000000000..f8bf218812 --- /dev/null +++ b/scm-ui/src/repos/containers/ScmDiff.js @@ -0,0 +1,44 @@ +// @flow + +import React from "react"; +import { Diff, Hunk, parseDiff } from "react-diff-view"; +import { apiClient } from "@scm-manager/ui-components"; + +type Props = { + namespace: string, + name: string, + revision: string +}; + +class ScmDiff extends React.Component { + constructor(props: Props) { + super(props); + this.state = {}; + } + + componentDidMount() { + const { namespace, name, revision } = this.props; + const url = `http://localhost:8081/scm/api/rest/v2/repositories/${namespace}/${name}/diff/${revision}`; + apiClient + .get(url) + .then(response => response.text()) + .then(text => this.setState({ diff: text })) + .catch(error => this.setState({ error })); + } + + render() { + if (!this.state.diff || this.state.diff === "") { + return null; + } + const files = parseDiff(this.state.diff); + return ( +
+ {files.map(({ hunks }, i) => ( + + ))} +
+ ); + } +} + +export default ScmDiff; diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss index 43701de5eb..c5559a8697 100644 --- a/scm-ui/styles/scm.scss +++ b/scm-ui/styles/scm.scss @@ -1,6 +1,7 @@ @import "bulma/sass/utilities/initial-variables"; @import "bulma/sass/utilities/functions"; + $blue: #33B2E8; // $footer-background-color @@ -51,3 +52,7 @@ $blue: #33B2E8; @import "@fortawesome/fontawesome-free/scss/fontawesome.scss"; $fa-font-path: "webfonts"; @import "@fortawesome/fontawesome-free/scss/solid.scss"; +@import "react-diff-view/src/Change"; +@import "react-diff-view/src/Diff"; +@import "react-diff-view/src/Hunk"; +@import "react-diff-view/src/Widget"; diff --git a/scm-ui/yarn.lock b/scm-ui/yarn.lock index 26bfec8070..dd761cc3c3 100644 --- a/scm-ui/yarn.lock +++ b/scm-ui/yarn.lock @@ -1915,7 +1915,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5: +classnames@^2.2.5, classnames@^2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" @@ -3541,6 +3541,10 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" +gitdiff-parser@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/gitdiff-parser/-/gitdiff-parser-0.1.0.tgz#a8f4396e3dd61a8fc274040a2aa02bcf8d952f92" + glob-base@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4" @@ -5369,6 +5373,10 @@ lodash.escape@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98" +lodash.findlastindex@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.findlastindex/-/lodash.findlastindex-4.6.0.tgz#b8375ac0f02e9b926375cdf8dc3ea814abf9c6ac" + lodash.flattendeep@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" @@ -5401,6 +5409,10 @@ lodash.keys@^3.0.0: lodash.isarguments "^3.0.0" lodash.isarray "^3.0.0" +lodash.mapvalues@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c" + lodash.memoize@~3.0.3: version "3.0.4" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f" @@ -6716,6 +6728,18 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-diff-view@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/react-diff-view/-/react-diff-view-1.7.0.tgz#80c0c13aa1e77ddf71698b75b9aa9ef7cccb02a5" + dependencies: + classnames "^2.2.6" + gitdiff-parser "^0.1.0" + leven "^2.1.0" + lodash.escape "^4.0.1" + lodash.findlastindex "^4.6.0" + lodash.mapvalues "^4.6.0" + warning "^4.0.1" + react-dom@^16.4.2: version "16.4.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"