SONAR-10203 Scroll back to issue box when clicking on the Issue message (#25)

3 files changed, 23 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.tsx b/server/sonar-web/src/main/js/apps/issues/components/App.tsx
index 84be3d5fc47..8eb5c82a6a9 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/App.tsx
@@ -346,7 +346,11 @@ export default class App extends React.PureComponent<Props, State> {
       }
     };
     if (this.state.openIssue) {
-      this.context.router.replace(path);
+      if (path.query.open && path.query.open === this.state.openIssue.key) {
+        this.scrollToSelectedIssue();
+      } else {
+        this.context.router.replace(path);
+      }
     } else {
       this.context.router.push(path);
     }
diff --git a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx
index 7fa6df1bad8..65f14bb1b24 100644
--- a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssueBox.tsx
@@ -79,16 +79,23 @@ export default class ConciseIssueBox extends React.PureComponent<Props> {
   render() {
     const { issue, selected } = this.props;
 
-    const clickAttributes = selected
+    const clickAttributesMain = selected
       ? {}
       : { onClick: this.handleClick, role: 'listitem', tabIndex: 0 };
 
+    const clickAttributesTitle = selected
+      ? { onClick: this.handleClick, role: 'listitem', tabIndex: 0 }
+      : {};
+
     return (
       <div
         className={classNames('concise-issue-box', 'clearfix', { selected })}
         ref={node => (this.rootElement = node)}
-        {...clickAttributes}>
-        <div className="concise-issue-box-message" ref={node => (this.messageElement = node)}>
+        {...clickAttributesMain}>
+        <div
+          className="concise-issue-box-message"
+          {...clickAttributesTitle}
+          ref={node => (this.messageElement = node)}>
           {issue.message}
         </div>
         <div className="concise-issue-box-attributes">
diff --git a/server/sonar-web/src/main/js/apps/issues/styles.css b/server/sonar-web/src/main/js/apps/issues/styles.css
index c4ceec2a97d..9a285c2c33e 100644
--- a/server/sonar-web/src/main/js/apps/issues/styles.css
+++ b/server/sonar-web/src/main/js/apps/issues/styles.css
@@ -95,6 +95,14 @@
   font-weight: bold;
 }
 
+.concise-issue-box-message:focus {
+  outline: none;
+}
+
+.concise-issue-box.selected .concise-issue-box-message {
+  cursor: pointer;
+}
+
 .concise-issue-box-attributes {
   margin-top: 8px;
   line-height: 16px;