create and use Button component (#3087)

4 files changed, 15 insertions, 21 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ClearAll.tsx b/server/sonar-web/src/main/js/apps/projects/components/ClearAll.tsx
index 0e2772309d4..ddf2825d011 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ClearAll.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ClearAll.tsx
@@ -18,26 +18,19 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Button } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
   onClearAll: () => void;
 }
 
-export default class ClearAll extends React.PureComponent<Props> {
-  handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    this.props.onClearAll();
-  };
-
-  render() {
-    return (
-      <div className="projects-facets-reset">
-        <button className="button-red" onClick={this.handleClick}>
-          {translate('clear_all_filters')}
-        </button>
-      </div>
-    );
-  }
+export default function ClearAll({ onClearAll }: Props) {
+  return (
+    <div className="projects-facets-reset">
+      <Button className="button-red" onClick={onClearAll}>
+        {translate('clear_all_filters')}
+      </Button>
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ClearAll-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ClearAll-test.tsx
index 6978b60dcda..8ff409b905a 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ClearAll-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ClearAll-test.tsx
@@ -29,6 +29,6 @@ it('renders', () => {
 it('clears all', () => {
   const onClearAll = jest.fn();
   const wrapper = shallow(<ClearAll onClearAll={onClearAll} />);
-  click(wrapper.find('button'));
+  click(wrapper.find('Button'));
   expect(onClearAll).toBeCalled();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
index f38303cf520..19ca26cc2a6 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ProjectsSortingSelect from '../ProjectsSortingSelect';
+import { click } from '../../../../helpers/testUtils';
 
 it('should render correctly for overall view', () => {
   expect(
@@ -84,6 +85,6 @@ it('reverses sorting', () => {
       view="overall"
     />
   );
-  wrapper.find('ButtonIcon').prop<Function>('onClick')();
+  click(wrapper.find('ButtonIcon'));
   expect(onChange).toBeCalledWith('size', false);
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ClearAll-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ClearAll-test.tsx.snap
index 5f61d820953..2340e0bbf03 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ClearAll-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ClearAll-test.tsx.snap
@@ -4,11 +4,11 @@ exports[`renders 1`] = `
 <div
   className="projects-facets-reset"
 >
-  <button
+  <Button
     className="button-red"
-    onClick={[Function]}
+    onClick={[MockFunction]}
   >
     clear_all_filters
-  </button>
+  </Button>
 </div>
 `;