From 92b539baecf11d5f743b66d5281d740dea893f02 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Thu, 24 Nov 2022 17:06:36 +0800
Subject: [PATCH] SONAR-17623 Preserve code tab scrolling and state

---
 .../js/apps/issues/__tests__/IssueApp-it.tsx  | 21 ++++++++++++-------
 .../js/components/rules/RuleTabViewer.tsx     | 20 ++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
index e53b3ce3f0f..5b718e55290 100644
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx
@@ -22,6 +22,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import selectEvent from 'react-select-event';
 import IssuesServiceMock from '../../../api/mocks/IssuesServiceMock';
+import { TabKeys } from '../../../components/rules/RuleTabViewer';
 import { renderOwaspTop102021Category } from '../../../helpers/security-standard';
 import { mockCurrentUser } from '../../../helpers/testMocks';
 import { renderApp, renderAppRoutes } from '../../../helpers/testReactTestingUtils';
@@ -534,15 +535,17 @@ it('should show code tabs when any secondary location is selected', async () =>
     screen.getByRole('tab', { name: 'coding_rules.description_section.title.root_cause' })
   );
   expect(
-    screen.queryByRole('row', {
-      name: '2 source_viewer.tooltip.covered import java.util. ArrayList ;',
+    screen.queryByRole('tab', {
+      name: `issue.tabs.${TabKeys.Code}`,
+      selected: true,
     })
   ).not.toBeInTheDocument();
 
   await user.click(screen.getByRole('button', { name: '1 location 1' }));
   expect(
-    screen.getByRole('row', {
-      name: '2 source_viewer.tooltip.covered import java.util. ArrayList ;',
+    screen.getByRole('tab', {
+      name: `issue.tabs.${TabKeys.Code}`,
+      selected: true,
     })
   ).toBeInTheDocument();
 
@@ -551,15 +554,17 @@ it('should show code tabs when any secondary location is selected', async () =>
     screen.getByRole('tab', { name: 'coding_rules.description_section.title.root_cause' })
   );
   expect(
-    screen.queryByRole('row', {
-      name: '2 source_viewer.tooltip.covered import java.util. ArrayList ;',
+    screen.queryByRole('tab', {
+      name: `issue.tabs.${TabKeys.Code}`,
+      selected: true,
     })
   ).not.toBeInTheDocument();
 
   await user.click(screen.getByRole('button', { name: '1 location 1' }));
   expect(
-    screen.getByRole('row', {
-      name: '2 source_viewer.tooltip.covered import java.util. ArrayList ;',
+    screen.getByRole('tab', {
+      name: `issue.tabs.${TabKeys.Code}`,
+      selected: true,
     })
   ).toBeInTheDocument();
 });
diff --git a/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx b/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx
index 930c6354f18..4dafb083d61 100644
--- a/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx
+++ b/server/sonar-web/src/main/js/components/rules/RuleTabViewer.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import classNames from 'classnames';
 import { cloneDeep, debounce, groupBy } from 'lodash';
 import * as React from 'react';
 import { dismissNotice } from '../../api/users';
@@ -293,8 +294,6 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
       return null;
     }
 
-    const tabContent = tabs.find((t) => t.key === selectedTab.key)?.content;
-
     return (
       <>
         <div>
@@ -317,10 +316,19 @@ export class RuleTabViewer extends React.PureComponent<RuleTabViewerProps, State
               aria-labelledby={getTabId(selectedTab.key)}
               id={getTabPanelId(selectedTab.key)}
             >
-              {/* Adding a key to force re-rendering of the tab container, so that it resets the scroll position */}
-              <div className="overflow-y-auto spacer" key={selectedTab.key}>
-                {tabContent}
-              </div>
+              {
+                // Preserve tabs state by always rendering all of them. Only hide them when not selected
+                tabs.map((tab) => (
+                  <div
+                    className={classNames('overflow-y-auto spacer', {
+                      hidden: tab.key !== selectedTab.key,
+                    })}
+                    key={tab.key}
+                  >
+                    {tab.content}
+                  </div>
+                ))
+              }
             </div>
           )}
         </ScreenPositionHelper>
-- 
2.39.5