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 7771dce09bb98533bdab8e64b07741e4fef4e6ca..a52d9a31a51251a19c5ba4e463a87684fc34d83d 100644 (file)
--- 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 592b1d44eee911025b867225678ce54c35398b88..22c56c679300d32b09472e2ebf64ab470d5aacb6 100644 (file)
--- 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 2c7181ff027b013f2e88cba29c228c37858cd01a..bc6cf9826ffb61138fe14bb2a7143a104ec5ef90 100644 (file)
--- 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 4a545f76db0de5e7fa09bf18d4292ec1da0723e5..3c9896fdf8e28294378348caba6e7a0aa5179b69 100644 (file)
--- 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" />
         ) : (