Add advanced dialog

scm-ui/public/locales/en/permissions.json

@@ -4,5 +4,12 @@
       "label": "Set permissions"
     },
     "set-permissions-successful": "Permissions set successfully"
+  },
+  "advanced": {
+    "dialog": {
+      "title": "Advanced permissions",
+      "submit": "Submit",
+      "abort": "Abort"
+    }
   }
 }

scm-ui/src/repos/permissions/components/TypeSelector.js

@@ -26,11 +26,15 @@ class TypeSelector extends React.Component<Props> {
 
     if (!availableTypes) return null;
 
+    const options = type
+      ? this.createSelectOptions(availableTypes)
+      : ["", ...this.createSelectOptions(availableTypes)];
+
     return (
       <Select
         onChange={handleTypeChange}
-        value={type ? type : availableTypes[0]}
+        value={type ? type : ""}
-        options={this.createSelectOptions(availableTypes)}
+        options={options}
         loading={loading}
         label={label}
         helpText={helpText}

scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js

@@ -0,0 +1,87 @@
+// @flow
+
+import React from "react";
+import { Button, Checkbox, SubmitButton } from "@scm-manager/ui-components";
+import { translate } from "react-i18next";
+
+type Props = {
+  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.includes(verb))
+    );
+
+    this.state = { verbs };
+  }
+
+  render() {
+    const { t, onClose } = this.props;
+    const { verbs } = this.state;
+
+    const verbSelectBoxes = Object.entries(verbs).map(e => (
+      <Checkbox
+        key={e[0]}
+        name={e[0]}
+        label={e[0]}
+        checked={e[1]}
+        onChange={this.handleChange}
+      />
+    ));
+
+    return (
+      <div className={"modal is-active"}>
+        <div className="modal-background" />
+        <div className="modal-card">
+          <header className="modal-card-head">
+            <p className="modal-card-title">{t("advanced.dialog.title")}</p>
+            <button
+              className="delete"
+              aria-label="close"
+              onClick={() => onClose()}
+            />
+          </header>
+          <section className="modal-card-body">
+            <div className="content">{verbSelectBoxes}</div>
+            <form onSubmit={this.onSubmit}>
+              <SubmitButton label={t("advanced.dialog.submit")} />
+              <Button label={t("advanced.dialog.abort")} action={onClose} />
+            </form>
+          </section>
+        </div>
+      </div>
+    );
+  }
+
+  handleChange = (value: boolean, name: string) => {
+    const { verbs } = this.state;
+    const newVerbs = { ...verbs, [name]: value };
+    console.log(newVerbs);
+    this.setState({ verbs: newVerbs });
+  };
+
+  onSubmit = () => {
+    this.props.onSubmit(
+      Object.entries(this.state.verbs)
+        .filter(e => e[1])
+        .map(e => e[0])
+    );
+  };
+}
+
+export default translate("permissions")(AdvancedPermissionsDialog);

scm-ui/src/repos/permissions/containers/SinglePermission.js

@@ -14,9 +14,10 @@ import {
 } from "../modules/permissions";
 import { connect } from "react-redux";
 import type { History } from "history";
-import { Checkbox } from "@scm-manager/ui-components";
+import { Button, Checkbox } from "@scm-manager/ui-components";
 import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
 import TypeSelector from "../components/TypeSelector";
+import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 
 type Props = {
   availablePermissions: AvailableRepositoryPermissions,
@@ -35,7 +36,8 @@ type Props = {
 
 type State = {
   role: string,
-  permission: Permission
+  permission: Permission,
+  showAdvancedDialog: boolean
 };
 
 class SinglePermission extends React.Component<Props, State> {
@@ -53,7 +55,8 @@ class SinglePermission extends React.Component<Props, State> {
         groupPermission: false,
         _links: {}
       },
-      role: defaultPermission.name
+      role: defaultPermission.name,
+      showAdvancedDialog: false
     };
   }
 
@@ -87,7 +90,7 @@ class SinglePermission extends React.Component<Props, State> {
   };
 
   render() {
-    const { role, permission } = this.state;
+    const { role, permission, showAdvancedDialog } = this.state;
     const { availablePermissions, loading, namespace, repoName } = this.props;
     const availableRoleNames = availablePermissions.availableRoles.map(
       r => r.name
@@ -101,11 +104,24 @@ class SinglePermission extends React.Component<Props, State> {
             type={role}
             loading={loading}
           />
+          <Button
+            label={"..."}
+            action={this.handleDetailedPermissionsPressed}
+          />
         </td>
       ) : (
         <td>{role}</td>
       );
 
+    const advancedDialg = showAdvancedDialog ? (
+      <AdvancedPermissionsDialog
+        availableVerbs={availablePermissions.availableVerbs}
+        selectedVerbs={permission.verbs}
+        onClose={this.closeAdvancedPermissionsDialog}
+        onSubmit={this.submitAdvancedPermissionsDialog}
+      />
+    ) : null;
+
     return (
       <tr>
         <td>{permission.name}</td>
@@ -121,21 +137,48 @@ class SinglePermission extends React.Component<Props, State> {
             deletePermission={this.deletePermission}
             loading={this.props.deleteLoading}
           />
+          {advancedDialg}
         </td>
       </tr>
     );
   }
 
+  handleDetailedPermissionsPressed = () => {
+    this.setState({ showAdvancedDialog: true });
+  };
+
+  closeAdvancedPermissionsDialog = () => {
+    this.setState({ showAdvancedDialog: false });
+  };
+
+  submitAdvancedPermissionsDialog = (newVerbs: string[]) => {
+    const { permission } = this.state;
+    const newRole = findMatchingRoleName(
+      this.props.availablePermissions,
+      newVerbs
+    );
+    this.setState(
+      {
+        showAdvancedDialog: false,
+        permission: { ...permission, verbs: newVerbs },
+        role: newRole
+      },
+      () => this.modifyPermission(newVerbs)
+    );
+  };
+
   handleTypeChange = (type: string) => {
     const selectedRole = this.findAvailableRole(type);
-    this.setState({
+    this.setState(
+      {
         permission: {
           ...this.state.permission,
           verbs: selectedRole.verbs
         },
         role: type
-    });
+      },
-    this.modifyPermission(selectedRole.verbs);
+      () => this.modifyPermission(selectedRole.verbs)
+    );
   };
 
   findAvailableRole = (type: string) => {