Fix usage of button-link, replace it with ButtonLink component

server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx

@@ -21,20 +21,20 @@ import * as React from 'react';
 import { Link } from 'react-router';
 import RuleDetailsTagsPopup from './RuleDetailsTagsPopup';
 import SimilarRulesFilter from './SimilarRulesFilter';
-import { Query } from '../query';
-import { getRuleUrl } from '../../../helpers/urls';
-import LinkIcon from '../../../components/icons-components/LinkIcon';
-import RuleScopeIcon from '../../../components/icons-components/RuleScopeIcon';
-import Tooltip from '../../../components/controls/Tooltip';
+import DateFormatter from '../../../components/intl/DateFormatter';
 import DocTooltip from '../../../components/docs/DocTooltip';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import Dropdown from '../../../components/controls/Dropdown';
 import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
+import LinkIcon from '../../../components/icons-components/LinkIcon';
+import RuleScopeIcon from '../../../components/icons-components/RuleScopeIcon';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
-import Dropdown from '../../../components/controls/Dropdown';
 import TagsList from '../../../components/tags/TagsList';
-import DateFormatter from '../../../components/intl/DateFormatter';
-import { Button } from '../../../components/ui/buttons';
+import Tooltip from '../../../components/controls/Tooltip';
+import { ButtonLink } from '../../../components/ui/buttons';
 import { PopupPlacement } from '../../../components/ui/popups';
+import { Query } from '../query';
+import { getRuleUrl } from '../../../helpers/urls';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 interface Props {
   canWrite: boolean | undefined;
@@ -108,12 +108,12 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
               />
             }
             overlayPlacement={PopupPlacement.BottomLeft}>
-            <Button className="button-link">
+            <ButtonLink>
               <TagsList
                 allowUpdate={canWrite}
                 tags={allTags.length > 0 ? allTags : [translate('coding_rules.no_tags')]}
               />
-            </Button>
+            </ButtonLink>
           </Dropdown>
         ) : (
           <TagsList

server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/RuleDetailsMeta-test.tsx

@@ -63,18 +63,18 @@ const EXTERNAL_RULE_WITH_DATA: T.RuleDetails = {
 };
 
 it('should display right meta info', () => {
-  expect(getWrapper()).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
   expect(
-    getWrapper({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE })
+    shallowRender({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE })
   ).toMatchSnapshot();
   expect(
-    getWrapper({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE_WITH_DATA })
+    shallowRender({ hideSimilarRulesFilter: true, ruleDetails: EXTERNAL_RULE_WITH_DATA })
   ).toMatchSnapshot();
 });
 
 it('should edit tags', () => {
   const onTagsChange = jest.fn();
-  const wrapper = getWrapper({ onTagsChange });
+  const wrapper = shallowRender({ onTagsChange });
   expect(wrapper.find('[data-meta="tags"]')).toMatchSnapshot();
   const overlay = wrapper
     .find('[data-meta="tags"]')
@@ -85,7 +85,7 @@ it('should edit tags', () => {
   expect(onTagsChange).toBeCalledWith(['foo', 'bar']);
 });
 
-function getWrapper(props = {}) {
+function shallowRender(props: Partial<RuleDetailsMeta['props']> = {}) {
   return shallow(
     <RuleDetailsMeta
       canWrite={true}

server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap

@@ -116,9 +116,7 @@ exports[`should display right meta info 1`] = `
         }
         overlayPlacement="bottom-left"
       >
-        <Button
-          className="button-link"
-        >
+        <ButtonLink>
           <TagsList
             allowUpdate={true}
             tags={
@@ -127,7 +125,7 @@ exports[`should display right meta info 1`] = `
               ]
             }
           />
-        </Button>
+        </ButtonLink>
       </Dropdown>
     </li>
     <li
@@ -248,9 +246,7 @@ exports[`should display right meta info 3`] = `
         }
         overlayPlacement="bottom-left"
       >
-        <Button
-          className="button-link"
-        >
+        <ButtonLink>
           <TagsList
             allowUpdate={true}
             tags={
@@ -259,7 +255,7 @@ exports[`should display right meta info 3`] = `
               ]
             }
           />
-        </Button>
+        </ButtonLink>
       </Dropdown>
     </li>
     <Tooltip
@@ -296,9 +292,7 @@ exports[`should edit tags 1`] = `
     }
     overlayPlacement="bottom-left"
   >
-    <Button
-      className="button-link"
-    >
+    <ButtonLink>
       <TagsList
         allowUpdate={true}
         tags={
@@ -307,7 +301,7 @@ exports[`should edit tags 1`] = `
           ]
         }
       />
-    </Button>
+    </ButtonLink>
   </Dropdown>
 </li>
 `;

server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap

@@ -575,19 +575,24 @@ exports[`should edit members 2`] = `
                   <ResetButtonLink
                     onClick={[Function]}
                   >
-                    <Button
-                      className="button-link"
+                    <ButtonLink
                       onClick={[Function]}
                       type="reset"
                     >
-                      <button
-                        className="button button-link"
+                      <Button
+                        className="button-link"
                         onClick={[Function]}
                         type="reset"
                       >
-                        Done
-                      </button>
-                    </Button>
+                        <button
+                          className="button button-link"
+                          onClick={[Function]}
+                          type="reset"
+                        >
+                          Done
+                        </button>
+                      </Button>
+                    </ButtonLink>
                   </ResetButtonLink>
                 </footer>
               </div>

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

@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import PluginChangeLog from './PluginChangeLog';
-import { Release, Update } from '../../../api/plugins';
-import EllipsisIcon from '../../../components/icons-components/EllipsisIcon';
 import Dropdown from '../../../components/controls/Dropdown';
-import { Button } from '../../../components/ui/buttons';
+import EllipsisIcon from '../../../components/icons-components/EllipsisIcon';
+import { ButtonLink } from '../../../components/ui/buttons';
+import { Release, Update } from '../../../api/plugins';
 
 interface Props {
   release: Release;
@@ -34,9 +34,9 @@ export default function PluginChangeLogButton({ release, update }: Props) {
     <Dropdown
       className="display-inline-block little-spacer-left"
       overlay={<PluginChangeLog release={release} update={update} />}>
-      <Button className="button-link js-changelog issue-rule">
+      <ButtonLink className="js-changelog issue-rule">
         <EllipsisIcon />
-      </Button>
+      </ButtonLink>
     </Dropdown>
   );
 }

server/sonar-web/src/main/js/apps/overview/meta/MetaTags.tsx

