SONAR-16599 Fixing scroll issues when security principles notification is shown in...

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
index e7265455589d49e80324b3d09058e6fa018caeb5..b159a3d56933d0114912f0af2163f9e3f1b94540 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
+++ b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
@@ -34,6 +34,7 @@ let handler: CodingRulesMock;
 
 beforeAll(() => {
   window.scrollTo = jest.fn();
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
   handler = new CodingRulesMock();
 });
 

diff --git a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx
index 0494a5320c4bae91a8279bba9f5506389369de03..81218cd599be6f1879b85fe11428e3a6c5c4ee3e 100644 (file)
--- a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx
+++ b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx
@@ -20,7 +20,6 @@
 import * as React from 'react';
 import { RuleDescriptionSection } from '../../apps/coding-rules/rule';
 import { translate } from '../../helpers/l10n';
-import { scrollToElement } from '../../helpers/scrolling';
 import { Dict } from '../../types/types';
 import { ButtonLink } from '../controls/buttons';
 import { Alert } from '../ui/Alert';
@@ -44,7 +43,7 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
   handleNotificationScroll = () => {
     const element = this.props.educationPrinciplesRef?.current;
     if (element) {
-      scrollToElement(element, { topOffset: 20, bottomOffset: 250 });
+      element.scrollIntoView();
     }
   };
 
@@ -91,7 +90,7 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props,
                 return null;
               }
               return (
-                <div key={key} className="education-principles rule-desc">
+                <div key={key} className="education-principles rule-desc big-padded">
                   <Concept />
                 </div>
               );

diff --git a/server/sonar-web/src/main/js/components/rules/TabViewer.tsx b/server/sonar-web/src/main/js/components/rules/TabViewer.tsx
index 2817f308ec12f84ccb37855f883691297fb03148..0d781222ee1b3667d03880a349d333a732f8f646 100644 (file)
--- a/server/sonar-web/src/main/js/components/rules/TabViewer.tsx
+++ b/server/sonar-web/src/main/js/components/rules/TabViewer.tsx
@@ -73,7 +73,7 @@ export default class TabViewer extends React.PureComponent<Props, State> {
     };
     this.educationPrinciplesRef = React.createRef();
     this.checkIfConceptIsVisible = debounce(this.checkIfConceptIsVisible, DEBOUNCE_FOR_SCROLL);
-    document.addEventListener('scroll', this.checkIfConceptIsVisible);
+    document.addEventListener('scroll', this.checkIfConceptIsVisible, { capture: true });
   }
 
   componentDidMount() {
@@ -104,7 +104,7 @@ export default class TabViewer extends React.PureComponent<Props, State> {
   }
 
   componentWillUnmount() {
-    document.removeEventListener('scroll', this.checkIfConceptIsVisible);
+    document.removeEventListener('scroll', this.checkIfConceptIsVisible, { capture: true });
   }
 
   checkIfConceptIsVisible = () => {
@@ -114,7 +114,7 @@ export default class TabViewer extends React.PureComponent<Props, State> {
       if (isView && this.showNotification) {
         dismissNotification(NoticeType.EDUCATION_PRINCIPLES)
           .then(() => {
-            document.removeEventListener('scroll', this.checkIfConceptIsVisible);
+            document.removeEventListener('scroll', this.checkIfConceptIsVisible, { capture: true });
             this.showNotification = false;
           })
           .catch(() => {