Build new PermissionsWrapper and use doubled-row for permissions and repositoryRoles overview, Remove duplicated PermissionCheckbox

scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
-import { InputField, SubmitButton } from "@scm-manager/ui-components";
+import { InputField, Level, SubmitButton } from "@scm-manager/ui-components";
 import { getRepositoryRolesLink, getRepositoryVerbsLink } from "../../../modules/indexResource";
 import { fetchAvailableVerbs, getFetchVerbsFailure, getVerbsFromState, isFetchVerbsPending } from "../modules/roles";
-import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox";
+import PermissionsWrapper from "../../../permissions/components/PermissionsWrapper";
 
 type Props = WithTranslation & {
   role?: RepositoryRole;
@@ -89,16 +89,9 @@ class RepositoryRoleForm extends React.Component<Props, State> {
     const { loading, availableVerbs, t } = this.props;
     const { role } = this.state;
 
-    const verbSelectBoxes = !availableVerbs
+    const selectedVerbs = availableVerbs
-      ? null
+      ? availableVerbs.reduce((obj, verb) => ({ ...obj, [verb]: role.verbs.includes(verb) }), {})
-      : availableVerbs.map(verb => (
+      : {};
-          <PermissionCheckbox
-            key={verb}
-            name={verb}
-            checked={role.verbs.includes(verb)}
-            onChange={this.handleVerbChange}
-          />
-        ));
 
     return (
       <form onSubmit={this.submit}>
@@ -111,16 +104,23 @@ class RepositoryRoleForm extends React.Component<Props, State> {
         />
         <div className="field">
           <label className="label">{t("repositoryRole.form.permissions")}</label>
-          {verbSelectBoxes}
+          <PermissionsWrapper
+            permissions={selectedVerbs}
+            onChange={this.handleVerbChange}
+            disabled={false}
+            role={true}
+          />
         </div>
         <hr />
-        <SubmitButton loading={loading} label={t("repositoryRole.form.submit")} disabled={!this.isValid()} />
+        <Level
+          right={<SubmitButton loading={loading} label={t("repositoryRole.form.submit")} disabled={!this.isValid()} />}
+        />
       </form>
     );
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   const loading = isFetchVerbsPending(state);
   const error = getFetchVerbsFailure(state);
   const verbsLink = getRepositoryVerbsLink(state);

scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx

@@ -3,24 +3,34 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
-  permission: string;
+  name: string;
   checked: boolean;
-  onChange: (value: boolean, name: string) => void;
+  onChange?: (value: boolean, name?: string) => void;
   disabled: boolean;
+  role?: boolean;
 };
 
 class PermissionCheckbox extends React.Component<Props> {
   render() {
-    const { t, permission, checked, onChange, disabled } = this.props;
+    const { name, checked, onChange, disabled, role, t } = this.props;
-    const key = permission.split(":").join(".");
+
+    const key = name.split(":").join(".");
+    const label = role
+      ? t("verbs.repository." + name + ".displayName")
+      : this.translateOrDefault("permissions." + key + ".displayName", key);
+    const helpText = role
+      ? t("verbs.repository." + name + ".description")
+      : this.translateOrDefault("permissions." + key + ".description", t("permissions.unknown"));
+
     return (
       <Checkbox
-        name={permission}
+        key={name}
-        label={this.translateOrDefault("permissions." + key + ".displayName", key)}
+        name={name}
+        label={label}
+        helpText={helpText}
         checked={checked}
         onChange={onChange}
         disabled={disabled}
-        helpText={this.translateOrDefault("permissions." + key + ".description", t("permissions.unknown"))}
       />
     );
   }

scm-ui/ui-webapp/src/permissions/components/PermissionsWrapper.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import classNames from "classnames";
+import styled from "styled-components";
+import PermissionCheckbox from "./PermissionCheckbox";
+import { Loading } from "@scm-manager/ui-components";
+
+type Props = {
+  permissions: {
+    [key: string]: boolean;
+  };
+  onChange: (value: boolean, name: string) => void;
+  disabled: boolean;
+  role?: boolean;
+};
+
+const StyledWrapper = styled.div`
+  padding-bottom: 0;
+
+  & .field .control {
+    width: 100%;
+    word-wrap: break-word;
+  }
+`;
+
+export default class PermissionsWrapper extends React.Component<Props> {
+  render() {
+    const { permissions, onChange, disabled, role } = this.props;
+
+    if (!permissions) {
+      return <Loading />;
+    }
+
+    const permissionArray = Object.keys(permissions);
+    return (
+      <div className="columns">
+        <StyledWrapper className={classNames("column", "is-half")}>
+          {permissionArray.slice(0, permissionArray.length / 2 + 1).map(p => (
+            <PermissionCheckbox
+              key={p}
+              name={p}
+              checked={permissions[p]}
+              onChange={onChange}
+              disabled={disabled}
+              role={role}
+            />
+          ))}
+        </StyledWrapper>
+        <StyledWrapper className={classNames("column", "is-half")}>
+          {permissionArray.slice(permissionArray.length / 2 + 1, permissionArray.length).map(p => (
+            <PermissionCheckbox
+              key={p}
+              name={p}
+              checked={permissions[p]}
+              onChange={onChange}
+              disabled={disabled}
+              role={role}
+            />
+          ))}
+        </StyledWrapper>
+      </div>
+    );
+  }
+}

scm-ui/ui-webapp/src/permissions/components/SetPermissions.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
-import classNames from "classnames";
-import styled from "styled-components";
 import { Link } from "@scm-manager/ui-types";
-import { Notification, ErrorNotification, SubmitButton } from "@scm-manager/ui-components";
+import { Notification, ErrorNotification, SubmitButton, Level } from "@scm-manager/ui-components";
 import { getLink } from "../../modules/indexResource";
 import { loadPermissionsForEntity, setPermissions } from "./handlePermissions";
-import PermissionCheckbox from "./PermissionCheckbox";
+import PermissionsWrapper from "./PermissionsWrapper";
 
 type Props = WithTranslation & {
   availablePermissionLink: string;
@@ -25,15 +23,6 @@ type State = {
   overwritePermissionsLink?: Link;
 };
 
-const PermissionsWrapper = styled.div`
-  padding-bottom: 0;
-
-  & .field .control {
-    width: 100%;
-    word-wrap: break-word;
-  }
-`;
-
 class SetPermissions extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -43,7 +32,6 @@ class SetPermissions extends React.Component<Props, State> {
       loading: true,
       permissionsChanged: false,
       permissionsSubmitted: false,
-      modifiable: false,
       overwritePermissionsLink: undefined
     };
   }
@@ -125,39 +113,23 @@ class SetPermissions extends React.Component<Props, State> {
       <form onSubmit={this.submit}>
         {message}
         {this.renderPermissions()}
-        <SubmitButton disabled={!this.state.permissionsChanged} loading={loading} label={t("setPermissions.button")} />
+        <Level
+          right={
+            <SubmitButton
+              disabled={!this.state.permissionsChanged}
+              loading={loading}
+              label={t("setPermissions.button")}
+            />
+          }
+        />
       </form>
     );
   }
 
   renderPermissions = () => {
     const { overwritePermissionsLink, permissions } = this.state;
-    const permissionArray = Object.keys(permissions);
     return (
-      <div className="columns">
+      <PermissionsWrapper permissions={permissions} onChange={this.valueChanged} disabled={!overwritePermissionsLink} />
-        <PermissionsWrapper className={classNames("column", "is-half")}>
-          {permissionArray.slice(0, permissionArray.length / 2 + 1).map(p => (
-            <PermissionCheckbox
-              key={p}
-              permission={p}
-              checked={permissions[p]}
-              onChange={this.valueChanged}
-              disabled={!overwritePermissionsLink}
-            />
-          ))}
-        </PermissionsWrapper>
-        <PermissionsWrapper className={classNames("column", "is-half")}>
-          {permissionArray.slice(permissionArray.length / 2 + 1, permissionArray.length).map(p => (
-            <PermissionCheckbox
-              key={p}
-              permission={p}
-              checked={permissions[p]}
-              onChange={this.valueChanged}
-              disabled={!overwritePermissionsLink}
-            />
-          ))}
-        </PermissionsWrapper>
-      </div>
     );
   };
 

scm-ui/ui-webapp/src/repos/permissions/components/PermissionCheckbox.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
-import { Checkbox } from "@scm-manager/ui-components";
-
-type Props = WithTranslation & {
-  disabled: boolean;
-  name: string;
-  checked: boolean;
-  onChange?: (value: boolean, name?: string) => void;
-};
-
-class PermissionCheckbox extends React.Component<Props> {
-  render() {
-    const { t } = this.props;
-    return (
-      <Checkbox
-        key={this.props.name}
-        name={this.props.name}
-        helpText={t("verbs.repository." + this.props.name + ".description")}
-        label={t("verbs.repository." + this.props.name + ".displayName")}
-        checked={this.props.checked}
-        onChange={this.props.onChange}
-        disabled={this.props.disabled}
-      />
-    );
-  }
-}
-
-export default withTranslation("plugins")(PermissionCheckbox);

scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { ButtonGroup, Button, SubmitButton, Modal } from "@scm-manager/ui-components";
-import PermissionCheckbox from "../components/PermissionCheckbox";
+import PermissionCheckbox from "../../../permissions/components/PermissionCheckbox";
 
 type Props = WithTranslation & {
   readOnly: boolean;
@@ -33,7 +33,14 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
     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} />
+      <PermissionCheckbox
+        key={e[0]}
+        name={e[0]}
+        checked={e[1]}
+        onChange={this.handleChange}
+        disabled={readOnly}
+        role={true}
+      />
     ));
 
     const submitButton = !readOnly ? <SubmitButton label={t("permission.advanced.dialog.submit")} /> : null;