@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import MetaTagsSelector from './MetaTagsSelector';
-import { setProjectTags } from '../../../api/components';
-import { translate } from '../../../helpers/l10n';
-import TagsList from '../../../components/tags/TagsList';
-import { Button } from '../../../components/ui/buttons';
 import Dropdown from '../../../components/controls/Dropdown';
+import TagsList from '../../../components/tags/TagsList';
+import { ButtonLink } from '../../../components/ui/buttons';
 import { PopupPlacement } from '../../../components/ui/popups';
+import { setProjectTags } from '../../../api/components';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   component: T.Component;
@@ -71,12 +71,9 @@ export default class MetaTags extends React.PureComponent<Props> {
               />
             }
             overlayPlacement={PopupPlacement.BottomLeft}>
-            <Button
-              className="button-link"
-              innerRef={tagsList => (this.tagsList = tagsList)}
-              stopPropagation={true}>
+            <ButtonLink innerRef={tagsList => (this.tagsList = tagsList)} stopPropagation={true}>
               <TagsList allowUpdate={true} tags={tags.length ? tags : [translate('no_tags')]} />
-            </Button>
+            </ButtonLink>
           </Dropdown>
         </div>
       );

server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaTags-test.tsx.snap

@@ -21,8 +21,7 @@ exports[`should render with tags and admin rights 1`] = `
     }
     overlayPlacement="bottom-left"
   >
-    <Button
-      className="button-link"
+    <ButtonLink
       innerRef={[Function]}
       stopPropagation={true}
     >
@@ -35,7 +34,7 @@ exports[`should render with tags and admin rights 1`] = `
           ]
         }
       />
-    </Button>
+    </ButtonLink>
   </Dropdown>
 </div>
 `;

server/sonar-web/src/main/js/apps/settings/components/DefinitionActions.tsx

@@ -106,9 +106,9 @@ export default class DefinitionActions extends React.PureComponent<Props, State>
           )}
 
           {hasValueChanged && (
-            <Button className="spacer-right button-link" onClick={this.props.onCancel}>
+            <ResetButtonLink className="spacer-right" onClick={this.props.onCancel}>
               {translate('cancel')}
-            </Button>
+            </ResetButtonLink>
           )}
 
           {showReset && (

server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/DefinitionActions-test.tsx.snap

@@ -12,12 +12,12 @@ exports[`disables save button on error 1`] = `
     >
       save
     </Button>
-    <Button
-      className="spacer-right button-link"
+    <ResetButtonLink
+      className="spacer-right"
       onClick={[Function]}
     >
       cancel
-    </Button>
+    </ResetButtonLink>
   </div>
 </Fragment>
 `;
@@ -34,12 +34,12 @@ exports[`displays cancel button when value changed and has error 1`] = `
     >
       save
     </Button>
-    <Button
-      className="spacer-right button-link"
+    <ResetButtonLink
+      className="spacer-right"
       onClick={[Function]}
     >
       cancel
-    </Button>
+    </ResetButtonLink>
   </div>
 </Fragment>
 `;
@@ -56,12 +56,12 @@ exports[`displays cancel button when value changed and no error 1`] = `
     >
       save
     </Button>
-    <Button
-      className="spacer-right button-link"
+    <ResetButtonLink
+      className="spacer-right"
       onClick={[Function]}
     >
       cancel
-    </Button>
+    </ResetButtonLink>
   </div>
 </Fragment>
 `;
@@ -132,12 +132,12 @@ exports[`displays save button when it can be saved 1`] = `
     >
       save
     </Button>
-    <Button
-      className="spacer-right button-link"
+    <ResetButtonLink
+      className="spacer-right"
       onClick={[Function]}
     >
       cancel
-    </Button>
+    </ResetButtonLink>
   </div>
 </Fragment>
 `;

server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeForm.tsx

@@ -22,6 +22,7 @@ import SystemUpgradeItem from './SystemUpgradeItem';
 import { SystemUpgrade } from '../../../../api/system';
 import Modal from '../../../../components/controls/Modal';
 import { translate } from '../../../../helpers/l10n';
+import { ResetButtonLink } from '../../../../components/ui/buttons';
 
 interface Props {
   systemUpgrades: SystemUpgrade[][];
@@ -35,12 +36,6 @@ interface State {
 export default class SystemUpgradeForm extends React.PureComponent<Props, State> {
   state: State = { upgrading: false };
 
-  handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    this.props.onClose();
-  };
-
   render() {
     const { upgrading } = this.state;
     const { systemUpgrades } = this.props;
@@ -63,12 +58,14 @@ export default class SystemUpgradeForm extends React.PureComponent<Props, State>
         </div>
         <div className="modal-foot">
           {upgrading && <i className="spinner spacer-right" />}
-          <a className="pull-left" href="https://www.sonarqube.org/downloads/" target="_blank">
+          <a
+            className="pull-left"
+            href="https://www.sonarqube.org/downloads/"
+            rel="noopener noreferrer"
+            target="_blank">
             {translate('system.see_sonarqube_downloads')}
           </a>
-          <a href="#" onClick={this.handleCancelClick}>
-            {translate('cancel')}
-          </a>
+          <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
         </div>
       </Modal>
     );

server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx

@@ -18,8 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
 import DateFormatter from '../../../../components/intl/DateFormatter';
+import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
+import { ButtonLink } from '../../../../components/ui/buttons';
 import { SystemUpgrade } from '../../../../api/system';
 import { translate } from '../../../../helpers/l10n';
 
@@ -35,9 +36,7 @@ interface State {
 export default class SystemUpgradeIntermediate extends React.PureComponent<Props, State> {
   state: State = { showMore: false };
 
-  toggleIntermediatVersions = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
+  toggleIntermediatVersions = () => {
     this.setState(state => ({ showMore: !state.showMore }));
   };
 
@@ -50,15 +49,12 @@ export default class SystemUpgradeIntermediate extends React.PureComponent<Props
 
     return (
       <div className={this.props.className}>
-        <a
-          className="button-link little-spacer-bottom"
-          href="#"
-          onClick={this.toggleIntermediatVersions}>
+        <ButtonLink className="little-spacer-bottom" onClick={this.toggleIntermediatVersions}>
           {showMore
             ? translate('system.hide_intermediate_versions')
             : translate('system.show_intermediate_versions')}
           <DropdownIcon className="little-spacer-left" turned={showMore} />
-        </a>
+        </ButtonLink>
         {showMore &&
           upgrades.map(upgrade => (
             <div className="note system-upgrade-intermediate" key={upgrade.version}>
@@ -68,7 +64,11 @@ export default class SystemUpgradeIntermediate extends React.PureComponent<Props
                     <b className="little-spacer-right">SonarQube {upgrade.version}</b>
                     {formattedDate}
                     {upgrade.changeLogUrl && (
-                      <a className="spacer-left" href={upgrade.changeLogUrl} target="_blank">
+                      <a
+                        className="spacer-left"
+                        href={upgrade.changeLogUrl}
+                        rel="noopener noreferrer"
+                        target="_blank">
                         {translate('system.release_notes')}
                       </a>
                     )}

server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx

@@ -53,7 +53,11 @@ export default function SystemUpgradeItem({ type, systemUpgrades }: Props) {
           )}
         </DateFormatter>
         {lastUpgrade.changeLogUrl && (
-          <a className="spacer-left" href={lastUpgrade.changeLogUrl} target="_blank">
+          <a
+            className="spacer-left"
+            href={lastUpgrade.changeLogUrl}
+            rel="noopener noreferrer"
+            target="_blank">
             {translate('system.release_notes')}
           </a>
         )}

server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeIntermediate-test.tsx

@@ -51,8 +51,8 @@ it('should display correctly', () => {
 it('should allow to show and hide intermediates', () => {
   const wrapper = shallow(<SystemUpgradeIntermediate upgrades={UPGRADES} />);
   expect(wrapper.find('.system-upgrade-intermediate').exists()).toBeFalsy();
-  click(wrapper.find('a'));
+  click(wrapper.find('ButtonLink'));
   expect(wrapper.find('.system-upgrade-intermediate').exists()).toBeTruthy();
-  click(wrapper.find('a'));
+  click(wrapper.find('ButtonLink'));
   expect(wrapper.find('.system-upgrade-intermediate').exists()).toBeFalsy();
 });

server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeForm-test.tsx.snap

@@ -78,16 +78,16 @@ exports[`should display correctly 1`] = `
     <a
       className="pull-left"
       href="https://www.sonarqube.org/downloads/"
