SONAR-10611 use new help tooltips across the app (#203)

2 files changed, 10 insertions, 17 deletions

diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
index cc1ae72047a..f4544cf5028 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
@@ -19,8 +19,7 @@
  */
 import * as React from 'react';
 import OpenCloseIcon from '../icons-components/OpenCloseIcon';
-import HelpIcon from '../icons-components/HelpIcon';
-import Tooltip from '../controls/Tooltip';
+import HelpTooltip from '../controls/HelpTooltip';
 import { Button } from '../ui/buttons';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 
@@ -47,13 +46,7 @@ export default class FacetHeader extends React.PureComponent<Props> {
     if (!this.props.helper) {
       return null;
     }
-    return (
-      <Tooltip overlay={this.props.helper}>
-        <span>
-          <HelpIcon className="spacer-left text-info" />
-        </span>
-      </Tooltip>
-    );
+    return <HelpTooltip className="spacer-left" overlay={this.props.helper} />;
   }
 
   renderValueIndicator() {
@@ -77,7 +70,7 @@ export default class FacetHeader extends React.PureComponent<Props> {
     return (
       <div className="search-navigator-facet-header-wrapper">
         {this.props.onClick ? (
-          <span className="search-navigator-facet-header">
+          <span className="search-navigator-facet-header display-flex-center">
             <a href="#" onClick={this.handleClick}>
               <OpenCloseIcon className="little-spacer-right" open={this.props.open} />
               {this.props.name}
@@ -85,7 +78,7 @@ export default class FacetHeader extends React.PureComponent<Props> {
             {this.renderHelper()}
           </span>
         ) : (
-          <span className="search-navigator-facet-header">
+          <span className="search-navigator-facet-header display-flex-center">
             {this.props.name}
             {this.renderHelper()}
           </span>
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
index e68fe594ca1..4dba5b7b374 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should clear 1`] = `
   className="search-navigator-facet-header-wrapper"
 >
   <span
-    className="search-navigator-facet-header"
+    className="search-navigator-facet-header display-flex-center"
   >
     <a
       href="#"
@@ -42,7 +42,7 @@ exports[`should render closed facet with value 1`] = `
   className="search-navigator-facet-header-wrapper"
 >
   <span
-    className="search-navigator-facet-header"
+    className="search-navigator-facet-header display-flex-center"
   >
     <a
       href="#"
@@ -73,7 +73,7 @@ exports[`should render closed facet without value 1`] = `
   className="search-navigator-facet-header-wrapper"
 >
   <span
-    className="search-navigator-facet-header"
+    className="search-navigator-facet-header display-flex-center"
   >
     <a
       href="#"
@@ -97,7 +97,7 @@ exports[`should render open facet with value 1`] = `
   className="search-navigator-facet-header-wrapper"
 >
   <span
-    className="search-navigator-facet-header"
+    className="search-navigator-facet-header display-flex-center"
   >
     <a
       href="#"
@@ -121,7 +121,7 @@ exports[`should render open facet without value 1`] = `
   className="search-navigator-facet-header-wrapper"
 >
   <span
-    className="search-navigator-facet-header"
+    className="search-navigator-facet-header display-flex-center"
   >
     <a
       href="#"
@@ -145,7 +145,7 @@ exports[`should render without link 1`] = `
   className="search-navigator-facet-header-wrapper"
 >
   <span
-    className="search-navigator-facet-header"
+    className="search-navigator-facet-header display-flex-center"
   >
     foo
   </span>