From: Grégoire Aubert <gregoire.aubert@sonarsource.com>
Date: Fri, 8 Jun 2018 06:39:30 +0000 (+0200)
Subject: SONAR-10287 Use browser tooltips for descriptive hints
X-Git-Tag: 7.5~1049
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=f3425772870c017497d30bcc5115b8b3d62f9fb2;p=sonarqube.git

SONAR-10287 Use browser tooltips for descriptive hints
---

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
index 6a390a20932..8cba10a5dbc 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
@@ -35,7 +35,6 @@ import { translate } from '../../../../helpers/l10n';
 import PlusCircleIcon from '../../../../components/icons-components/PlusCircleIcon';
 import HelpTooltip from '../../../../components/controls/HelpTooltip';
 import Toggler from '../../../../components/controls/Toggler';
-import Tooltip from '../../../../components/controls/Tooltip';
 import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
 import { isSonarCloud } from '../../../../helpers/system';
 
@@ -184,9 +183,9 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
               href="#"
               onClick={this.handleClick}>
               <BranchIcon branchLike={currentBranchLike} className="little-spacer-right" />
-              <Tooltip mouseEnterDelay={1} overlay={displayName}>
-                <span className="text-limited text-top">{displayName}</span>
-              </Tooltip>
+              <span className="text-limited text-top" title={displayName}>
+                {displayName}
+              </span>
               <DropdownIcon className="little-spacer-left" />
             </a>
           </Toggler>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
index 8788fe657c1..204014a567e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
@@ -32,7 +32,6 @@ import {
 } from '../../../../helpers/branches';
 import { translate } from '../../../../helpers/l10n';
 import { getBranchLikeUrl } from '../../../../helpers/urls';
-import Tooltip from '../../../../components/controls/Tooltip';
 
 export interface Props {
   branchLike: BranchLike;
@@ -58,18 +57,18 @@ export default function ComponentNavBranchesMenuItem({ branchLike, ...props }: P
           active: props.selected
         })}
         to={getBranchLikeUrl(props.component.key, branchLike)}>
-        <Tooltip mouseEnterDelay={0.5} overlay={displayName} placement="left">
-          <div className="navbar-context-meta-branch-menu-item-name text-ellipsis">
-            <BranchIcon
-              branchLike={branchLike}
-              className={classNames('little-spacer-right', { 'big-spacer-left': shouldBeIndented })}
-            />
-            {displayName}
-            {isMainBranch(branchLike) && (
-              <div className="outline-badge spacer-left">{translate('branches.main_branch')}</div>
-            )}
-          </div>
-        </Tooltip>
+        <div
+          className="navbar-context-meta-branch-menu-item-name text-ellipsis"
+          title={displayName}>
+          <BranchIcon
+            branchLike={branchLike}
+            className={classNames('little-spacer-right', { 'big-spacer-left': shouldBeIndented })}
+          />
+          {displayName}
+          {isMainBranch(branchLike) && (
+            <div className="outline-badge spacer-left">{translate('branches.main_branch')}</div>
+          )}
+        </div>
         <div className="big-spacer-left note">
           <BranchStatus branchLike={branchLike} concise={true} />
         </div>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
index 637e7d69a8e..72ce3a7917c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
@@ -50,16 +50,12 @@ exports[`renders main branch 1`] = `
           }
           className="little-spacer-right"
         />
-        <Tooltip
-          mouseEnterDelay={1}
-          overlay="master"
+        <span
+          className="text-limited text-top"
+          title="master"
         >
-          <span
-            className="text-limited text-top"
-          >
-            master
-          </span>
-        </Tooltip>
+          master
+        </span>
         <DropdownIcon
           className="little-spacer-left"
         />
@@ -140,16 +136,12 @@ exports[`renders pull request 1`] = `
           }
           className="little-spacer-right"
         />
-        <Tooltip
-          mouseEnterDelay={1}
-          overlay="1234 – Feature PR"
+        <span
+          className="text-limited text-top"
+          title="1234 – Feature PR"
         >
-          <span
-            className="text-limited text-top"
-          >
-            1234 – Feature PR
-          </span>
-        </Tooltip>
+          1234 – Feature PR
+        </span>
         <DropdownIcon
           className="little-spacer-left"
         />
