SONAR-9483 Add link to the rules and highlight compared quality profiles

4 files changed, 63 insertions, 6 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/facets/quality-profile-facet.js b/server/sonar-web/src/main/js/apps/coding-rules/facets/quality-profile-facet.js
index 5b1ce432a7a..09a232e530e 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/facets/quality-profile-facet.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/facets/quality-profile-facet.js
@@ -33,6 +33,29 @@ export default BaseFacet.extend({
     };
   },
 
+  onRender() {
+    this.$el.toggleClass('search-navigator-facet-box-collapsed', !this.model.get('enabled'));
+    this.$el.attr('data-property', this.model.get('property'));
+    const that = this;
+    const property = this.model.get('property');
+    const value = this.options.app.state.get('query')[property];
+    if (typeof value === 'string') {
+      value.split(',').forEach(s => {
+        const facet = that.$('.js-facet').filter(`[data-value="${s}"]`);
+        if (facet.length > 0) {
+          facet.addClass('active');
+        }
+      });
+    }
+    const compareToProfile = this.options.app.state.get('query').compareToProfile;
+    if (typeof compareToProfile === 'string') {
+      const facet = that.$('.js-facet').filter(`[data-value="${compareToProfile}"]`);
+      if (facet.length > 0) {
+        facet.addClass('active compare');
+      }
+    }
+  },
+
   getValues() {
     const that = this;
     const languagesQuery = this.options.app.state.get('query').languages;
@@ -64,12 +87,23 @@ export default BaseFacet.extend({
 
   setActivation(e) {
     e.stopPropagation();
-    this.options.app.state.updateFilter({ activation: 'true' });
+    const compareProfile = this.options.app.state.get('query').compareToProfile;
+    const profile = $(e.currentTarget).parents('.js-facet').data('value');
+    if (compareProfile == null || compareProfile !== profile) {
+      this.options.app.state.updateFilter({ activation: 'true' });
+    }
   },
 
   unsetActivation(e) {
     e.stopPropagation();
-    this.options.app.state.updateFilter({ activation: 'false', active_severities: null });
+    const compareProfile = this.options.app.state.get('query').compareToProfile;
+    const profile = $(e.currentTarget).parents('.js-facet').data('value');
+    if (compareProfile == null || compareProfile !== profile) {
+      this.options.app.state.updateFilter({
+        activation: 'false',
+        active_severities: null
+      });
+    }
   },
 
   getToggled() {
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.js
index 97427ee1d34..edf0ab821b4 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.js
@@ -21,6 +21,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import Tooltip from '../../../components/controls/Tooltip';
+import { getRulesUrl } from '../../../helpers/urls';
 import { translate } from '../../../helpers/l10n';
 
 type Props = {
@@ -31,6 +32,11 @@ type Props = {
 };
 
 export default function ProfileRulesSonarWayComparison(props: Props) {
+  const url = getRulesUrl(
+    { qprofile: props.profile, activation: false, compareToProfile: props.sonarway },
+    props.organization
+  );
+
   return (
     <div className="quality-profile-rules-sonarway-missing clearfix">
       <span className="pull-left">
@@ -39,7 +45,7 @@ export default function ProfileRulesSonarWayComparison(props: Props) {
           <i className="icon-help spacer-left" />
         </Tooltip>
       </span>
-      <Link className="pull-right">
+      <Link className="pull-right" to={url}>
         {props.sonarWayMissingRules}
       </Link>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesSonarWayComparison-test.js.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesSonarWayComparison-test.js.snap
index 6864b28e71b..9d9c67072bf 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesSonarWayComparison-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileRulesSonarWayComparison-test.js.snap
@@ -21,6 +21,7 @@ exports[`should render correctly 1`] = `
     className="pull-right"
     onlyActiveOnIndex={false}
     style={Object {}}
+    to="/organizations/foo/rules#qprofile=bar|activation=false|compareToProfile=baz"
   >
     158
   </Link>
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 c108d700e3c..e281de0a6c6 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -200,12 +200,12 @@
 
   .facet-toggle-active.facet-toggle-green {
     background-color: @green;
-    color: #fff;
+    color: @white;
   }
 
   .facet-toggle-active.facet-toggle-red {
     background-color: @red;
-    color: #fff;
+    color: @white;
   }
 }
 
@@ -249,6 +249,22 @@
   }
 }
 
+.search-navigator-facet.compare {
+  .facet-toggle {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &.facet-toggle-green {
+      background-color: @green;
+      color: @white;
+    }
+    &.facet-toggle-red {
+      background-color: transparent;
+      color: @secondFontColor;
+    }
+  }
+}
+
 .search-navigator-facet-indent {
   width: ~"calc(100% - 30px)";
   margin-left: 30px;
@@ -531,7 +547,7 @@
   border: 1px solid #e8e8e8;
   box-sizing: border-box;
   line-height: 1.5;
-  background-color: #fff;
+  background-color: @white;
   box-shadow: @defaultShadow;
 }