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

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 key = permission.split(":").join(".");
+    const { name, checked, onChange, disabled, role, t } = this.props;
+
+    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}
-        label={this.translateOrDefault("permissions." + key + ".displayName", key)}
+        key={name}
+        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 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>
+      <PermissionsWrapper permissions={permissions} onChange={this.valueChanged} disabled={!overwritePermissionsLink} />
     );
   };