SGB-149 Fix hotspot page when component is not yet fetch

2 files changed, 37 insertions, 13 deletions

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsApp.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsApp.tsx
index d00d9e9154c..39c4bd0a580 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsApp.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsApp.tsx
@@ -54,7 +54,7 @@ const PAGE_SIZE = 500;
 
 interface Props {
   branchLike?: BranchLike;
-  component: Component;
+  component?: Component;
   currentUser: CurrentUser;
   location: Location;
   router: Router;
@@ -124,7 +124,8 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
   componentDidUpdate(previous: Props) {
     if (
       !isSameBranchLike(previous.branchLike, this.props.branchLike) ||
-      this.props.component.key !== previous.component.key ||
+      (this.props.component !== undefined &&
+        this.props.component.key !== previous.component?.key) ||
       this.props.location.query.hotspots !== previous.location.query.hotspots ||
       SECURITY_STANDARDS.some((s) => this.props.location.query[s] !== previous.location.query[s]) ||
       this.props.location.query.files !== previous.location.query.files
@@ -276,11 +277,13 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
       this.fetchSecurityHotspots(),
       this.fetchSecurityHotspotsReviewed(),
     ])
-      .then(([standards, { hotspots, paging }]) => {
-        if (!this.mounted) {
+      .then(([standards, components]) => {
+        if (!this.mounted || components === undefined) {
           return;
         }
 
+        const { hotspots, paging } = components;
+
         const { branchLike } = this.props;
 
         if (isSameBranchLike(previousBranch, branchLike)) {
@@ -308,6 +311,10 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
 
     this.setState({ loadingMeasure: true });
 
+    if (component === undefined) {
+      return Promise.resolve();
+    }
+
     return getMeasures({
       component: component.key,
       metricKeys: reviewedHotspotsMetricKey,
@@ -355,6 +362,9 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
   }) {
     const { branchLike, component, location } = this.props;
     const { filters } = this.state;
+    if (component === undefined) {
+      return Promise.resolve(undefined);
+    }
 
     const hotspotFilters: Dict<string> = {};
 
@@ -390,6 +400,10 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
     const { branchLike, component, location } = this.props;
     const { filters } = this.state;
 
+    if (component === undefined) {
+      return Promise.resolve(undefined);
+    }
+
     const hotspotKeys = location.query.hotspots
       ? (location.query.hotspots as string).split(',')
       : undefined;
@@ -457,11 +471,13 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
     this.setState({ loading: true });
 
     return this.fetchSecurityHotspots()
-      .then(({ hotspots, paging }) => {
-        if (!this.mounted) {
+      .then((components) => {
+        if (!this.mounted || components === undefined) {
           return;
         }
 
+        const { hotspots, paging } = components;
+
         this.setState({
           hotspots,
           hotspotsPageIndex: 1,
@@ -487,6 +503,9 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
   };
 
   handleShowAllHotspots = () => {
+    if (this.props.component === undefined) {
+      return;
+    }
     this.props.router.push({
       pathname: this.props.location.pathname,
       query: {
@@ -518,8 +537,7 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
     )
       .then((hotspotPages) => {
         const allHotspots = flatMap(hotspotPages, 'hotspots');
-
-        const { paging } = hotspotPages[hotspotPages.length - 1];
+        const { paging } = hotspotPages[hotspotPages.length - 1]!;
 
         const nextHotspot = allHotspots[Math.min(index, allHotspots.length - 1)];
 
@@ -539,11 +557,13 @@ export class SecurityHotspotsApp extends React.PureComponent<Props, State> {
     this.setState({ loadingMore: true });
 
     return this.fetchSecurityHotspots(hotspotPages + 1)
-      .then(({ hotspots: additionalHotspots }) => {
-        if (!this.mounted) {
+      .then((components) => {
+        if (!this.mounted || components === undefined) {
           return;
         }
 
+        const { hotspots: additionalHotspots } = components;
+
         this.setState({
           hotspots: [...hotspots, ...additionalHotspots],
           hotspotsPageIndex: hotspotPages + 1,
@@ -630,6 +650,7 @@ export default withRouter(
         withIndexationGuard({
           Component: SecurityHotspotsApp,
           showIndexationMessage: ({ component }) =>
+            component !== undefined &&
             !!(component.qualifier === ComponentQualifier.Application && component.needIssueSync),
         }),
       ),
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx
index 9d64bf4a634..921187e0374 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/SecurityHotspotsAppRenderer.tsx
@@ -53,7 +53,7 @@ import HotspotViewer from './components/HotspotViewer';
 
 export interface SecurityHotspotsAppRendererProps {
   branchLike?: BranchLike;
-  component: Component;
+  component?: Component;
   filterByCWE?: string;
   filterByCategory?: {
     category: string;
@@ -106,10 +106,13 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe
     standards,
   } = props;
 
-  const isProject = component.qualifier === ComponentQualifier.Project;
-
   const { top: topScroll } = useFollowScroll();
 
+  if (component === undefined) {
+    return null;
+  }
+
+  const isProject = component.qualifier === ComponentQualifier.Project;
   const distanceFromBottom = topScroll + window.innerHeight - document.body.clientHeight;
 
   const footerVisibleHeight =