SONAR-13147 lazyloading

1 files changed, 99 insertions, 103 deletions

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
index 1872532b9aa..e4588216300 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
@@ -67,17 +67,17 @@ export interface Props {
   // but kept to maintaint the location indexes
   highlightedLocations?: (T.FlowLocation | undefined)[];
   highlightedLocationMessage?: { index: number; text: string | undefined };
-  loadComponent: (
+  loadComponent?: (
     component: string,
     branchLike: BranchLike | undefined
   ) => Promise<T.SourceViewerFile>;
-  loadIssues: (
+  loadIssues?: (
     component: string,
     from: number,
     to: number,
     branchLike: BranchLike | undefined
   ) => Promise<T.Issue[]>;
-  loadSources: (
+  loadSources?: (
     component: string,
     from: number,
     to: number,
@@ -129,10 +129,7 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
     displayAllIssues: false,
     displayIssueLocationsCount: true,
     displayIssueLocationsLink: true,
-    displayLocationMarkers: true,
-    loadComponent: defaultLoadComponent,
-    loadIssues: defaultLoadIssues,
-    loadSources: defaultLoadSources
+    displayLocationMarkers: true
   };
 
   constructor(props: Props) {
@@ -208,6 +205,18 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
     this.mounted = false;
   }
 
+  get loadComponent() {
+    return this.props.loadComponent || defaultLoadComponent;
+  }
+
+  get loadIssues() {
+    return this.props.loadIssues || defaultLoadIssues;
+  }
+
+  get propsLoadSources() {
+    return this.props.loadSources || defaultLoadSources;
+  }
+
   computeCoverageStatus(lines: T.SourceLine[]) {
     return lines.map(line => ({ ...line, coverageStatus: getCoverageStatus(line) }));
   }
@@ -228,7 +237,7 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
 
     const to = (this.props.aroundLine || 0) + LINES;
     const loadIssues = (component: T.SourceViewerFile, sources: T.SourceLine[]) => {
-      this.props.loadIssues(this.props.component, 1, to, this.props.branchLike).then(
+      this.loadIssues(this.props.component, 1, to, this.props.branchLike).then(
         issues => {
           if (this.mounted) {
             const finalSources = sources.slice(0, LINES);
@@ -300,9 +309,10 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
       );
     };
 
-    this.props
-      .loadComponent(this.props.component, this.props.branchLike)
-      .then(onResolve, onFailLoadComponent);
+    this.loadComponent(this.props.component, this.props.branchLike).then(
+      onResolve,
+      onFailLoadComponent
+    );
   }
 
   fetchSources() {
@@ -335,27 +345,25 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
     }
     const firstSourceLine = this.state.sources[0];
     const lastSourceLine = this.state.sources[this.state.sources.length - 1];
-    this.props
-      .loadIssues(
-        this.props.component,
-        firstSourceLine && firstSourceLine.line,
-        lastSourceLine && lastSourceLine.line,
-        this.props.branchLike
-      )
-      .then(
-        issues => {
-          if (this.mounted) {
-            this.setState({
-              issues,
-              issuesByLine: issuesByLine(issues),
-              issueLocationsByLine: locationsByLine(issues)
-            });
-          }
-        },
-        () => {
-          // TODO
+    this.loadIssues(
+      this.props.component,
+      firstSourceLine && firstSourceLine.line,
+      lastSourceLine && lastSourceLine.line,
+      this.props.branchLike
+    ).then(
+      issues => {
+        if (this.mounted) {
+          this.setState({
+            issues,
+            issuesByLine: issuesByLine(issues),
+            issueLocationsByLine: locationsByLine(issues)
+          });
         }
-      );
+      },
+      () => {
+        // TODO
+      }
+    );
   }
 
   loadSources = (): Promise<T.SourceLine[]> => {
@@ -381,9 +389,10 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
       // request one additional line to define `hasSourcesAfter`
       to++;
 
-      return this.props
-        .loadSources(this.props.component, from, to, this.props.branchLike)
-        .then(sources => resolve(sources), onFailLoadSources);
+      return this.propsLoadSources(this.props.component, from, to, this.props.branchLike).then(
+        sources => resolve(sources),
+        onFailLoadSources
+      );
     });
   };
 
@@ -394,43 +403,34 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
     const firstSourceLine = this.state.sources[0];
     this.setState({ loadingSourcesBefore: true });
     const from = Math.max(1, firstSourceLine.line - LINES);
-    this.props
-      .loadSources(this.props.component, from, firstSourceLine.line - 1, this.props.branchLike)
-      .then(
-        sources => {
-          this.props
-            .loadIssues(this.props.component, from, firstSourceLine.line - 1, this.props.branchLike)
-            .then(
-              issues => {
-                if (this.mounted) {
-                  this.setState(prevState => {
-                    const nextIssues = uniqBy(
-                      [...issues, ...(prevState.issues || [])],
-                      issue => issue.key
-                    );
-                    return {
-                      issues: nextIssues,
-                      issuesByLine: issuesByLine(nextIssues),
-                      issueLocationsByLine: locationsByLine(nextIssues),
-                      loadingSourcesBefore: false,
-                      sources: [
-                        ...this.computeCoverageStatus(sources),
-                        ...(prevState.sources || [])
-                      ],
-                      symbolsByLine: { ...prevState.symbolsByLine, ...symbolsByLine(sources) }
-                    };
-                  });
-                }
-              },
-              () => {
-                // TODO
-              }
-            );
-        },
-        () => {
-          // TODO
+    Promise.all([
+      this.propsLoadSources(
+        this.props.component,
+        from,
+        firstSourceLine.line - 1,
+        this.props.branchLike
+      ),
+      this.loadIssues(this.props.component, from, firstSourceLine.line - 1, this.props.branchLike)
+    ]).then(
+      ([sources, issues]) => {
+        if (this.mounted) {
+          this.setState(prevState => {
+            const nextIssues = uniqBy([...issues, ...(prevState.issues || [])], issue => issue.key);
+            return {
+              issues: nextIssues,
+              issuesByLine: issuesByLine(nextIssues),
+              issueLocationsByLine: locationsByLine(nextIssues),
+              loadingSourcesBefore: false,
+              sources: [...this.computeCoverageStatus(sources), ...(prevState.sources || [])],
+              symbolsByLine: { ...prevState.symbolsByLine, ...symbolsByLine(sources) }
+            };
+          });
         }
-      );
+      },
+      () => {
+        // TODO
+      }
+    );
   };
 
   loadSourcesAfter = () => {
@@ -442,38 +442,31 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
     const fromLine = lastSourceLine.line + 1;
     // request one additional line to define `hasSourcesAfter`
     const toLine = lastSourceLine.line + LINES + 1;
-    this.props.loadSources(this.props.component, fromLine, toLine, this.props.branchLike).then(
-      sources => {
-        this.props.loadIssues(this.props.component, fromLine, toLine, this.props.branchLike).then(
-          issues => {
-            if (this.mounted) {
-              this.setState(prevState => {
-                const nextIssues = uniqBy(
-                  [...(prevState.issues || []), ...issues],
-                  issue => issue.key
-                );
-                return {
-                  issues: nextIssues,
-                  issuesByLine: issuesByLine(nextIssues),
-                  issueLocationsByLine: locationsByLine(nextIssues),
-                  hasSourcesAfter: sources.length > LINES,
-                  loadingSourcesAfter: false,
-                  sources: [
-                    ...(prevState.sources || []),
-                    ...this.computeCoverageStatus(sources.slice(0, LINES))
-                  ],
-                  symbolsByLine: {
-                    ...prevState.symbolsByLine,
-                    ...symbolsByLine(sources.slice(0, LINES))
-                  }
-                };
-              });
-            }
-          },
-          () => {
-            // TODO
-          }
-        );
+    Promise.all([
+      this.propsLoadSources(this.props.component, fromLine, toLine, this.props.branchLike),
+      this.loadIssues(this.props.component, fromLine, toLine, this.props.branchLike)
+    ]).then(
+      ([sources, issues]) => {
+        if (this.mounted) {
+          this.setState(prevState => {
+            const nextIssues = uniqBy([...(prevState.issues || []), ...issues], issue => issue.key);
+            return {
+              issues: nextIssues,
+              issuesByLine: issuesByLine(nextIssues),
+              issueLocationsByLine: locationsByLine(nextIssues),
+              hasSourcesAfter: sources.length > LINES,
+              loadingSourcesAfter: false,
+              sources: [
+                ...(prevState.sources || []),
+                ...this.computeCoverageStatus(sources.slice(0, LINES))
+              ],
+              symbolsByLine: {
+                ...prevState.symbolsByLine,
+                ...symbolsByLine(sources.slice(0, LINES))
+              }
+            };
+          });
+        }
       },
       () => {
         // TODO
@@ -723,7 +716,10 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
   }
 }
 
-function defaultLoadComponent(component: string, branchLike: BranchLike | undefined) {
+function defaultLoadComponent(
+  component: string,
+  branchLike: BranchLike | undefined
+): Promise<T.SourceViewerFile> {
   return Promise.all([
     getComponentForSourceViewer({ component, ...getBranchLikeQuery(branchLike) }),
     getComponentData({ component, ...getBranchLikeQuery(branchLike) })