SONAR-10022 Grouping actions must be consistent

3 files changed, 134 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx b/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
new file mode 100644
index 00000000000..fbcb30b299c
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
@@ -0,0 +1,108 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import * as classNames from 'classnames';
+import { Link } from 'react-router';
+import { LocationDescriptor } from 'history';
+import SettingsIcon from '../icons-components/SettingsIcon';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  small?: boolean;
+  toggleClassName?: string;
+}
+
+export default function ActionsDropdown(props: Props) {
+  return (
+    <div className={classNames('dropdown', props.className)}>
+      <button
+        className={classNames('dropdown-toggle', props.toggleClassName, {
+          'button-small button-compact': props.small
+        })}
+        data-toggle="dropdown">
+        <SettingsIcon className="text-text-bottom" />
+        <i className="icon-dropdown little-spacer-left" />
+      </button>
+      <ul className="dropdown-menu dropdown-menu-right">{props.children}</ul>
+    </div>
+  );
+}
+
+interface ItemProps {
+  className?: string;
+  children: React.ReactNode;
+  destructive?: boolean;
+  /** used to pass a name of downloaded file */
+  download?: string;
+  id?: string;
+  onClick?: () => void;
+  to?: LocationDescriptor;
+}
+
+export class ActionsDropdownItem extends React.PureComponent<ItemProps> {
+  handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    event.currentTarget.blur();
+    if (this.props.onClick) {
+      this.props.onClick();
+    }
+  };
+
+  render() {
+    const className = classNames(this.props.className, { 'text-danger': this.props.destructive });
+
+    if (this.props.download && typeof this.props.to === 'string') {
+      return (
+        <li>
+          <a
+            className={className}
+            download={this.props.download}
+            href={this.props.to}
+            id={this.props.id}>
+            {this.props.children}
+          </a>
+        </li>
+      );
+    }
+
+    if (this.props.to) {
+      return (
+        <li>
+          <Link className={className} id={this.props.id} to={this.props.to}>
+            {this.props.children}
+          </Link>
+        </li>
+      );
+    }
+
+    return (
+      <li>
+        <a className={className} href="#" id={this.props.id} onClick={this.handleClick}>
+          {this.props.children}
+        </a>
+      </li>
+    );
+  }
+}
+
+export function ActionsDropdownDivider() {
+  return <li className="divider" />;
+}
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 f6c73044282..79c2f1c7b18 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
@@ -21,6 +21,8 @@
 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 CommentDeletePopup from '../popups/CommentDeletePopup';
 import CommentPopup from '../popups/CommentPopup';
 import DateFromNow from '../../../components/intl/DateFromNow';
@@ -118,9 +120,10 @@ export default class IssueCommentLine extends React.PureComponent {
                 />
               }>
               <button
-                className="js-issue-comment-edit button-link icon-edit icon-half-transparent"
-                onClick={this.toggleEditPopup}
-              />
+                className="js-issue-comment-edit button-link icon-half-transparent"
+                onClick={this.toggleEditPopup}>
+                <EditIcon />
+              </button>
             </BubblePopupHelper>
           )}
           {comment.updatable && (
@@ -132,9 +135,10 @@ export default class IssueCommentLine extends React.PureComponent {
               togglePopup={this.toggleDeletePopup}
               popup={<CommentDeletePopup onDelete={this.handleDelete} />}>
               <button
-                className="js-issue-comment-delete button-link icon-delete icon-half-transparent"
-                onClick={this.toggleDeletePopup}
-              />
+                className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
+                onClick={this.toggleDeletePopup}>
+                <DeleteIcon />
+              </button>
             </BubblePopupHelper>
           )}
         </div>
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 d31a9e8eba2..2ffdaa63fd4 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
@@ -80,9 +80,11 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
       togglePopup={[Function]}
     >
       <button
-        className="js-issue-comment-edit button-link icon-edit icon-half-transparent"
+        className="js-issue-comment-edit button-link icon-half-transparent"
         onClick={[Function]}
-      />
+      >
+        <EditIcon />
+      </button>
     </BubblePopupHelper>
     <BubblePopupHelper
       className="bubble-popup-helper-inline"
@@ -102,9 +104,11 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
       togglePopup={[Function]}
     >
       <button
-        className="js-issue-comment-delete button-link icon-delete icon-half-transparent"
+        className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
         onClick={[Function]}
-      />
+      >
+        <DeleteIcon />
+      </button>
     </BubblePopupHelper>
   </div>
 </div>
@@ -218,9 +222,11 @@ exports[`should render correctly a comment that is updatable 1`] = `
       togglePopup={[Function]}
     >
       <button
-        className="js-issue-comment-edit button-link icon-edit icon-half-transparent"
+        className="js-issue-comment-edit button-link icon-half-transparent"
         onClick={[Function]}
-      />
+      >
+        <EditIcon />
+      </button>
     </BubblePopupHelper>
     <BubblePopupHelper
       className="bubble-popup-helper-inline"
@@ -240,9 +246,11 @@ exports[`should render correctly a comment that is updatable 1`] = `
       togglePopup={[Function]}
     >
       <button
-        className="js-issue-comment-delete button-link icon-delete icon-half-transparent"
+        className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
         onClick={[Function]}
-      />
+      >
+        <DeleteIcon />
+      </button>
     </BubblePopupHelper>
   </div>
 </div>