@@ -251,16 +243,12 @@ exports[`renders short-living branch 1`] = `
           }
           className="little-spacer-right"
         />
-        <Tooltip
-          mouseEnterDelay={1}
-          overlay="foo"
+        <span
+          className="text-limited text-top"
+          title="foo"
         >
-          <span
-            className="text-limited text-top"
-          >
-            foo
-          </span>
-        </Tooltip>
+          foo
+        </span>
         <DropdownIcon
           className="little-spacer-left"
         />
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
index 463a43a173f..b4c9f37a5d3 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
@@ -18,31 +18,26 @@ exports[`renders main branch 1`] = `
       }
     }
   >
-    <Tooltip
-      mouseEnterDelay={0.5}
-      overlay="master"
-      placement="left"
+    <div
+      className="navbar-context-meta-branch-menu-item-name text-ellipsis"
+      title="master"
     >
+      <BranchIcon
+        branchLike={
+          Object {
+            "isMain": true,
+            "name": "master",
+          }
+        }
+        className="little-spacer-right"
+      />
+      master
       <div
-        className="navbar-context-meta-branch-menu-item-name text-ellipsis"
+        className="outline-badge spacer-left"
       >
-        <BranchIcon
-          branchLike={
-            Object {
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          className="little-spacer-right"
-        />
-        master
-        <div
-          className="outline-badge spacer-left"
-        >
-          branches.main_branch
-        </div>
+        branches.main_branch
       </div>
-    </Tooltip>
+    </div>
     <div
       className="big-spacer-left note"
     >
@@ -80,34 +75,29 @@ exports[`renders short-living branch 1`] = `
       }
     }
   >
-    <Tooltip
-      mouseEnterDelay={0.5}
-      overlay="foo"
-      placement="left"
+    <div
+      className="navbar-context-meta-branch-menu-item-name text-ellipsis"
+      title="foo"
     >
-      <div
-        className="navbar-context-meta-branch-menu-item-name text-ellipsis"
-      >
-        <BranchIcon
-          branchLike={
-            Object {
-              "isMain": false,
-              "mergeBranch": "master",
-              "name": "foo",
-              "status": Object {
-                "bugs": 1,
-                "codeSmells": 2,
-                "qualityGateStatus": "ERROR",
-                "vulnerabilities": 3,
-              },
-              "type": "SHORT",
-            }
+      <BranchIcon
+        branchLike={
+          Object {
+            "isMain": false,
+            "mergeBranch": "master",
+            "name": "foo",
+            "status": Object {
+              "bugs": 1,
+              "codeSmells": 2,
+              "qualityGateStatus": "ERROR",
+              "vulnerabilities": 3,
+            },
+            "type": "SHORT",
           }
-          className="little-spacer-right big-spacer-left"
-        />
-        foo
-      </div>
-    </Tooltip>
+        }
+        className="little-spacer-right big-spacer-left"
+      />
+      foo
+    </div>
     <div
       className="big-spacer-left note"
     >
@@ -153,35 +143,30 @@ exports[`renders short-living orhpan branch 1`] = `
       }
     }
   >
-    <Tooltip
-      mouseEnterDelay={0.5}
-      overlay="foo"
-      placement="left"
+    <div
+      className="navbar-context-meta-branch-menu-item-name text-ellipsis"
+      title="foo"
     >
-      <div
-        className="navbar-context-meta-branch-menu-item-name text-ellipsis"
-      >
-        <BranchIcon
-          branchLike={
-            Object {
-              "isMain": false,
-              "isOrphan": true,
-              "mergeBranch": "master",
-              "name": "foo",
-              "status": Object {
-                "bugs": 1,
-                "codeSmells": 2,
-                "qualityGateStatus": "ERROR",
-                "vulnerabilities": 3,
-              },
-              "type": "SHORT",
-            }
+      <BranchIcon
+        branchLike={
+          Object {
+            "isMain": false,
+            "isOrphan": true,
+            "mergeBranch": "master",
+            "name": "foo",
+            "status": Object {
+              "bugs": 1,
+              "codeSmells": 2,
+              "qualityGateStatus": "ERROR",
+              "vulnerabilities": 3,
+            },
+            "type": "SHORT",
           }
-          className="little-spacer-right"
-        />
-        foo
-      </div>
-    </Tooltip>
+        }
+        className="little-spacer-right"
+      />
+      foo
+    </div>
     <div
       className="big-spacer-left note"
     >
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.tsx
index 3a4c6d80fe1..c3afacc324a 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.tsx
@@ -32,7 +32,6 @@ import {
 import ShortLivingBranchIcon from '../../../components/icons-components/ShortLivingBranchIcon';
 import LongLivingBranchIcon from '../../../components/icons-components/LongLivingBranchIcon';
 import PullRequestIcon from '../../../components/icons-components/PullRequestIcon';
-import Tooltip from '../../../components/controls/Tooltip';
 
 interface Props {
   task: Task;
@@ -76,12 +75,10 @@ export default function TaskComponent({ task }: Props) {
           )}
 
           {task.pullRequest && (
-            <Tooltip overlay={task.pullRequestTitle}>
-              <span className="text-limited text-text-top">
-                <span style={{ marginLeft: 5, marginRight: 5 }}>/</span>
-                {task.pullRequest}
-              </span>
-            </Tooltip>
+            <span className="text-limited text-text-top" title={task.pullRequestTitle}>
+              <span style={{ marginLeft: 5, marginRight: 5 }}>/</span>
+              {task.pullRequest}
+            </span>
           )}
         </Link>
       )}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/TaskComponent-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/TaskComponent-test.tsx.snap
