In facet header now only the text is clickable

5 files changed, 145 insertions, 108 deletions

diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.js b/server/sonar-web/src/main/js/components/facet/FacetHeader.js
index 49682d4cbf2..46cdf6e43dd 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.js
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.js
@@ -114,12 +114,14 @@ export default class FacetHeader extends React.PureComponent {
           </button>}
 
         {this.props.onClick
-          ? <a className="search-navigator-facet-header" href="#" onClick={this.handleClick}>
-              {this.renderCheckbox()}
-              {this.props.name}
+          ? <span className="search-navigator-facet-header">
+              <a href="#" onClick={this.handleClick}>
+                {this.renderCheckbox()}
+                {this.props.name}
+              </a>
               {this.renderHelper()}
               {this.renderValueIndicator()}
-            </a>
+            </span>
           : <span className="search-navigator-facet-header">
               {this.props.name}
               {this.renderHelper()}
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap
index 08c98b447f8..7def87dae3c 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap
@@ -8,171 +8,186 @@ exports[`should clear 1`] = `
   >
     clear
   </button>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
     <span
       className="spacer-left badge badge-secondary is-rounded"
     >
       3
     </span>
-  </a>
+  </span>
 </div>
 `;
 
 exports[`should render closed facet with value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
     <span
       className="spacer-left badge badge-secondary is-rounded"
     >
       1
     </span>
-  </a>
+  </span>
 </div>
 `;
 
 exports[`should render closed facet without value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
-  </a>
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
+  </span>
 </div>
 `;
 
 exports[`should render open facet with value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
-  </a>
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
+  </span>
 </div>
 `;
 
 exports[`should render open facet without value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
-  </a>
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
+  </span>
 </div>
 `;
 
diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less
index 17075deae12..68332a9ca33 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -357,10 +357,18 @@
 .search-navigator-facet-header {
   display: block;
   padding: 8px 0;
-  border-bottom: none;
   color: @baseFontColor;
   font-weight: 600;
 
+  & > a {
+    border-bottom: none;
+    color: @baseFontColor;
+
+    &:hover {
+      color: @blue;
+    }
+  }
+
   & > .note {
     font-weight: 400;
   }
diff --git a/tests/src/test/java/org/sonarqube/pageobjects/measures/MeasuresPage.java b/tests/src/test/java/org/sonarqube/pageobjects/measures/MeasuresPage.java
index bd239267c44..414b7f8c61b 100644
--- a/tests/src/test/java/org/sonarqube/pageobjects/measures/MeasuresPage.java
+++ b/tests/src/test/java/org/sonarqube/pageobjects/measures/MeasuresPage.java
@@ -25,6 +25,7 @@ import org.openqa.selenium.Keys;
 import static com.codeborne.selenide.Condition.exist;
 import static com.codeborne.selenide.Condition.text;
 import static com.codeborne.selenide.Selenide.$;
+import static com.codeborne.selenide.Selenide.$$;
 
 public class MeasuresPage {
   public MeasuresPage() {
@@ -75,9 +76,17 @@ public class MeasuresPage {
     return this;
   }
 
+  public MeasuresPage openFacet(String facet) {
+    SelenideElement facetBox = $$(".search-navigator-facet-box").find(text(facet));
+    if(!facetBox.find("search-navigator-facet-list").isDisplayed()) {
+      facetBox.$(".search-navigator-facet-header a").should(exist).click();
+    }
+    return this;
+  }
+
   public MeasureContent openMeasureContent(String measure) {
     SelenideElement sidebar = this.getSideBar();
-    SelenideElement facetItem = sidebar.$("#measure-" + measure + "-name").should(exist);
+    SelenideElement facetItem = sidebar.$("#measure-" + measure + "-name");
     facetItem.click();
     MeasureContent content = new MeasureContent($("#component-measures .measure-details-content").should(exist));
     content.shouldHaveTitle(facetItem.getText());
diff --git a/tests/src/test/java/org/sonarqube/tests/measure/ProjectMeasuresPageTest.java b/tests/src/test/java/org/sonarqube/tests/measure/ProjectMeasuresPageTest.java
index c92cb765471..158bada7d37 100644
--- a/tests/src/test/java/org/sonarqube/tests/measure/ProjectMeasuresPageTest.java
+++ b/tests/src/test/java/org/sonarqube/tests/measure/ProjectMeasuresPageTest.java
@@ -73,6 +73,7 @@ public class ProjectMeasuresPageTest {
     MeasuresPage page = tester.openBrowser().openProjectMeasures(projectKey);
     page
       .displayBubbleChart("Risk")
+      .openFacet("Maintainability")
       .measureHasValue("code_smells", 0)
       .measureHasLeak("new_code_smells", 0);
     page
@@ -84,7 +85,8 @@ public class ProjectMeasuresPageTest {
   @Test
   public void should_drilldown_on_list_view() {
     MeasuresPage page = tester.openBrowser().openProjectMeasures(projectKey);
-    MeasureContent content = page.openMeasureContent("ncloc");
+    MeasureContent content = page
+      .openFacet("Size").openMeasureContent("ncloc");
     content
       .drillDown("src/main/xoo/sample/Sample.xoo")
       .shouldHaveHeaderValue("13")
@@ -99,7 +101,8 @@ public class ProjectMeasuresPageTest {
   @Test
   public void should_drilldown_on_tree_view() {
     MeasuresPage page = tester.openBrowser().openProjectMeasures(projectKey);
-    MeasureContent content = page.openMeasureContent("ncloc");
+    MeasureContent content = page
+      .openFacet("Size").openMeasureContent("ncloc");
     page.switchView("tree");
     content
       .shouldHaveFile("src/main/xoo/sample");