SONAR-21942 Fixing scroll issue inside issue details page

diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx
index a56876381930008528476ccfb3c88e30eeea1ec0..d66a2c2960e6462d4c9299e04001a3ebd832d4a8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssue.tsx
@@ -31,8 +31,6 @@ import { Issue } from '../../../types/types';
 import IssueItemLocationsQuantity from './IssueItemLocationsQuantity';
 import IssueLocationsNavigator from './IssueLocationsNavigator';
 
-const HALF_DIVIDER = 2;
-
 export interface ConciseIssueProps {
   issue: Issue;
   onFlowSelect: (index?: number) => void;
@@ -48,12 +46,8 @@ export default function SubnavigationIssue(props: ConciseIssueProps) {
   const element = React.useRef<HTMLLIElement>(null);
 
   React.useEffect(() => {
-    if (selected && element.current) {
-      const parent = document.querySelector('nav.issues-nav-bar') as HTMLMenuElement;
-      const rect = parent.getBoundingClientRect();
-      const offset =
-        element.current.offsetTop - rect.height / HALF_DIVIDER + rect.top / HALF_DIVIDER;
-      parent.scrollTo({ top: offset, behavior: 'smooth' });
+    if (selected) {
+      element.current?.scrollIntoView({ block: 'nearest' });
     }
   }, [selected]);
 

diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx
index 60cd0a4dfb5dfb876251af87a3960f68053be5a9..393746069083d18470083ee0834007225a0ca333 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx
@@ -63,22 +63,6 @@ const issues = [
   }),
 ];
 
-const scrollTo = jest.fn();
-
-beforeAll(() => {
-  // eslint-disable-next-line testing-library/no-node-access
-  document.querySelector = jest.fn(() => ({
-    scrollTo,
-    getBoundingClientRect: () => ({
-      height: 10,
-    }),
-  }));
-});
-
-beforeEach(() => {
-  scrollTo.mockClear();
-});
-
 describe('rendering', () => {
   it('should render concise issues without duplicating component', () => {
     renderConciseIssues(issues);
@@ -91,8 +75,6 @@ describe('rendering', () => {
     renderConciseIssues(issues, {
       selected: 'issue2',
     });
-
-    expect(scrollTo).toHaveBeenCalledTimes(1);
   });
 
   it('should show locations and flows when selected', () => {
@@ -138,16 +120,20 @@ describe('rendering', () => {
 
 describe('interacting', () => {
   it('should scroll selected issue into view', () => {
+    const scrollIntoView = jest.fn();
+    const globalScrollView = window.HTMLElement.prototype.scrollIntoView;
+    window.HTMLElement.prototype.scrollIntoView = scrollIntoView;
     const { override } = renderConciseIssues(issues, {
       selected: 'issue2',
     });
 
-    expect(scrollTo).toHaveBeenCalledTimes(1);
+    expect(scrollIntoView).toHaveBeenCalledTimes(1);
 
     override(issues, {
       selected: 'issue4',
     });
-    expect(scrollTo).toHaveBeenCalledTimes(2);
+    expect(scrollIntoView).toHaveBeenCalledTimes(2);
+    window.HTMLElement.prototype.scrollIntoView = globalScrollView;
   });
 
   it('expand button should work correctly', async () => {