From 483637067de45dd5090fd072881f6552a45b1360 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Thu, 4 Apr 2019 11:43:30 +0200 Subject: [PATCH 1/3] Use library query-string to parse query parameters --- scm-ui/package.json | 1 + .../repos/branches/containers/CreateBranch.js | 40 ++++++++++++------- scm-ui/yarn.lock | 13 +++++- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/scm-ui/package.json b/scm-ui/package.json index 78c7b0e684..c9b3929570 100644 --- a/scm-ui/package.json +++ b/scm-ui/package.json @@ -20,6 +20,7 @@ "moment": "^2.22.2", "node-sass": "^4.9.3", "postcss-easy-import": "^3.0.0", + "query-string": "5", "react": "^16.4.2", "react-diff-view": "^1.8.1", "react-dom": "^16.4.2", diff --git a/scm-ui/src/repos/branches/containers/CreateBranch.js b/scm-ui/src/repos/branches/containers/CreateBranch.js index b477d13a51..b801c98f1c 100644 --- a/scm-ui/src/repos/branches/containers/CreateBranch.js +++ b/scm-ui/src/repos/branches/containers/CreateBranch.js @@ -1,6 +1,10 @@ //@flow import React from "react"; -import { ErrorNotification, Loading, Subtitle } from "@scm-manager/ui-components"; +import { + ErrorNotification, + Loading, + Subtitle +} from "@scm-manager/ui-components"; import { translate } from "react-i18next"; import BranchForm from "../components/BranchForm"; import type { Repository, Branch } from "@scm-manager/ui-types"; @@ -10,11 +14,14 @@ import { createBranch, createBranchReset, isCreateBranchPending, - getCreateBranchFailure, isFetchBranchesPending, getFetchBranchesFailure + getCreateBranchFailure, + isFetchBranchesPending, + getFetchBranchesFailure } from "../modules/branches"; import type { History } from "history"; import { connect } from "react-redux"; -import {withRouter} from "react-router-dom"; +import { withRouter } from "react-router-dom"; +import queryString from "query-string"; type Props = { loading?: boolean, @@ -49,10 +56,9 @@ class CreateBranch extends React.Component { this.props.createBranch(branch, () => this.branchCreated(branch)); }; - matchesTransmittedName = (search: string) => { - const regex = new RegExp("\\?name=.+"); - const match = search.match(regex); - return match ? match[0].substring(6, 0): null; + matchesTransmittedName = (url: string) => { + const params = queryString.parse(url); + return params.name; }; render() { @@ -62,8 +68,8 @@ class CreateBranch extends React.Component { return ; } - if(!branches) { - return ; + if (!branches) { + return ; } return ( @@ -101,8 +107,10 @@ const mapDispatchToProps = dispatch => { const mapStateToProps = (state, ownProps) => { const { repository } = ownProps; - const loading = isFetchBranchesPending(state, repository) || isCreateBranchPending(state); - const error = getFetchBranchesFailure(state, repository) || getCreateBranchFailure(state); + const loading = + isFetchBranchesPending(state, repository) || isCreateBranchPending(state); + const error = + getFetchBranchesFailure(state, repository) || getCreateBranchFailure(state); const branches = getBranches(state, repository); return { repository, @@ -112,7 +120,9 @@ const mapStateToProps = (state, ownProps) => { }; }; -export default withRouter(connect( - mapStateToProps, - mapDispatchToProps -)(translate("repos")(CreateBranch))); +export default withRouter( + connect( + mapStateToProps, + mapDispatchToProps + )(translate("repos")(CreateBranch)) +); diff --git a/scm-ui/yarn.lock b/scm-ui/yarn.lock index 4440b28f6c..c540d0329f 100644 --- a/scm-ui/yarn.lock +++ b/scm-ui/yarn.lock @@ -701,7 +701,6 @@ "@scm-manager/ui-bundler@^0.0.27": version "0.0.27" resolved "https://registry.yarnpkg.com/@scm-manager/ui-bundler/-/ui-bundler-0.0.27.tgz#3ed2c7826780b9a1a9ea90464332640cfb5d54b5" - integrity sha512-cBU1xq6gDy1Vw9AGOzsR763+JmBeraTaC/KQfxT3I6XyZJ2brIfG1m5QYcAcHWvDxq3mYMogpI5rfShw14L4/w== dependencies: "@babel/core" "^7.0.0" "@babel/plugin-proposal-class-properties" "^7.0.0" @@ -6832,6 +6831,14 @@ qs@~6.5.1, qs@~6.5.2: version "6.5.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" +query-string@5: + version "5.1.1" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb" + dependencies: + decode-uri-component "^0.2.0" + object-assign "^4.1.0" + strict-uri-encode "^1.0.0" + querystring-es3@~0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -7991,6 +7998,10 @@ stream-throttle@^0.1.3: commander "^2.2.0" limiter "^1.0.5" +strict-uri-encode@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" + string-length@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed" From f606c10cfbffa7264519e2e16ab82d42aead4faf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Thu, 4 Apr 2019 11:55:01 +0200 Subject: [PATCH 2/3] Use query-string to check for create flag --- .../repos/branches/containers/BranchRoot.js | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/scm-ui/src/repos/branches/containers/BranchRoot.js b/scm-ui/src/repos/branches/containers/BranchRoot.js index 2e9fb10f73..7e1fa62c39 100644 --- a/scm-ui/src/repos/branches/containers/BranchRoot.js +++ b/scm-ui/src/repos/branches/containers/BranchRoot.js @@ -13,6 +13,7 @@ import { import { ErrorNotification, Loading } from "@scm-manager/ui-components"; import type { History } from "history"; import { NotFoundError } from "@scm-manager/ui-components"; +import queryString from "query-string"; type Props = { repository: Repository, @@ -49,25 +50,25 @@ class BranchRoot extends React.Component { }; render() { - const { - repository, - branch, - loading, - error, - match, - location - } = this.props; + const { repository, branch, loading, error, match, location } = this.props; const url = this.matchedUrl(); if (error) { - if(error instanceof NotFoundError && location.search.indexOf("?create=true") > -1) { - return ; + if ( + error instanceof NotFoundError && + queryString.parse(location.search).create === "true" + ) { + return ( + + ); } - return ( - - ); + return ; } if (loading || !branch) { From 03e25086a7f5302eb2df296f8c6fba5135fe19c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Thu, 4 Apr 2019 13:03:51 +0200 Subject: [PATCH 3/3] Use transmitted branch name --- scm-ui/src/repos/branches/components/BranchForm.js | 6 ++++-- scm-ui/src/repos/branches/containers/CreateBranch.js | 9 ++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/scm-ui/src/repos/branches/components/BranchForm.js b/scm-ui/src/repos/branches/components/BranchForm.js index 67440620cb..2938b06a2a 100644 --- a/scm-ui/src/repos/branches/components/BranchForm.js +++ b/scm-ui/src/repos/branches/components/BranchForm.js @@ -30,7 +30,8 @@ class BranchForm extends React.Component { super(props); this.state = { - nameValidationError: false + nameValidationError: false, + name: props.transmittedName }; } @@ -55,7 +56,7 @@ class BranchForm extends React.Component { }; render() { - const { t, branches, loading } = this.props; + const { t, branches, loading, transmittedName } = this.props; const { name } = this.state; orderBranches(branches); const options = branches.map(branch => ({ @@ -82,6 +83,7 @@ class BranchForm extends React.Component { value={name ? name : ""} validationError={this.state.nameValidationError} errorMessage={t("validation.branch.nameInvalid")} + disabled={!!transmittedName} /> diff --git a/scm-ui/src/repos/branches/containers/CreateBranch.js b/scm-ui/src/repos/branches/containers/CreateBranch.js index b801c98f1c..1b0ef76408 100644 --- a/scm-ui/src/repos/branches/containers/CreateBranch.js +++ b/scm-ui/src/repos/branches/containers/CreateBranch.js @@ -56,7 +56,7 @@ class CreateBranch extends React.Component { this.props.createBranch(branch, () => this.branchCreated(branch)); }; - matchesTransmittedName = (url: string) => { + transmittedName = (url: string) => { const params = queryString.parse(url); return params.name; }; @@ -68,7 +68,7 @@ class CreateBranch extends React.Component { return ; } - if (!branches) { + if (loading || !branches) { return ; } @@ -80,7 +80,7 @@ class CreateBranch extends React.Component { loading={loading} repository={repository} branches={branches} - transmittedName={this.matchesTransmittedName(location.search)} + transmittedName={this.transmittedName(location.search)} /> ); @@ -107,8 +107,7 @@ const mapDispatchToProps = dispatch => { const mapStateToProps = (state, ownProps) => { const { repository } = ownProps; - const loading = - isFetchBranchesPending(state, repository) || isCreateBranchPending(state); + const loading = isFetchBranchesPending(state, repository); //|| isCreateBranchPending(state); const error = getFetchBranchesFailure(state, repository) || getCreateBranchFailure(state); const branches = getBranches(state, repository);