From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Mon, 12 Mar 2018 15:22:14 +0000 (+0100)
Subject: SONAR-10379 Improve issue permalink UX (#3139)
X-Git-Tag: 7.5~1555
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=9955fbbea60109c203cde83c110ffd4524a33422;p=sonarqube.git

SONAR-10379 Improve issue permalink UX (#3139)
---

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
index 7771dce09bb..a52d9a31a51 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
@@ -148,6 +148,8 @@ export default class ComponentNavMenu extends React.PureComponent<Props> {
   }
 
   renderIssuesLink() {
+    const { location = { pathname: '' } } = this.props;
+    const isIssuesActive = location.pathname.startsWith('project/issues');
     return (
       <li>
         <Link
@@ -159,6 +161,7 @@ export default class ComponentNavMenu extends React.PureComponent<Props> {
               resolved: 'false'
             }
           }}
+          className={classNames({ active: isIssuesActive })}
           activeClassName="active">
           {translate('issues.page')}
         </Link>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap
index 592b1d44eee..22c56c67930 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.tsx.snap
@@ -23,6 +23,7 @@ exports[`should work for all qualifiers 1`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -216,6 +217,7 @@ exports[`should work for all qualifiers 2`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -352,6 +354,7 @@ exports[`should work for all qualifiers 3`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -487,6 +490,7 @@ exports[`should work for all qualifiers 4`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -583,6 +587,7 @@ exports[`should work for all qualifiers 5`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -718,6 +723,7 @@ exports[`should work for long-living branches 1`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -814,6 +820,7 @@ exports[`should work for long-living branches 2`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -892,6 +899,7 @@ exports[`should work for short-living branches 1`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -952,6 +960,7 @@ exports[`should work with extensions 1`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -1203,6 +1212,7 @@ exports[`should work with multiple extensions 1`] = `
   <li>
     <Link
       activeClassName="active"
+      className=""
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.js b/server/sonar-web/src/main/js/apps/issues/components/App.js
index 2c7181ff027..bc6cf9826ff 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/App.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/App.js
@@ -237,7 +237,9 @@ export default class App extends React.PureComponent {
       return false;
     });
     key('left', 'issues', () => {
-      this.closeIssue();
+      if (this.state.query.issues.length !== 1) {
+        this.closeIssue();
+      }
       return false;
     });
     window.addEventListener('keydown', this.handleKeyDown);
@@ -842,11 +844,12 @@ export default class App extends React.PureComponent {
   }
 
   renderConciseIssuesList() {
-    const { issues, paging } = this.state;
+    const { issues, paging, query } = this.state;
 
     return (
       <div className="layout-page-filters">
         <ConciseIssuesListHeader
+          displayBackButton={query.issues.length !== 1}
           loading={this.state.loading}
           onBackClick={this.closeIssue}
           onReload={this.handleReloadAndOpenFirst}
diff --git a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssuesListHeader.js b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssuesListHeader.js
index 4a545f76db0..3c9896fdf8e 100644
--- a/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssuesListHeader.js
+++ b/server/sonar-web/src/main/js/apps/issues/conciseIssuesList/ConciseIssuesListHeader.js
@@ -29,18 +29,19 @@ type Props = {|
   loading: boolean,
   onBackClick: () => void,
   onReload: () => void,
+  displayBackButton?: boolean,
   paging?: Paging,
   selectedIndex: ?number
 |};
 */
 
 export default function ConciseIssuesListHeader(props /*: Props */) {
-  const { paging, selectedIndex } = props;
+  const { displayBackButton = true, paging, selectedIndex } = props;
 
   return (
     <header className="layout-page-header-panel concise-issues-list-header">
       <div className="layout-page-header-panel-inner concise-issues-list-header-inner">
-        <BackButton className="pull-left" onClick={props.onBackClick} />
+        {displayBackButton && <BackButton className="pull-left" onClick={props.onBackClick} />}
         {props.loading ? (
           <i className="spinner pull-right" />
         ) : (