SONAR-16298 Replace React legacy lifecycle methods in SourceViewer

5 files changed, 14 insertions, 34 deletions

diff --git a/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx b/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx
index bf6074b5a54..8254d91ef50 100644
--- a/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx
+++ b/server/sonar-web/src/main/js/components/locations/CrossFileLocationNavigator.tsx
@@ -20,12 +20,11 @@
 import * as React from 'react';
 import { translateWithParameters } from '../../helpers/l10n';
 import { collapsePath } from '../../helpers/path';
-import SingleFileLocationNavigator from './SingleFileLocationNavigator';
-import './CrossFileLocationNavigator.css';
 import { FlowLocation } from '../../types/types';
+import './CrossFileLocationNavigator.css';
+import SingleFileLocationNavigator from './SingleFileLocationNavigator';
 
 interface Props {
-  uniqueKey: string;
   locations: FlowLocation[];
   onLocationSelect: (index: number) => void;
   scroll: (element: Element) => void;
@@ -48,18 +47,14 @@ const MAX_PATH_LENGTH = 15;
 export default class CrossFileLocationNavigator extends React.PureComponent<Props, State> {
   state: State = { collapsed: true };
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.uniqueKey !== this.props.uniqueKey) {
-      this.setState({ collapsed: true });
-    }
-
-    // expand locations list as soon as a location in the middle of the list is selected
-    const { locations: nextLocations } = nextProps;
+  componentDidUpdate() {
+    const { locations, selectedLocationIndex } = this.props;
     if (
-      nextProps.selectedLocationIndex &&
-      nextProps.selectedLocationIndex > 0 &&
-      nextLocations !== undefined &&
-      nextProps.selectedLocationIndex < nextLocations.length - 1
+      selectedLocationIndex &&
+      selectedLocationIndex > 0 &&
+      locations !== undefined &&
+      selectedLocationIndex < locations.length - 1 &&
+      this.state.collapsed
     ) {
       this.setState({ collapsed: false });
     }
diff --git a/server/sonar-web/src/main/js/components/locations/LocationsList.tsx b/server/sonar-web/src/main/js/components/locations/LocationsList.tsx
index 19e52f004c0..65e3c6ebdf2 100644
--- a/server/sonar-web/src/main/js/components/locations/LocationsList.tsx
+++ b/server/sonar-web/src/main/js/components/locations/LocationsList.tsx
@@ -24,7 +24,6 @@ import SingleFileLocationNavigator from './SingleFileLocationNavigator';
 
 interface Props {
   isCrossFile: boolean;
-  uniqueKey: string;
   locations: FlowLocation[];
   onLocationSelect: (index: number) => void;
   scroll: (element: Element) => void;
@@ -33,7 +32,7 @@ interface Props {
 
 export default class LocationsList extends React.PureComponent<Props> {
   render() {
-    const { isCrossFile, locations, uniqueKey, selectedLocationIndex } = this.props;
+    const { isCrossFile, locations, selectedLocationIndex } = this.props;
 
     if (!locations || locations.length === 0 || locations.every(location => !location.msg)) {
       return null;
@@ -42,7 +41,6 @@ export default class LocationsList extends React.PureComponent<Props> {
     if (isCrossFile) {
       return (
         <CrossFileLocationNavigator
-          uniqueKey={uniqueKey}
           locations={locations}
           onLocationSelect={this.props.onLocationSelect}
           scroll={this.props.scroll}
diff --git a/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx b/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx
index a5f7cd136d3..2147bba7ad4 100644
--- a/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx
+++ b/server/sonar-web/src/main/js/components/locations/__tests__/CrossFileLocationsNavigator-test.tsx
@@ -19,8 +19,8 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { click } from '../../../helpers/testUtils';
 import { mockFlowLocation } from '../../../helpers/testMocks';
+import { click } from '../../../helpers/testUtils';
 import { FlowLocation } from '../../../types/types';
 import CrossFileLocationsNavigator from '../CrossFileLocationNavigator';
 
@@ -77,20 +77,9 @@ it('should expand all locations', () => {
   expect(wrapper.find('SingleFileLocationNavigator').length).toBe(3);
 });
 
-it('should collapse locations when issue changes', () => {
-  const wrapper = shallowRender();
-
-  wrapper.setProps({ selectedLocationIndex: 1 });
-  expect(wrapper.find('SingleFileLocationNavigator').length).toBe(3);
-
-  wrapper.setProps({ uniqueKey: 'def', selectedLocationIndex: undefined });
-  expect(wrapper.find('SingleFileLocationNavigator').length).toBe(2);
-});
-
 function shallowRender(props: Partial<CrossFileLocationsNavigator['props']> = {}) {
   return shallow<CrossFileLocationsNavigator>(
     <CrossFileLocationsNavigator
-      uniqueKey="abcd"
       locations={[location1, location2, location3]}
       onLocationSelect={jest.fn()}
       scroll={jest.fn()}
diff --git a/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx b/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx
index 3f525e8845c..a5edeafdcf8 100644
--- a/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx
+++ b/server/sonar-web/src/main/js/components/locations/__tests__/LocationsList-test.tsx
@@ -46,23 +46,22 @@ const location3: FlowLocation = {
 
 it('should render locations in the same file', () => {
   const locations = [location1, location2];
-  expect(shallowRender({ uniqueKey: '', locations, isCrossFile: false })).toMatchSnapshot();
+  expect(shallowRender({ locations, isCrossFile: false })).toMatchSnapshot();
 });
 
 it('should render flow locations in different file', () => {
   const locations = [location1, location3];
-  expect(shallowRender({ uniqueKey: '', locations, isCrossFile: true })).toMatchSnapshot();
+  expect(shallowRender({ locations, isCrossFile: true })).toMatchSnapshot();
 });
 
 it('should not render locations', () => {
-  const wrapper = shallowRender({ uniqueKey: '', locations: [] });
+  const wrapper = shallowRender({ locations: [] });
   expect(wrapper.type()).toBeNull();
 });
 
 function shallowRender(overrides: Partial<LocationsList['props']> = {}) {
   return shallow<LocationsList>(
     <LocationsList
-      uniqueKey={mockIssue().key}
       locations={mockIssue().secondaryLocations}
       isCrossFile={true}
       onLocationSelect={jest.fn()}
diff --git a/server/sonar-web/src/main/js/components/locations/__tests__/__snapshots__/LocationsList-test.tsx.snap b/server/sonar-web/src/main/js/components/locations/__tests__/__snapshots__/LocationsList-test.tsx.snap
index 9cb465ba244..eb41475e47b 100644
--- a/server/sonar-web/src/main/js/components/locations/__tests__/__snapshots__/LocationsList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/locations/__tests__/__snapshots__/LocationsList-test.tsx.snap
@@ -30,7 +30,6 @@ exports[`should render flow locations in different file 1`] = `
   }
   onLocationSelect={[MockFunction]}
   scroll={[MockFunction]}
-  uniqueKey=""
 />
 `;