+      rel="noopener noreferrer"
       target="_blank"
     >
       system.see_sonarqube_downloads
     </a>
-    <a
-      href="#"
-      onClick={[Function]}
+    <ResetButtonLink
+      onClick={[MockFunction]}
     >
       cancel
-    </a>
+    </ResetButtonLink>
   </div>
 </Modal>
 `;

server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeIntermediate-test.tsx.snap

@@ -2,9 +2,8 @@
 
 exports[`should display correctly 1`] = `
 <div>
-  <a
-    className="button-link little-spacer-bottom"
-    href="#"
+  <ButtonLink
+    className="little-spacer-bottom"
     onClick={[Function]}
   >
     system.show_intermediate_versions
@@ -12,15 +11,14 @@ exports[`should display correctly 1`] = `
       className="little-spacer-left"
       turned={false}
     />
-  </a>
+  </ButtonLink>
 </div>
 `;
 
 exports[`should display correctly 2`] = `
 <div>
-  <a
-    className="button-link little-spacer-bottom"
-    href="#"
+  <ButtonLink
+    className="little-spacer-bottom"
     onClick={[Function]}
   >
     system.hide_intermediate_versions
@@ -28,7 +26,7 @@ exports[`should display correctly 2`] = `
       className="little-spacer-left"
       turned={true}
     />
-  </a>
+  </ButtonLink>
   <div
     className="note system-upgrade-intermediate"
     key="5.6.6"

server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeItem-test.tsx.snap

@@ -35,6 +35,7 @@ exports[`should display correctly 1`] = `
     <a
       className="spacer-left"
       href="changelogurl"
+      rel="noopener noreferrer"
       target="_blank"
     >
       system.release_notes

server/sonar-web/src/main/js/apps/webhooks/components/DeliveriesForm.tsx

@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import DeliveryAccordion from './DeliveryAccordion';
-import { Button } from '../../../components/ui/buttons';
 import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import ListFooter from '../../../components/controls/ListFooter';
 import Modal from '../../../components/controls/Modal';
-import { translateWithParameters, translate } from '../../../helpers/l10n';
+import { ResetButtonLink } from '../../../components/ui/buttons';
 import { searchDeliveries } from '../../../api/webhooks';
+import { translateWithParameters, translate } from '../../../helpers/l10n';
 
 interface Props {
   onClose: () => void;
@@ -113,9 +113,9 @@ export default class DeliveriesForm extends React.PureComponent<Props, State> {
           )}
         </div>
         <footer className="modal-foot">
-          <Button className="button-link js-modal-close" onClick={this.props.onClose}>
+          <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
             {translate('close')}
-          </Button>
+          </ResetButtonLink>
         </footer>
       </Modal>
     );

server/sonar-web/src/main/js/apps/webhooks/components/LatestDeliveryForm.tsx

@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import DeliveryItem from './DeliveryItem';
-import { Button } from '../../../components/ui/buttons';
 import Modal from '../../../components/controls/Modal';
-import { translateWithParameters, translate } from '../../../helpers/l10n';
+import { ResetButtonLink } from '../../../components/ui/buttons';
 import { getDelivery } from '../../../api/webhooks';
+import { translateWithParameters, translate } from '../../../helpers/l10n';
 
 interface Props {
   delivery: T.WebhookDelivery;
@@ -88,9 +88,9 @@ export default class LatestDeliveryForm extends React.PureComponent<Props, State
           payload={payload}
         />
         <footer className="modal-foot">
-          <Button className="button-link js-modal-close" onClick={this.props.onClose}>
+          <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
             {translate('close')}
-          </Button>
+          </ResetButtonLink>
         </footer>
       </Modal>
     );

server/sonar-web/src/main/js/apps/webhooks/components/__tests__/__snapshots__/DeliveriesForm-test.tsx.snap

@@ -27,12 +27,12 @@ exports[`should render correctly 1`] = `
   <footer
     className="modal-foot"
   >
-    <Button
-      className="button-link js-modal-close"
+    <ResetButtonLink
+      className="js-modal-close"
       onClick={[MockFunction]}
     >
       close
-    </Button>
+    </ResetButtonLink>
   </footer>
 </Modal>
 `;
@@ -95,12 +95,12 @@ exports[`should render correctly 2`] = `
   <footer
     className="modal-foot"
   >
-    <Button
-      className="button-link js-modal-close"
+    <ResetButtonLink
+      className="js-modal-close"
       onClick={[MockFunction]}
     >
       close
