Merge with 2.0.0-m3

2025-11-10 07:25:44 +01:00 · 2019-02-21 15:17:41 +01:00
parent 99c3bc6455 312d5530cf
commit beb8697018
8 changed files with 105 additions and 77 deletions
--- a/scm-ui-components/packages/ui-components/src/forms/Radio.js
+++ b/scm-ui-components/packages/ui-components/src/forms/Radio.js
@@ -22,8 +22,7 @@ class Radio extends React.Component<Props> {

  render() {
    return (
-      <div className="field is-grouped">
-        <div className="control">
+
          <label className="radio" disabled={this.props.disabled}>
            <input
              type="radio"
@@ -36,8 +35,6 @@ class Radio extends React.Component<Props> {
            {this.props.label}
            {this.renderHelp()}
          </label>
-        </div>
-      </div>
    );
  }
 }
--- a/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js
+++ b/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js
@@ -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>
    );
  }
 }
--- a/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.test.js
+++ b/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.test.js
@@ -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");
  });
--- a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
+++ b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
@@ -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>
+    const footer = (
      <form onSubmit={this.onSubmit}>
-          {submitButton}
+        <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}
      />
    );
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -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="field is-grouped">
            <div className="control">
-            <label className="radio">
-              <input
-                type="radio"
+              <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
    });
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -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")}
--- a/scm-ui/src/repos/permissions/containers/SinglePermission.js
+++ b/scm-ui/src/repos/permissions/containers/SinglePermission.js
@@ -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)));
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -240,7 +240,7 @@ $fa-font-path: "webfonts";
 }

 // forms
-.field:not(.is-grouped) {
+form .field:not(.is-grouped) {
  margin-bottom: 1rem;
 }
 .input,
@@ -250,6 +250,15 @@ $fa-font-path: "webfonts";
  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-next,
 .pagination-link,