Use Button component in webhooks console

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

@@ -27,7 +27,6 @@ exports[`renders when not subscribed 1`] = `
     <Button
       className="js-report-subscribe"
       onClick={[Function]}
-      type="button"
     >
       report.subscribe
     </Button>
@@ -56,7 +55,6 @@ exports[`renders when subscribed 1`] = `
     </div>
     <Button
       onClick={[Function]}
-      type="button"
     >
       report.unsubscribe
     </Button>

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

@@ -19,6 +19,7 @@
  */
 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';
@@ -111,9 +112,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} type="button">
+          <Button className="button-link js-modal-close" onClick={this.props.onClose}>
             {translate('close')}
-          </button>
+          </Button>
         </footer>
       </Modal>
     );

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

@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import DeliveryItem from './DeliveryItem';
+import { Button } from '../../../components/ui/buttons';
 import Modal from '../../../components/controls/Modal';
 import { Webhook, WebhookDelivery } from '../../../app/types';
 import { translateWithParameters, translate } from '../../../helpers/l10n';
@@ -88,9 +89,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} type="button">
+          <Button className="button-link js-modal-close" onClick={this.props.onClose}>
             {translate('close')}
-          </button>
+          </Button>
         </footer>
       </Modal>
     );

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

@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import CreateWebhookForm from './CreateWebhookForm';
+import { Button } from '../../../components/ui/buttons';
 import Tooltip from '../../../components/controls/Tooltip';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
@@ -62,18 +63,16 @@ export default class PageActions extends React.PureComponent<Props, State> {
         <Tooltip
           overlay={translateWithParameters('webhooks.maximum_reached', WEBHOOKS_LIMIT)}
           placement="left">
-          <button className="js-webhook-create disabled" type="button">
-            {translate('create')}
-          </button>
+          <Button className="js-webhook-create disabled">{translate('create')}</Button>
         </Tooltip>
       );
     }
 
     return (
       <>
-        <button className="js-webhook-create" onClick={this.handleCreateOpen} type="button">
+        <Button className="js-webhook-create" onClick={this.handleCreateOpen}>
           {translate('create')}
-        </button>
+        </Button>
         {this.state.openCreate && (
           <CreateWebhookForm onClose={this.handleCreateClose} onDone={this.props.onCreate} />
         )}

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

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

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

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

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

@@ -8,12 +8,11 @@ exports[`should not allow to create a new webhook 1`] = `
     overlay="webhooks.maximum_reached.10"
     placement="left"
   >
-    <button
+    <Button
       className="js-webhook-create disabled"
-      type="button"
     >
       create
-    </button>
+    </Button>
   </Tooltip>
 </div>
 `;
@@ -23,13 +22,12 @@ exports[`should render correctly 1`] = `
   className="page-actions"
 >
   <React.Fragment>
-    <button
+    <Button
       className="js-webhook-create"
       onClick={[Function]}
-      type="button"
     >
       create
-    </button>
+    </Button>
   </React.Fragment>
 </div>
 `;

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

@@ -22,6 +22,7 @@ import { Link } from 'react-router';
 import { keyBy, sortBy, groupBy } from 'lodash';
 import MeasuresOverlayMeasure from './MeasuresOverlayMeasure';
 import MeasuresOverlayTestCases from './MeasuresOverlayTestCases';
+import { Button } from '../../../components/ui/buttons';
 import { getFacets } from '../../../api/issues';
 import { getMeasures } from '../../../api/measures';
 import { getAllMetrics } from '../../../api/metrics';
@@ -126,12 +127,6 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
     });
   };
 
-  handleCloseClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    this.props.onClose();
-  };
-
   handleAllMeasuresClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     event.currentTarget.blur();
@@ -449,9 +444,9 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
         </div>
 
         <footer className="modal-foot">
-          <button className="button-link" onClick={this.handleCloseClick} type="button">
+          <Button className="button-link" onClick={this.props.onClose}>
             {translate('close')}
-          </button>
+          </Button>
         </footer>
       </Modal>
     );

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

@@ -367,13 +367,12 @@ exports[`should render source file 1`] = `
   <footer
     className="modal-foot"
   >
-    <button
+    <Button
       className="button-link"
-      onClick={[Function]}
-      type="button"
+      onClick={[MockFunction]}
     >
       close
-    </button>
+    </Button>
   </footer>
 </Modal>
 `;
@@ -1351,13 +1350,12 @@ exports[`should render source file 2`] = `
   <footer
     className="modal-foot"
   >
-    <button
+    <Button
       className="button-link"
-      onClick={[Function]}
-      type="button"
+      onClick={[MockFunction]}
     >
       close
-    </button>
+    </Button>
   </footer>
 </Modal>
 `;
