SONAR-17290 Adding tooltip to assigne name in issue page

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
index 656d6f767fd85709a7e27820b961b56ae7f43c18..a73c45bd463aedbdaab71b5b8acfcce31137e709 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
@@ -23,6 +23,7 @@ import Toggler from '../../../components/controls/Toggler';
 import DropdownIcon from '../../../components/icons/DropdownIcon';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Issue } from '../../../types/types';
+import Tooltip from '../../controls/Tooltip';
 import Avatar from '../../ui/Avatar';
 import SetAssigneePopup from '../popups/SetAssigneePopup';
 
@@ -77,21 +78,23 @@ export default class IssueAssign extends React.PureComponent<Props> {
             onRequestClose={this.handleClose}
             open={isOpen}
             overlay={<SetAssigneePopup onSelect={this.props.onAssign} />}>
-            <ButtonLink
-              aria-expanded={isOpen}
-              aria-label={
-                assigneeName
-                  ? translateWithParameters(
-                      'issue.assign.assigned_to_x_click_to_change',
-                      assigneeName
-                    )
-                  : translate('issue.assign.unassigned_click_to_assign')
-              }
-              className="issue-action issue-action-with-options js-issue-assign"
-              onClick={this.toggleAssign}>
-              {this.renderAssignee()}
-              <DropdownIcon className="little-spacer-left" />
-            </ButtonLink>
+            <Tooltip overlay={assigneeName}>
+              <ButtonLink
+                aria-expanded={isOpen}
+                aria-label={
+                  assigneeName
+                    ? translateWithParameters(
+                        'issue.assign.assigned_to_x_click_to_change',
+                        assigneeName
+                      )
+                    : translate('issue.assign.unassigned_click_to_assign')
+                }
+                className="issue-action issue-action-with-options js-issue-assign"
+                onClick={this.toggleAssign}>
+                {this.renderAssignee()}
+                <DropdownIcon className="little-spacer-left" />
+              </ButtonLink>
+            </Tooltip>
           </Toggler>
         </div>
       );

diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap
index 87c990089c26ab33fafdd7299013d5158b05dc1c..98e115170a95c5b1889910de349adb808d446053 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueAssign-test.tsx.snap
@@ -23,31 +23,35 @@ exports[`should open the popup when the button is clicked 2`] = `
       />
     }
   >
-    <ButtonLink
-      aria-expanded={true}
-      aria-label="issue.assign.assigned_to_x_click_to_change.John Doe"
-      className="issue-action issue-action-with-options js-issue-assign"
-      onClick={[Function]}
+    <Tooltip
+      overlay="John Doe"
     >
-      <span
-        className="text-top"
+      <ButtonLink
+        aria-expanded={true}
+        aria-label="issue.assign.assigned_to_x_click_to_change.John Doe"
+        className="issue-action issue-action-with-options js-issue-assign"
+        onClick={[Function]}
       >
-        <withAppStateContext(Avatar)
-          className="little-spacer-right"
-          hash="gravatarhash"
-          name=""
-          size={16}
+        <span
+          className="text-top"
+        >
+          <withAppStateContext(Avatar)
+            className="little-spacer-right"
+            hash="gravatarhash"
+            name=""
+            size={16}
+          />
+        </span>
+        <span
+          className="issue-meta-label"
+        >
+          John Doe
+        </span>
+        <DropdownIcon
+          className="little-spacer-left"
         />
-      </span>
-      <span
-        className="issue-meta-label"
-      >
-        John Doe
-      </span>
-      <DropdownIcon
-        className="little-spacer-left"
-      />
-    </ButtonLink>
+      </ButtonLink>
+    </Tooltip>
   </Toggler>
 </div>
 `;
@@ -66,21 +70,23 @@ exports[`should render a fallback assignee display if assignee info are not avai
       />
     }
   >
-    <ButtonLink
-      aria-expanded={false}
-      aria-label="issue.assign.unassigned_click_to_assign"
-      className="issue-action issue-action-with-options js-issue-assign"
-      onClick={[Function]}
-    >
-      <span
-        className="issue-meta-label"
+    <Tooltip>
+      <ButtonLink
+        aria-expanded={false}
+        aria-label="issue.assign.unassigned_click_to_assign"
+        className="issue-action issue-action-with-options js-issue-assign"
+        onClick={[Function]}
       >
-        unassigned
-      </span>
-      <DropdownIcon
-        className="little-spacer-left"
-      />
-    </ButtonLink>
+        <span
+          className="issue-meta-label"
+        >
+          unassigned
+        </span>
+        <DropdownIcon
+          className="little-spacer-left"
+        />
+      </ButtonLink>
+    </Tooltip>
   </Toggler>
 </div>
 `;
@@ -99,31 +105,35 @@ exports[`should render with the action 1`] = `
       />
     }
   >
-    <ButtonLink
-      aria-expanded={false}
-      aria-label="issue.assign.assigned_to_x_click_to_change.John Doe"
-      className="issue-action issue-action-with-options js-issue-assign"
-      onClick={[Function]}
+    <Tooltip
+      overlay="John Doe"
     >
-      <span
-        className="text-top"
+      <ButtonLink
+        aria-expanded={false}
+        aria-label="issue.assign.assigned_to_x_click_to_change.John Doe"
+        className="issue-action issue-action-with-options js-issue-assign"
+        onClick={[Function]}
       >
-        <withAppStateContext(Avatar)
-          className="little-spacer-right"
-          hash="gravatarhash"
-          name=""
-          size={16}
+        <span
+          className="text-top"
+        >
+          <withAppStateContext(Avatar)
+            className="little-spacer-right"
+            hash="gravatarhash"
+            name=""
+            size={16}
+          />
+        </span>
+        <span
+          className="issue-meta-label"
+        >
+          John Doe
+        </span>
+        <DropdownIcon
+          className="little-spacer-left"
         />
-      </span>
-      <span
-        className="issue-meta-label"
-      >
-        John Doe
-      </span>
-      <DropdownIcon
-        className="little-spacer-left"
-      />
-    </ButtonLink>
+      </ButtonLink>
+    </Tooltip>
   </Toggler>
 </div>
 `;