From 6c627bfe005fce88226e11499be1316ec6ebd141 Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Wed, 15 May 2019 16:41:14 +0200 Subject: [PATCH 1/3] update RepositoryRoleDetailsView --- .../roles/components/PermissionRoleDetail.js | 29 --------- .../roles/components/PermissionRoleDetails.js | 37 +++++++++++ .../components/PermissionRoleDetailsTable.js | 65 +++++++++++++++++++ .../roles/containers/SingleRepositoryRole.js | 55 +++++++++------- 4 files changed, 135 insertions(+), 51 deletions(-) delete mode 100644 scm-ui/src/config/roles/components/PermissionRoleDetail.js create mode 100644 scm-ui/src/config/roles/components/PermissionRoleDetails.js create mode 100644 scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetail.js b/scm-ui/src/config/roles/components/PermissionRoleDetail.js deleted file mode 100644 index 496443eef2..0000000000 --- a/scm-ui/src/config/roles/components/PermissionRoleDetail.js +++ /dev/null @@ -1,29 +0,0 @@ -//@flow -import React from "react"; -import { translate } from "react-i18next"; -import type { Role } from "@scm-manager/ui-types"; -import SystemRoleTag from "./SystemRoleTag"; - -type Props = { - role: Role, - - // context props - t: string => string, -}; - -class PermissionRoleDetail extends React.Component { - render() { - const { role, t } = this.props; - - return ( -
-
- {t("role.name")}: {role.name}{" "} - -
-
- ); - } -} - -export default translate("config")(PermissionRoleDetail); diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetails.js b/scm-ui/src/config/roles/components/PermissionRoleDetails.js new file mode 100644 index 0000000000..f4793cf067 --- /dev/null +++ b/scm-ui/src/config/roles/components/PermissionRoleDetails.js @@ -0,0 +1,37 @@ +//@flow +import React from "react"; +import { translate } from "react-i18next"; +import type { Role } from "@scm-manager/ui-types"; +import ExtensionPoint from "@scm-manager/ui-extensions/lib/ExtensionPoint"; +import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable"; + +type Props = { + role: Role, + + // context props + t: string => string, +}; + +class PermissionRoleDetails extends React.Component { + render() { + const { role } = this.props; + + return ( + +
+ +
+
+ +
+
+ + ); + } +} + +export default translate("roles")(PermissionRoleDetails); diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js b/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js new file mode 100644 index 0000000000..a66b080adf --- /dev/null +++ b/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js @@ -0,0 +1,65 @@ +//@flow +import React from "react"; +import type { Role } from "@scm-manager/ui-types"; +import { translate } from "react-i18next"; +import { compose } from "redux"; +import injectSheet from "react-jss"; + +type Props = { + role: Role, + // context props + t: string => string +}; + +const styles = { + spacing: { + padding: "0 !important" + } +}; + +class PermissionRoleDetailsTable extends React.Component { + render() { + const { role, t } = this.props; + return ( + + + + + + + + + + + {this.renderVerbs()} + +
{t("repositoryRole.name")}{role.name}
{t("repositoryRole.type")}{role.type}
+ ); + } + + renderVerbs() { + const { role, t, classes } = this.props; + + let verbs = null; + if (role.verbs.length > 0) { + verbs = ( + + {t("repositoryRole.verbs")} + +
    + {role.verbs.map(verb => { + return
  • {verb}
    • ; + })} +
+ + + ); + } + return verbs; + } +} + +export default compose( + injectSheet(styles), + translate("roles") +)(PermissionRoleDetailsTable); diff --git a/scm-ui/src/config/roles/containers/SingleRepositoryRole.js b/scm-ui/src/config/roles/containers/SingleRepositoryRole.js index cc4e94cdd0..6c77bfd46b 100644 --- a/scm-ui/src/config/roles/containers/SingleRepositoryRole.js +++ b/scm-ui/src/config/roles/containers/SingleRepositoryRole.js @@ -1,22 +1,24 @@ //@flow import React from "react"; import { connect } from "react-redux"; -import { - Page, - Loading, - ErrorPage -} from "@scm-manager/ui-components"; +import {Loading, ErrorPage, Title} from "@scm-manager/ui-components"; import { Route } from "react-router"; import type { History } from "history"; -import { EditRepositoryRoleNavLink, RepositoryRoleDetailNavLink } from "../../components/navLinks"; +import { + EditRepositoryRoleNavLink, +} from "../../components/navLinks"; import { translate } from "react-i18next"; import type { Role } from "@scm-manager/ui-types"; -import {getRepositoryRolesLink} from "../../../modules/indexResource"; -import {ExtensionPoint} from "@scm-manager/ui-extensions"; -import {fetchRoleByName, getFetchRoleFailure, getRoleByName, isFetchRolePending} from "../modules/roles"; -import RepositoryRoleForm from "./RepositoryRoleForm"; -import {withRouter} from "react-router-dom"; -import PermissionRoleDetail from "../components/PermissionRoleDetail"; +import { getRepositoryRolesLink } from "../../../modules/indexResource"; +import { ExtensionPoint } from "@scm-manager/ui-extensions"; +import { + fetchRoleByName, + getFetchRoleFailure, + getRoleByName, + isFetchRolePending +} from "../modules/roles"; +import { withRouter } from "react-router-dom"; +import PermissionRoleDetail from "../components/PermissionRoleDetails"; type Props = { roleName: string, @@ -37,8 +39,11 @@ type Props = { class SingleRepositoryRole extends React.Component { componentDidMount() { - this.props.fetchRoleByName(this.props.repositoryRolesLink, this.props.roleName); - console.log(this.props.match) + this.props.fetchRoleByName( + this.props.repositoryRolesLink, + this.props.roleName + ); + console.log(this.props.match); } stripEndingSlash = (url: string) => { @@ -77,22 +82,26 @@ class SingleRepositoryRole extends React.Component { }; return ( - + <> + <div className="columns"> <div className="column is-three-quarters"> - <Route path={url} component={() => <PermissionRoleDetail role={role} />} /> + <Route + path={url} + component={() => <PermissionRoleDetail role={role} />} + /> <Route path={`${url}/settings/general`} component={() => <EditRepositoryRoleNavLink role={role} />} /> <ExtensionPoint - name="user.route" + name="roles.route" props={extensionProps} renderAll={true} /> </div> </div> - </Page> + </> ); } } @@ -120,7 +129,9 @@ const mapDispatchToProps = dispatch => { }; }; -export default withRouter(connect( - mapStateToProps, - mapDispatchToProps -)(translate("users")(SingleRepositoryRole))); +export default withRouter( + connect( + mapStateToProps, + mapDispatchToProps + )(translate("config")(SingleRepositoryRole)) +); From 60cf070c448b7ff8052ca263597128dc8b010a4b Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com> Date: Wed, 15 May 2019 16:57:28 +0200 Subject: [PATCH 2/3] refactor / enable routing after createRepoRole --- scm-ui/src/config/containers/Config.js | 2 +- .../config/roles/components/PermissionRoleDetails.js | 2 +- .../roles/components/PermissionRoleDetailsTable.js | 2 +- .../config/roles/containers/CreateRepositoryRole.js | 12 ++++++------ .../config/roles/containers/RepositoryRoleForm.js | 8 +------- 5 files changed, 10 insertions(+), 16 deletions(-) diff --git a/scm-ui/src/config/containers/Config.js b/scm-ui/src/config/containers/Config.js index 8c5a3b1fcc..63173c0b9b 100644 --- a/scm-ui/src/config/containers/Config.js +++ b/scm-ui/src/config/containers/Config.js @@ -66,7 +66,7 @@ class Config extends React.Component<Props> { /> <Route path={`${url}/roles/create`} - render={() => <CreateRepositoryRole disabled={false} />} + render={() => <CreateRepositoryRole disabled={false} history={this.props.history} />} /> <ExtensionPoint name="config.route" diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetails.js b/scm-ui/src/config/roles/components/PermissionRoleDetails.js index f4793cf067..92dab08b86 100644 --- a/scm-ui/src/config/roles/components/PermissionRoleDetails.js +++ b/scm-ui/src/config/roles/components/PermissionRoleDetails.js @@ -34,4 +34,4 @@ class PermissionRoleDetails extends React.Component<Props> { } } -export default translate("roles")(PermissionRoleDetails); +export default translate("config")(PermissionRoleDetails); diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js b/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js index a66b080adf..67d752fb8c 100644 --- a/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js +++ b/scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js @@ -61,5 +61,5 @@ class PermissionRoleDetailsTable extends React.Component<Props> { export default compose( injectSheet(styles), - translate("roles") + translate("config") )(PermissionRoleDetailsTable); diff --git a/scm-ui/src/config/roles/containers/CreateRepositoryRole.js b/scm-ui/src/config/roles/containers/CreateRepositoryRole.js index 55c9eac10d..6592ff566a 100644 --- a/scm-ui/src/config/roles/containers/CreateRepositoryRole.js +++ b/scm-ui/src/config/roles/containers/CreateRepositoryRole.js @@ -19,14 +19,14 @@ type Props = { repositoryRolesLink: string, //dispatch function - addRole: (link: string, role: Role) => void + addRole: (link: string, role: Role, callback?: () => void) => void }; class CreateRepositoryRole extends React.Component<Props> { - //Callback after dispatch + repositoryRoleCreated = (role: Role) => { const { history } = this.props; - history.push("/role/" + role.name); + history.push("/config/role/" + role.name); }; createRepositoryRole = (role: Role) => { @@ -63,8 +63,8 @@ const mapStateToProps = (state, ownProps) => { const mapDispatchToProps = dispatch => { return { - addRole: (link: string, role: Role) => { - dispatch(createRole(link, role)); + addRole: (link: string, role: Role, callback?: () => void) => { + dispatch(createRole(link, role, callback)); } }; }; @@ -72,4 +72,4 @@ const mapDispatchToProps = dispatch => { export default connect( mapStateToProps, mapDispatchToProps -)(translate("roles")(CreateRepositoryRole)); +)(translate("config")(CreateRepositoryRole)); diff --git a/scm-ui/src/config/roles/containers/RepositoryRoleForm.js b/scm-ui/src/config/roles/containers/RepositoryRoleForm.js index 0e0065ce16..e35c2f2c2f 100644 --- a/scm-ui/src/config/roles/containers/RepositoryRoleForm.js +++ b/scm-ui/src/config/roles/containers/RepositoryRoleForm.js @@ -6,7 +6,6 @@ import type { Role } from "@scm-manager/ui-types"; import { InputField, SubmitButton } from "@scm-manager/ui-components"; import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox"; import { - createRole, fetchAvailableVerbs, getFetchVerbsFailure, getVerbsFromState, @@ -27,7 +26,6 @@ type Props = { // dispatch functions fetchAvailableVerbs: (link: string) => void - // addRole: (link: string, role: Role) => void }; type State = { @@ -107,7 +105,6 @@ class RepositoryRoleForm extends React.Component<Props, State> { : availableVerbs.map(verb => ( <PermissionCheckbox key={verb} - // disabled={readOnly} name={verb} checked={role.verbs.includes(verb)} onChange={this.handleVerbChange} @@ -164,13 +161,10 @@ const mapDispatchToProps = dispatch => { fetchAvailableVerbs: (link: string) => { dispatch(fetchAvailableVerbs(link)); }, - // addRole: (link: string, role: Role) => { - // createRole(link, role) - // } }; }; export default connect( mapStateToProps, mapDispatchToProps -)(translate("roles")(RepositoryRoleForm)); +)(translate("config")(RepositoryRoleForm)); From 394c1f53d47ba0bdf2d5b91f18e5d70d9a8b777e Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com> Date: Wed, 15 May 2019 17:30:42 +0200 Subject: [PATCH 3/3] create EditRepoRoles --- .../roles/components/PermissionRoleDetails.js | 6 +- .../roles/containers/EditRepositoryRole.js | 71 +++++++++++++++++++ .../roles/containers/RepositoryRoleForm.js | 3 + .../roles/containers/SingleRepositoryRole.js | 37 +++++----- 4 files changed, 98 insertions(+), 19 deletions(-) create mode 100644 scm-ui/src/config/roles/containers/EditRepositoryRole.js diff --git a/scm-ui/src/config/roles/components/PermissionRoleDetails.js b/scm-ui/src/config/roles/components/PermissionRoleDetails.js index 92dab08b86..8ca21b1ac3 100644 --- a/scm-ui/src/config/roles/components/PermissionRoleDetails.js +++ b/scm-ui/src/config/roles/components/PermissionRoleDetails.js @@ -4,9 +4,11 @@ import { translate } from "react-i18next"; import type { Role } from "@scm-manager/ui-types"; import ExtensionPoint from "@scm-manager/ui-extensions/lib/ExtensionPoint"; import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable"; +import {Button, Subtitle} from "@scm-manager/ui-components"; type Props = { role: Role, + url: string, // context props t: string => string, @@ -14,13 +16,15 @@ type Props = { class PermissionRoleDetails extends React.Component<Props> { render() { - const { role } = this.props; + const { role, url } = this.props; return ( <div> <PermissionRoleDetailsTable role={role}/> <hr/> + <Subtitle subtitle={"repositoryRoles.edit"}/> + <Button label={"test"} link={`${url}/edit`} color="primary" /> <div className="content"> <ExtensionPoint name="roles.repositoryRole-details.information" diff --git a/scm-ui/src/config/roles/containers/EditRepositoryRole.js b/scm-ui/src/config/roles/containers/EditRepositoryRole.js new file mode 100644 index 0000000000..f16db79dda --- /dev/null +++ b/scm-ui/src/config/roles/containers/EditRepositoryRole.js @@ -0,0 +1,71 @@ +// @flow +import React from "react"; +import RepositoryRoleForm from "./RepositoryRoleForm"; +import { connect } from "react-redux"; +import { translate } from "react-i18next"; +import { + getModifyRoleFailure, + isModifyRolePending, + modifyRole, +} from "../modules/roles"; +import type { Role } from "@scm-manager/ui-types"; + +type Props = { + disabled: boolean, + role: Role, + repositoryRolesLink: string, + + //dispatch function + updateRole: (link: string, role: Role, callback?: () => void) => void +}; + + + +class EditRepositoryRole extends React.Component<Props> { + + repositoryRoleUpdated = (role: Role) => { + const { history } = this.props; + history.push("/config/role/" + role.name); + }; + + updateRepositoryRole = (role: Role) => { + this.props.updateRole(role, () => + this.repositoryRoleUpdated(role) + ); + }; + + render() { + return ( + <> + <RepositoryRoleForm + disabled={false} + role={this.props.role} + submitForm={role => this.updateRepositoryRole(role)} + /> + </> + ); + } +} + +const mapStateToProps = (state, ownProps) => { + const loading = isModifyRolePending(state); + const error = getModifyRoleFailure(state); + + return { + loading, + error, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + updateRole: (role: Role, callback?: () => void) => { + dispatch(modifyRole(role, callback)); + } + }; +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(translate("config")(EditRepositoryRole)); diff --git a/scm-ui/src/config/roles/containers/RepositoryRoleForm.js b/scm-ui/src/config/roles/containers/RepositoryRoleForm.js index e35c2f2c2f..852e097e4a 100644 --- a/scm-ui/src/config/roles/containers/RepositoryRoleForm.js +++ b/scm-ui/src/config/roles/containers/RepositoryRoleForm.js @@ -49,6 +49,9 @@ class RepositoryRoleForm extends React.Component<Props, State> { componentDidMount() { const { fetchAvailableVerbs, verbsLink} = this.props; fetchAvailableVerbs(verbsLink); + if (this.props.role) { + this.setState({role: this.props.role}) + } } isFalsy(value) { diff --git a/scm-ui/src/config/roles/containers/SingleRepositoryRole.js b/scm-ui/src/config/roles/containers/SingleRepositoryRole.js index 6c77bfd46b..6b4f48819a 100644 --- a/scm-ui/src/config/roles/containers/SingleRepositoryRole.js +++ b/scm-ui/src/config/roles/containers/SingleRepositoryRole.js @@ -1,12 +1,10 @@ //@flow import React from "react"; import { connect } from "react-redux"; -import {Loading, ErrorPage, Title} from "@scm-manager/ui-components"; +import { Loading, ErrorPage, Title } from "@scm-manager/ui-components"; import { Route } from "react-router"; import type { History } from "history"; -import { - EditRepositoryRoleNavLink, -} from "../../components/navLinks"; +import { EditRepositoryRoleNavLink } from "../../components/navLinks"; import { translate } from "react-i18next"; import type { Role } from "@scm-manager/ui-types"; import { getRepositoryRolesLink } from "../../../modules/indexResource"; @@ -19,6 +17,8 @@ import { } from "../modules/roles"; import { withRouter } from "react-router-dom"; import PermissionRoleDetail from "../components/PermissionRoleDetails"; +import EditRepositoryRole from "./EditRepositoryRole"; +import Switch from "react-router-dom/es/Switch"; type Props = { roleName: string, @@ -83,22 +83,23 @@ class SingleRepositoryRole extends React.Component<Props> { return ( <> - <Title title={t("repositoryRoles.title")}/> + <Title title={t("repositoryRoles.title")} /> <div className="columns"> <div className="column is-three-quarters"> - <Route - path={url} - component={() => <PermissionRoleDetail role={role} />} - /> - <Route - path={`${url}/settings/general`} - component={() => <EditRepositoryRoleNavLink role={role} />} - /> - <ExtensionPoint - name="roles.route" - props={extensionProps} - renderAll={true} - /> + <Route + path={url} + component={() => <PermissionRoleDetail role={role} url={url} />} + /> + <Route + path={`${url}`} + exact + component={() => <EditRepositoryRole role={role} />} + /> + <ExtensionPoint + name="roles.route" + props={extensionProps} + renderAll={true} + /> </div> </div> </>