Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 07:25:44 +01:00
Code Issues Packages Projects Releases Activity

Merge with 2.0.0-m3

Browse Source
This commit is contained in:
René Pfeuffer
2019-02-21 15:17:41 +01:00
parent 99c3bc6455 312d5530cf
commit beb8697018
8 changed files with 105 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
scm-ui-components/packages/ui-components/src/forms/Radio.js
View File

@@ -22,8 +22,7 @@ class Radio extends React.Component<Props> {
render() { render() {
return ( return (
<div className="field is-grouped">
<div className="control">
<label className="radio" disabled={this.props.disabled}> <label className="radio" disabled={this.props.disabled}>
<input <input
type="radio" type="radio"
@@ -36,8 +35,6 @@ class Radio extends React.Component<Props> {
{this.props.label} {this.props.label}
{this.renderHelp()} {this.renderHelp()}
</label> </label>
</div>
</div>
); );
} }
} }

14
scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js
View File

@@ -2,7 +2,7 @@
import React from "react"; import React from "react";
import { translate } from "react-i18next"; import { translate } from "react-i18next";
import type { Permission } from "@scm-manager/ui-types"; import type { Permission } from "@scm-manager/ui-types";
import { confirmAlert, DeleteButton } from "@scm-manager/ui-components"; import { confirmAlert } from "@scm-manager/ui-components";
type Props = { type Props = {
permission: Permission, permission: Permission,
@@ -54,18 +54,18 @@ class DeletePermissionButton extends React.Component<Props> {
}; };
render() { render() {
const { confirmDialog, loading, t } = this.props; const { confirmDialog } = this.props;
const action = confirmDialog ? this.confirmDelete : this.deletePermission; const action = confirmDialog ? this.confirmDelete : this.deletePermission;
if (!this.isDeletable()) { if (!this.isDeletable()) {
return null; return null;
} }
return ( return (
<DeleteButton <a className="level-item" onClick={action}>
label={t("permission.delete-permission-button.label")} <span className="icon is-small">
action={action} <i className="fas fa-trash" />
loading={loading} </span>
/> </a>
); );
} }
} }

10
scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.test.js
View File

@@ -29,7 +29,7 @@ describe("DeletePermissionButton", () => {
expect(navLink.text()).toBe(""); expect(navLink.text()).toBe("");
}); });
it("should render the navLink", () => { it("should render the delete icon", () => {
const permission = { const permission = {
_links: { _links: {
delete: { delete: {
@@ -38,14 +38,14 @@ describe("DeletePermissionButton", () => {
} }
}; };
const navLink = mount( const deleteIcon = mount(
<DeletePermissionButton <DeletePermissionButton
permission={permission} permission={permission}
deletePermission={() => {}} deletePermission={() => {}}
/>, />,
options.get() options.get()
); );
expect(navLink.text()).not.toBe(""); expect(deleteIcon.html()).not.toBe("");
}); });
it("should open the confirm dialog on button click", () => { it("should open the confirm dialog on button click", () => {
@@ -64,7 +64,7 @@ describe("DeletePermissionButton", () => {
/>, />,
options.get() options.get()
); );
button.find("button").simulate("click"); button.find(".fa-trash").simulate("click");
expect(confirmAlert.mock.calls.length).toBe(1); expect(confirmAlert.mock.calls.length).toBe(1);
}); });
@@ -91,7 +91,7 @@ describe("DeletePermissionButton", () => {
/>, />,
options.get() options.get()
); );
button.find("button").simulate("click"); button.find(".fa-trash").simulate("click");
expect(calledUrl).toBe("/permission"); expect(calledUrl).toBe("/permission");
}); });

13
scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
View File

@@ -50,18 +50,20 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
<SubmitButton label={t("permission.advanced.dialog.submit")} /> <SubmitButton label={t("permission.advanced.dialog.submit")} />
) : null; ) : null;
const body = <>{verbSelectBoxes}</>;
const body = ( const footer = (
<>
<div className="content">{verbSelectBoxes}</div>
<form onSubmit={this.onSubmit}> <form onSubmit={this.onSubmit}>
{submitButton} <div className="field is-grouped">
<p className="control">{submitButton}</p>
<p className="control">
<Button <Button
label={t("permission.advanced.dialog.abort")} label={t("permission.advanced.dialog.abort")}
action={onClose} action={onClose}
/> />
</p>
</div>
</form> </form>
</>
); );
return ( return (
@@ -69,6 +71,7 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
title={t("permission.advanced.dialog.title")} title={t("permission.advanced.dialog.title")}
closeFunction={() => onClose()} closeFunction={() => onClose()}
body={body} body={body}
footer={footer}
active={true} active={true}
/> />
); );

50
scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
View File

