diff options
| -rw-r--r-- | server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx | 21 | ||||
| -rw-r--r-- | server/sonar-web/src/main/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> |