@@ -1523,13 +1521,12 @@ exports[`should render test file 1`] = `
   <footer
     className="modal-foot"
   >
-    <button
+    <Button
       className="button-link"
-      onClick={[Function]}
-      type="button"
+      onClick={[MockFunction]}
     >
       close
-    </button>
+    </Button>
   </footer>
 </Modal>
 `;

server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap

@@ -17,13 +17,22 @@ bar
 bar"
       tooltipPlacement="top"
     >
-      <button
+      <Button
         className="js-copy-to-clipboard no-select"
         data-clipboard-text="foo
 bar"
+        innerRef={[Function]}
       >
-        copy
-      </button>
+        <button
+          className="button js-copy-to-clipboard no-select"
+          data-clipboard-text="foo
+bar"
+          onClick={[Function]}
+          type="button"
+        >
+          copy
+        </button>
+      </Button>
     </ClipboardButton>
   </div>
 </CodeSnippet>
@@ -67,13 +76,22 @@ exports[`renders correctly with array snippet 1`] = `
   bar"
       tooltipPlacement="top"
     >
-      <button
+      <Button
         className="js-copy-to-clipboard no-select"
         data-clipboard-text="foo \\\\
   bar"
+        innerRef={[Function]}
       >
-        copy
-      </button>
+        <button
+          className="button js-copy-to-clipboard no-select"
+          data-clipboard-text="foo \\\\
+  bar"
+          onClick={[Function]}
+          type="button"
+        >
+          copy
+        </button>
+      </Button>
     </ClipboardButton>
   </div>
 </CodeSnippet>
@@ -99,12 +117,20 @@ exports[`renders correctly with array snippet 2`] = `
       copyValue="foo bar"
       tooltipPlacement="top"
     >
-      <button
+      <Button
         className="js-copy-to-clipboard no-select"
         data-clipboard-text="foo bar"
+        innerRef={[Function]}
       >
-        copy
-      </button>
+        <button
+          className="button js-copy-to-clipboard no-select"
+          data-clipboard-text="foo bar"
+          onClick={[Function]}
+          type="button"
+        >
+          copy
+        </button>
+      </Button>
     </ClipboardButton>
   </div>
 </CodeSnippet>

server/sonar-web/src/main/js/components/controls/ValidationModal.tsx

@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { withFormik, Form, FormikActions, FormikProps } from 'formik';
 import Modal from './Modal';
+import { ResetButtonLink, SubmitButton } from '../../components/ui/buttons';
 import DeferredSpinner from '../common/DeferredSpinner';
 import { translate } from '../../helpers/l10n';
 
@@ -38,12 +39,6 @@ interface Props<Values> extends InnerFormProps<Values> {
 }
 
 export default class ValidationModal<Values> extends React.PureComponent<Props<Values>> {
-  handleCancelClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    this.props.onClose();
-  };
-
   handleSubmit = (data: Values, { setSubmitting }: FormikActions<Values>) => {
     const result = this.props.onSubmit(data);
     if (result) {
@@ -80,16 +75,12 @@ export default class ValidationModal<Values> extends React.PureComponent<Props<V
 
         <footer className="modal-foot">
           <DeferredSpinner className="spacer-right" loading={props.isSubmitting} />
-          <button disabled={props.isSubmitting || !props.isValid || !props.dirty} type="submit">
+          <SubmitButton disabled={props.isSubmitting || !props.isValid || !props.dirty}>
             {props.confirmButtonText}
-          </button>
-          <button
-            className="button-link"
-            disabled={props.isSubmitting}
-            onClick={this.handleCancelClick}
-            type="reset">
+          </SubmitButton>
+          <ResetButtonLink disabled={props.isSubmitting} onClick={this.props.onClose}>
             {translate('cancel')}
-          </button>
+          </ResetButtonLink>
         </footer>
       </Form>
     ));

server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationModal-test.tsx.snap

@@ -49,20 +49,17 @@ exports[`should render correctly 2`] = `
       loading={false}
       timeout={100}
     />
-    <button
+    <SubmitButton
       disabled={true}
-      type="submit"
     >
       confirm
-    </button>
-    <button
-      className="button-link"
+    </SubmitButton>
+    <ResetButtonLink
       disabled={false}
-      onClick={[Function]}
-      type="reset"
+      onClick={[MockFunction]}
     >
       cancel
-    </button>
+    </ResetButtonLink>
   </footer>
 </Form>
 `;