From 65b1ca477a55b9fd71d873cf9984ad57015b28c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 15:31:14 +0100
Subject: [PATCH] use icons for permission type and for delete function

---
 .../packages/ui-components/src/forms/Radio.js |  5 +---
 scm-ui/public/locales/de/repos.json           |  1 -
 scm-ui/public/locales/en/repos.json           |  1 -
 .../buttons/DeletePermissionButton.js         | 14 ++++-----
 .../containers/CreatePermissionForm.js        |  6 +++-
 .../permissions/containers/Permissions.js     |  6 ----
 .../containers/SinglePermission.js            | 30 +++++++++++++++----
 7 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/forms/Radio.js b/scm-ui-components/packages/ui-components/src/forms/Radio.js
index 2b1c626d7b..6460e67070 100644
--- 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>
     );
   }
 }
diff --git a/scm-ui/public/locales/de/repos.json b/scm-ui/public/locales/de/repos.json
index 7484a4a30c..e82edf7512 100644
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -93,7 +93,6 @@
     "error-subtitle": "Unbekannter Fehler bei Berechtigung",
     "name": "Benutzer oder Gruppe",
     "role": "Rolle",
-    "type": "Typ",
     "permissions": "Berechtigung",
     "group-permission": "Gruppenberechtigung",
     "user-permission": "Benutzerberechtigung",
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index 63b8b3752c..727fe4f664 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -93,7 +93,6 @@
     "error-subtitle": "Unknown permissions error",
     "name": "User or group",
     "role": "Role",
-    "type": "Type",
     "permissions": "Permissions",
     "group-permission": "Group Permission",
     "user-permission": "User Permission",
diff --git a/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js b/scm-ui/src/repos/permissions/components/buttons/DeletePermissionButton.js
index a3ba8616c9..46e68ad72f 100644
--- 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>
     );
   }
 }
diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index 0260dacd46..aa69f7b3e1 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -96,6 +96,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
     const { t } = this.props;
     if (this.state.groupPermission) {
       return (
+
         <Autocomplete
           loadSuggestions={this.loadGroupAutocompletion}
           valueSelected={this.groupOrUserSelected}
@@ -159,6 +160,9 @@ class CreatePermissionForm extends React.Component<Props, State> {
         </h2>
         {advancedDialog}
         <form onSubmit={this.submit}>
+          <div className="field is-grouped">
+
+          <div className="control">
           <Radio
             name="permission_scope"
             value="USER_PERMISSION"
@@ -173,7 +177,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
             label={t("permission.group-permission")}
             onChange={this.permissionScopeChanged}
           />
-
+          </div></div>
           <div className="columns">
             <div className="column is-two-thirds">
               {this.renderAutocompletionField()}
diff --git a/scm-ui/src/repos/permissions/containers/Permissions.js b/scm-ui/src/repos/permissions/containers/Permissions.js
index b4aa583084..fd7b7ef604 100644
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -152,12 +152,6 @@ class Permissions extends React.Component<Props> {
                   helpText={t("permission.help.nameHelpText")}
                 />
               </th>
-              <th className="is-hidden-mobile">
-                <LabelWithHelpIcon
-                  label={t("permission.type")}
-                  helpText={t("permission.help.groupPermissionHelpText")}
-                />
-              </th>
               <th>
                 <LabelWithHelpIcon
                   label={t("permission.role")}
diff --git a/scm-ui/src/repos/permissions/containers/SinglePermission.js b/scm-ui/src/repos/permissions/containers/SinglePermission.js
index c5be48836d..7c29fe2415 100644
--- a/scm-ui/src/repos/permissions/containers/SinglePermission.js
+++ b/scm-ui/src/repos/permissions/containers/SinglePermission.js
@@ -14,10 +14,12 @@ 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,
@@ -39,7 +41,8 @@ type Props = {
     namespace: string,
     name: string
   ) => void,
-  deleteLoading: boolean
+  deleteLoading: boolean,
+  classes: any
 };
 
 type State = {
@@ -48,6 +51,12 @@ type State = {
   showAdvancedDialog: boolean
 };
 
+const styles = {
+  iconColor: {
+    color: "#9a9a9a"
+  }
+};
+
 class SinglePermission extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -104,7 +113,8 @@ class SinglePermission extends React.Component<Props, State> {
       availablePermissions,
       loading,
       namespace,
-      repoName
+      repoName,
+      classes
     } = this.props;
     const availableRoleNames = availablePermissions.availableRoles.map(
       r => r.name
@@ -138,10 +148,18 @@ class SinglePermission extends React.Component<Props, State> {
         ? t("permission.group")
         : t("permission.user");
 
+    const iconType =
+      permission && permission.groupPermission ? (
+        <i className={classNames("fas fa-user-friends", classes.iconColor)} />
+      ) : (
+        <i className={classNames("fas fa-user", classes.iconColor)} />
+      );
+
     return (
       <tr>
-        <td>{permission.name}</td>
-        <td>{type}</td>
+        <td>
+          {iconType} {permission.name}
+        </td>
         {roleSelector}
         <td>
           <Button
@@ -261,4 +279,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(SinglePermission));
+)(translate("repos")(injectSheet(styles)(SinglePermission)));