SONAR-8975 Fix extensions links when having more than one extension

3 files changed, 295 insertions, 5 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 0b5327f5513..eb43936221b 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
@@ -302,7 +302,7 @@ export default class ComponentNavMenu extends React.PureComponent {
     );
   }
 
-  renderExtension = ({ key, name }, isAdmin = false) => {
+  renderExtension = ({ key, name }, isAdmin) => {
     const pathname = isAdmin ? `/project/admin/extension/${key}` : `/project/extension/${key}`;
     return (
       <li key={key}>
@@ -336,7 +336,7 @@ export default class ComponentNavMenu extends React.PureComponent {
           <i className="icon-dropdown" />
         </a>
         <ul className="dropdown-menu">
-          {withoutGovernance.map(this.renderExtension)}
+          {withoutGovernance.map(e => this.renderExtension(e, false))}
         </ul>
       </li>
     );
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
index 024f2a4a7a0..d1c1da6bc25 100644
--- 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
@@ -24,12 +24,28 @@ import ComponentNavMenu from '../ComponentNavMenu';
 it('should work with extensions', () => {
   const component = {
     key: 'foo',
-    qualifier: 'TRK'
+    qualifier: 'TRK',
+    extensions: [{ key: 'component-foo', name: 'ComponentFoo' }]
   };
   const conf = {
     showSettings: true,
     extensions: [{ key: 'foo', name: 'Foo' }]
   };
-  const wrapper = shallow(<ComponentNavMenu component={component} conf={conf} />);
-  expect(wrapper).toMatchSnapshot();
+  expect(shallow(<ComponentNavMenu component={component} conf={conf} />)).toMatchSnapshot();
+});
+
+it('should work with multiple extensions', () => {
+  const component = {
+    key: 'foo',
+    qualifier: 'TRK',
+    extensions: [
+      { key: 'component-foo', name: 'ComponentFoo' },
+      { key: 'component-bar', name: 'ComponentBar' }
+    ]
+  };
+  const conf = {
+    showSettings: true,
+    extensions: [{ key: 'foo', name: 'Foo' }, { key: 'bar', name: 'Bar' }]
+  };
+  expect(shallow(<ComponentNavMenu component={component} conf={conf} />)).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
index 2bc14b3ac35..9b9a24ab6fe 100644
--- 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
@@ -163,5 +163,279 @@ exports[`should work with extensions 1`] = `
       </li>
     </ul>
   </li>
+  <li
+    className="dropdown"
+  >
+    <a
+      className="dropdown-toggle"
+      data-toggle="dropdown"
+      href="#"
+      id="component-navigation-more"
+    >
+      more
+       
+      <i
+        className="icon-dropdown"
+      />
+    </a>
+    <ul
+      className="dropdown-menu"
+    >
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/component-foo",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          ComponentFoo
+        </Link>
+      </li>
+    </ul>
+  </li>
+</ul>
+`;
+
+exports[`should work with multiple 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": "/project/issues",
+          "query": Object {
+            "id": "foo",
+            "resolved": "false",
+          },
+        }
+      }
+    >
+      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="#"
+      id="component-navigation-admin"
+    >
+      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/admin/extension/foo",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          Foo
+        </Link>
+      </li>
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/admin/extension/bar",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          Bar
+        </Link>
+      </li>
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/deletion",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          deletion.page
+        </Link>
+      </li>
+    </ul>
+  </li>
+  <li
+    className="dropdown"
+  >
+    <a
+      className="dropdown-toggle"
+      data-toggle="dropdown"
+      href="#"
+      id="component-navigation-more"
+    >
+      more
+       
+      <i
+        className="icon-dropdown"
+      />
+    </a>
+    <ul
+      className="dropdown-menu"
+    >
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/component-foo",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          ComponentFoo
+        </Link>
+      </li>
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/component-bar",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          ComponentBar
+        </Link>
+      </li>
+    </ul>
+  </li>
 </ul>
 `;