SONAR-10024 Group of buttons shouldn't look like tabs

server/sonar-web/src/main/js/app/styles/components/search-navigator.css

@@ -743,12 +743,6 @@ a.search-navigator-facet:focus .facet-stat {
   font-size: var(--smallFontSize);
 }
 
-.search-navigator-workspace-header .button-group,
-.search-navigator-workspace-header .button-group > button,
-.search-navigator-workspace-header .button-group > .button {
-  vertical-align: top;
-}
-
 .search-navigator-header-component {
   margin-left: 10px;
   white-space: nowrap;

server/sonar-web/src/main/js/apps/coding-rules/styles.css

@@ -80,8 +80,8 @@
   vertical-align: middle;
   margin-right: 20px;
   font-size: var(--smallFontSize);
-  height: 22px;
-  line-height: 18px;
+  height: var(--controlHeight);
+  line-height: var(--controlHeight);
 }
 
 .coding-rules-detail-property .select2-search-field {

server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-rule-details.hbs

@@ -4,10 +4,8 @@
 
 {{#if isEditable}}
   <div class="coding-rules-detail-description">
-    <div class="button-group">
-      <button class="js-edit-custom" id="coding-rules-detail-custom-rule-change">{{t 'edit'}}</button>
-      <button class="button-red js-delete" id="coding-rules-detail-rule-delete" class="button-red">{{t 'delete'}}</button>
-    </div>
+    <button class="js-edit-custom" id="coding-rules-detail-custom-rule-change">{{t 'edit'}}</button>
+    <button class="button-red js-delete" id="coding-rules-detail-rule-delete" class="button-red">{{t 'delete'}}</button>
   </div>
 {{/if}}
 

server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-list-item.hbs

@@ -53,18 +53,16 @@
       {{#if canEditQualityProfile}}
         {{#unless isSelectedProfileBuiltIn}}
           <td class="coding-rule-table-meta-cell coding-rule-activation-actions">
-            <div class="button-group">
-              {{#if activation}}
-                <button class="coding-rules-detail-quality-profile-deactivate button-red" 
-                        {{#notEq activation.inherit 'NONE'}}disabled  title="{{t 'coding_rules.can_not_deactivate'}}"{{/notEq}}>
-                  {{t 'coding_rules.deactivate'}}
-                </button>
-              {{else}}
-                {{#unless isTemplate}}
-                  <button class="coding-rules-detail-quality-profile-activate">{{t 'coding_rules.activate'}}</button>
-                {{/unless}}
-              {{/if}}
-            </div>
+            {{#if activation}}
+              <button class="coding-rules-detail-quality-profile-deactivate button-red" 
+                      {{#notEq activation.inherit 'NONE'}}disabled  title="{{t 'coding_rules.can_not_deactivate'}}"{{/notEq}}>
+                {{t 'coding_rules.deactivate'}}
+              </button>
+            {{else}}
+              {{#unless isTemplate}}
+                <button class="coding-rules-detail-quality-profile-activate">{{t 'coding_rules.activate'}}</button>
+              {{/unless}}
+            {{/if}}
           </td>
         {{/unless}}
       {{/if}}

server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-custom-rule.hbs

@@ -19,10 +19,8 @@
 
 {{#if canDeleteCustomRule}}
 <td class="coding-rules-detail-list-actions">
-  <div class="button-group">
-    <button class="js-delete-custom-rule button-red">
-      {{t 'delete'}}
-    </button>
-  </div>
+  <button class="js-delete-custom-rule button-red">
+    {{t 'delete'}}
+  </button>
 </td>
 {{/if}}

server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-custom-rules.hbs

@@ -4,9 +4,8 @@
   <h3 class="coding-rules-detail-title">{{t 'coding_rules.custom_rules'}}</h3>
 
   {{#if canCreateCustomRule}}
-    <div class="button-group coding-rules-detail-quality-profiles-activation">
-      <button class="js-create-custom-rule">{{t 'coding_rules.create'}}</button>
-    </div>
+    <button class="js-create-custom-rule spacer-left">{{t 'coding_rules.create'}}</button>
   {{/if}}
+
   <table id="coding-rules-detail-custom-rules" class="coding-rules-detail-list"></table>
 </div>

server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-description.hbs

@@ -7,9 +7,7 @@
         <div class="rule-desc spacer-bottom markdown">{{{htmlNote}}}</div>
       {{/if}}
       {{#if canCustomizeRule}}
-        <div class="button-group">
-          <button id="coding-rules-detail-extend-description">{{t 'coding_rules.extend_description'}}</button>
-        </div>
+        <button id="coding-rules-detail-extend-description">{{t 'coding_rules.extend_description'}}</button>
       {{/if}}
     </div>
 
@@ -25,14 +23,11 @@
           </tr>
           <tr>
             <td>
-              <div class="button-group">
-                <button id="coding-rules-detail-extend-description-submit">{{t 'save'}}</button>
-                {{#if mdNote}}
-                  <button id="coding-rules-detail-extend-description-remove"
-                          class="button-red">{{t 'remove'}}</button>
-                {{/if}}
-              </div>
-              <a id="coding-rules-detail-extend-description-cancel" class="action">{{t 'cancel'}}</a>
+              <button id="coding-rules-detail-extend-description-submit">{{t 'save'}}</button>
+              {{#if mdNote}}
+                <button id="coding-rules-detail-extend-description-remove" class="button-red">{{t 'remove'}}</button>
+              {{/if}}
+              <a id="coding-rules-detail-extend-description-cancel" class="spacer-left">{{t 'cancel'}}</a>
             </td>
             <td class="text-right">
               {{> '../../../../components/common/templates/_markdown-tips' }}

server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-meta.hbs

@@ -58,10 +58,8 @@
         <span>{{join sysTags ', '}}</span>{{/if}}
       <input class="coding-rules-detail-tag-input" type="text" value="{{#if tags}}{{join tags ','}}{{/if}}">
 
-      <div class="button-group">
-        <button class="coding-rules-detail-tag-edit-done">{{t 'Done'}}</button>
-      </div>
-      <a class="coding-rules-details-tag-edit-cancel">{{t 'cancel'}}</a>
+      <button class="coding-rules-detail-tag-edit-done text-middle">{{t 'Done'}}</button>
+      <a class="coding-rules-details-tag-edit-cancel spacer-left">{{t 'cancel'}}</a>
     </li>
   {{/if}}
 

server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-profile.hbs

@@ -52,35 +52,31 @@
     </td>
   {{/unless}}
 
-  {{#if actions.edit}}
-    {{#unless isBuiltIn}}
-      <td class="coding-rules-detail-quality-profile-actions">
-        <div class="button-group">
-          {{#unless isTemplate}}
-            <button class="coding-rules-detail-quality-profile-change">{{t 'change_verb'}}</button>
-          {{/unless}}
-          {{#if parent}}
-            {{#eq inherit 'OVERRIDES'}}
-              <button class="coding-rules-detail-quality-profile-revert button-red">
-                {{t 'coding_rules.revert_to_parent_definition'}}
-              </button>
-            {{/eq}}
-          {{else}}
-            <button class="coding-rules-detail-quality-profile-deactivate button-red">
-              {{t 'coding_rules.deactivate'}}
+  <td class="coding-rules-detail-quality-profile-actions">
+    {{#if actions.edit}}
+      {{#unless isBuiltIn}}
+        {{#unless isTemplate}}
+          <button class="coding-rules-detail-quality-profile-change">{{t 'change_verb'}}</button>
+        {{/unless}}
+        {{#if parent}}
+          {{#eq inherit 'OVERRIDES'}}
+            <button class="coding-rules-detail-quality-profile-revert button-red">
+              {{t 'coding_rules.revert_to_parent_definition'}}
             </button>
-          {{/if}}
-        </div>
-      </td>
-    {{/unless}}
-  {{/if}}
+          {{/eq}}
+        {{else}}
+          <button class="coding-rules-detail-quality-profile-deactivate button-red">
+            {{t 'coding_rules.deactivate'}}
+          </button>
+        {{/if}}
+      {{/unless}}
+    {{/if}}
+  </td>
 
 {{else}}
   {{#if canWrite}}{{#unless isTemplate}}
     <td class="coding-rules-detail-quality-profile-actions">
-      <div class="button-group">
-        <button class="coding-rules-detail-quality-profile-activate">{{t 'coding_rules.activate'}}</button>
-      </div>
+      <button class="coding-rules-detail-quality-profile-activate">{{t 'coding_rules.activate'}}</button>
     </td>
   {{/unless}}{{/if}}
 {{/if}}

server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-profiles.hbs

@@ -5,9 +5,7 @@
 
   {{#if canActivate}}
     {{#unless isTemplate}}
-      <div class="button-group coding-rules-detail-quality-profiles-activation">
-        <button id="coding-rules-quality-profile-activate">{{t 'coding_rules.activate'}}</button>
-      </div>
+      <button id="coding-rules-quality-profile-activate" class="spacer-left">{{t 'coding_rules.activate'}}</button>
     {{/unless}}
   {{/if}}
 

server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-header.hbs

@@ -1,9 +1,7 @@
 <header class="page-header">
   <h1 class="page-title">{{t 'custom_measures.page'}}</h1>
   <div class="page-actions">
-    <div class="button-group">
-      <button id="custom-measures-create">{{t 'create'}}</button>
-    </div>
+    <button id="custom-measures-create">{{t 'create'}}</button>
   </div>
   <p class="page-description">{{t 'custom_measures.page.description'}}</p>
 </header>

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

@@ -2,9 +2,7 @@
   <h1 class="page-title">{{t 'user_groups.page'}}</h1>
   <i class="spinner hidden"></i>
   <div class="page-actions">
-    <div class="button-group">
-      <button id="groups-create">{{t 'groups.create_group'}}</button>
-    </div>
+    <button id="groups-create">{{t 'groups.create_group'}}</button>
   </div>
   <p class="page-description">{{t 'user_groups.page.description'}}</p>
 </header>

server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx

@@ -93,7 +93,7 @@ export default class PluginActions extends React.PureComponent<Props, State> {
         {isPluginInstalled(plugin) &&
           plugin.updates &&
           plugin.updates.length > 0 && (
-            <div className="spacer-top button-group">
+            <div className="spacer-top">
               {plugin.updates.map((update, idx) => (
                 <PluginUpdateButton
                   key={idx}

server/sonar-web/src/main/js/apps/metrics/templates/metrics-header.hbs

@@ -1,9 +1,7 @@
 <header class="page-header">
   <h1 class="page-title">{{t 'custom_metrics.page'}}</h1>
   <div class="page-actions">
-    <div class="button-group">
-      <button id="metrics-create">{{t 'custom_metrics.create_metric'}}</button>
-    </div>
+    <button id="metrics-create">{{t 'custom_metrics.create_metric'}}</button>
   </div>
   <p class="page-description">{{t 'custom_metrics.page.description'}}</p>
 </header>

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

@@ -92,13 +92,11 @@ export default class OrganizationMembers extends React.PureComponent {
         <MembersPageHeader loading={status.loading} total={status.total}>
           {organization.canAdmin && (
             <div className="page-actions">
-              <div className="button-group">
-                <AddMemberForm
-                  addMember={this.addMember}
-                  organization={organization}
-                  memberLogins={this.props.memberLogins}
-                />
-              </div>
+              <AddMemberForm
+                addMember={this.addMember}
+                organization={organization}
+                memberLogins={this.props.memberLogins}
+              />
             </div>
           )}
         </MembersPageHeader>

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

@@ -67,20 +67,16 @@ exports[`should render actions for admin 1`] = `
     <div
       className="page-actions"
     >
-      <div
-        className="button-group"
-      >
-        <AddMemberForm
-          addMember={[Function]}
-          organization={
-            Object {
-              "canAdmin": true,
-              "key": "foo",
-              "name": "Foo",
-            }
+      <AddMemberForm
+        addMember={[Function]}
+        organization={
+          Object {
+            "canAdmin": true,
+            "key": "foo",
+            "name": "Foo",
           }
-        />
-      </div>
+        }
+      />
     </div>
   </MembersPageHeader>
   <MembersListHeader

server/sonar-web/src/main/js/apps/project-admin/key/UpdateKeyForm.js

@@ -76,15 +76,13 @@ export default class UpdateKeyForm extends React.PureComponent {
           onChange={this.handleInputChange}
         />
 
-        <div className="button-group">
-          <button disabled={!hasChanged} onClick={this.handleUpdateClick}>
-            {translate('update_verb')}
-          </button>
+        <button disabled={!hasChanged} onClick={this.handleUpdateClick}>
+          {translate('update_verb')}
+        </button>
 
-          <button disabled={!hasChanged} onClick={this.handleResetClick}>
-            {translate('reset_verb')}
-          </button>
-        </div>
+        <button className="spacer-left" disabled={!hasChanged} onClick={this.handleResetClick}>
+          {translate('reset_verb')}
+        </button>
       </div>
     );
   }

server/sonar-web/src/main/js/apps/projects/styles.css

@@ -200,24 +200,6 @@
   padding-right: 10px;
 }
 
-.projects-facet-sort {
-  float: right;
-  font-weight: normal;
-  font-size: 11px;
-  color: var(--secondFontColor);
-  text-transform: lowercase;
-}
-
-.projects-facet-sort .button-group {
-  margin-top: -3px;
-}
-
-.projects-facet-sort .button-small {
-  padding: 0 6px;
-  font-size: 11px;
-  font-weight: normal;
-}
-
 .projects-facets-header {
   margin-bottom: 10px;
   padding: 10px 0;

server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js

@@ -42,8 +42,9 @@ export default class Condition extends Component {
   componentDidMount() {
     const { condition } = this.props;
 
-    if (!condition.id) {
-      this.refs.operator.focus();
+    // TODO looks like `this.opetator` is always null or undefined
+    if (!condition.id && this.operator) {
+      this.operator.focus();
     }
   }
 
@@ -51,10 +52,9 @@ export default class Condition extends Component {
     this.setState({ changed: true });
   }
 
-  handleOperatorChange(option) {
-    const { value } = option;
+  handleOperatorChange = ({ value }) => {
     this.setState({ changed: true, op: value });
-  }
+  };
 
   handlePeriodChange(checked) {
     const period = checked ? '1' : undefined;
@@ -69,9 +69,9 @@ export default class Condition extends Component {
     this.setState({ changed: true, error: value });
   }
 
-  handleSaveClick(e) {
+  handleSaveClick = e => {
     const { qualityGate, condition, metric, onSaveCondition, onError, onResetError } = this.props;
-    const period = this.state.period;
+    const { period } = this.state;
     const data = {
       metric: condition.metric,
       op: metric.type === 'RATING' ? 'GT' : this.state.op,
@@ -95,11 +95,11 @@ export default class Condition extends Component {
         onResetError();
       })
       .catch(onError);
-  }
+  };
 
-  handleUpdateClick(e) {
+  handleUpdateClick = e => {
     const { condition, onSaveCondition, metric, onError, onResetError } = this.props;
-    const period = this.state.period;
+    const { period } = this.state;
     const data = {
       id: condition.id,
       metric: condition.metric,
@@ -124,9 +124,9 @@ export default class Condition extends Component {
         onResetError();
       })
       .catch(onError);
-  }
+  };
 
-  handleDeleteClick(e) {
+  handleDeleteClick = e => {
     const { qualityGate, condition, metric, onDeleteCondition } = this.props;
 
     e.preventDefault();
@@ -136,14 +136,14 @@ export default class Condition extends Component {
       metric,
       onDelete: () => onDeleteCondition(condition)
     }).render();
-  }
+  };
 
-  handleCancelClick(e) {
+  handleCancelClick = e => {
     const { condition, onDeleteCondition } = this.props;
 
     e.preventDefault();
     onDeleteCondition(condition);
-  }
+  };
 
   renderPeriodValue() {
     const { condition, metric } = this.props;
@@ -201,14 +201,14 @@ export default class Condition extends Component {
 
     return (
       <Select
-        ref="operator"
+        ref={node => (this.operator = node)}
         className="input-medium"
         name="operator"
         value={this.state.op}
         clearable={false}
         searchable={false}
         options={operatorOptions}
-        onChange={this.handleOperatorChange.bind(this)}
+        onChange={this.handleOperatorChange}
       />
     );
   }
@@ -257,28 +257,28 @@ export default class Condition extends Component {
         {edit && (
           <td className="thin text-middle nowrap">
             {condition.id ? (
-              <div className="button-group">
+              <div>
                 <button
                   className="update-condition"
                   disabled={!this.state.changed}
-                  onClick={this.handleUpdateClick.bind(this)}>
+                  onClick={this.handleUpdateClick}>
                   {translate('update_verb')}
                 </button>
                 <button
-                  className="button-red delete-condition"
-                  onClick={this.handleDeleteClick.bind(this)}>
+                  className="button-red delete-condition little-spacer-left"
+                  onClick={this.handleDeleteClick}>
                   {translate('delete')}
                 </button>
               </div>
             ) : (
-              <div className="button-group">
-                <button className="add-condition" onClick={this.handleSaveClick.bind(this)}>
+              <div>
+                <button className="add-condition" onClick={this.handleSaveClick}>
                   {translate('add_verb')}
                 </button>
                 <a
-                  className="action cancel-add-condition"
+                  className="cancel-add-condition spacer-left"
                   href="#"
-                  onClick={this.handleCancelClick.bind(this)}>
+                  onClick={this.handleCancelClick}>
                   {translate('cancel')}
                 </a>
               </div>

server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js

@@ -51,25 +51,29 @@ export default class DetailsHeader extends React.PureComponent {
             <h2 className="pull-left">{qualityGate.name}</h2>
             {edit && (
               <div className="pull-right">
-                <div className="button-group">
-                  <button id="quality-gate-rename" onClick={this.handleRenameClick}>
-                    {translate('rename')}
-                  </button>
-                  <button id="quality-gate-copy" onClick={this.handleCopyClick}>
-                    {translate('copy')}
-                  </button>
-                  <button id="quality-gate-toggle-default" onClick={this.handleSetAsDefaultClick}>
-                    {qualityGate.isDefault
-                      ? translate('unset_as_default')
-                      : translate('set_as_default')}
-                  </button>
-                  <button
-                    id="quality-gate-delete"
-                    className="button-red"
-                    onClick={this.handleDeleteClick}>
-                    {translate('delete')}
-                  </button>
-                </div>
+                <button id="quality-gate-rename" onClick={this.handleRenameClick}>
+                  {translate('rename')}
+                </button>
+                <button
+                  className="little-spacer-left"
+                  id="quality-gate-copy"
+                  onClick={this.handleCopyClick}>
+                  {translate('copy')}
+                </button>
+                <button
+                  className="little-spacer-left"
+                  id="quality-gate-toggle-default"
+                  onClick={this.handleSetAsDefaultClick}>
+                  {qualityGate.isDefault
+                    ? translate('unset_as_default')
+                    : translate('set_as_default')}
+                </button>
+                <button
+                  id="quality-gate-delete"
+                  className="little-spacer-left button-red"
+                  onClick={this.handleDeleteClick}>
+                  {translate('delete')}
+                </button>
               </div>
             )}
           </div>

server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.js

@@ -32,11 +32,9 @@ export default function ListHeader({ canEdit, onAdd }) {
       <h1 className="page-title">{translate('quality_gates.page')}</h1>
       {canEdit && (
         <div className="page-actions">
-          <div className="button-group">
-            <button id="quality-gate-add" onClick={handleAddClick}>
-              {translate('create')}
-            </button>
-          </div>
+          <button id="quality-gate-add" onClick={handleAddClick}>
+            {translate('create')}
+          </button>
         </div>
       )}
     </header>

server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx

@@ -82,20 +82,16 @@ export default class PageHeader extends React.PureComponent<Props, State> {
         <h1 className="page-title">{translate('quality_profiles.page')}</h1>
 
         {this.props.actions.create && (
-          <div className="page-actions button-group dropdown">
+          <div className="page-actions">
             <button id="quality-profiles-create" onClick={this.handleCreateClick}>
               {translate('create')}
             </button>
-            <button className="dropdown-toggle js-more-admin-actions" data-toggle="dropdown">
-              <i className="icon-dropdown" />
+            <button
+              className="little-spacer-left"
+              id="quality-profiles-restore"
+              onClick={this.handleRestoreClick}>
+              {translate('restore')}
             </button>
-            <ul className="dropdown-menu dropdown-menu-right">
-              <li>
-                <a href="#" id="quality-profiles-restore" onClick={this.handleRestoreClick}>
-                  {translate('quality_profiles.restore_profile')}
-                </a>
-              </li>
-            </ul>
           </div>
         )}
 

server/sonar-web/src/main/js/apps/users/templates/users-header.hbs

@@ -2,9 +2,7 @@
   <h1 class="page-title">{{t 'users.page'}}</h1>
   <i class="spinner hidden"></i>
   <div class="page-actions">
-    <div class="button-group">
-      <button id="users-create">{{t 'users.create_user'}}</button>
-    </div>
+    <button id="users-create">{{t 'users.create_user'}}</button>
   </div>
   <p class="page-description">{{t 'users.page.description'}}</p>
 </header>