Add advanced permission button for new permissions

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

@@ -94,6 +94,7 @@
     "name": "User or Group",
     "role": "Role",
     "permissions": "Permissions",
+    "permissions-help": "Use this to specify your own set of permissions regardless of predefined roles",
     "group-permission": "Group Permission",
     "user-permission": "User Permission",
     "edit-permission": {

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

@@ -1,16 +1,22 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { Autocomplete, SubmitButton } from "@scm-manager/ui-components";
+import {
-import RoleSelector from "./RoleSelector";
+  Autocomplete,
+  SubmitButton,
+  Button,
+  LabelWithHelpIcon
+} from "@scm-manager/ui-components";
+import RoleSelector from "../components/RoleSelector";
 import type {
   AvailableRepositoryPermissions,
   PermissionCollection,
   PermissionCreateEntry,
   SelectValue
 } from "@scm-manager/ui-types";
-import * as validator from "./permissionValidation";
+import * as validator from "../components/permissionValidation";
 import { findMatchingRoleName } from "../modules/permissions";
+import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 
 type Props = {
   t: string => string,
@@ -27,7 +33,8 @@ type State = {
   verbs: string[],
   groupPermission: boolean,
   valid: boolean,
-  value?: SelectValue
+  value?: SelectValue,
+  showAdvancedDialog: boolean
 };
 
 class CreatePermissionForm extends React.Component<Props, State> {
@@ -39,7 +46,8 @@ class CreatePermissionForm extends React.Component<Props, State> {
       verbs: props.availablePermissions.availableRoles[0].verbs,
       groupPermission: false,
       valid: true,
-      value: undefined
+      value: undefined,
+      showAdvancedDialog: false
     };
   }
 
@@ -126,19 +134,29 @@ class CreatePermissionForm extends React.Component<Props, State> {
   render() {
     const { t, availablePermissions, loading } = this.props;
 
-    const { verbs } = this.state;
+    const { verbs, showAdvancedDialog } = this.state;
 
     const availableRoleNames = availablePermissions.availableRoles.map(
       r => r.name
     );
     const matchingRole = findMatchingRoleName(availablePermissions, verbs);
 
+    const advancedDialog = showAdvancedDialog ? (
+      <AdvancedPermissionsDialog
+        availableVerbs={availablePermissions.availableVerbs}
+        selectedVerbs={verbs}
+        onClose={this.closeAdvancedPermissionsDialog}
+        onSubmit={this.submitAdvancedPermissionsDialog}
+      />
+    ) : null;
+
     return (
       <div>
         <hr />
         <h2 className="subtitle">
           {t("permission.add-permission.add-permission-heading")}
         </h2>
+        {advancedDialog}
         <form onSubmit={this.submit}>
           <div className="control">
             <label className="radio">
@@ -164,22 +182,32 @@ class CreatePermissionForm extends React.Component<Props, State> {
           </div>
 
           <div className="columns">
-            <div className="column is-three-quarters">
+            <div className="column is-two-thirds">
               {this.renderAutocompletionField()}
             </div>
-            <div className="column is-one-quarter">
+            <div className="column is-one-third">
+              <div className="columns">
+                <div className="column is-half">
                   <RoleSelector
                     availableRoles={availableRoleNames}
                     label={t("permission.role")}
                     helpText={t("permission.help.roleHelpText")}
                     handleRoleChange={this.handleRoleChange}
-                role={
+                    role={matchingRole}
-                  matchingRole
-                    ? matchingRole
-                    : availablePermissions.availableRoles[0].name
-                }
                   />
                 </div>
+                <div className="column is-half">
+                  <LabelWithHelpIcon
+                    label={t("permission.permissions")}
+                    helpText={t("permission.permissions.help")}
+                  />
+                  <Button
+                    label={t("permission.advanced-button.label")}
+                    action={this.handleDetailedPermissionsPressed}
+                  />
+                </div>
+              </div>
+            </div>
           </div>
           <div className="columns">
             <div className="column">
@@ -195,6 +223,21 @@ class CreatePermissionForm extends React.Component<Props, State> {
     );
   }
 
+  handleDetailedPermissionsPressed = () => {
+    this.setState({ showAdvancedDialog: true });
+  };
+
+  closeAdvancedPermissionsDialog = () => {
+    this.setState({ showAdvancedDialog: false });
+  };
+
+  submitAdvancedPermissionsDialog = (newVerbs: string[]) => {
+    this.setState({
+      showAdvancedDialog: false,
+      verbs: newVerbs
+    });
+  };
+
   submit = e => {
     this.props.createPermission({
       name: this.state.name,

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

@@ -29,7 +29,7 @@ import type {
   PermissionCreateEntry
 } from "@scm-manager/ui-types";
 import SinglePermission from "./SinglePermission";
-import CreatePermissionForm from "../components/CreatePermissionForm";
+import CreatePermissionForm from "./CreatePermissionForm";
 import type { History } from "history";
 import { getPermissionsLink } from "../../modules/repos";
 import {