index d1f54e342f5..88328a93b61 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/TaskComponent-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/TaskComponent-test.tsx.snap
@@ -163,23 +163,21 @@ exports[`renders correctly for branches and pullrequest 3`] = `
     }
   >
     foo
-    <Tooltip>
+    <span
+      className="text-limited text-text-top"
+    >
       <span
-        className="text-limited text-text-top"
-      >
-        <span
-          style={
-            Object {
-              "marginLeft": 5,
-              "marginRight": 5,
-            }
+        style={
+          Object {
+            "marginLeft": 5,
+            "marginRight": 5,
           }
-        >
-          /
-        </span>
-        pr-89
+        }
+      >
+        /
       </span>
-    </Tooltip>
+      pr-89
+    </span>
   </Link>
   <TaskType
     type="REPORT"
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
index 9e3f2a258ec..3d265133d95 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
@@ -21,7 +21,6 @@ import * as React from 'react';
 import Modal from '../../../components/controls/Modal';
 import Select from '../../../components/controls/Select';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
-import Tooltip from '../../../components/controls/Tooltip';
 import { activateRule, Profile as BaseProfile } from '../../../api/quality-profiles';
 import { Rule, RuleDetails, RuleActivation } from '../../../app/types';
 import { SEVERITIES } from '../../../helpers/constants';
@@ -207,11 +206,7 @@ export default class ActivationFormModal extends React.PureComponent<Props, Stat
             ) : (
               params.map(param => (
                 <div className="modal-field" key={param.key}>
-                  <label>
-                    <Tooltip overlay={param.key}>
-                      <span>{param.key}</span>
-                    </Tooltip>
-                  </label>
+                  <label title={param.key}>{param.key}</label>
                   {param.type === 'TEXT' ? (
                     <textarea
                       className="width100"
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index c74e8ad3df6..110956c04fb 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -240,6 +240,7 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
             {!ruleDetails.isExternal && (
               <Link
                 className="coding-rules-detail-permalink link-no-underline spacer-left text-middle"
+                title={translate('permalink')}
                 to={getRuleUrl(ruleDetails.key, this.props.organization)}>
                 <LinkIcon />
               </Link>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SimilarRulesFilter.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SimilarRulesFilter.tsx
index 34c9041d05a..6d98a0959d4 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/SimilarRulesFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SimilarRulesFilter.tsx
@@ -110,7 +110,10 @@ export default class SimilarRulesFilter extends React.PureComponent<Props> {
             </ul>
           </>
         }>
-        <a className="js-rule-filter link-no-underline spacer-left dropdown-toggle" href="#">
+        <a
+          className="js-rule-filter link-no-underline spacer-left dropdown-toggle"
+          href="#"
+          title={translate('coding_rules.filter_similar_rules')}>
           <FilterIcon className="icon-half-transparent" />
           <DropdownIcon className="icon-half-transparent" />
         </a>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap
index 0e19fbe1472..c0eb1b999fb 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap
@@ -19,6 +19,7 @@ exports[`should display right meta info 1`] = `
         className="coding-rules-detail-permalink link-no-underline spacer-left text-middle"
         onlyActiveOnIndex={false}
         style={Object {}}