@@ -5,7 +5,8 @@ import {
Autocomplete, Autocomplete,
SubmitButton, SubmitButton,
Button, Button,
LabelWithHelpIcon LabelWithHelpIcon,
Radio
} from "@scm-manager/ui-components"; } from "@scm-manager/ui-components";
import RoleSelector from "../components/RoleSelector"; import RoleSelector from "../components/RoleSelector";
import type { import type {
@@ -54,14 +55,11 @@ class CreatePermissionForm extends React.Component<Props, State> {
permissionScopeChanged = event => { permissionScopeChanged = event => {
const groupPermission = event.target.value === "GROUP_PERMISSION"; const groupPermission = event.target.value === "GROUP_PERMISSION";
this.setState({ this.setState({
value: undefined,
name: "",
groupPermission: groupPermission, groupPermission: groupPermission,
valid: validator.isPermissionValid( valid: false
this.state.name,
groupPermission,
this.props.currentPermissions
)
}); });
this.setState({ ...this.state, groupPermission });
}; };
loadUserAutocompletion = (inputValue: string) => { loadUserAutocompletion = (inputValue: string) => {
@@ -98,7 +96,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
<Autocomplete <Autocomplete
loadSuggestions={this.loadGroupAutocompletion} loadSuggestions={this.loadGroupAutocompletion}
valueSelected={this.groupOrUserSelected} valueSelected={this.groupOrUserSelected}
value={this.state.value} value={this.state.value ? this.state.value : ""}
label={t("permission.group")} label={t("permission.group")}
noOptionsMessage={t("permission.autocomplete.no-group-options")} noOptionsMessage={t("permission.autocomplete.no-group-options")}
loadingMessage={t("permission.autocomplete.loading")} loadingMessage={t("permission.autocomplete.loading")}
@@ -110,7 +108,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
<Autocomplete <Autocomplete
loadSuggestions={this.loadUserAutocompletion} loadSuggestions={this.loadUserAutocompletion}
valueSelected={this.groupOrUserSelected} valueSelected={this.groupOrUserSelected}
value={this.state.value} value={this.state.value ? this.state.value : ""}
label={t("permission.user")} label={t("permission.user")}
noOptionsMessage={t("permission.autocomplete.no-user-options")} noOptionsMessage={t("permission.autocomplete.no-user-options")}
loadingMessage={t("permission.autocomplete.loading")} loadingMessage={t("permission.autocomplete.loading")}
@@ -158,36 +156,31 @@ class CreatePermissionForm extends React.Component<Props, State> {
</h2> </h2>
{advancedDialog} {advancedDialog}
<form onSubmit={this.submit}> <form onSubmit={this.submit}>
<div className="field is-grouped">
<div className="control"> <div className="control">
<label className="radio"> <Radio
<input
type="radio"
name="permission_scope" name="permission_scope"
checked={!this.state.groupPermission}
value="USER_PERMISSION" value="USER_PERMISSION"
checked={!this.state.groupPermission}
label={t("permission.user-permission")}
onChange={this.permissionScopeChanged} onChange={this.permissionScopeChanged}
/> />
{t("permission.user-permission")} <Radio
</label>
<label className="radio">
<input
type="radio"
name="permission_scope" name="permission_scope"
value="GROUP_PERMISSION" value="GROUP_PERMISSION"
checked={this.state.groupPermission} checked={this.state.groupPermission}
label={t("permission.group-permission")}
onChange={this.permissionScopeChanged} onChange={this.permissionScopeChanged}
/> />
{t("permission.group-permission")}
</label>
</div> </div>
</div>
<div className="columns"> <div className="columns">
<div className="column is-two-thirds"> <div className="column is-three-fifths">
{this.renderAutocompletionField()} {this.renderAutocompletionField()}
</div> </div>
<div className="column is-one-third"> <div className="column is-two-fifths">
<div className="columns"> <div className="columns">
<div className="column is-half"> <div className="column is-narrow">
<RoleSelector <RoleSelector
availableRoles={availableRoleNames} availableRoles={availableRoleNames}
label={t("permission.role")} label={t("permission.role")}
@@ -196,7 +189,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
role={matchingRole} role={matchingRole}
/> />
</div> </div>
<div className="column is-half"> <div className="column">
<LabelWithHelpIcon <LabelWithHelpIcon
label={t("permission.permissions")} label={t("permission.permissions")}
helpText={t("permission.help.permissionsHelpText")} helpText={t("permission.help.permissionsHelpText")}
@@ -252,13 +245,16 @@ class CreatePermissionForm extends React.Component<Props, State> {
this.setState({ this.setState({
name: "", name: "",
verbs: this.props.availablePermissions.availableRoles[0].verbs, verbs: this.props.availablePermissions.availableRoles[0].verbs,
groupPermission: false, valid: true,
valid: true value: undefined
}); });
}; };
handleRoleChange = (role: string) => { handleRoleChange = (role: string) => {
const selectedRole = this.findAvailableRole(role); const selectedRole = this.findAvailableRole(role);
if (!selectedRole) {
return;
}
this.setState({ this.setState({
verbs: selectedRole.verbs verbs: selectedRole.verbs
}); });

7
scm-ui/src/repos/permissions/containers/Permissions.js
View File

@@ -74,6 +74,7 @@ type Props = {
history: History history: History
}; };
class Permissions extends React.Component<Props> { class Permissions extends React.Component<Props> {
componentDidMount() { componentDidMount() {
const { const {
@@ -154,12 +155,6 @@ class Permissions extends React.Component<Props> {
helpText={t("permission.help.nameHelpText")} helpText={t("permission.help.nameHelpText")}
/> />
</th> </th>
<th className="is-hidden-mobile">
<LabelWithHelpIcon
label={t("permission.group-permission")}
helpText={t("permission.help.groupPermissionHelpText")}
/>
</th>
<th> <th>
<LabelWithHelpIcon <LabelWithHelpIcon
label={t("permission.role")} label={t("permission.role")}

58
scm-ui/src/repos/permissions/containers/SinglePermission.js
View File

@@ -14,15 +14,21 @@ import {
} from "../modules/permissions"; } from "../modules/permissions";
import { connect } from "react-redux"; import { connect } from "react-redux";
import type { History } from "history"; import type { History } from "history";
import { Button, Checkbox } from "@scm-manager/ui-components"; import { Button } from "@scm-manager/ui-components";
import DeletePermissionButton from "../components/buttons/DeletePermissionButton"; import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
import RoleSelector from "../components/RoleSelector"; import RoleSelector from "../components/RoleSelector";
import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog"; import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
import classNames from "classnames";
import injectSheet from "react-jss";
type Props = { type Props = {
availablePermissions: AvailableRepositoryPermissions, availablePermissions: AvailableRepositoryPermissions,
submitForm: Permission => void, submitForm: Permission => void,
modifyPermission: (permission: Permission, namespace: string, name: string) => void, modifyPermission: (
permission: Permission,
namespace: string,
name: string
) => void,
permission: Permission, permission: Permission,
t: string => string, t: string => string,
namespace: string, namespace: string,
@@ -30,8 +36,13 @@ type Props = {
match: any, match: any,
history: History, history: History,
loading: boolean, loading: boolean,
deletePermission: (permission: Permission, namespace: string, name: string) => void, deletePermission: (
deleteLoading: boolean permission: Permission,
namespace: string,
name: string
) => void,
deleteLoading: boolean,
classes: any
}; };
type State = { type State = {
@@ -40,6 +51,19 @@ type State = {
showAdvancedDialog: boolean showAdvancedDialog: boolean
}; };
const styles = {
iconColor: {
color: "#9a9a9a"
},
centerMiddle: {
display: "table-cell",
verticalAlign: "middle !important"
},
columnWidth: {
width: "100%"
}
};
class SinglePermission extends React.Component<Props, State> { class SinglePermission extends React.Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@@ -96,7 +120,8 @@ class SinglePermission extends React.Component<Props, State> {
availablePermissions, availablePermissions,
loading, loading,
namespace, namespace,
repoName repoName,
classes
} = this.props; } = this.props;
const availableRoleNames = availablePermissions.availableRoles.map( const availableRoleNames = availablePermissions.availableRoles.map(
r => r.name r => r.name
@@ -125,23 +150,26 @@ class SinglePermission extends React.Component<Props, State> {
/> />
) : null; ) : null;
const iconType =
permission && permission.groupPermission ? (
<i title={t("permission.group")} className={classNames("fas fa-user-friends", classes.iconColor)} />
) : (
<i title={t("permission.user")} className={classNames("fas fa-user", classes.iconColor)} />
);
return ( return (
<tr> <tr className={classes.columnWidth}>
<td>{permission.name}</td> <td className={classes.centerMiddle}>
<td> {iconType} {permission.name}
<Checkbox
checked={permission ? permission.groupPermission : false}
disabled={true}
/>
</td> </td>
{roleSelector} {roleSelector}
<td> <td className={classes.centerMiddle}>
<Button <Button
label={t("permission.advanced-button.label")} label={t("permission.advanced-button.label")}
action={this.handleDetailedPermissionsPressed} action={this.handleDetailedPermissionsPressed}
/> />
</td> </td>
<td> <td className={classes.centerMiddle}>
<DeletePermissionButton <DeletePermissionButton
permission={permission} permission={permission}
namespace={namespace} namespace={namespace}
@@ -253,4 +281,4 @@ const mapDispatchToProps = dispatch => {
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(translate("repos")(SinglePermission)); )(translate("repos")(injectSheet(styles)(SinglePermission)));

11
scm-ui/styles/scm.scss
View File

@@ -240,7 +240,7 @@ $fa-font-path: "webfonts";
} }
// forms // forms
.field:not(.is-grouped) { form .field:not(.is-grouped) {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.input, .input,
@@ -250,6 +250,15 @@ $fa-font-path: "webfonts";
box-shadow: none; box-shadow: none;
} }
// label with help-icon compensation
.label-icon-spacing {
margin-top: 30px;
@media screen and (max-width: 768px) {
margin-top: 0;
}
}
// pagination // pagination
.pagination-next, .pagination-next,
.pagination-link, .pagination-link,