SONAR-17358 Fix scrolling in issues list page

4 files changed, 18 insertions, 44 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/utils-test.ts b/server/sonar-web/src/main/js/apps/issues/__tests__/utils-test.ts
index 39e584cb163..9b01dc67a28 100644
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/utils-test.ts
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/utils-test.ts
@@ -17,10 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { scrollToElement } from '../../../helpers/scrolling';
 import { SecurityStandard } from '../../../types/security';
 import {
-  scrollToIssue,
   serializeQuery,
   shouldOpenSonarSourceSecurityFacet,
   shouldOpenStandardsChildFacet,
@@ -101,34 +99,6 @@ describe('serialize/deserialize', () => {
   });
 });
 
-describe('scrollToIssue', () => {
-  it('should scroll to the issue', () => {
-    document.querySelector = jest.fn(() => ({}));
-
-    scrollToIssue('issue1', false);
-    expect(scrollToElement).toHaveBeenCalled();
-  });
-  it("should ignore issue if it doesn't exist", () => {
-    document.querySelector = jest.fn(() => null);
-
-    scrollToIssue('issue1', false);
-    expect(scrollToElement).not.toHaveBeenCalled();
-  });
-  it('should scroll smoothly by default', () => {
-    document.querySelector = jest.fn(() => ({}));
-
-    scrollToIssue('issue1');
-    expect(scrollToElement).toHaveBeenCalledWith(
-      {},
-      {
-        bottomOffset: 100,
-        smooth: true,
-        topOffset: 250
-      }
-    );
-  });
-});
-
 describe('shouldOpenStandardsFacet', () => {
   it('should open standard facet', () => {
     expect(shouldOpenStandardsFacet({ standards: true }, { types: [] })).toBe(true);
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx
index c27789bc8e8..fad89e4aae1 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesList.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { BranchLike } from '../../../types/branch-like';
 import { Component, Issue } from '../../../types/types';
-import { Query, scrollToIssue } from '../utils';
+import { Query } from '../utils';
 import ListItem from './ListItem';
 
 interface Props {
@@ -52,9 +52,6 @@ export default class IssuesList extends React.PureComponent<Props, State> {
     //      list of issues. See https://jira.sonarsource.com/browse/SONAR-11681
     setTimeout(() => {
       this.setState({ prerender: false });
-      if (this.props.selectedIssue) {
-        scrollToIssue(this.props.selectedIssue.key, false);
-      }
     }, 42);
   }
 
diff --git a/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx b/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx
index 35225ea1587..6b8a3155d61 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/ListItem.tsx
@@ -40,6 +40,22 @@ interface Props {
 }
 
 export default class ListItem extends React.PureComponent<Props> {
+  nodeRef: HTMLLIElement | null = null;
+
+  componentDidMount() {
+    const { selected } = this.props;
+    if (this.nodeRef && selected) {
+      this.nodeRef.scrollIntoView({ block: 'center', inline: 'center' });
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    const { selected } = this.props;
+    if (!prevProps.selected && selected && this.nodeRef) {
+      this.nodeRef.scrollIntoView({ block: 'center', inline: 'center' });
+    }
+  }
+
   handleFilter = (property: string, issue: TypeIssue) => {
     const { onFilterChange } = this.props;
 
@@ -94,7 +110,7 @@ export default class ListItem extends React.PureComponent<Props> {
       previousIssue.branch !== issue.branch;
 
     return (
-      <li className="issues-workspace-list-item">
+      <li className="issues-workspace-list-item" ref={node => (this.nodeRef = node)}>
         {displayComponent && (
           <div className="issues-workspace-list-component note">
             <ComponentBreadcrumbs component={component} issue={this.props.issue} />
diff --git a/server/sonar-web/src/main/js/apps/issues/utils.ts b/server/sonar-web/src/main/js/apps/issues/utils.ts
index c6b9719e9aa..c3023256cb6 100644
--- a/server/sonar-web/src/main/js/apps/issues/utils.ts
+++ b/server/sonar-web/src/main/js/apps/issues/utils.ts
@@ -31,7 +31,6 @@ import {
   serializeString,
   serializeStringArray
 } from '../../helpers/query';
-import { scrollToElement } from '../../helpers/scrolling';
 import { get, save } from '../../helpers/storage';
 import { isDefined } from '../../helpers/types';
 import { Facet, RawFacet } from '../../types/issues';
@@ -241,14 +240,6 @@ export function allLocationsEmpty(
   return getLocations(issue, selectedFlowIndex).every(location => !location.msg);
 }
 
-// TODO: drop as it's useless now
-export function scrollToIssue(issue: string, smooth = true) {
-  const element = document.querySelector(`[data-issue="${issue}"]`);
-  if (element) {
-    scrollToElement(element, { topOffset: 250, bottomOffset: 100, smooth });
-  }
-}
-
 export function shouldOpenStandardsFacet(
   openFacets: Dict<boolean>,
   query: Partial<Query>