mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-10 07:25:44 +01:00
scm-ui: new repository layout
This commit is contained in:
Sebastian Sdorra
@@ -0,0 +1,99 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
import {
|
||||
ButtonGroup,
|
||||
Button,
|
||||
SubmitButton,
|
||||
Modal
|
||||
} from "@scm-manager/ui-components";
|
||||
import { translate } from "react-i18next";
|
||||
import PermissionCheckbox from "../components/PermissionCheckbox";
|
||||
|
||||
type Props = {
|
||||
readOnly: boolean,
|
||||
availableVerbs: string[],
|
||||
selectedVerbs: string[],
|
||||
onSubmit: (string[]) => void,
|
||||
onClose: () => void,
|
||||
|
||||
// context props
|
||||
t: string => string
|
||||
};
|
||||
|
||||
type State = {
|
||||
verbs: any
|
||||
};
|
||||
|
||||
class AdvancedPermissionsDialog extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
const verbs = {};
|
||||
props.availableVerbs.forEach(
|
||||
verb =>
|
||||
(verbs[verb] = props.selectedVerbs
|
||||
? props.selectedVerbs.includes(verb)
|
||||
: false)
|
||||
);
|
||||
this.state = { verbs };
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t, onClose, readOnly } = this.props;
|
||||
const { verbs } = this.state;
|
||||
|
||||
const verbSelectBoxes = Object.entries(verbs).map(e => (
|
||||
<PermissionCheckbox
|
||||
key={e[0]}
|
||||
disabled={readOnly}
|
||||
name={e[0]}
|
||||
checked={e[1]}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
));
|
||||
|
||||
const submitButton = !readOnly ? (
|
||||
<SubmitButton label={t("permission.advanced.dialog.submit")} />
|
||||
) : null;
|
||||
|
||||
const body = <>{verbSelectBoxes}</>;
|
||||
|
||||
const footer = (
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<ButtonGroup>
|
||||
{submitButton}
|
||||
<Button
|
||||
label={t("permission.advanced.dialog.abort")}
|
||||
action={onClose}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
</form>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t("permission.advanced.dialog.title")}
|
||||
closeFunction={() => onClose()}
|
||||
body={body}
|
||||
footer={footer}
|
||||
active={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
handleChange = (value: boolean, name: string) => {
|
||||
const { verbs } = this.state;
|
||||
const newVerbs = { ...verbs, [name]: value };
|
||||
this.setState({ verbs: newVerbs });
|
||||
};
|
||||
|
||||
onSubmit = () => {
|
||||
this.props.onSubmit(
|
||||
Object.entries(this.state.verbs)
|
||||
.filter(e => e[1])
|
||||
.map(e => e[0])
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default translate("repos")(AdvancedPermissionsDialog);
|
||||
@@ -0,0 +1,235 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
import {translate} from "react-i18next";
|
||||
import type {PermissionCollection, PermissionCreateEntry, RepositoryRole, SelectValue} from "@scm-manager/ui-types";
|
||||
import {
|
||||
Button,
|
||||
GroupAutocomplete,
|
||||
LabelWithHelpIcon,
|
||||
Radio,
|
||||
SubmitButton,
|
||||
Subtitle,
|
||||
UserAutocomplete
|
||||
} from "@scm-manager/ui-components";
|
||||
import * as validator from "../components/permissionValidation";
|
||||
import RoleSelector from "../components/RoleSelector";
|
||||
import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
|
||||
import {findVerbsForRole} from "../modules/permissions";
|
||||
|
||||
type Props = {
|
||||
availableRoles: RepositoryRole[],
|
||||
availableVerbs: string[],
|
||||
createPermission: (permission: PermissionCreateEntry) => void,
|
||||
loading: boolean,
|
||||
currentPermissions: PermissionCollection,
|
||||
groupAutocompleteLink: string,
|
||||
userAutocompleteLink: string,
|
||||
|
||||
// Context props
|
||||
t: string => string
|
||||
};
|
||||
|
||||
type State = {
|
||||
name: string,
|
||||
role?: string,
|
||||
verbs?: string[],
|
||||
groupPermission: boolean,
|
||||
valid: boolean,
|
||||
value?: SelectValue,
|
||||
showAdvancedDialog: boolean
|
||||
};
|
||||
|
||||
class CreatePermissionForm extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: "",
|
||||
role: props.availableRoles[0].name,
|
||||
verbs: undefined,
|
||||
groupPermission: false,
|
||||
valid: true,
|
||||
value: undefined,
|
||||
showAdvancedDialog: false
|
||||
};
|
||||
}
|
||||
|
||||
permissionScopeChanged = event => {
|
||||
const groupPermission = event.target.value === "GROUP_PERMISSION";
|
||||
this.setState({
|
||||
value: undefined,
|
||||
name: "",
|
||||
groupPermission: groupPermission,
|
||||
valid: false
|
||||
});
|
||||
};
|
||||
|
||||
renderAutocompletionField = () => {
|
||||
const group = this.state.groupPermission;
|
||||
if (group) {
|
||||
return (
|
||||
<GroupAutocomplete
|
||||
autocompleteLink={this.props.groupAutocompleteLink}
|
||||
valueSelected={this.selectName}
|
||||
value={this.state.value ? this.state.value : ""}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<UserAutocomplete
|
||||
autocompleteLink={this.props.userAutocompleteLink}
|
||||
valueSelected={this.selectName}
|
||||
value={this.state.value ? this.state.value : ""}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
selectName = (value: SelectValue) => {
|
||||
this.setState({
|
||||
value,
|
||||
name: value.value.id,
|
||||
valid: validator.isPermissionValid(
|
||||
value.value.id,
|
||||
this.state.groupPermission,
|
||||
this.props.currentPermissions
|
||||
)
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t, availableRoles, availableVerbs, loading } = this.props;
|
||||
const { role, verbs, showAdvancedDialog } = this.state;
|
||||
|
||||
const availableRoleNames = availableRoles.map(r => r.name);
|
||||
|
||||
const selectedVerbs = role ? findVerbsForRole(availableRoles, role) : verbs;
|
||||
|
||||
const advancedDialog = showAdvancedDialog ? (
|
||||
<AdvancedPermissionsDialog
|
||||
availableVerbs={availableVerbs}
|
||||
selectedVerbs={selectedVerbs}
|
||||
onClose={this.toggleAdvancedPermissionsDialog}
|
||||
onSubmit={this.submitAdvancedPermissionsDialog}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<hr />
|
||||
<Subtitle
|
||||
subtitle={t("permission.add-permission.add-permission-heading")}
|
||||
/>
|
||||
{advancedDialog}
|
||||
<form onSubmit={this.submit}>
|
||||
<div className="field is-grouped">
|
||||
<div className="control">
|
||||
<Radio
|
||||
name="permission_scope"
|
||||
value="USER_PERMISSION"
|
||||
checked={!this.state.groupPermission}
|
||||
label={t("permission.user-permission")}
|
||||
onChange={this.permissionScopeChanged}
|
||||
/>
|
||||
<Radio
|
||||
name="permission_scope"
|
||||
value="GROUP_PERMISSION"
|
||||
checked={this.state.groupPermission}
|
||||
label={t("permission.group-permission")}
|
||||
onChange={this.permissionScopeChanged}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="columns">
|
||||
<div className="column is-three-fifths">
|
||||
{this.renderAutocompletionField()}
|
||||
</div>
|
||||
<div className="column is-two-fifths">
|
||||
<div className="columns">
|
||||
<div className="column is-narrow">
|
||||
<RoleSelector
|
||||
availableRoles={availableRoleNames}
|
||||
label={t("permission.role")}
|
||||
helpText={t("permission.help.roleHelpText")}
|
||||
handleRoleChange={this.handleRoleChange}
|
||||
role={role}
|
||||
/>
|
||||
</div>
|
||||
<div className="column">
|
||||
<LabelWithHelpIcon
|
||||
label={t("permission.permissions")}
|
||||
helpText={t("permission.help.permissionsHelpText")}
|
||||
/>
|
||||
<Button
|
||||
label={t("permission.advanced-button.label")}
|
||||
action={this.toggleAdvancedPermissionsDialog}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<SubmitButton
|
||||
label={t("permission.add-permission.submit-button")}
|
||||
loading={loading}
|
||||
disabled={!this.state.valid || this.state.name === ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
toggleAdvancedPermissionsDialog = () => {
|
||||
this.setState(prevState => ({
|
||||
showAdvancedDialog: !prevState.showAdvancedDialog
|
||||
}));
|
||||
};
|
||||
|
||||
submitAdvancedPermissionsDialog = (newVerbs: string[]) => {
|
||||
this.setState({
|
||||
showAdvancedDialog: false,
|
||||
role: undefined,
|
||||
verbs: newVerbs
|
||||
});
|
||||
};
|
||||
|
||||
submit = e => {
|
||||
this.props.createPermission({
|
||||
name: this.state.name,
|
||||
role: this.state.role,
|
||||
verbs: this.state.verbs,
|
||||
groupPermission: this.state.groupPermission
|
||||
});
|
||||
this.removeState();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
removeState = () => {
|
||||
this.setState({
|
||||
name: "",
|
||||
role: this.props.availableRoles[0].name,
|
||||
verbs: undefined,
|
||||
valid: true,
|
||||
value: undefined
|
||||
});
|
||||
};
|
||||
|
||||
handleRoleChange = (role: string) => {
|
||||
const selectedRole = this.findAvailableRole(role);
|
||||
if (!selectedRole) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
role: selectedRole.name,
|
||||
verbs: []
|
||||
});
|
||||
};
|
||||
|
||||
findAvailableRole = (roleName: string) => {
|
||||
return this.props.availableRoles.find(role => role.name === roleName);
|
||||
};
|
||||
}
|
||||
|
||||
export default translate("repos")(CreatePermissionForm);
|
||||
288
scm-ui/ui-webapp/src/repos/permissions/containers/Permissions.js
Normal file
288
scm-ui/ui-webapp/src/repos/permissions/containers/Permissions.js
Normal file
@@ -0,0 +1,288 @@
|
||||
//@flow
|
||||
import React from "react";
|
||||
import {connect} from "react-redux";
|
||||
import {translate} from "react-i18next";
|
||||
import {
|
||||
createPermission,
|
||||
createPermissionReset,
|
||||
deletePermissionReset,
|
||||
fetchAvailablePermissionsIfNeeded,
|
||||
fetchPermissions,
|
||||
getAvailablePermissions,
|
||||
getAvailableRepositoryRoles,
|
||||
getAvailableRepositoryVerbs,
|
||||
getCreatePermissionFailure,
|
||||
getDeletePermissionsFailure,
|
||||
getFetchAvailablePermissionsFailure,
|
||||
getFetchPermissionsFailure,
|
||||
getModifyPermissionsFailure,
|
||||
getPermissionsOfRepo,
|
||||
hasCreatePermission,
|
||||
isCreatePermissionPending,
|
||||
isFetchAvailablePermissionsPending,
|
||||
isFetchPermissionsPending,
|
||||
modifyPermissionReset
|
||||
} from "../modules/permissions";
|
||||
import {ErrorPage, LabelWithHelpIcon, Loading, Subtitle} from "@scm-manager/ui-components";
|
||||
import type {Permission, PermissionCollection, PermissionCreateEntry, RepositoryRole} from "@scm-manager/ui-types";
|
||||
import SinglePermission from "./SinglePermission";
|
||||
import CreatePermissionForm from "./CreatePermissionForm";
|
||||
import type {History} from "history";
|
||||
import {getPermissionsLink} from "../../modules/repos";
|
||||
import {
|
||||
getGroupAutoCompleteLink,
|
||||
getRepositoryRolesLink,
|
||||
getRepositoryVerbsLink,
|
||||
getUserAutoCompleteLink
|
||||
} from "../../../modules/indexResource";
|
||||
|
||||
type Props = {
|
||||
availablePermissions: boolean,
|
||||
availableRepositoryRoles: RepositoryRole[],
|
||||
availableVerbs: string[],
|
||||
namespace: string,
|
||||
repoName: string,
|
||||
loading: boolean,
|
||||
error: Error,
|
||||
permissions: PermissionCollection,
|
||||
hasPermissionToCreate: boolean,
|
||||
loadingCreatePermission: boolean,
|
||||
repositoryRolesLink: string,
|
||||
repositoryVerbsLink: string,
|
||||
permissionsLink: string,
|
||||
groupAutocompleteLink: string,
|
||||
userAutocompleteLink: string,
|
||||
|
||||
//dispatch functions
|
||||
fetchAvailablePermissionsIfNeeded: (
|
||||
repositoryRolesLink: string,
|
||||
repositoryVerbsLink: string
|
||||
) => void,
|
||||
fetchPermissions: (link: string, namespace: string, repoName: string) => void,
|
||||
createPermission: (
|
||||
link: string,
|
||||
permission: PermissionCreateEntry,
|
||||
namespace: string,
|
||||
repoName: string,
|
||||
callback?: () => void
|
||||
) => void,
|
||||
createPermissionReset: (string, string) => void,
|
||||
modifyPermissionReset: (string, string) => void,
|
||||
deletePermissionReset: (string, string) => void,
|
||||
// context props
|
||||
t: string => string,
|
||||
match: any,
|
||||
history: History
|
||||
};
|
||||
|
||||
class Permissions extends React.Component<Props> {
|
||||
componentDidMount() {
|
||||
const {
|
||||
fetchAvailablePermissionsIfNeeded,
|
||||
fetchPermissions,
|
||||
namespace,
|
||||
repoName,
|
||||
modifyPermissionReset,
|
||||
createPermissionReset,
|
||||
deletePermissionReset,
|
||||
permissionsLink,
|
||||
repositoryRolesLink,
|
||||
repositoryVerbsLink
|
||||
} = this.props;
|
||||
|
||||
createPermissionReset(namespace, repoName);
|
||||
modifyPermissionReset(namespace, repoName);
|
||||
deletePermissionReset(namespace, repoName);
|
||||
fetchAvailablePermissionsIfNeeded(repositoryRolesLink, repositoryVerbsLink);
|
||||
fetchPermissions(permissionsLink, namespace, repoName);
|
||||
}
|
||||
|
||||
createPermission = (permission: Permission) => {
|
||||
this.props.createPermission(
|
||||
this.props.permissionsLink,
|
||||
permission,
|
||||
this.props.namespace,
|
||||
this.props.repoName
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
availablePermissions,
|
||||
availableRepositoryRoles,
|
||||
availableVerbs,
|
||||
loading,
|
||||
error,
|
||||
permissions,
|
||||
t,
|
||||
namespace,
|
||||
repoName,
|
||||
loadingCreatePermission,
|
||||
hasPermissionToCreate,
|
||||
userAutocompleteLink,
|
||||
groupAutocompleteLink
|
||||
} = this.props;
|
||||
if (error) {
|
||||
return (
|
||||
<ErrorPage
|
||||
title={t("permission.error-title")}
|
||||
subtitle={t("permission.error-subtitle")}
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading || !permissions || !availablePermissions) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
const createPermissionForm = hasPermissionToCreate ? (
|
||||
<CreatePermissionForm
|
||||
availableRoles={availableRepositoryRoles}
|
||||
availableVerbs={availableVerbs}
|
||||
createPermission={permission => this.createPermission(permission)}
|
||||
loading={loadingCreatePermission}
|
||||
currentPermissions={permissions}
|
||||
userAutocompleteLink={userAutocompleteLink}
|
||||
groupAutocompleteLink={groupAutocompleteLink}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Subtitle subtitle={t("permission.title")} />
|
||||
<table className="card-table table is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<LabelWithHelpIcon
|
||||
label={t("permission.name")}
|
||||
helpText={t("permission.help.nameHelpText")}
|
||||
/>
|
||||
</th>
|
||||
<th>
|
||||
<LabelWithHelpIcon
|
||||
label={t("permission.role")}
|
||||
helpText={t("permission.help.roleHelpText")}
|
||||
/>
|
||||
</th>
|
||||
<th>
|
||||
<LabelWithHelpIcon
|
||||
label={t("permission.permissions")}
|
||||
helpText={t("permission.help.permissionsHelpText")}
|
||||
/>
|
||||
</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{permissions.map(permission => {
|
||||
return (
|
||||
<SinglePermission
|
||||
availableRepositoryRoles={availableRepositoryRoles}
|
||||
availableRepositoryVerbs={availableVerbs}
|
||||
key={permission.name + permission.groupPermission.toString()}
|
||||
namespace={namespace}
|
||||
repoName={repoName}
|
||||
permission={permission}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{createPermissionForm}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
const namespace = ownProps.namespace;
|
||||
const repoName = ownProps.repoName;
|
||||
const error =
|
||||
getFetchPermissionsFailure(state, namespace, repoName) ||
|
||||
getCreatePermissionFailure(state, namespace, repoName) ||
|
||||
getDeletePermissionsFailure(state, namespace, repoName) ||
|
||||
getModifyPermissionsFailure(state, namespace, repoName) ||
|
||||
getFetchAvailablePermissionsFailure(state);
|
||||
const loading =
|
||||
isFetchPermissionsPending(state, namespace, repoName) ||
|
||||
isFetchAvailablePermissionsPending(state);
|
||||
const permissions = getPermissionsOfRepo(state, namespace, repoName);
|
||||
const loadingCreatePermission = isCreatePermissionPending(
|
||||
state,
|
||||
namespace,
|
||||
repoName
|
||||
);
|
||||
const hasPermissionToCreate = hasCreatePermission(state, namespace, repoName);
|
||||
const repositoryRolesLink = getRepositoryRolesLink(state);
|
||||
const repositoryVerbsLink = getRepositoryVerbsLink(state);
|
||||
const permissionsLink = getPermissionsLink(state, namespace, repoName);
|
||||
const groupAutocompleteLink = getGroupAutoCompleteLink(state);
|
||||
const userAutocompleteLink = getUserAutoCompleteLink(state);
|
||||
const availablePermissions = getAvailablePermissions(state);
|
||||
const availableRepositoryRoles = getAvailableRepositoryRoles(state);
|
||||
const availableVerbs = getAvailableRepositoryVerbs(state);
|
||||
|
||||
return {
|
||||
availablePermissions,
|
||||
availableRepositoryRoles,
|
||||
availableVerbs,
|
||||
namespace,
|
||||
repoName,
|
||||
repositoryRolesLink,
|
||||
repositoryVerbsLink,
|
||||
error,
|
||||
loading,
|
||||
permissions,
|
||||
hasPermissionToCreate,
|
||||
loadingCreatePermission,
|
||||
permissionsLink,
|
||||
groupAutocompleteLink,
|
||||
userAutocompleteLink
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
fetchPermissions: (link: string, namespace: string, repoName: string) => {
|
||||
dispatch(fetchPermissions(link, namespace, repoName));
|
||||
},
|
||||
fetchAvailablePermissionsIfNeeded: (
|
||||
repositoryRolesLink: string,
|
||||
repositoryVerbsLink: string
|
||||
) => {
|
||||
dispatch(
|
||||
fetchAvailablePermissionsIfNeeded(
|
||||
repositoryRolesLink,
|
||||
repositoryVerbsLink
|
||||
)
|
||||
);
|
||||
},
|
||||
createPermission: (
|
||||
link: string,
|
||||
permission: PermissionCreateEntry,
|
||||
namespace: string,
|
||||
repoName: string,
|
||||
callback?: () => void
|
||||
) => {
|
||||
dispatch(
|
||||
createPermission(link, permission, namespace, repoName, callback)
|
||||
);
|
||||
},
|
||||
createPermissionReset: (namespace: string, repoName: string) => {
|
||||
dispatch(createPermissionReset(namespace, repoName));
|
||||
},
|
||||
modifyPermissionReset: (namespace: string, repoName: string) => {
|
||||
dispatch(modifyPermissionReset(namespace, repoName));
|
||||
},
|
||||
deletePermissionReset: (namespace: string, repoName: string) => {
|
||||
dispatch(deletePermissionReset(namespace, repoName));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(translate("repos")(Permissions));
|
||||
@@ -0,0 +1,277 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
import type { RepositoryRole, Permission } from "@scm-manager/ui-types";
|
||||
import { translate } from "react-i18next";
|
||||
import {
|
||||
modifyPermission,
|
||||
isModifyPermissionPending,
|
||||
deletePermission,
|
||||
isDeletePermissionPending,
|
||||
findVerbsForRole
|
||||
} from "../modules/permissions";
|
||||
import { connect } from "react-redux";
|
||||
import type { History } from "history";
|
||||
import { Button, Icon } from "@scm-manager/ui-components";
|
||||
import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
|
||||
import RoleSelector from "../components/RoleSelector";
|
||||
import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
|
||||
import classNames from "classnames";
|
||||
import injectSheet from "react-jss";
|
||||
|
||||
type Props = {
|
||||
availableRepositoryRoles: RepositoryRole[],
|
||||
availableRepositoryVerbs: string[],
|
||||
submitForm: Permission => void,
|
||||
modifyPermission: (
|
||||
permission: Permission,
|
||||
namespace: string,
|
||||
name: string
|
||||
) => void,
|
||||
permission: Permission,
|
||||
t: string => string,
|
||||
namespace: string,
|
||||
repoName: string,
|
||||
match: any,
|
||||
history: History,
|
||||
loading: boolean,
|
||||
deletePermission: (
|
||||
permission: Permission,
|
||||
namespace: string,
|
||||
name: string
|
||||
) => void,
|
||||
deleteLoading: boolean,
|
||||
classes: any
|
||||
};
|
||||
|
||||
type State = {
|
||||
permission: Permission,
|
||||
showAdvancedDialog: boolean
|
||||
};
|
||||
|
||||
const styles = {
|
||||
centerMiddle: {
|
||||
display: "table-cell",
|
||||
verticalAlign: "middle !important"
|
||||
},
|
||||
columnWidth: {
|
||||
width: "100%"
|
||||
}
|
||||
};
|
||||
|
||||
class SinglePermission extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
const defaultPermission = props.availableRepositoryRoles
|
||||
? props.availableRepositoryRoles[0]
|
||||
: {};
|
||||
|
||||
this.state = {
|
||||
permission: {
|
||||
name: "",
|
||||
role: undefined,
|
||||
verbs: defaultPermission.verbs,
|
||||
groupPermission: false,
|
||||
_links: {}
|
||||
},
|
||||
showAdvancedDialog: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { permission } = this.props;
|
||||
|
||||
if (permission) {
|
||||
this.setState({
|
||||
permission: {
|
||||
name: permission.name,
|
||||
role: permission.role,
|
||||
verbs: permission.verbs,
|
||||
groupPermission: permission.groupPermission,
|
||||
_links: permission._links
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
deletePermission = () => {
|
||||
this.props.deletePermission(
|
||||
this.props.permission,
|
||||
this.props.namespace,
|
||||
this.props.repoName
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { permission, showAdvancedDialog } = this.state;
|
||||
const {
|
||||
t,
|
||||
availableRepositoryRoles,
|
||||
availableRepositoryVerbs,
|
||||
loading,
|
||||
namespace,
|
||||
repoName,
|
||||
classes
|
||||
} = this.props;
|
||||
const availableRoleNames =
|
||||
!!availableRepositoryRoles && availableRepositoryRoles.map(r => r.name);
|
||||
const readOnly = !this.mayChangePermissions();
|
||||
const roleSelector = readOnly ? (
|
||||
<td>{permission.role ? permission.role : t("permission.custom")}</td>
|
||||
) : (
|
||||
<td>
|
||||
<RoleSelector
|
||||
handleRoleChange={this.handleRoleChange}
|
||||
availableRoles={availableRoleNames}
|
||||
role={permission.role}
|
||||
loading={loading}
|
||||
/>
|
||||
</td>
|
||||
);
|
||||
|
||||
const selectedVerbs = permission.role
|
||||
? findVerbsForRole(availableRepositoryRoles, permission.role)
|
||||
: permission.verbs;
|
||||
|
||||
const advancedDialog = showAdvancedDialog ? (
|
||||
<AdvancedPermissionsDialog
|
||||
readOnly={readOnly}
|
||||
availableVerbs={availableRepositoryVerbs}
|
||||
selectedVerbs={selectedVerbs}
|
||||
onClose={this.closeAdvancedPermissionsDialog}
|
||||
onSubmit={this.submitAdvancedPermissionsDialog}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
const iconType =
|
||||
permission && permission.groupPermission ? (
|
||||
<Icon title={t("permission.group")} name="user-friends" />
|
||||
) : (
|
||||
<Icon title={t("permission.user")} name="user" />
|
||||
);
|
||||
|
||||
return (
|
||||
<tr className={classes.columnWidth}>
|
||||
<td className={classes.centerMiddle}>
|
||||
{iconType} {permission.name}
|
||||
</td>
|
||||
{roleSelector}
|
||||
<td className={classes.centerMiddle}>
|
||||
<Button
|
||||
label={t("permission.advanced-button.label")}
|
||||
action={this.handleDetailedPermissionsPressed}
|
||||
/>
|
||||
</td>
|
||||
<td className={classNames("is-darker", classes.centerMiddle)}>
|
||||
<DeletePermissionButton
|
||||
permission={permission}
|
||||
namespace={namespace}
|
||||
repoName={repoName}
|
||||
deletePermission={this.deletePermission}
|
||||
loading={this.props.deleteLoading}
|
||||
/>
|
||||
{advancedDialog}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
mayChangePermissions = () => {
|
||||
return this.props.permission._links && this.props.permission._links.update;
|
||||
};
|
||||
|
||||
handleDetailedPermissionsPressed = () => {
|
||||
this.setState({ showAdvancedDialog: true });
|
||||
};
|
||||
|
||||
closeAdvancedPermissionsDialog = () => {
|
||||
this.setState({ showAdvancedDialog: false });
|
||||
};
|
||||
|
||||
submitAdvancedPermissionsDialog = (newVerbs: string[]) => {
|
||||
const { permission } = this.state;
|
||||
this.setState(
|
||||
{
|
||||
showAdvancedDialog: false,
|
||||
permission: { ...permission, role: undefined, verbs: newVerbs }
|
||||
},
|
||||
() => this.modifyPermissionVerbs(newVerbs)
|
||||
);
|
||||
};
|
||||
|
||||
handleRoleChange = (role: string) => {
|
||||
const { permission } = this.state;
|
||||
this.setState(
|
||||
{
|
||||
permission: { ...permission, role: role, verbs: undefined }
|
||||
},
|
||||
() => this.modifyPermissionRole(role)
|
||||
);
|
||||
};
|
||||
|
||||
findAvailableRole = (roleName: string) => {
|
||||
const { availableRepositoryRoles } = this.props;
|
||||
return availableRepositoryRoles.find(role => role.name === roleName);
|
||||
};
|
||||
|
||||
modifyPermissionRole = (role: string) => {
|
||||
let permission = this.state.permission;
|
||||
permission.role = role;
|
||||
this.props.modifyPermission(
|
||||
permission,
|
||||
this.props.namespace,
|
||||
this.props.repoName
|
||||
);
|
||||
};
|
||||
|
||||
modifyPermissionVerbs = (verbs: string[]) => {
|
||||
let permission = this.state.permission;
|
||||
permission.verbs = verbs;
|
||||
this.props.modifyPermission(
|
||||
permission,
|
||||
this.props.namespace,
|
||||
this.props.repoName
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
const permission = ownProps.permission;
|
||||
const loading = isModifyPermissionPending(
|
||||
state,
|
||||
ownProps.namespace,
|
||||
ownProps.repoName,
|
||||
permission
|
||||
);
|
||||
const deleteLoading = isDeletePermissionPending(
|
||||
state,
|
||||
ownProps.namespace,
|
||||
ownProps.repoName,
|
||||
permission
|
||||
);
|
||||
|
||||
return { loading, deleteLoading };
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
modifyPermission: (
|
||||
permission: Permission,
|
||||
namespace: string,
|
||||
repoName: string
|
||||
) => {
|
||||
dispatch(modifyPermission(permission, namespace, repoName));
|
||||
},
|
||||
deletePermission: (
|
||||
permission: Permission,
|
||||
namespace: string,
|
||||
repoName: string
|
||||
) => {
|
||||
dispatch(deletePermission(permission, namespace, repoName));
|
||||
}
|
||||
};
|
||||
};
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(translate("repos")(injectSheet(styles)(SinglePermission)));
|
||||
Reference in New Issue
Block a user