SONAR-10489 improve navigation between locations (#57)

9 files changed, 35 insertions, 24 deletions

diff --git a/server/sonar-web/src/main/js/app/types.ts b/server/sonar-web/src/main/js/app/types.ts
index 8155161aca0..6a0b0c2df61 100644
--- a/server/sonar-web/src/main/js/app/types.ts
+++ b/server/sonar-web/src/main/js/app/types.ts
@@ -152,7 +152,7 @@ export interface FacetValue {
 export interface FlowLocation {
   component: string;
   componentName?: string;
-  msg: string;
+  msg?: string;
   textRange: TextRange;
 }
 
diff --git a/server/sonar-web/src/main/js/apps/issues/actions.ts b/server/sonar-web/src/main/js/apps/issues/actions.ts
index f814bbf5b00..90a6897177f 100644
--- a/server/sonar-web/src/main/js/apps/issues/actions.ts
+++ b/server/sonar-web/src/main/js/apps/issues/actions.ts
@@ -18,17 +18,23 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { State } from './components/App';
+import { allLocationsEmpty } from './utils';
 
 export function enableLocationsNavigator(state: State): Partial<State> | undefined {
   const { openIssue, selectedLocationIndex } = state;
   if (openIssue && (openIssue.secondaryLocations.length > 0 || openIssue.flows.length > 0)) {
-    return {
-      locationsNavigator: true,
-      selectedFlowIndex: state.selectedFlowIndex || (openIssue.flows.length > 0 ? 0 : undefined),
-      // Also reset index = -1 to 0, we don't want to start on the issue when enabling the location navigator
-      selectedLocationIndex:
-        !selectedLocationIndex || selectedLocationIndex < 0 ? 0 : selectedLocationIndex
-    };
+    const selectedFlowIndex =
+      state.selectedFlowIndex || (openIssue.flows.length > 0 ? 0 : undefined);
+
+    if (!allLocationsEmpty(openIssue, selectedFlowIndex)) {
+      return {
+        locationsNavigator: true,
+        selectedFlowIndex,
+        // Also reset index = -1 to 0, we don't want to start on the issue when enabling the location navigator
+        selectedLocationIndex:
+          !selectedLocationIndex || selectedLocationIndex < 0 ? 0 : selectedLocationIndex
+      };
+    }
   }
   return undefined;
 }
diff --git a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueLocationsNavigatorLocation.tsx b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueLocationsNavigatorLocation.tsx
index 1fe90aa029e..a9f0d9e0bc1 100644
--- a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueLocationsNavigatorLocation.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueLocationsNavigatorLocation.tsx
@@ -23,7 +23,7 @@ import LocationMessage from '../../../components/common/LocationMessage';
 
 interface Props {
   index: number;
-  message: string;
+  message: string | undefined;
   onClick: (index: number) => void;
   scroll: (element: Element) => void;
   selected: boolean;
diff --git a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/CrossFileLocationsNavigator.tsx b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/CrossFileLocationsNavigator.tsx
index a2826a6b47b..295ffe694fa 100644
--- a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/CrossFileLocationsNavigator.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/CrossFileLocationsNavigator.tsx
@@ -108,7 +108,7 @@ export default class CrossFileLocationsNavigator extends React.PureComponent<Pro
     return groups;
   };
 
-  renderLocation = (index: number, message: string) => {
+  renderLocation = (index: number, message: string | undefined) => {
     return (
       <ConciseIssueLocationsNavigatorLocation
         index={index}
diff --git a/server/sonar-web/src/main/js/apps/issues/utils.ts b/server/sonar-web/src/main/js/apps/issues/utils.ts
index f148547d9e1..0423bc1ee64 100644
--- a/server/sonar-web/src/main/js/apps/issues/utils.ts
+++ b/server/sonar-web/src/main/js/apps/issues/utils.ts
@@ -256,3 +256,10 @@ export function getSelectedLocation(
     return undefined;
   }
 }
+
+export function allLocationsEmpty(
+  issue: Pick<Issue, 'flows' | 'secondaryLocations'>,
+  selectedFlowIndex: number | undefined
+) {
+  return getLocations(issue, selectedFlowIndex).every(location => !location.msg);
+}
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 629b4d86971..35e97cf8847 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
@@ -66,7 +66,7 @@ interface Props {
   // `undefined` elements mean they are located in a different file,
   // but kept to maintaint the location indexes
   highlightedLocations?: (FlowLocation | undefined)[];
-  highlightedLocationMessage?: { index: number; text: string };
+  highlightedLocationMessage?: { index: number; text: string | undefined };
   loadComponent?: (
     component: string,
     branchLike: BranchLike | undefined
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
index ef1abb5af32..21dad198aa1 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
@@ -53,7 +53,7 @@ interface Props {
   hasSourcesAfter: boolean;
   hasSourcesBefore: boolean;
   highlightedLine: number | undefined;
-  highlightedLocationMessage: { index: number; text: string } | undefined;
+  highlightedLocationMessage: { index: number; text: string | undefined } | undefined;
   // `undefined` elements mean they are located in a different file,
   // but kept to maintain the location indexes
   highlightedLocations: (FlowLocation | undefined)[] | undefined;
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx
index c6fef8178b3..188369030f9 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.tsx
@@ -43,7 +43,7 @@ interface Props {
   duplicationsCount: number;
   filtered: boolean | undefined;
   highlighted: boolean;
-  highlightedLocationMessage: { index: number; text: string } | undefined;
+  highlightedLocationMessage: { index: number; text: string | undefined } | undefined;
   highlightedSymbols: string[] | undefined;
   issueLocations: LinearIssueLocation[];
   issuePopup: { issue: string; name: string } | undefined;
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
index 9becbdeb876..b3ac1a77358 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
@@ -35,7 +35,7 @@ interface Props {
   displayIssueLocationsCount?: boolean;
   displayIssueLocationsLink?: boolean;
   displayLocationMarkers?: boolean;
-  highlightedLocationMessage: { index: number; text: string } | undefined;
+  highlightedLocationMessage: { index: number; text: string | undefined } | undefined;
   highlightedSymbols: string[] | undefined;
   issueLocations: LinearIssueLocation[];
   issuePopup: { issue: string; name: string } | undefined;
@@ -138,19 +138,18 @@ export default class LineCode extends React.PureComponent<Props, State> {
     }
   };
 
-  renderMarker(index: number, message: string | undefined, leading = false) {
+  renderMarker(index: number, message: string | undefined, selected: boolean, leading: boolean) {
     const { onLocationSelect } = this.props;
     const onClick = onLocationSelect ? () => onLocationSelect(index) : undefined;
-    const ref =
-      message != null ? (node: HTMLElement | null) => (this.activeMarkerNode = node) : undefined;
+    const ref = selected ? (node: HTMLElement | null) => (this.activeMarkerNode = node) : undefined;
     return (
       <LocationIndex
         key={`marker-${index}`}
         leading={leading}
         onClick={onClick}
-        selected={message != null}>
+        selected={selected}>
         <span ref={ref}>{index + 1}</span>
-        {message != null && <LocationMessage selected={true}>{message}</LocationMessage>}
+        {message && <LocationMessage selected={true}>{message}</LocationMessage>}
       </LocationIndex>
     );
   }
@@ -206,11 +205,10 @@ export default class LineCode extends React.PureComponent<Props, State> {
     tokens.forEach((token, index) => {
       if (this.props.displayLocationMarkers && token.markers.length > 0) {
         token.markers.forEach(marker => {
-          const message =
-            highlightedLocationMessage != null && highlightedLocationMessage.index === marker
-              ? highlightedLocationMessage.text
-              : undefined;
-          renderedTokens.push(this.renderMarker(marker, message, leadingMarker));
+          const selected =
+            highlightedLocationMessage !== undefined && highlightedLocationMessage.index === marker;
+          const message = selected ? highlightedLocationMessage!.text : undefined;
+          renderedTokens.push(this.renderMarker(marker, message, selected, leadingMarker));
         });
       }
       renderedTokens.push(