This commit is contained in:
Mohamed Karray
2019-02-25 16:28:51 +01:00
32 changed files with 328 additions and 126 deletions

View File

@@ -34,7 +34,7 @@ class PluginLoader extends React.Component<Props, State> {
this.setState({
message: "loading plugin information"
});
this.getPlugins(this.props.link);
}
}
@@ -55,12 +55,19 @@ class PluginLoader extends React.Component<Props, State> {
});
const promises = [];
for (let plugin of plugins) {
const sortedPlugins = plugins.sort(comparePluginsByName);
for (let plugin of sortedPlugins) {
promises.push(this.loadPlugin(plugin));
}
return Promise.all(promises);
return promises.reduce((chain, current) => {
return chain.then(chainResults => {
return current.then(currentResult => [...chainResults, currentResult])
}
);
}, Promise.resolve([]));
};
loadPlugin = (plugin: Plugin) => {
this.setState({
message: `loading ${plugin.name}`
@@ -94,7 +101,15 @@ class PluginLoader extends React.Component<Props, State> {
return <Loading message={message} />;
}
}
const comparePluginsByName = (a: Plugin, b: Plugin) => {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
};
const mapStateToProps = state => {
const link = getUiPluginsLink(state);
return {

View File

@@ -96,7 +96,7 @@ class Profile extends React.Component<Props, State> {
label={t("profile.changePasswordNavLink")}
/>
<ExtensionPoint
name="profile.subnavigation"
name="profile.setting"
props={extensionProps}
renderAll={true}
/>

View File

@@ -5,7 +5,12 @@ import { translate } from "react-i18next";
import type { Group } from "@scm-manager/ui-types";
import type { PagedCollection } from "@scm-manager/ui-types";
import type { History } from "history";
import { Page, Paginator } from "@scm-manager/ui-components";
import {
Page,
PageActions,
Button,
Paginator
} from "@scm-manager/ui-components";
import { GroupTable } from "./../components/table";
import CreateGroupButton from "../components/buttons/CreateGroupButton";
@@ -87,7 +92,18 @@ class Groups extends React.Component<Props> {
renderCreateButton() {
if (this.props.canAddGroups) {
return <CreateGroupButton />;
return (
<>
<CreateGroupButton />
<PageActions>
<Button
label={this.props.t("create-group-button.label")}
link="/groups/add"
color="primary"
/>
</PageActions>
</>
);
} else {
return;
}

View File

@@ -142,7 +142,7 @@ class SingleGroup extends React.Component<Props> {
permissionsUrl={`${url}/settings/permissions`}
/>
<ExtensionPoint
name="group.subnavigation"
name="group.setting"
props={extensionProps}
renderAll={true}
/>

View File

@@ -14,7 +14,13 @@ import {
isFetchReposPending
} from "../modules/repos";
import { translate } from "react-i18next";
import { CreateButton, Page, Paginator } from "@scm-manager/ui-components";
import {
Page,
PageActions,
Button,
CreateButton,
Paginator
} from "@scm-manager/ui-components";
import RepositoryList from "../components/list";
import { withRouter } from "react-router-dom";
import type { History } from "history";
@@ -89,10 +95,19 @@ class Overview extends React.Component<Props> {
const { showCreateButton, t } = this.props;
if (showCreateButton) {
return (
<CreateButton
label={t("overview.createButton")}
link="/repos/create"
/>
<>
<CreateButton
label={t("overview.createButton")}
link="/repos/create"
/>
<PageActions>
<Button
label={t("overview.createButton")}
link="/repos/create"
color="primary"
/>
</PageActions>
</>
);
}
return null;

View File

@@ -214,7 +214,7 @@ class RepositoryRoot extends React.Component<Props> {
repository={repository}
/>
<ExtensionPoint
name="repository.subnavigation"
name="repository.setting"
props={extensionProps}
renderAll={true}
/>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -136,7 +136,7 @@ class SingleUser extends React.Component<Props> {
permissionsUrl={`${url}/settings/permissions`}
/>
<ExtensionPoint
name="user.subnavigation"
name="user.setting"
props={extensionProps}
renderAll={true}
/>

View File

@@ -14,7 +14,13 @@ import {
getFetchUsersFailure
} from "../modules/users";
import { Page, CreateButton, Paginator } from "@scm-manager/ui-components";
import {
Page,
PageActions,
Button,
CreateButton,
Paginator
} from "@scm-manager/ui-components";
import { UserTable } from "./../components/table";
import type { User, PagedCollection } from "@scm-manager/ui-types";
import { getUsersLink } from "../../modules/indexResource";
@@ -87,7 +93,18 @@ class Users extends React.Component<Props> {
renderCreateButton() {
const { t } = this.props;
if (this.props.canAddUsers) {
return <CreateButton label={t("users.createButton")} link="/users/add" />;
return (
<>
<CreateButton label={t("users.createButton")} link="/users/add" />
<PageActions>
<Button
label={t("users.createButton")}
link="/users/add"
color="primary"
/>
</PageActions>
</>
);
} else {
return;
}