SONAR-9665 Bring back the issues link from the Most Violated Projects section

2 files changed, 50 insertions, 26 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/rule/rule-issues-view.js b/server/sonar-web/src/main/js/apps/coding-rules/rule/rule-issues-view.js
index e9cdac4acf7..74406c29807 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/rule/rule-issues-view.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/rule/rule-issues-view.js
@@ -17,26 +17,38 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import $ from 'jquery';
 import Marionette from 'backbone.marionette';
 import Template from '../templates/rule/coding-rules-rule-issues.hbs';
-import { getComponentIssuesUrlAsString } from '../../../helpers/urls';
+import { searchIssues } from '../../../api/issues';
+import { getComponentIssuesUrlAsString, getBaseUrl } from '../../../helpers/urls';
 
 export default Marionette.ItemView.extend({
   template: Template,
 
   initialize() {
-    const that = this;
     this.total = null;
     this.projects = [];
-    this.requestIssues().done(() => {
-      that.render();
-    });
+    this.loading = true;
+    this.mounted = true;
+    this.requestIssues().then(
+      () => {
+        if (this.mounted) {
+          this.loading = false;
+          this.render();
+        }
+      },
+      () => {
+        this.loading = false;
+      }
+    );
+  },
+
+  onDestroy() {
+    this.mounted = false;
   },
 
   requestIssues() {
-    const url = window.baseUrl + '/api/issues/search';
-    const options = {
+    const parameters = {
       rules: this.model.id,
       resolved: false,
       ps: 1,
@@ -44,9 +56,9 @@ export default Marionette.ItemView.extend({
     };
     const { organization } = this.options.app;
     if (organization) {
-      Object.assign(options, { organization });
+      Object.assign(parameters, { organization });
     }
-    return $.get(url, options).done(r => {
+    return searchIssues(parameters).then(r => {
       const projectsFacet = r.facets.find(facet => facet.property === 'projectUuids');
       let projects = projectsFacet != null ? projectsFacet.values : [];
       projects = projects.map(project => {
@@ -68,9 +80,15 @@ export default Marionette.ItemView.extend({
   },
 
   serializeData() {
+    const { organization } = this.options.app;
+    const pathname = organization ? `/organizations/${organization}/issues` : '/issues';
+    const query = `?resolved=false&rules=${encodeURIComponent(this.model.id)}`;
+    const totalIssuesUrl = getBaseUrl() + pathname + query;
     return {
       ...Marionette.ItemView.prototype.serializeData.apply(this, arguments),
+      loading: this.loading,
       total: this.total,
+      totalIssuesUrl,
       projects: this.projects
     };
   }
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-issues.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-issues.hbs
index 8aee69dafff..32f822b85ff 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-issues.hbs
+++ b/server/sonar-web/src/main/js/apps/coding-rules/templates/rule/coding-rules-rule-issues.hbs
@@ -1,21 +1,27 @@
 <div class="coding-rule-section-separator"></div>
 
-<h3 class="coding-rules-detail-title">
-  {{t 'coding_rules.issues'}} ({{total}})
-</h3>
+{{#if loading}}
+  <h3 class="coding-rules-detail-title">
+    {{t 'coding_rules.issues'}} <i class="spinner spacer-left"/>
+  </h3>
+{{else}}
+  <h3 class="coding-rules-detail-title">
+    {{t 'coding_rules.issues'}} (<a href="{{totalIssuesUrl}}">{{total}}</a>)
+  </h3>
 
-{{#notEmpty projects}}
-  <table class="coding-rules-detail-list coding-rules-most-violated-projects">
-    <tr>
-      <td class="coding-rules-detail-list-name" colspan="2">{{t 'coding_rules.most_violating_projects'}}</td>
-    </tr>
-    {{#each projects}}
+  {{#notEmpty projects}}
+    <table class="coding-rules-detail-list coding-rules-most-violated-projects">
       <tr>
-        <td class="coding-rules-detail-list-name">{{name}}</td>
-        <td class="coding-rules-detail-list-parameters">
-          <a href="{{issuesUrl}}" target="_blank">{{count}}</a>
-        </td>
+        <td class="coding-rules-detail-list-name" colspan="2">{{t 'coding_rules.most_violating_projects'}}</td>
       </tr>
-    {{/each}}
-  </table>
-{{/notEmpty}}
+      {{#each projects}}
+        <tr>
+          <td class="coding-rules-detail-list-name">{{name}}</td>
+          <td class="coding-rules-detail-list-parameters">
+            <a href="{{issuesUrl}}" target="_blank">{{count}}</a>
+          </td>
+        </tr>
+      {{/each}}
+    </table>
+  {{/notEmpty}}
+{{/if}}