SONAR-6911 Improve the display of default groups

server/sonar-web/src/main/js/apps/groups/list-item-view.js

@@ -46,18 +46,24 @@ export default Marionette.ItemView.extend({
 
   onUpdateClick(e) {
     e.preventDefault();
-    this.updateGroup();
+    if (!this.model.get('default')) {
+      this.updateGroup();
+    }
   },
 
   onDeleteClick(e) {
     e.preventDefault();
-    this.deleteGroup();
+    if (!this.model.get('default')) {
+      this.deleteGroup();
+    }
   },
 
   onUsersClick(e) {
     e.preventDefault();
     $('.tooltip').remove();
-    this.showUsers();
+    if (!this.model.get('default')) {
+      this.showUsers();
+    }
   },
 
   updateGroup() {

server/sonar-web/src/main/js/apps/groups/templates/groups-list-item.hbs

@@ -1,19 +1,26 @@
 <div class="pull-right big-spacer-left nowrap">
-  <a class="js-group-update icon-edit little-spacer-right" title="Update Details" data-toggle="tooltip" href="#"></a>
-  <a class="js-group-delete icon-delete" title="Delete" data-toggle="tooltip" href="#"></a>
+  {{#unless default}}
+    <a class="js-group-update icon-edit little-spacer-right" title={{t 'users.update_details'}} data-toggle="tooltip" href="#"></a>
+    <a class="js-group-delete icon-delete" title={{t 'delete'}} data-toggle="tooltip" href="#"></a>
+  {{/unless}}
 </div>
 
 <div class="display-inline-block text-top width-20">
   <strong class="js-group-name">{{name}}</strong>
+  {{#if default}}
+    <span class="little-spacer-left">({{t 'default'}})</span>
+  {{/if}}
 </div>
 
 <div class="display-inline-block text-top big-spacer-left width-25">
   <div class="pull-left spacer-right">
-    <strong>Members</strong>
+    <strong>{{t 'members'}}</strong>
   </div>
   <div class="overflow-hidden bordered-left">
     <span class="spacer-left spacer-right">{{membersCount}}</span>
-    <a class="js-group-users icon-bullet-list" title="Update Users" data-toggle="tooltip" href="#"></a>
+    {{#unless default}}
+      <a class="js-group-users icon-bullet-list" title={{t 'users.update'}} data-toggle="tooltip" href="#"></a>
+    {{/unless}}
   </div>
 </div>
 

server/sonar-web/src/main/js/apps/organizations/components/OrganizationGroupCheckbox.js

@@ -32,22 +32,27 @@ export default class OrganizationGroupCheckbox extends React.PureComponent {
   props: Props;
 
   onCheck = (checked: boolean) => {
-    this.props.onCheck(this.props.group.name, checked);
+    const { group } = this.props;
+    if (!group.default) {
+      this.props.onCheck(group.name, checked);
+    }
   };
 
   toggleCheck = () => {
-    this.props.onCheck(this.props.group.name, !this.props.checked);
+    this.onCheck(!this.props.checked);
   };
 
   render() {
+    const { group } = this.props;
     return (
       <li
         className="capitalize list-item-checkable-link"
         onClick={this.toggleCheck}
         tabIndex={0}
-        role="listitem">
+        role="listitem"
+        disabled={group.default}>
         <Checkbox checked={this.props.checked} onCheck={this.onCheck} />
-        {' '}{this.props.group.name}
+        {' '}{group.name}
       </li>
     );
   }

server/sonar-web/src/main/js/apps/organizations/components/__tests__/OrganizationGroupCheckbox-test.js

@@ -25,7 +25,8 @@ const group = {
   id: '7',
   name: 'professionals',
   description: '',
-  membersCount: 12
+  membersCount: 12,
+  default: false
 };
 
 it('should render unchecked', () => {
@@ -45,3 +46,17 @@ it('should be able to toggle check', () => {
   expect(onCheck.mock.calls).toMatchSnapshot();
   expect(wrapper).toMatchSnapshot();
 });
+
+it('should disabled default groups', () => {
+  const onCheck = jest.fn((group, checked) => wrapper.setProps({ checked }));
+  const wrapper = shallow(
+    <OrganizationGroupCheckbox
+      group={{ ...group, default: true }}
+      checked={true}
+      onCheck={onCheck}
+    />
+  );
+  expect(wrapper).toMatchSnapshot();
+  wrapper.instance().toggleCheck();
+  expect(onCheck.mock.calls.length).toBe(0);
+});

server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationGroupCheckbox-test.js.snap

@@ -1,6 +1,7 @@
 exports[`test should be able to toggle check 1`] = `
 <li
   className="capitalize list-item-checkable-link"
+  disabled={false}
   onClick={[Function]}
   role="listitem"
   tabIndex={0}>
@@ -25,6 +26,7 @@ Array [
 exports[`test should be able to toggle check 3`] = `
 <li
   className="capitalize list-item-checkable-link"
+  disabled={false}
   onClick={[Function]}
   role="listitem"
   tabIndex={0}>
@@ -37,9 +39,26 @@ exports[`test should be able to toggle check 3`] = `
 </li>
 `;
 
+exports[`test should disabled default groups 1`] = `
+<li
+  className="capitalize list-item-checkable-link"
+  disabled={true}
+  onClick={[Function]}
+  role="listitem"
+  tabIndex={0}>
+  <Checkbox
+    checked={true}
+    onCheck={[Function]}
+    thirdState={false} />
+   
+  professionals
+</li>
+`;
+
 exports[`test should render unchecked 1`] = `
 <li
   className="capitalize list-item-checkable-link"
+  disabled={false}
   onClick={[Function]}
   role="listitem"
   tabIndex={0}>

server/sonar-web/src/main/js/store/organizations/duck.js

@@ -36,9 +36,10 @@ export type Organization = {
 
 export type OrgGroup = {
   id: string,
-  name: string,
+  default: boolean,
   description: string,
-  membersCount: number
+  membersCount: number,
+  name: string
 };
 
 type ReceiveOrganizationsAction = {

server/sonar-web/src/main/less/init/lists.less

@@ -69,6 +69,15 @@ ol, ul {
   &:focus {
     outline: none;
   }
+
+  &[disabled] {
+    opacity: 0.7;
+
+    a::before {
+      background-color: @darkGrey;
+      border-color: @darkGrey;
+    }
+  }
 }
 
 

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -98,6 +98,7 @@ max=Max
 max_items_reached=Only the first {0} components are displayed
 max_results_reached=Only the first {0} results are displayed
 me=Me
+members=Members
 min=Min
 minor=Minor
 more=More
@@ -1778,6 +1779,8 @@ user.password_cant_be_changed_on_external_auth=Password cannot be changed when e
 users.add=Add user
 users.remove=Remove user
 users.search_description=Search by username, full name, or email address
+users.update=Update users
+users.update_details=Update details
 
 #------------------------------------------------------------------------------
 #