-    </Button>
+    </ResetButtonLink>
   </footer>
 </Modal>
 `;

server/sonar-web/src/main/js/apps/webhooks/components/__tests__/__snapshots__/LatestDeliveryForm-test.tsx.snap

@@ -28,12 +28,12 @@ exports[`should render correctly 1`] = `
   <footer
     className="modal-foot"
   >
-    <Button
-      className="button-link js-modal-close"
+    <ResetButtonLink
+      className="js-modal-close"
       onClick={[MockFunction]}
     >
       close
-    </Button>
+    </ResetButtonLink>
   </footer>
 </Modal>
 `;
@@ -67,12 +67,12 @@ exports[`should render correctly 2`] = `
   <footer
     className="modal-foot"
   >
-    <Button
-      className="button-link js-modal-close"
+    <ResetButtonLink
+      className="js-modal-close"
       onClick={[MockFunction]}
     >
       close
-    </Button>
+    </ResetButtonLink>
   </footer>
 </Modal>
 `;

server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlay.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import { Link } from 'react-router';
 import { keyBy, sortBy, groupBy } from 'lodash';
 import MeasuresOverlayMeasure from './MeasuresOverlayMeasure';
-import { Button } from '../../ui/buttons';
+import { ResetButtonLink } from '../../ui/buttons';
 import { getFacets } from '../../../api/issues';
 import { getMeasures } from '../../../api/measures';
 import { getAllMetrics } from '../../../api/metrics';
@@ -440,9 +440,7 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
         </div>
 
         <footer className="modal-foot">
-          <Button className="button-link" onClick={this.props.onClose}>
-            {translate('close')}
-          </Button>
+          <ResetButtonLink onClick={this.props.onClose}>{translate('close')}</ResetButtonLink>
         </footer>
       </Modal>
     );

server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/MeasuresOverlay-test.tsx.snap

@@ -350,12 +350,11 @@ exports[`should render source file 1`] = `
   <footer
     className="modal-foot"
   >
-    <Button
-      className="button-link"
+    <ResetButtonLink
       onClick={[MockFunction]}
     >
       close
-    </Button>
+    </ResetButtonLink>
   </footer>
 </Modal>
 `;
@@ -1316,12 +1315,11 @@ exports[`should render source file 2`] = `
   <footer
     className="modal-foot"
   >
-    <Button
-      className="button-link"
+    <ResetButtonLink
       onClick={[MockFunction]}
     >
       close
-    </Button>
+    </ResetButtonLink>
   </footer>
 </Modal>
 `;
@@ -1464,12 +1462,11 @@ exports[`should render test file 1`] = `
   <footer
     className="modal-foot"
   >
-    <Button
-      className="button-link"
+    <ResetButtonLink
       onClick={[MockFunction]}
     >
       close
