Fix SONAR-10639 (#201)

4 files changed, 146 insertions, 78 deletions

diff --git a/server/sonar-web/src/main/js/components/facet/FacetItem.tsx b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
index 17f9a3c4b16..ccd19527646 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
@@ -19,6 +19,9 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
+import { isOnMac } from './utils';
+import Tooltip from '../controls/Tooltip';
+import { translate } from '../../helpers/l10n';
 
 export interface Props {
   active?: boolean;
@@ -27,8 +30,9 @@ export interface Props {
   halfWidth?: boolean;
   loading?: boolean;
   name: React.ReactNode;
-  onClick: (x: string) => void;
+  onClick: (x: string, multiple?: boolean) => void;
   stat?: React.ReactNode;
+  tooltip?: boolean;
   value: string;
 }
 
@@ -39,10 +43,10 @@ export default class FacetItem extends React.PureComponent<Props> {
     loading: false
   };
 
-  handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
+  handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     event.currentTarget.blur();
-    this.props.onClick(this.props.value);
+    this.props.onClick(this.props.value, event.ctrlKey || event.metaKey);
   };
 
   render() {
@@ -51,20 +55,37 @@ export default class FacetItem extends React.PureComponent<Props> {
       'search-navigator-facet-half': this.props.halfWidth
     });
 
-    return this.props.disabled ? (
-      <span className={className} data-facet={this.props.value}>
-        <span className="facet-name">{this.props.name}</span>
-        {this.props.stat != null && (
-          <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
-        )}
-      </span>
-    ) : (
-      <a className={className} data-facet={this.props.value} href="#" onClick={this.handleClick}>
-        <span className="facet-name">{this.props.name}</span>
-        {this.props.stat != null && (
-          <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
+    const overlay =
+      this.props.tooltip && !this.props.disabled
+        ? translate(
+            isOnMac()
+              ? 'shortcuts.section.global.facets.multiselection.mac'
+              : 'shortcuts.section.global.facets.multiselection'
+          )
+        : undefined;
+
+    return (
+      <Tooltip overlay={overlay} placement="right">
+        {this.props.disabled ? (
+          <span className={className} data-facet={this.props.value}>
+            <span className="facet-name">{this.props.name}</span>
+            {this.props.stat != null && (
+              <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
+            )}
+          </span>
+        ) : (
+          <a
+            className={className}
+            data-facet={this.props.value}
+            href="#"
+            onClick={this.handleClick}>
+            <span className="facet-name">{this.props.name}</span>
+            {this.props.stat != null && (
+              <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
+            )}
+          </a>
         )}
-      </a>
+      </Tooltip>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
index 95c822c8eb3..e6633a9ff6d 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
@@ -49,7 +49,7 @@ it('should render half width', () => {
 it('should call onClick', () => {
   const onClick = jest.fn();
   const wrapper = renderFacetItem({ onClick });
-  click(wrapper, { currentTarget: { blur() {}, dataset: { value: 'bar' } } });
+  click(wrapper.find('a'), { currentTarget: { blur() {}, dataset: { value: 'bar' } } });
   expect(onClick).toHaveBeenCalled();
 });
 
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
index 3044d7ddbbd..959d2393107 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
@@ -1,94 +1,118 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should loading stat 1`] = `
-<a
-  className="facet search-navigator-facet"
-  data-facet="bar"
-  href="#"
-  onClick={[Function]}
+<Tooltip
+  placement="right"
 >
-  <span
-    className="facet-name"
+  <a
+    className="facet search-navigator-facet"
+    data-facet="bar"
+    href="#"
+    onClick={[Function]}
   >
-    foo
-  </span>
-</a>
+    <span
+      className="facet-name"
+    >
+      foo
+    </span>
+  </a>
+</Tooltip>
 `;
 
 exports[`should render active 1`] = `
-<a
-  className="facet search-navigator-facet active"
-  data-facet="bar"
-  href="#"
-  onClick={[Function]}
+<Tooltip
+  placement="right"
 >
-  <span
-    className="facet-name"
+  <a
+    className="facet search-navigator-facet active"
+    data-facet="bar"
+    href="#"
+    onClick={[Function]}
   >
-    foo
-  </span>
-</a>
+    <span
+      className="facet-name"
+    >
+      foo
+    </span>
+  </a>
+</Tooltip>
 `;
 
 exports[`should render disabled 1`] = `
-<span
-  className="facet search-navigator-facet"
-  data-facet="bar"
+<Tooltip
+  placement="right"
 >
   <span
-    className="facet-name"
+    className="facet search-navigator-facet"
+    data-facet="bar"
   >
-    foo
+    <span
+      className="facet-name"
+    >
+      foo
+    </span>
   </span>
-</span>
+</Tooltip>
 `;
 
 exports[`should render half width 1`] = `
-<a
-  className="facet search-navigator-facet search-navigator-facet-half"
-  data-facet="bar"
-  href="#"
-  onClick={[Function]}
+<Tooltip
+  placement="right"
 >
-  <span
-    className="facet-name"
+  <a
+    className="facet search-navigator-facet search-navigator-facet-half"
+    data-facet="bar"
+    href="#"
+    onClick={[Function]}
   >
-    foo
-  </span>
-</a>
+    <span
+      className="facet-name"
+    >
+      foo
+    </span>
+  </a>
+</Tooltip>
 `;
 
 exports[`should render inactive 1`] = `
-<a
-  className="facet search-navigator-facet"
-  data-facet="bar"
-  href="#"
-  onClick={[Function]}
+<Tooltip
+  placement="right"
 >
-  <span
-    className="facet-name"
+  <a
+    className="facet search-navigator-facet"
+    data-facet="bar"
+    href="#"
+    onClick={[Function]}
   >
-    foo
-  </span>
-</a>
+    <span
+      className="facet-name"
+    >
+      foo
+    </span>
+  </a>
+</Tooltip>
 `;
 
 exports[`should render stat 1`] = `
-<a
-  className="facet search-navigator-facet"
-  data-facet="bar"
-  href="#"
-  onClick={[Function]}
+<Tooltip
+  placement="right"
 >
-  <span
-    className="facet-name"
-  >
-    foo
-  </span>
-  <span
-    className="facet-stat"
+  <a
+    className="facet search-navigator-facet"
+    data-facet="bar"
+    href="#"
+    onClick={[Function]}
   >
-    13
-  </span>
-</a>
+    <span
+      className="facet-name"
+    >
+      foo
+    </span>
+    <span
+      className="facet-stat"
+    >
+      13
+    </span>
+  </a>
+</Tooltip>
 `;
diff --git a/server/sonar-web/src/main/js/components/facet/utils.ts b/server/sonar-web/src/main/js/components/facet/utils.ts
new file mode 100644
index 00000000000..8c55de0abdd
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/facet/utils.ts
@@ -0,0 +1,23 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 SonarSource SA
+ * mailto:info 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.
+ */
+
+export function isOnMac() {
+  return navigator.userAgent.indexOf('Mac OS X') !== -1;
+}