SONAR-8552 fix component navigation

3 files changed, 180 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.js b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.js
index 205e203b3d5..9c5d53f63e1 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.js
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.js
@@ -57,7 +57,7 @@ export default class ComponentNavMenu extends React.Component {
   renderLink (url, title, highlightUrl = url) {
     const fullUrl = window.baseUrl + url;
     const isActive = typeof highlightUrl === 'string' ?
-    window.location.pathname.indexOf(window.baseUrl + highlightUrl) === 0 :
+        window.location.pathname.indexOf(window.baseUrl + highlightUrl) === 0 :
         highlightUrl(fullUrl);
 
     return (
@@ -296,16 +296,26 @@ export default class ComponentNavMenu extends React.Component {
     );
   }
 
+  renderExtension = ({ id, name }) => {
+    return (
+        <li key={id}>
+          <Link to={{ pathname: `/project/extension/${id}`, query: { id: this.props.component.key } }}
+                activeClassName="active">
+            {name}
+          </Link>
+        </li>
+    );
+  };
+
   renderExtensions () {
     const extensions = this.props.conf.extensions || [];
-    return extensions.map(e => this.renderLink(e.url, e.name, e.url));
+    return extensions.map(this.renderExtension);
   }
 
   renderTools () {
     const extensions = this.props.component.extensions || [];
     const withoutGovernance = extensions.filter(ext => ext.name !== 'Governance');
-    const tools = withoutGovernance
-        .map(extension => this.renderLink(extension.url, extension.name));
+    const tools = withoutGovernance.map(this.renderExtension);
 
     if (!tools.length) {
       return null;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMenu-test.js b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMenu-test.js
new file mode 100644
index 00000000000..67fead714c3
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMenu-test.js
@@ -0,0 +1,33 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import ComponentNavMenu from '../ComponentNavMenu';
+
+it('should work with extensions', () => {
+  const component = { key: 'foo' };
+  const conf = {
+    showSettings: true,
+    extensions: [{ id: 'foo', name: 'Foo' }]
+  };
+  const wrapper = shallow(<ComponentNavMenu component={component} conf={conf}/>);
+  expect(toJSON(wrapper)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.js.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.js.snap
new file mode 100644
index 00000000000..c76ff04de72
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMenu-test.js.snap
@@ -0,0 +1,133 @@
+exports[`test should work with extensions 1`] = `
+<ul
+  className="nav navbar-nav nav-tabs">
+  <li>
+    <Link
+      activeClassName="active"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/dashboard",
+          "query": Object {
+            "id": "foo",
+          },
+        }
+      }>
+      <i
+        className="icon-home" />
+    </Link>
+  </li>
+  <li>
+    <Link
+      activeClassName="active"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/component_issues",
+          "query": Object {
+            "id": "foo",
+          },
+        }
+      }>
+      issues.page
+    </Link>
+  </li>
+  <li>
+    <Link
+      activeClassName="active"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/component_measures",
+          "query": Object {
+            "id": "foo",
+          },
+        }
+      }>
+      layout.measures
+    </Link>
+  </li>
+  <li>
+    <Link
+      activeClassName="active"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/code",
+          "query": Object {
+            "id": "foo",
+          },
+        }
+      }>
+      code.page
+    </Link>
+  </li>
+  <li>
+    <Link
+      activeClassName="active"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/project/activity",
+          "query": Object {
+            "id": "foo",
+          },
+        }
+      }>
+      project_activity.page
+    </Link>
+  </li>
+  <li
+    className="dropdown">
+    <a
+      className="dropdown-toggle navbar-admin-link"
+      data-toggle="dropdown"
+      href="#">
+      layout.settings
+       
+      <i
+        className="icon-dropdown" />
+    </a>
+    <ul
+      className="dropdown-menu">
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/settings",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }>
+          project_settings.page
+        </Link>
+      </li>
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/foo",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }>
+          Foo
+        </Link>
+      </li>
+    </ul>
+  </li>
+</ul>
+`;