-    </Button>
+    </ResetButtonLink>
   </footer>
 </Modal>
 `;

server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx

@@ -18,11 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SetAssigneePopup from '../popups/SetAssigneePopup';
 import Avatar from '../../ui/Avatar';
-import Toggler from '../../controls/Toggler';
 import DropdownIcon from '../../icons-components/DropdownIcon';
-import { Button } from '../../ui/buttons';
+import SetAssigneePopup from '../popups/SetAssigneePopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
@@ -72,12 +72,12 @@ export default class IssueAssign extends React.PureComponent<Props> {
             onRequestClose={this.handleClose}
             open={this.props.isOpen && this.props.canAssign}
             overlay={<SetAssigneePopup issue={this.props.issue} onSelect={this.props.onAssign} />}>
-            <Button
-              className="button-link issue-action issue-action-with-options js-issue-assign"
+            <ButtonLink
+              className="issue-action issue-action-with-options js-issue-assign"
               onClick={this.toggleAssign}>
               {this.renderAssignee()}
               <DropdownIcon className="little-spacer-left" />
-            </Button>
+            </ButtonLink>
           </Toggler>
         </div>
       );

server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx

@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import ChangelogPopup from '../popups/ChangelogPopup';
-import DropdownIcon from '../../icons-components/DropdownIcon';
 import DateFromNow from '../../intl/DateFromNow';
 import DateTimeFormatter from '../../intl/DateTimeFormatter';
+import DropdownIcon from '../../icons-components/DropdownIcon';
 import Toggler from '../../controls/Toggler';
 import Tooltip from '../../controls/Tooltip';
-import { Button } from '../../ui/buttons';
+import { ButtonLink } from '../../ui/buttons';
 
 interface Props {
   isOpen: boolean;
@@ -56,14 +56,14 @@ export default class IssueChangelog extends React.PureComponent<Props> {
           <Tooltip
             mouseEnterDelay={0.5}
             overlay={<DateTimeFormatter date={this.props.creationDate} />}>
-            <Button
-              className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+            <ButtonLink
+              className="issue-action issue-action-with-options js-issue-show-changelog"
               onClick={this.handleClick}>
               <span className="issue-meta-label">
                 <DateFromNow date={this.props.creationDate} />
               </span>
               <DropdownIcon className="little-spacer-left" />
-            </Button>
+            </ButtonLink>
           </Tooltip>
         </Toggler>
       </div>

server/sonar-web/src/main/js/components/issue/components/IssueCommentAction.tsx

@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { updateIssue } from '../actions';
-import Toggler from '../../controls/Toggler';
-import { Button } from '../../ui/buttons';
 import CommentPopup from '../popups/CommentPopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
 import { addIssueComment } from '../../../api/issues';
 import { translate } from '../../../helpers/l10n';
+import { updateIssue } from '../actions';
 
 interface Props {
   commentPlaceholder: string;
@@ -61,11 +61,9 @@ export default class IssueCommentAction extends React.PureComponent<Props> {
               toggleComment={this.props.toggleComment}
             />
           }>
-          <Button
-            className="button-link issue-action js-issue-comment"
-            onClick={this.handleCommentClick}>
+          <ButtonLink className="issue-action js-issue-comment" onClick={this.handleCommentClick}>
             <span className="issue-meta-label">{translate('issue.comment.formlink')}</span>
-          </Button>
+          </ButtonLink>
         </Toggler>
       </li>
     );

server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx

@@ -20,9 +20,9 @@
 import * as React from 'react';
 import EllipsisIcon from '../../icons-components/EllipsisIcon';
 import Tooltip from '../../controls/Tooltip';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { Button } from '../../ui/buttons';
+import { ButtonLink } from '../../ui/buttons';
 import { WorkspaceContextShape } from '../../workspace/context';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 interface Props {
   engine?: string;
@@ -45,12 +45,12 @@ export default class IssueMessage extends React.PureComponent<Props> {
     return (
       <div className="issue-message">
         {this.props.message}
-        <Button
+        <ButtonLink
           aria-label={translate('issue.rule_details')}
-          className="button-link issue-rule little-spacer-left"
+          className="issue-rule little-spacer-left"
           onClick={this.handleClick}>
           <EllipsisIcon />
-        </Button>
+        </ButtonLink>
         {this.props.engine && (
           <Tooltip
             overlay={translateWithParameters('issue.from_external_rule_engine', this.props.engine)}>

server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx

@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SetSeverityPopup from '../popups/SetSeverityPopup';
-import { setIssueSeverity, IssueResponse } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
 import DropdownIcon from '../../icons-components/DropdownIcon';
+import SetSeverityPopup from '../popups/SetSeverityPopup';
 import SeverityHelper from '../../shared/SeverityHelper';
-import { Button } from '../../ui/buttons';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueSeverity, IssueResponse } from '../../../api/issues';
 import { RawQuery } from '../../../helpers/query';
 
 interface Props {
@@ -61,12 +61,12 @@ export default class IssueSeverity extends React.PureComponent<Props> {
             onRequestClose={this.handleClose}
             open={this.props.isOpen && this.props.canSetSeverity}
             overlay={<SetSeverityPopup issue={issue} onSelect={this.setSeverity} />}>
-            <Button
-              className="button-link issue-action issue-action-with-options js-issue-set-severity"
+            <ButtonLink
+              className="issue-action issue-action-with-options js-issue-set-severity"
               onClick={this.toggleSetSeverity}>
               <SeverityHelper className="issue-meta-label" severity={issue.severity} />
               <DropdownIcon className="little-spacer-left" />
-            </Button>
+            </ButtonLink>
           </Toggler>
         </div>
       );

server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx

@@ -18,13 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { updateIssue } from '../actions';
 import SetIssueTagsPopup from '../popups/SetIssueTagsPopup';
-import { setIssueTags } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
 import TagsList from '../../tags/TagsList';
-import { Button } from '../../ui/buttons';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueTags } from '../../../api/issues';
 import { translate } from '../../../helpers/l10n';
+import { updateIssue } from '../actions';
 
 interface Props {
   canSetTags: boolean;
@@ -71,8 +71,8 @@ export default class IssueTags extends React.PureComponent<Props> {
                 setTags={this.setTags}
               />
             }>
-            <Button
-              className={'js-issue-edit-tags button-link issue-action issue-action-with-options'}
+            <ButtonLink
+              className="issue-action issue-action-with-options js-issue-edit-tags"
               onClick={this.toggleSetTags}>
               <TagsList
                 allowUpdate={this.props.canSetTags}
@@ -80,7 +80,7 @@ export default class IssueTags extends React.PureComponent<Props> {
                   issue.tags && issue.tags.length > 0 ? issue.tags : [translate('issue.no_tag')]
                 }
               />
-            </Button>
+            </ButtonLink>
           </Toggler>
         </div>
       );

server/sonar-web/src/main/js/components/issue/components/IssueTransition.tsx

@@ -18,13 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { updateIssue } from '../actions';
-import SetTransitionPopup from '../popups/SetTransitionPopup';
-import { setIssueTransition } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
 import DropdownIcon from '../../icons-components/DropdownIcon';
+import SetTransitionPopup from '../popups/SetTransitionPopup';
 import StatusHelper from '../../shared/StatusHelper';
-import { Button } from '../../ui/buttons';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueTransition } from '../../../api/issues';
+import { updateIssue } from '../actions';
 
 interface Props {
   hasTransitions: boolean;
@@ -63,8 +63,8 @@ export default class IssueTransition extends React.PureComponent<Props> {
             overlay={
               <SetTransitionPopup onSelect={this.setTransition} transitions={issue.transitions} />
             }>
-            <Button
-              className="button-link issue-action issue-action-with-options js-issue-transition"
+            <ButtonLink
+              className="issue-action issue-action-with-options js-issue-transition"
               onClick={this.toggleSetTransition}>
               <StatusHelper
                 className="issue-meta-label"
@@ -72,7 +72,7 @@ export default class IssueTransition extends React.PureComponent<Props> {
                 status={issue.status}
               />
               <DropdownIcon className="little-spacer-left" />
-            </Button>
+            </ButtonLink>
           </Toggler>
         </div>
       );

server/sonar-web/src/main/js/components/issue/components/IssueType.tsx

@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SetTypePopup from '../popups/SetTypePopup';
-import { setIssueType, IssueResponse } from '../../../api/issues';
-import Toggler from '../../controls/Toggler';
 import DropdownIcon from '../../icons-components/DropdownIcon';
-import { Button } from '../../ui/buttons';
 import IssueTypeIcon from '../../ui/IssueTypeIcon';
+import SetTypePopup from '../popups/SetTypePopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
+import { setIssueType, IssueResponse } from '../../../api/issues';
 import { translate } from '../../../helpers/l10n';
 import { RawQuery } from '../../../helpers/query';
 
@@ -62,13 +62,13 @@ export default class IssueType extends React.PureComponent<Props> {
             onRequestClose={this.handleClose}
             open={this.props.isOpen && this.props.canSetType}
             overlay={<SetTypePopup issue={issue} onSelect={this.setType} />}>
-            <Button
-              className="button-link issue-action issue-action-with-options js-issue-set-type"
+            <ButtonLink
+              className="issue-action issue-action-with-options js-issue-set-type"
               onClick={this.toggleSetType}>
               <IssueTypeIcon className="little-spacer-right" query={issue.type} />
               {translate('issue.type', issue.type)}
               <DropdownIcon className="little-spacer-left" />
-            </Button>
+            </ButtonLink>
           </Toggler>
         </div>
       );

server/sonar-web/src/main/js/components/issue/components/SimilarIssuesFilter.tsx

@@ -18,11 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SimilarIssuesPopup from '../popups/SimilarIssuesPopup';
-import Toggler from '../../controls/Toggler';
 import DropdownIcon from '../../icons-components/DropdownIcon';
 import FilterIcon from '../../icons-components/FilterIcon';
-import { Button } from '../../ui/buttons';
+import SimilarIssuesPopup from '../popups/SimilarIssuesPopup';
+import Toggler from '../../controls/Toggler';
+import { ButtonLink } from '../../ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
@@ -55,14 +55,14 @@ export default class SimilarIssuesFilter extends React.PureComponent<Props> {
           onRequestClose={this.handleClose}
           open={this.props.isOpen}
           overlay={<SimilarIssuesPopup issue={this.props.issue} onFilter={this.handleFilter} />}>
-          <Button
+          <ButtonLink
             aria-label={translate('issue.filter_similar_issues')}
-            className="js-issue-filter button-link issue-action issue-action-with-options"
+            className="issue-action issue-action-with-options js-issue-filter"
             onClick={this.togglePopup}
             title={translate('issue.filter_similar_issues')}>
             <FilterIcon className="icon-half-transparent" />
             <DropdownIcon className="icon-half-transparent" />
-          </Button>
+          </ButtonLink>
         </Toggler>
       </div>
     );

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueAssign-test.tsx

@@ -30,44 +30,31 @@ const issue = {
 };
 
 it('should render without the action when the correct rights are missing', () => {
-  const element = shallow(
-    <IssueAssign
-      canAssign={false}
-      isOpen={false}
-      issue={issue}
-      onAssign={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender({ canAssign: false })).toMatchSnapshot();
 });
 
 it('should render with the action', () => {
-  const element = shallow(
-    <IssueAssign
-      canAssign={true}
-      isOpen={false}
-      issue={issue}
-      onAssign={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
 });
 
 it('should open the popup when the button is clicked', () => {
-  const toggle = jest.fn();
-  const element = shallow(
+  const togglePopup = jest.fn();
+  const element = shallowRender({ togglePopup });
+  click(element.find('ButtonLink'));
+  expect(togglePopup.mock.calls).toMatchSnapshot();
+  element.setProps({ isOpen: true });
+  expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueAssign['props']> = {}) {
+  return shallow(
     <IssueAssign
       canAssign={true}
       isOpen={false}
       issue={issue}
       onAssign={jest.fn()}
-      togglePopup={toggle}
+      togglePopup={jest.fn()}
+      {...props}
     />
   );
-  click(element.find('Button'));
-  expect(toggle.mock.calls).toMatchSnapshot();
-  element.setProps({ isOpen: true });
-  expect(element).toMatchSnapshot();
-});
+}

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.tsx

@@ -29,29 +29,27 @@ const issue = {
 };
 
 it('should render correctly', () => {
-  const element = shallow(
-    <IssueChangelog
-      creationDate="2017-03-01T09:36:01+0100"
-      isOpen={false}
-      issue={issue}
-      togglePopup={jest.fn()}
-    />
-  );
+  const element = shallowRender();
   expect(element).toMatchSnapshot();
 });
 
 it('should open the popup when the button is clicked', () => {
-  const toggle = jest.fn();
-  const element = shallow(
+  const togglePopup = jest.fn();
+  const element = shallowRender({ togglePopup });
+  click(element.find('ButtonLink'));
+  expect(togglePopup.mock.calls).toMatchSnapshot();
+  element.setProps({ isOpen: true });
+  expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueChangelog['props']> = {}) {
+  return shallow(
     <IssueChangelog
       creationDate="2017-03-01T09:36:01+0100"
       isOpen={false}
       issue={issue}
-      togglePopup={toggle}
+      togglePopup={jest.fn()}
+      {...props}
     />
   );
-  click(element.find('Button'));
-  expect(toggle.mock.calls).toMatchSnapshot();
-  element.setProps({ isOpen: true });
-  expect(element).toMatchSnapshot();
-});
+}

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentAction-test.tsx

@@ -23,29 +23,26 @@ import IssueCommentAction from '../IssueCommentAction';
 import { click } from '../../../../helpers/testUtils';
 
 it('should render correctly', () => {
-  const element = shallow(
-    <IssueCommentAction
-      commentPlaceholder=""
-      issueKey="issue-key"
-      onChange={jest.fn()}
-      toggleComment={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
 });
 
 it('should open the popup when the button is clicked', () => {
-  const toggle = jest.fn();
-  const element = shallow(
+  const toggleComment = jest.fn();
+  const element = shallowRender({ toggleComment });
+  click(element.find('ButtonLink'));
+  expect(toggleComment.mock.calls.length).toBe(1);
+  element.setProps({ currentPopup: 'comment' });
+  expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueCommentAction['props']> = {}) {
+  return shallow(
     <IssueCommentAction
       commentPlaceholder=""
       issueKey="issue-key"
       onChange={jest.fn()}
-      toggleComment={toggle}
+      toggleComment={jest.fn()}
+      {...props}
     />
   );
-  click(element.find('Button'));
-  expect(toggle.mock.calls.length).toBe(1);
-  element.setProps({ currentPopup: 'comment' });
-  expect(element).toMatchSnapshot();
-});
+}

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueSeverity-test.tsx

@@ -22,49 +22,34 @@ import { shallow } from 'enzyme';
 import IssueSeverity from '../IssueSeverity';
 import { click } from '../../../../helpers/testUtils';
 
-const issue = {
-  severity: 'BLOCKER'
-};
+const issue = { severity: 'BLOCKER' };
 
 it('should render without the action when the correct rights are missing', () => {
-  const element = shallow(
-    <IssueSeverity
-      canSetSeverity={false}
-      isOpen={false}
-      issue={issue}
-      setIssueProperty={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender({ canSetSeverity: false })).toMatchSnapshot();
 });
 
 it('should render with the action', () => {
-  const element = shallow(
-    <IssueSeverity
-      canSetSeverity={true}
-      isOpen={false}
-      issue={issue}
-      setIssueProperty={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
 });
 
 it('should open the popup when the button is clicked', () => {
-  const toggle = jest.fn();
-  const element = shallow(
+  const togglePopup = jest.fn();
+  const element = shallowRender({ togglePopup });
+  click(element.find('ButtonLink'));
+  expect(togglePopup.mock.calls).toMatchSnapshot();
+  element.setProps({ isOpen: true });
+  expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueSeverity['props']> = {}) {
+  return shallow(
     <IssueSeverity
       canSetSeverity={true}
       isOpen={false}
       issue={issue}
       setIssueProperty={jest.fn()}
-      togglePopup={toggle}
+      togglePopup={jest.fn()}
+      {...props}
     />
   );
-  click(element.find('Button'));
-  expect(toggle.mock.calls).toMatchSnapshot();
-  element.setProps({ isOpen: true });
-  expect(element).toMatchSnapshot();
-});
+}

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTags-test.tsx

@@ -22,51 +22,34 @@ import { shallow } from 'enzyme';
 import IssueTags from '../IssueTags';
 import { click } from '../../../../helpers/testUtils';
 
-const issue = {
-  key: 'issuekey',
-  projectOrganization: 'foo',
-  tags: ['mytag', 'test']
-};
+const issue = { key: 'issuekey', projectOrganization: 'foo', tags: ['mytag', 'test'] };
 
 it('should render without the action when the correct rights are missing', () => {
-  const element = shallow(
-    <IssueTags
-      canSetTags={false}
-      isOpen={false}
-      issue={{ ...issue, tags: [] }}
-      onChange={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender({ canSetTags: false, issue: { ...issue, tags: [] } })).toMatchSnapshot();
 });
 
 it('should render with the action', () => {
-  const element = shallow(
-    <IssueTags
-      canSetTags={true}
-      isOpen={false}
-      issue={issue}
-      onChange={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
 });
 
 it('should open the popup when the button is clicked', () => {
-  const toggle = jest.fn();
-  const element = shallow(
+  const togglePopup = jest.fn();
+  const element = shallowRender({ togglePopup });
+  click(element.find('ButtonLink'));
+  expect(togglePopup.mock.calls).toMatchSnapshot();
+  element.setProps({ isOpen: true });
+  expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueTags['props']> = {}) {
+  return shallow(
     <IssueTags
       canSetTags={true}
       isOpen={false}
       issue={issue}
       onChange={jest.fn()}
-      togglePopup={toggle}
+      togglePopup={jest.fn()}
+      {...props}
     />
   );
-  click(element.find('Button'));
-  expect(toggle.mock.calls).toMatchSnapshot();
-  element.setProps({ isOpen: true });
-  expect(element).toMatchSnapshot();
-});
+}

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTransition-test.tsx

@@ -29,66 +29,49 @@ const issue = {
 };
 
 it('should render without the action when there is no transitions', () => {
-  const element = shallow(
-    <IssueTransition
-      hasTransitions={false}
-      isOpen={false}
-      issue={{
-        key: 'foo1234',
-        transitions: [],
-        status: 'CLOSED'
-      }}
-      onChange={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(
+    shallowRender({
+      hasTransitions: false,
+      issue: { key: 'foo1234', transitions: [], status: 'CLOSED' }
+    })
+  ).toMatchSnapshot();
 });
 
 it('should render with the action', () => {
-  const element = shallow(
-    <IssueTransition
-      hasTransitions={true}
-      isOpen={false}
-      issue={issue}
-      onChange={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
 });
 
 it('should render with a resolution', () => {
-  const element = shallow(
-    <IssueTransition
-      hasTransitions={true}
-      isOpen={false}
-      issue={{
+  expect(
+    shallowRender({
+      issue: {
         key: 'foo1234',
         transitions: ['reopen'],
         status: 'RESOLVED',
         resolution: 'FIXED'
-      }}
-      onChange={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+      }
+    })
+  ).toMatchSnapshot();
 });
 
 it('should open the popup when the button is clicked', () => {
-  const toggle = jest.fn();
-  const element = shallow(
+  const togglePopup = jest.fn();
+  const element = shallowRender({ togglePopup });
+  click(element.find('ButtonLink'));
+  expect(togglePopup.mock.calls).toMatchSnapshot();
+  element.setProps({ isOpen: true });
+  expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueTransition['props']> = {}) {
+  return shallow(
     <IssueTransition
       hasTransitions={true}
       isOpen={false}
       issue={issue}
       onChange={jest.fn()}
-      togglePopup={toggle}
+      togglePopup={jest.fn()}
+      {...props}
     />
   );
-  click(element.find('Button'));
-  expect(toggle.mock.calls).toMatchSnapshot();
-  element.setProps({ isOpen: true });
-  expect(element).toMatchSnapshot();
-});
+}

server/sonar-web/src/main/js/components/issue/components/__tests__/IssueType-test.tsx

@@ -22,49 +22,34 @@ import { shallow } from 'enzyme';
 import IssueType from '../IssueType';
 import { click } from '../../../../helpers/testUtils';
 
-const issue: Pick<T.Issue, 'type'> = {
-  type: 'BUG'
-};
+const issue: Pick<T.Issue, 'type'> = { type: 'BUG' };
 
 it('should render without the action when the correct rights are missing', () => {
-  const element = shallow(
-    <IssueType
-      canSetType={false}
-      isOpen={false}
-      issue={issue}
-      setIssueProperty={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender({ canSetType: false })).toMatchSnapshot();
 });
 
 it('should render with the action', () => {
-  const element = shallow(
-    <IssueType
-      canSetType={true}
-      isOpen={false}
-      issue={issue}
-      setIssueProperty={jest.fn()}
-      togglePopup={jest.fn()}
-    />
-  );
-  expect(element).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
 });
 
 it('should open the popup when the button is clicked', () => {
-  const toggle = jest.fn();
-  const element = shallow(
+  const togglePopup = jest.fn();
+  const element = shallowRender({ togglePopup });
+  click(element.find('ButtonLink'));
+  expect(togglePopup.mock.calls).toMatchSnapshot();
+  element.setProps({ isOpen: true });
+  expect(element).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<IssueType['props']> = {}) {
+  return shallow(
     <IssueType
       canSetType={true}
       isOpen={false}
       issue={issue}
       setIssueProperty={jest.fn()}
-      togglePopup={toggle}
+      togglePopup={jest.fn()}
+      {...props}
     />
   );
-  click(element.find('Button'));
-  expect(toggle.mock.calls).toMatchSnapshot();
-  element.setProps({ isOpen: true });
-  expect(element).toMatchSnapshot();
-});
+}

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap

@@ -31,8 +31,8 @@ exports[`should open the popup when the button is clicked 2`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-assign"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-assign"
       onClick={[Function]}
     >
       <span>
@@ -55,7 +55,7 @@ exports[`should open the popup when the button is clicked 2`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;
@@ -82,8 +82,8 @@ exports[`should render with the action 1`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-assign"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-assign"
       onClick={[Function]}
     >
       <span>
@@ -106,7 +106,7 @@ exports[`should render with the action 1`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueChangelog-test.tsx.snap

@@ -36,8 +36,8 @@ exports[`should open the popup when the button is clicked 2`] = `
         />
       }
     >
