apply feedback on permission pages

10 files changed, 66 insertions, 69 deletions

diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/ActionsCell.js b/server/sonar-web/src/main/js/apps/permission-templates/components/ActionsCell.js
index 6ce739b1ca4..bd538f0a2e0 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/ActionsCell.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/ActionsCell.js
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import { Link } from 'react-router';
 import difference from 'lodash/difference';
 import Backbone from 'backbone';
 import { PermissionTemplateType, CallbackType } from '../propTypes';
@@ -31,7 +32,12 @@ export default class ActionsCell extends React.Component {
   static propTypes = {
     permissionTemplate: PermissionTemplateType.isRequired,
     topQualifiers: React.PropTypes.array.isRequired,
-    refresh: CallbackType
+    refresh: CallbackType,
+    fromDetails: React.PropTypes.bool
+  };
+
+  static defaultProps = {
+    fromDetails: false
   };
 
   static contextTypes = {
@@ -138,12 +144,21 @@ export default class ActionsCell extends React.Component {
           <button className="dropdown-toggle" data-toggle="dropdown">
             {translate('actions')}
             {' '}
-            <i className="icon-dropdown"></i>
+            <i className="icon-dropdown"/>
           </button>
 
           <ul className="dropdown-menu dropdown-menu-right">
             {this.renderSetDefaultsControl()}
 
+            {!this.props.fromDetails && (
+              <li>
+                <Link to={{ pathname: '/', query: { id: t.id } }}>
+                  {this.renderDropdownIcon(<i className="icon-edit"/>)}
+                  Edit Permissions
+                </Link>
+              </li>
+            )}
+
             <li>
               <a href="#"
                  className="js-update"
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/App.js b/server/sonar-web/src/main/js/apps/permission-templates/components/App.js
index 6405280c20a..2263339753b 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/App.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/App.js
@@ -26,7 +26,7 @@ import {
     mergePermissionsToTemplates,
     mergeDefaultsToTemplates
 } from '../utils';
-import '../styles.css';
+import '../../permissions/styles.css';
 
 export default class App extends React.Component {
   static propTypes = {
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.js b/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.js
index 5a820ef0d38..2b0330c8858 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.js
@@ -40,7 +40,7 @@ export default class ListHeader extends React.Component {
         <tr>
           <th>&nbsp;</th>
           {cells}
-          <th className="actions-column">&nbsp;</th>
+          <th className="thin nowrap text-right">&nbsp;</th>
         </tr>
         </thead>
     );
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.js b/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.js
index 96daea86f44..6c27462183b 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.js
@@ -55,11 +55,7 @@ export default class ListItem extends React.Component {
 
   render () {
     const permissions = this.props.permissionTemplate.permissions.map(p => (
-        <PermissionCell
-            key={p.key}
-            permission={p}
-            onShowUsers={this.handleShowUsers}
-            onShowGroups={this.handleShowGroups}/>
+        <PermissionCell key={p.key} permission={p}/>
     ));
 
     return (
@@ -72,7 +68,7 @@ export default class ListItem extends React.Component {
 
           {permissions}
 
-          <td className="actions-column">
+          <td className="nowrap thin text-right">
             <ActionsCell
                 permissionTemplate={this.props.permissionTemplate}
                 topQualifiers={this.props.topQualifiers}
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.js b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.js
index adfd60a5934..2c26fc89e3c 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.js
@@ -18,44 +18,34 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import { PermissionType, CallbackType } from '../propTypes';
+import { PermissionType } from '../propTypes';
 import { translate } from '../../../helpers/l10n';
 
 export default class PermissionCell extends React.Component {
   static propTypes = {
-    permission: PermissionType.isRequired,
-    onShowUsers: CallbackType,
-    onShowGroups: CallbackType
+    permission: PermissionType.isRequired
   };
 
-  handleShowUsers (e) {
-    e.preventDefault();
-    this.props.onShowUsers(this.props.permission);
-  }
-
-  handleShowGroups (e) {
-    e.preventDefault();
-    this.props.onShowGroups(this.props.permission);
-  }
-
   render () {
     const { permission: p } = this.props;
 
     return (
         <td className="permission-column" data-permission={p.key}>
-          <ul>
-            {p.withProjectCreator && (
-                <li className="little-spacer-bottom">
-                  {translate('permission_templates.project_creators')}
-                </li>
-            )}
-            <li className="little-spacer-bottom">
-              <strong>{p.usersCount}</strong>{'  user(s)'}
-            </li>
-            <li>
-              <strong>{p.groupsCount}</strong>{' group(s)'}
-            </li>
-          </ul>
+          <div className="permission-column-inner">
+            <ul>
+              {p.withProjectCreator && (
+                  <li className="little-spacer-bottom">
+                    {translate('permission_templates.project_creators')}
+                  </li>
+              )}
+              <li className="little-spacer-bottom">
+                <strong>{p.usersCount}</strong>{'  user(s)'}
+              </li>
+              <li>
+                <strong>{p.groupsCount}</strong>{' group(s)'}
+              </li>
+            </ul>
+          </div>
         </td>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.js b/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.js
index 0e66feb1da1..a92388d1f40 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/TemplateHeader.js
@@ -53,7 +53,8 @@ export default class TemplateHeader extends React.Component {
             <ActionsCell
                 permissionTemplate={this.props.template}
                 topQualifiers={this.props.topQualifiers}
-                refresh={this.props.refresh}/>
+                refresh={this.props.refresh}
+                fromDetails={true}/>
           </div>
         </header>
     );
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/styles.css b/server/sonar-web/src/main/js/apps/permission-templates/styles.css
deleted file mode 100644
index 1d11bfeee61..00000000000
--- a/server/sonar-web/src/main/js/apps/permission-templates/styles.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.permissions-table {
-  table-layout: fixed;
-}
-
-.permissions-table > tbody > tr > td {
-  border-bottom: 10px solid #fff !important;
-}
-
-.permissions-table .permission-column {
-  width: 12%;
-  min-width: 112px;
-}
-
-.permissions-table .actions-column {
-  width: 100px;
-  text-align: right;
-}
diff --git a/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.js b/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.js
index dfef86074fe..63fb560ea89 100644
--- a/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.js
+++ b/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.js
@@ -44,19 +44,27 @@ export default class HoldersList extends React.Component {
     const cells = this.props.permissions.map(p => (
         <th key={p.key}
             className="permission-column text-center"
-            style={{ backgroundColor: p.key === selectedPermission ? '#d9edf7' : 'transparent' }}>
-          <a href="#" onClick={this.handlePermissionClick.bind(this, p.key)}>
-            {p.name}
-          </a>
-          <i className="icon-help little-spacer-left"
-             title={p.description}
-             data-toggle="tooltip"/>
+            style={{
+              backgroundColor: p.key === selectedPermission ? '#d9edf7' :
+                  'transparent'
+            }}>
+          <div className="permission-column-inner">
+            <a href="#"
+               title={`Filter by "${p.name}" permission` }
+               data-toggle="tooltip"
+               onClick={this.handlePermissionClick.bind(this, p.key)}>
+              {p.name}
+            </a>
+            <i className="icon-help little-spacer-left"
+               title={p.description}
+               data-toggle="tooltip"/>
+          </div>
         </th>
     ));
     return (
         <thead>
           <tr>
-            <td className="bordered-bottom">
+            <td className="nowrap bordered-bottom">
               {this.props.children}
             </td>
             {cells}
diff --git a/server/sonar-web/src/main/js/apps/permissions/shared/components/UserHolder.js b/server/sonar-web/src/main/js/apps/permissions/shared/components/UserHolder.js
index 064e4922366..520f25b631a 100644
--- a/server/sonar-web/src/main/js/apps/permissions/shared/components/UserHolder.js
+++ b/server/sonar-web/src/main/js/apps/permissions/shared/components/UserHolder.js
@@ -20,6 +20,7 @@
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 import Avatar from '../../../../components/ui/Avatar';
+import { translate } from '../../../../helpers/l10n';
 
 export default class UserHolder extends React.Component {
   static propTypes = {
@@ -81,6 +82,11 @@ export default class UserHolder extends React.Component {
               {!isCreator && (
                   <div className="little-spacer-top">{user.email}</div>
               )}
+              {isCreator && (
+                  <div className="little-spacer-top" style={{ whiteSpace: 'normal' }}>
+                    {translate('permission_templates.project_creators.explanation')}
+                  </div>
+              )}
             </div>
           </td>
           {permissionCells}
diff --git a/server/sonar-web/src/main/js/apps/permissions/styles.css b/server/sonar-web/src/main/js/apps/permissions/styles.css
index 02b1e863c83..f016fa70a8b 100644
--- a/server/sonar-web/src/main/js/apps/permissions/styles.css
+++ b/server/sonar-web/src/main/js/apps/permissions/styles.css
@@ -1,5 +1,5 @@
 .permissions-table {
-  table-layout: fixed;
+
 }
 
 .permissions-table > tbody > tr > td {
@@ -7,11 +7,9 @@
 }
 
 .permissions-table .permission-column {
-  width: 12%;
-  min-width: 112px;
+  width: 1px;
 }
 
-.permissions-table .actions-column {
-  width: 130px;
-  text-align: right;
+.permissions-table .permission-column-inner {
+  width: 112px;
 }