From 422a756b9519773b3ac8a9b30e4253772581dae1 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Fri, 14 Dec 2018 15:08:44 +0100
Subject: [PATCH] SONAR-11578 fix wrong count of hidden files in the measures
 page (#1078)

---
 .../drilldown/FilesView.tsx                   | 42 ++++++++++---------
 .../__snapshots__/FilesView-test.tsx.snap     | 16 ++++---
 .../resources/org/sonar/l10n/core.properties  |  1 +
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx
index 867ffbe17aa..3a2f52bd98f 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx
@@ -101,8 +101,9 @@ export default class FilesView extends React.PureComponent<Props, State> {
     ['up', 'down', 'right'].forEach(action => key.unbind(action, keyScope));
   }
 
-  getVisibleComponents = (components: T.ComponentMeasureEnhanced[], showBestMeasures: boolean) => {
-    if (showBestMeasures) {
+  getVisibleComponents = () => {
+    const { components } = this.props;
+    if (this.state.showBestMeasures) {
       return components;
     }
     const filtered = components.filter(component => !this.hasBestValue(component));
@@ -132,8 +133,8 @@ export default class FilesView extends React.PureComponent<Props, State> {
   };
 
   selectPrevious = () => {
-    const { components, selectedIdx } = this.props;
-    const visibleComponents = this.getVisibleComponents(components, this.state.showBestMeasures);
+    const { selectedIdx } = this.props;
+    const visibleComponents = this.getVisibleComponents();
     if (selectedIdx !== undefined && selectedIdx > 0) {
       this.props.handleSelect(visibleComponents[selectedIdx - 1].key);
     } else {
@@ -142,8 +143,8 @@ export default class FilesView extends React.PureComponent<Props, State> {
   };
 
   selectNext = () => {
-    const { components, selectedIdx } = this.props;
-    const visibleComponents = this.getVisibleComponents(components, this.state.showBestMeasures);
+    const { selectedIdx } = this.props;
+    const visibleComponents = this.getVisibleComponents();
     if (selectedIdx !== undefined && selectedIdx < visibleComponents.length - 1) {
       this.props.handleSelect(visibleComponents[selectedIdx + 1].key);
     } else {
@@ -162,7 +163,7 @@ export default class FilesView extends React.PureComponent<Props, State> {
 
   render() {
     const { components } = this.props;
-    const filteredComponents = this.getVisibleComponents(components, this.state.showBestMeasures);
+    const filteredComponents = this.getVisibleComponents();
     const hidingBestMeasures = filteredComponents.length < components.length;
     return (
       <div ref={elem => (this.listContainer = elem)}>
@@ -176,18 +177,21 @@ export default class FilesView extends React.PureComponent<Props, State> {
           selectedComponent={this.props.selectedKey}
           view={this.props.view}
         />
-        {hidingBestMeasures && (
-          <Alert className="spacer-top" variant="info">
-            {translateWithParameters(
-              'component_measures.hidden_best_score_metrics',
-              components.length - filteredComponents.length,
-              formatMeasure(this.props.metric.bestValue, this.props.metric.type)
-            )}
-            <Button className="button-link spacer-left" onClick={this.handleShowBestMeasures}>
-              {translate('show_all')}
-            </Button>
-          </Alert>
-        )}
+        {hidingBestMeasures &&
+          this.props.paging && (
+            <Alert className="spacer-top" variant="info">
+              <div className="display-flex-center">
+                {translateWithParameters(
+                  'component_measures.hidden_best_score_metrics',
+                  formatMeasure(this.props.paging.total - filteredComponents.length, 'INT'),
+                  formatMeasure(this.props.metric.bestValue, this.props.metric.type)
+                )}
+                <Button className="button-small spacer-left" onClick={this.handleShowBestMeasures}>
+                  {translate('show_them')}
+                </Button>
+              </div>
+            </Alert>
+          )}
         {!hidingBestMeasures &&
           this.props.paging &&
           this.props.components.length > 0 && (
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/FilesView-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/FilesView-test.tsx.snap
index 0efe85f4ba8..6111aec51f6 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/FilesView-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/FilesView-test.tsx.snap
@@ -48,13 +48,17 @@ exports[`should render with best values hidden 1`] = `
     className="spacer-top"
     variant="info"
   >
-    component_measures.hidden_best_score_metrics.1.
-    <Button
-      className="button-link spacer-left"
-      onClick={[Function]}
+    <div
+      className="display-flex-center"
     >
-      show_all
-    </Button>
+      component_measures.hidden_best_score_metrics.9.
+      <Button
+        className="button-small spacer-left"
+        onClick={[Function]}
+      >
+        show_them
+      </Button>
+    </div>
   </Alert>
 </div>
 `;
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 973eba40af4..e48687cfb53 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -256,6 +256,7 @@ short_number_suffix.m=M
 show_less=Show Less
 show_more=Show More
 show_all=Show All
+show_them=Show Them
 should_be_unique=Should be unique
 since_x=since {0}
 since_version=since version {0}
-- 
2.39.5