-      <Button
-        className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+      <ButtonLink
+        className="issue-action issue-action-with-options js-issue-show-changelog"
         onClick={[Function]}
       >
         <span
@@ -50,7 +50,7 @@ exports[`should open the popup when the button is clicked 2`] = `
         <DropdownIcon
           className="little-spacer-left"
         />
-      </Button>
+      </ButtonLink>
     </Tooltip>
   </Toggler>
 </div>
@@ -83,8 +83,8 @@ exports[`should render correctly 1`] = `
         />
       }
     >
-      <Button
-        className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+      <ButtonLink
+        className="issue-action issue-action-with-options js-issue-show-changelog"
         onClick={[Function]}
       >
         <span
@@ -97,7 +97,7 @@ exports[`should render correctly 1`] = `
         <DropdownIcon
           className="little-spacer-left"
         />
-      </Button>
+      </ButtonLink>
     </Tooltip>
   </Toggler>
 </div>

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentAction-test.tsx.snap

@@ -28,8 +28,8 @@ exports[`should open the popup when the button is clicked 1`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action js-issue-comment"
+    <ButtonLink
+      className="issue-action js-issue-comment"
       onClick={[Function]}
     >
       <span
@@ -37,7 +37,7 @@ exports[`should open the popup when the button is clicked 1`] = `
       >
         issue.comment.formlink
       </span>