+        title="permalink"
         to={
           Object {
             "pathname": "/coding_rules",
diff --git a/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js b/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js
index 723551831bb..c0877081176 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js
@@ -22,7 +22,6 @@ import React from 'react';
 import FacetBox from '../../../components/facet/FacetBox';
 import FacetItem from '../../../components/facet/FacetItem';
 import FacetItemsList from '../../../components/facet/FacetItemsList';
-import Tooltip from '../../../components/controls/Tooltip';
 import { translate } from '../../../helpers/l10n';
 
 /*:: type Props = {|
@@ -41,9 +40,9 @@ export default function ProjectOverviewFacet({ value, selected, onChange } /*: P
           disabled={false}
           key={value}
           name={
-            <Tooltip overlay={facetName} mouseEnterDelay={0.5}>
-              <strong id={`measure-overview-${value}-name`}>{facetName}</strong>
-            </Tooltip>
+            <strong id={`measure-overview-${value}-name`} title={facetName}>
+              {facetName}
+            </strong>
           }
           onClick={onChange}
           value={value}
diff --git a/server/sonar-web/src/main/js/apps/overview/events/Event.tsx b/server/sonar-web/src/main/js/apps/overview/events/Event.tsx
index 96f7699b1d9..f74c0d7ad19 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/Event.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/events/Event.tsx
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Tooltip from '../../../components/controls/Tooltip';
 import { Event as IEvent } from '../../../api/projectActivity';
 import { translate } from '../../../helpers/l10n';
 
@@ -29,9 +28,11 @@ interface Props {
 export default function Event({ event }: Props) {
   if (event.category === 'VERSION') {
     return (
-      <Tooltip mouseEnterDelay={0.5} overlay={`${translate('version')} ${event.name}`}>
-        <span className="overview-analysis-event badge">{event.name}</span>
-      </Tooltip>
+      <span
+        className="overview-analysis-event badge"
+        title={`${translate('version')} ${event.name}`}>
+        {event.name}
+      </span>
     );
   }
 
@@ -39,9 +40,7 @@ export default function Event({ event }: Props) {
     <div className="overview-analysis-event">
       <span className="note">{translate('event.category', event.category)}:</span>{' '}
       {event.description ? (
-        <Tooltip mouseEnterDelay={0.5} overlay={event.description}>
-          <strong>{event.name}</strong>
-        </Tooltip>
+        <strong title={event.description}>{event.name}</strong>
       ) : (
         <strong>{event.name}</strong>
       )}
diff --git a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.tsx.snap
index 85ed92a24ce..5af2a4e8b9b 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.tsx.snap
@@ -1,16 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render a version correctly 1`] = `
-<Tooltip
-  mouseEnterDelay={0.5}
-  overlay="version 6.5-SNAPSHOT"
+<span
+  className="overview-analysis-event badge"
+  title="version 6.5-SNAPSHOT"
 >
-  <span
-    className="overview-analysis-event badge"
-  >
-    6.5-SNAPSHOT
-  </span>
-</Tooltip>
+  6.5-SNAPSHOT
+</span>
 `;
 
 exports[`should render an event correctly 1`] = `
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js b/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js
index afaa7609b3c..f28daa51ef4 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js
@@ -19,7 +19,6 @@
  */
 // @flow
 import React from 'react';
-import Tooltip from '../../../components/controls/Tooltip';
 import ProjectEventIcon from '../../../components/icons-components/ProjectEventIcon';
 import { translate } from '../../../helpers/l10n';
 /*:: import type { Event as EventType } from '../types'; */
@@ -34,12 +33,10 @@ export default function EventInner(props /*: { event: EventType } */) {
           className={'project-activity-event-icon margin-align ' + event.category}
         />
       </div>
-      <Tooltip mouseEnterDelay={0.5} overlay={event.name}>
-        <span className="project-activity-event-inner-text">
-          <span className="note">{translate('event.category', event.category)}:</span>{' '}
-          <strong title={event.description}>{event.name}</strong>
-        </span>
-      </Tooltip>
+      <span className="project-activity-event-inner-text">
+        <span className="note">{translate('event.category', event.category)}:</span>{' '}
+        <strong title={event.description}>{event.name}</strong>
+      </span>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/measure/Measure.tsx b/server/sonar-web/src/main/js/components/measure/Measure.tsx
index 8cccb3cd5d6..4078388c3ed 100644
--- a/server/sonar-web/src/main/js/components/measure/Measure.tsx
+++ b/server/sonar-web/src/main/js/components/measure/Measure.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import { getRatingTooltip } from './utils';
 import Rating from '../ui/Rating';
 import Level from '../ui/Level';
-import Tooltips from '../controls/Tooltip';
+import Tooltip from '../controls/Tooltip';
 import { formatMeasure } from '../../helpers/measures';
 
 interface Props {
@@ -58,9 +58,9 @@ export default function Measure({
   const rating = <Rating small={small} value={value} />;
   if (tooltip) {
     return (
-      <Tooltips overlay={tooltip}>
+      <Tooltip overlay={tooltip}>
         <span className={className}>{rating}</span>
-      </Tooltips>
+      </Tooltip>
     );
   }
   return rating;