fix FP in CodePageTest

diff --git a/server/sonar-web/src/main/js/apps/code/__tests__/utils-test.tsx b/server/sonar-web/src/main/js/apps/code/__tests__/utils-test.tsx
index e5cd31510067cf284eb55c4d3d5b662cd40084ae..6c516f5f7df954bd44c092334e7ae07e2e5dc307 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/__tests__/utils-test.tsx
+++ b/server/sonar-web/src/main/js/apps/code/__tests__/utils-test.tsx
@@ -17,13 +17,25 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { getChildren } from '../../../api/components';
+import { getBreadcrumbs, getChildren, getComponent } from '../../../api/components';
 import { mockMainBranch, mockPullRequest } from '../../../helpers/mocks/branch-like';
-import { addComponent, addComponentChildren, getComponentBreadcrumbs } from '../bucket';
-import { getCodeMetrics, loadMoreChildren, retrieveComponentChildren } from '../utils';
+import {
+  addComponent,
+  addComponentBreadcrumbs,
+  addComponentChildren,
+  getComponentBreadcrumbs
+} from '../bucket';
+import {
+  getCodeMetrics,
+  loadMoreChildren,
+  retrieveComponent,
+  retrieveComponentChildren
+} from '../utils';
 
 jest.mock('../../../api/components', () => ({
-  getChildren: jest.fn().mockRejectedValue({})
+  getBreadcrumbs: jest.fn().mockRejectedValue({}),
+  getChildren: jest.fn().mockRejectedValue({}),
+  getComponent: jest.fn().mockRejectedValue({})
 }));
 
 jest.mock('../bucket', () => ({
@@ -63,7 +75,7 @@ describe('retrieveComponentChildren', () => {
       paging: { total: 2, pageIndex: 0 }
     });
 
-    await retrieveComponentChildren('key', 'TRK', mockMainBranch());
+    await retrieveComponentChildren('key', 'TRK', { mounted: true }, mockMainBranch());
 
     expect(addComponentChildren).toHaveBeenCalledWith('key', components, 2, 0);
     expect(addComponent).toHaveBeenCalledTimes(2);
@@ -71,6 +83,44 @@ describe('retrieveComponentChildren', () => {
   });
 });
 
+describe('retrieveComponent', () => {
+  it('should update bucket when component is mounted', async () => {
+    const components = [{}, {}];
+    (getChildren as jest.Mock).mockResolvedValueOnce({
+      components,
+      paging: { total: 2, pageIndex: 0 }
+    });
+    (getComponent as jest.Mock).mockResolvedValueOnce({
+      component: {}
+    });
+    (getBreadcrumbs as jest.Mock).mockResolvedValueOnce([]);
+
+    await retrieveComponent('key', 'TRK', { mounted: true }, mockMainBranch());
+
+    expect(addComponentChildren).toHaveBeenCalled();
+    expect(addComponent).toHaveBeenCalledTimes(3);
+    expect(addComponentBreadcrumbs).toHaveBeenCalled();
+  });
+
+  it('should not update bucket when component is not mounted', async () => {
+    const components = [{}, {}];
+    (getChildren as jest.Mock).mockResolvedValueOnce({
+      components,
+      paging: { total: 2, pageIndex: 0 }
+    });
+    (getComponent as jest.Mock).mockResolvedValueOnce({
+      component: {}
+    });
+    (getBreadcrumbs as jest.Mock).mockResolvedValueOnce([]);
+
+    await retrieveComponent('key', 'TRK', { mounted: false }, mockMainBranch());
+
+    expect(addComponentChildren).not.toHaveBeenCalled();
+    expect(addComponent).not.toHaveBeenCalled();
+    expect(addComponentBreadcrumbs).not.toHaveBeenCalled();
+  });
+});
+
 describe('loadMoreChildren', () => {
   it('should load more children', async () => {
     const components = [{}, {}, {}];
@@ -79,7 +129,7 @@ describe('loadMoreChildren', () => {
       paging: { total: 6, pageIndex: 1 }
     });
 
-    await loadMoreChildren('key', 1, 'TRK', mockMainBranch());
+    await loadMoreChildren('key', 1, 'TRK', { mounted: true }, mockMainBranch());
 
     expect(addComponentChildren).toHaveBeenCalledWith('key', components, 6, 1);
     expect(addComponent).toHaveBeenCalledTimes(3);

diff --git a/server/sonar-web/src/main/js/apps/code/components/App.tsx b/server/sonar-web/src/main/js/apps/code/components/App.tsx
index c1a65d7aca1726ea453df1ca1c2ddf2d52a1d578..be226adadf4388a947d71f2a55eb9dbaadd441c3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/App.tsx
@@ -110,35 +110,37 @@ export class App extends React.PureComponent<Props, State> {
 
   loadComponent = (componentKey: string) => {
     this.setState({ loading: true });
-    retrieveComponent(componentKey, this.props.component.qualifier, this.props.branchLike).then(
-      r => {
-        if (this.mounted) {
-          if (['FIL', 'UTS'].includes(r.component.qualifier)) {
-            this.setState({
-              breadcrumbs: r.breadcrumbs,
-              components: r.components,
-              loading: false,
-              page: 0,
-              searchResults: undefined,
-              sourceViewer: r.component,
-              total: 0
-            });
-          } else {
-            this.setState({
-              baseComponent: r.component,
-              breadcrumbs: r.breadcrumbs,
-              components: r.components,
-              loading: false,
-              page: r.page,
-              searchResults: undefined,
-              sourceViewer: undefined,
-              total: r.total
-            });
-          }
+    retrieveComponent(
+      componentKey,
+      this.props.component.qualifier,
+      this,
+      this.props.branchLike
+    ).then(r => {
+      if (this.mounted) {
+        if (['FIL', 'UTS'].includes(r.component.qualifier)) {
+          this.setState({
+            breadcrumbs: r.breadcrumbs,
+            components: r.components,
+            loading: false,
+            page: 0,
+            searchResults: undefined,
+            sourceViewer: r.component,
+            total: 0
+          });
+        } else {
+          this.setState({
+            baseComponent: r.component,
+            breadcrumbs: r.breadcrumbs,
+            components: r.components,
+            loading: false,
+            page: r.page,
+            searchResults: undefined,
+            sourceViewer: undefined,
+            total: r.total
+          });
         }
-      },
-      this.stopLoading
-    );
+      }
+    }, this.stopLoading);
   };
 
   stopLoading = () => {
@@ -154,7 +156,7 @@ export class App extends React.PureComponent<Props, State> {
     addComponentBreadcrumbs(component.key, component.breadcrumbs);
 
     this.setState({ loading: true });
-    retrieveComponentChildren(component.key, component.qualifier, branchLike).then(() => {
+    retrieveComponentChildren(component.key, component.qualifier, this, branchLike).then(() => {
       addComponent(component);
       if (this.mounted) {
         this.handleUpdate();
@@ -171,6 +173,7 @@ export class App extends React.PureComponent<Props, State> {
       baseComponent.key,
       page + 1,
       this.props.component.qualifier,
+      this,
       this.props.branchLike
     ).then(r => {
       if (this.mounted && r.components.length) {

diff --git a/server/sonar-web/src/main/js/apps/code/components/Components.tsx b/server/sonar-web/src/main/js/apps/code/components/Components.tsx
index 69cead60d7b388f81d8b421643179c8dfc5d5570..4a6e1b0cae359060d6a122c9a6c4b02049074350 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/components/Components.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/Components.tsx
@@ -56,23 +56,24 @@ export class Components extends React.PureComponent<Props> {
             rootComponent={rootComponent}
           />
         )}
-        {baseComponent && (
-          <tbody>
-            <Component
-              branchLike={branchLike}
-              canBePinned={canBePinned}
-              component={baseComponent}
-              key={baseComponent.key}
-              metrics={metrics}
-              rootComponent={rootComponent}
-            />
-            <tr className="blank">
-              <td colSpan={3}>&nbsp;</td>
-              <td colSpan={colSpan}>&nbsp;</td>
-            </tr>
-          </tbody>
-        )}
         <tbody>
+          {baseComponent && (
+            <>
+              <Component
+                branchLike={branchLike}
+                canBePinned={canBePinned}
+                component={baseComponent}
+                key={baseComponent.key}
+                metrics={metrics}
+                rootComponent={rootComponent}
+              />
+              <tr className="blank">
+                <td colSpan={3}>&nbsp;</td>
+                <td colSpan={colSpan}>&nbsp;</td>
+              </tr>
+            </>
+          )}
+
           {components.length ? (
             components.map((component, index, list) => (
               <Component

diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap
index d2382b2ac84694bd607e3280a78dc5cbbcfa11fe..e96434724f96d6722d4d68f83e0e6109e6f0bdc7 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap
@@ -69,8 +69,6 @@ exports[`renders correctly 1`] = `
          
       </td>
     </tr>
-  </tbody>
-  <tbody>
     <withScrollTo(Component)
       canBePinned={true}
       canBrowse={true}
@@ -229,8 +227,6 @@ exports[`renders correctly for leak 1`] = `
          
       </td>
     </tr>
-  </tbody>
-  <tbody>
     <withScrollTo(Component)
       branchLike={
         Object {

diff --git a/server/sonar-web/src/main/js/apps/code/utils.ts b/server/sonar-web/src/main/js/apps/code/utils.ts
index 675c33e0a1e2ad18efa4e1798f7492a1157182e4..e32c313d56b90baa214aa5b7e9889f34824dee2a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/utils.ts
+++ b/server/sonar-web/src/main/js/apps/code/utils.ts
@@ -119,7 +119,12 @@ export function getCodeMetrics(
   return [...METRICS];
 }
 
-function retrieveComponentBase(componentKey: string, qualifier: string, branchLike?: BranchLike) {
+function retrieveComponentBase(
+  componentKey: string,
+  qualifier: string,
+  instance: { mounted: boolean },
+  branchLike?: BranchLike
+) {
   const existing = getComponentFromBucket(componentKey);
   if (existing) {
     return Promise.resolve(existing);
@@ -132,7 +137,9 @@ function retrieveComponentBase(componentKey: string, qualifier: string, branchLi
     metricKeys: metrics.join(),
     ...getBranchLikeQuery(branchLike)
   }).then(({ component }) => {
-    addComponent(component);
+    if (instance.mounted) {
+      addComponent(component);
+    }
     return component;
   });
 }
@@ -140,6 +147,7 @@ function retrieveComponentBase(componentKey: string, qualifier: string, branchLi
 export function retrieveComponentChildren(
   componentKey: string,
   qualifier: string,
+  instance: { mounted: boolean },
   branchLike?: BranchLike
 ): Promise<{ components: T.ComponentMeasure[]; page: number; total: number }> {
   const existing = getComponentChildren(componentKey);
@@ -160,15 +168,18 @@ export function retrieveComponentChildren(
   })
     .then(prepareChildren)
     .then(r => {
-      addComponentChildren(componentKey, r.components, r.total, r.page);
-      storeChildrenBase(r.components);
-      storeChildrenBreadcrumbs(componentKey, r.components);
+      if (instance.mounted) {
+        addComponentChildren(componentKey, r.components, r.total, r.page);
+        storeChildrenBase(r.components);
+        storeChildrenBreadcrumbs(componentKey, r.components);
+      }
       return r;
     });
 }
 
 function retrieveComponentBreadcrumbs(
   component: string,
+  instance: { mounted: boolean },
   branchLike?: BranchLike
 ): Promise<T.Breadcrumb[]> {
   const existing = getComponentBreadcrumbs(component);
@@ -179,7 +190,9 @@ function retrieveComponentBreadcrumbs(
   return getBreadcrumbs({ component, ...getBranchLikeQuery(branchLike) })
     .then(skipRootDir)
     .then(breadcrumbs => {
-      addComponentBreadcrumbs(component, breadcrumbs);
+      if (instance.mounted) {
+        addComponentBreadcrumbs(component, breadcrumbs);
+      }
       return breadcrumbs;
     });
 }
@@ -187,6 +200,7 @@ function retrieveComponentBreadcrumbs(
 export function retrieveComponent(
   componentKey: string,
   qualifier: string,
+  instance: { mounted: boolean },
   branchLike?: BranchLike
 ): Promise<{
   breadcrumbs: T.Breadcrumb[];
@@ -196,9 +210,9 @@ export function retrieveComponent(
   total: number;
 }> {
   return Promise.all([
-    retrieveComponentBase(componentKey, qualifier, branchLike),
-    retrieveComponentChildren(componentKey, qualifier, branchLike),
-    retrieveComponentBreadcrumbs(componentKey, branchLike)
+    retrieveComponentBase(componentKey, qualifier, instance, branchLike),
+    retrieveComponentChildren(componentKey, qualifier, instance, branchLike),
+    retrieveComponentBreadcrumbs(componentKey, instance, branchLike)
   ]).then(r => {
     return {
       breadcrumbs: r[2],
@@ -214,6 +228,7 @@ export function loadMoreChildren(
   componentKey: string,
   page: number,
   qualifier: string,
+  instance: { mounted: boolean },
   branchLike?: BranchLike
 ): Promise<Children> {
   const metrics = getCodeMetrics(qualifier, branchLike, { includeQGStatus: true });
@@ -226,9 +241,11 @@ export function loadMoreChildren(
   })
     .then(prepareChildren)
     .then(r => {
-      addComponentChildren(componentKey, r.components, r.total, r.page);
-      storeChildrenBase(r.components);
-      storeChildrenBreadcrumbs(componentKey, r.components);
+      if (instance.mounted) {
+        addComponentChildren(componentKey, r.components, r.total, r.page);
+        storeChildrenBase(r.components);
+        storeChildrenBreadcrumbs(componentKey, r.components);
+      }
       return r;
     });
 }