-    </Button>
+    </ButtonLink>
   </Toggler>
 </li>
 `;
@@ -58,8 +58,8 @@ exports[`should render correctly 1`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action js-issue-comment"
+    <ButtonLink
+      className="issue-action js-issue-comment"
       onClick={[Function]}
     >
       <span
@@ -67,7 +67,7 @@ exports[`should render correctly 1`] = `
       >
         issue.comment.formlink
       </span>
-    </Button>
+    </ButtonLink>
   </Toggler>
 </li>
 `;

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap

@@ -5,12 +5,12 @@ exports[`should render with the message and a link to open the rule 1`] = `
   className="issue-message"
 >
   Reduce the number of conditional operators (4) used in the expression
-  <Button
+  <ButtonLink
     aria-label="issue.rule_details"
-    className="button-link issue-rule little-spacer-left"
+    className="issue-rule little-spacer-left"
     onClick={[Function]}
   >
     <EllipsisIcon />
-  </Button>
+  </ButtonLink>
 </div>
 `;

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueSeverity-test.tsx.snap

@@ -27,8 +27,8 @@ exports[`should open the popup when the button is clicked 2`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-set-severity"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-set-severity"
       onClick={[Function]}
     >
       <SeverityHelper
@@ -38,7 +38,7 @@ exports[`should open the popup when the button is clicked 2`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;
@@ -61,8 +61,8 @@ exports[`should render with the action 1`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-set-severity"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-set-severity"
       onClick={[Function]}
     >
       <SeverityHelper
@@ -72,7 +72,7 @@ exports[`should render with the action 1`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTags-test.tsx.snap

@@ -29,8 +29,8 @@ exports[`should open the popup when the button is clicked 2`] = `
       />
     }
   >
