SONAR-10023 Clear actions must be consistent

3 files changed, 24 insertions, 33 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
index 79c2f1c7b18..5ae0471483b 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
@@ -22,7 +22,7 @@ import React from 'react';
 import Avatar from '../../../components/ui/Avatar';
 import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
 import EditIcon from '../../../components/icons-components/EditIcon';
-import DeleteIcon from '../../../components/icons-components/DeleteIcon';
+import { EditButton, DeleteButton } from '../../../components/ui/buttons';
 import CommentDeletePopup from '../popups/CommentDeletePopup';
 import CommentPopup from '../popups/CommentPopup';
 import DateFromNow from '../../../components/intl/DateFromNow';
@@ -119,11 +119,10 @@ export default class IssueCommentLine extends React.PureComponent {
                   toggleComment={this.toggleEditPopup}
                 />
               }>
-              <button
-                className="js-issue-comment-edit button-link icon-half-transparent"
-                onClick={this.toggleEditPopup}>
-                <EditIcon />
-              </button>
+              <EditButton
+                className="js-issue-comment-edit button-small"
+                onClick={this.toggleEditPopup}
+              />
             </BubblePopupHelper>
           )}
           {comment.updatable && (
@@ -134,11 +133,10 @@ export default class IssueCommentLine extends React.PureComponent {
               position="bottomright"
               togglePopup={this.toggleDeletePopup}
               popup={<CommentDeletePopup onDelete={this.handleDelete} />}>
-              <button
-                className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
-                onClick={this.toggleDeletePopup}>
-                <DeleteIcon />
-              </button>
+              <DeleteButton
+                className="js-issue-comment-delete button-small"
+                onClick={this.toggleDeletePopup}
+              />
             </BubblePopupHelper>
           )}
         </div>
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
index 3075e60cc89..fc39cfdd0e4 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
@@ -53,9 +53,10 @@ it('should open the right popups when the buttons are clicked', () => {
   const element = shallow(
     <IssueCommentLine comment={comment} onDelete={jest.fn()} onEdit={jest.fn()} />
   );
-  click(element.find('button.js-issue-comment-edit'));
+  element.find('.js-issue-comment-edit').prop('onClick')();
   expect(element.state()).toMatchSnapshot();
-  click(element.find('button.js-issue-comment-delete'));
+  element.find('.js-issue-comment-delete').prop('onClick')();
   expect(element.state()).toMatchSnapshot();
+  element.update();
   expect(element).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
index 2ffdaa63fd4..71f4ef39f22 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
@@ -79,12 +79,10 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-edit button-link icon-half-transparent"
+      <EditButton
+        className="js-issue-comment-edit button-small"
         onClick={[Function]}
-      >
-        <EditIcon />
-      </button>
+      />
     </BubblePopupHelper>
     <BubblePopupHelper
       className="bubble-popup-helper-inline"
@@ -103,12 +101,10 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
+      <DeleteButton
+        className="js-issue-comment-delete button-small"
         onClick={[Function]}
-      >
-        <DeleteIcon />
-      </button>
+      />
     </BubblePopupHelper>
   </div>
 </div>
@@ -221,12 +217,10 @@ exports[`should render correctly a comment that is updatable 1`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-edit button-link icon-half-transparent"
+      <EditButton
+        className="js-issue-comment-edit button-small"
         onClick={[Function]}
-      >
-        <EditIcon />
-      </button>
+      />
     </BubblePopupHelper>
     <BubblePopupHelper
       className="bubble-popup-helper-inline"
@@ -245,12 +239,10 @@ exports[`should render correctly a comment that is updatable 1`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
+      <DeleteButton
+        className="js-issue-comment-delete button-small"
         onClick={[Function]}
-      >
-        <DeleteIcon />
-      </button>
+      />
     </BubblePopupHelper>
   </div>
 </div>