-    <Button
-      className="js-issue-edit-tags button-link issue-action issue-action-with-options"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-edit-tags"
       onClick={[Function]}
     >
       <TagsList
@@ -42,7 +42,7 @@ exports[`should open the popup when the button is clicked 2`] = `
           ]
         }
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;
@@ -67,8 +67,8 @@ exports[`should render with the action 1`] = `
       />
     }
   >
-    <Button
-      className="js-issue-edit-tags button-link issue-action issue-action-with-options"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-edit-tags"
       onClick={[Function]}
     >
       <TagsList
@@ -80,7 +80,7 @@ exports[`should render with the action 1`] = `
           ]
         }
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTransition-test.tsx.snap

@@ -30,8 +30,8 @@ exports[`should open the popup when the button is clicked 2`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-transition"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-transition"
       onClick={[Function]}
     >
       <StatusHelper
@@ -41,7 +41,7 @@ exports[`should open the popup when the button is clicked 2`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;
@@ -64,8 +64,8 @@ exports[`should render with a resolution 1`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-transition"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-transition"
       onClick={[Function]}
     >
       <StatusHelper
@@ -76,7 +76,7 @@ exports[`should render with a resolution 1`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;
@@ -102,8 +102,8 @@ exports[`should render with the action 1`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-transition"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-transition"
       onClick={[Function]}
     >
       <StatusHelper
@@ -113,7 +113,7 @@ exports[`should render with the action 1`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueType-test.tsx.snap

@@ -27,8 +27,8 @@ exports[`should open the popup when the button is clicked 2`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-set-type"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-set-type"
       onClick={[Function]}
     >
       <IssueTypeIcon
@@ -39,7 +39,7 @@ exports[`should open the popup when the button is clicked 2`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;
@@ -62,8 +62,8 @@ exports[`should render with the action 1`] = `
       />
     }
   >
-    <Button
-      className="button-link issue-action issue-action-with-options js-issue-set-type"
+    <ButtonLink
+      className="issue-action issue-action-with-options js-issue-set-type"
       onClick={[Function]}
     >
       <IssueTypeIcon
@@ -74,7 +74,7 @@ exports[`should render with the action 1`] = `
       <DropdownIcon
         className="little-spacer-left"
       />
-    </Button>
+    </ButtonLink>
   </Toggler>
 </div>
 `;

server/sonar-web/src/main/js/components/ui/buttons.css

@@ -117,7 +117,7 @@
 
 /* #region .button-link */
 .button-link {
-  display: inline;
+  display: inline-flex;
   height: auto; /* Keep this to not inherit the height from .button */
   line-height: 1;
   margin: 0;

server/sonar-web/src/main/js/components/ui/buttons.tsx

@@ -76,13 +76,17 @@ export class Button extends React.PureComponent<ButtonProps> {
   }
 }
 
+export function ButtonLink({ className, ...props }: ButtonProps) {
+  return <Button {...props} className={classNames('button-link', className)} />;
+}
+
 export function SubmitButton(props: T.Omit<ButtonProps, 'type'>) {
   // do not prevent default to actually submit a form
   return <Button {...props} preventDefault={false} type="submit" />;
 }
 
-export function ResetButtonLink({ className, ...props }: T.Omit<ButtonProps, 'type'>) {
-  return <Button {...props} className={classNames('button-link', className)} type="reset" />;
+export function ResetButtonLink(props: T.Omit<ButtonProps, 'type'>) {
+  return <ButtonLink {...props} type="reset" />;
 }
 
 interface ButtonIconProps {