SONAR-11970 Update component menu for security reports

3 files changed, 158 insertions, 389 deletions

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 4f779bf27ac..624f83a29bd 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
@@ -161,24 +161,30 @@ export class ComponentNavMenu extends React.PureComponent<Props> {
           <Link
             activeClassName="active"
             to={{
-              pathname: '/project/security_reports/sonarsource_security',
+              pathname: '/project/extension/securityreport/sonarsource_security',
               query: this.getQuery()
             }}>
-            {translate('security_reports.sonarsourceSecurity.page')}
+            {translate('securityreport.sonarsourceSecurity.page')}
           </Link>
         </li>
         <li>
           <Link
             activeClassName="active"
-            to={{ pathname: '/project/security_reports/owasp_top_10', query: this.getQuery() }}>
-            {translate('security_reports.owaspTop10.page')}
+            to={{
+              pathname: '/project/extension/securityreport/owasp_top_10',
+              query: this.getQuery()
+            }}>
+            {translate('securityreport.owaspTop10.page')}
           </Link>
         </li>
         <li>
           <Link
             activeClassName="active"
-            to={{ pathname: '/project/security_reports/sans_top_25', query: this.getQuery() }}>
-            {translate('security_reports.sansTop25.page')}
+            to={{
+              pathname: '/project/extension/securityreport/sans_top_25',
+              query: this.getQuery()
+            }}>
+            {translate('securityreport.sansTop25.page')}
           </Link>
         </li>
       </ul>
@@ -186,16 +192,25 @@ export class ComponentNavMenu extends React.PureComponent<Props> {
   }
 
   renderSecurityReports() {
-    const { branchLike } = this.props;
+    const { branchLike, component } = this.props;
+    const { extensions = [] } = component;
 
     if (isShortLivingBranch(branchLike) || isPullRequest(branchLike)) {
       return null;
     }
 
+    const hasSecurityReportsEnabled = extensions.some(extension =>
+      extension.key.startsWith('securityreport/')
+    );
+
+    if (!hasSecurityReportsEnabled) {
+      return null;
+    }
+
     const { location = { pathname: '' } } = this.props;
-    const isActive = location.pathname.startsWith('/project/security_reports');
+    const isActive = location.pathname.startsWith('/project/extension/securityreport');
     return (
-      <Dropdown overlay={this.renderSecurityReportsLink()} tagName="li">
+      <Dropdown data-test="security" overlay={this.renderSecurityReportsLink()} tagName="li">
         {({ onToggleClick, open }) => (
           <a
             aria-expanded={open}
@@ -462,14 +477,24 @@ export class ComponentNavMenu extends React.PureComponent<Props> {
 
   renderExtensions() {
     const extensions = this.props.component.extensions || [];
-    if (!extensions.length || (this.props.branchLike && !isMainBranch(this.props.branchLike))) {
+    const withoutSecurityExtension = extensions.filter(
+      extension => !extension.key.startsWith('securityreport/')
+    );
+    if (
+      withoutSecurityExtension.length === 0 ||
+      (this.props.branchLike && !isMainBranch(this.props.branchLike))
+    ) {
       return null;
     }
 
     return (
       <Dropdown
         data-test="extensions"
-        overlay={<ul className="menu">{extensions.map(e => this.renderExtension(e, false))}</ul>}
+        overlay={
+          <ul className="menu">
+            {withoutSecurityExtension.map(e => this.renderExtension(e, false))}
+          </ul>
+        }
         tagName="li">
         {({ onToggleClick, open }) => (
           <a
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMenu-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMenu-test.tsx
index f0a4ea8a71f..7d09bef1ad9 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMenu-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavMenu-test.tsx
@@ -71,6 +71,29 @@ it('should work with multiple extensions', () => {
   expect(wrapper.find('Dropdown[data-test="administration"]')).toMatchSnapshot();
 });
 
+it('should render correctly for security extensions', () => {
+  const component = {
+    ...baseComponent,
+    configuration: {
+      showSettings: true,
+      extensions: [{ key: 'securityreport/foo', name: 'Foo' }, { key: 'bar', name: 'Bar' }]
+    },
+    extensions: [
+      { key: 'securityreport/foo', name: 'ComponentFoo' },
+      { key: 'component-bar', name: 'ComponentBar' }
+    ]
+  };
+  const wrapper = shallow(
+    <ComponentNavMenu
+      appState={{ branchesEnabled: true }}
+      branchLike={mainBranch}
+      component={component}
+    />
+  );
+  expect(wrapper.find('Dropdown[data-test="extensions"]')).toMatchSnapshot();
+  expect(wrapper.find('Dropdown[data-test="security"]')).toMatchSnapshot();
+});
+
 it('should work for short-living branches', () => {
   const branch: T.ShortLivingBranch = {
     isMain: false,
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 34ca59e182e..5a1ee9c8558 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
@@ -1,5 +1,104 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should render correctly for security extensions 1`] = `
+<Dropdown
+  data-test="extensions"
+  overlay={
+    <ul
+      className="menu"
+    >
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/component-bar",
+              "query": Object {
+                "id": "foo",
+                "qualifier": "TRK",
+              },
+            }
+          }
+        >
+          ComponentBar
+        </Link>
+      </li>
+    </ul>
+  }
+  tagName="li"
+>
+  <Component />
+</Dropdown>
+`;
+
+exports[`should render correctly for security extensions 2`] = `
+<Dropdown
+  data-test="security"
+  overlay={
+    <ul
+      className="menu"
+    >
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/securityreport/sonarsource_security",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          securityreport.sonarsourceSecurity.page
+        </Link>
+      </li>
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/securityreport/owasp_top_10",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          securityreport.owaspTop10.page
+        </Link>
+      </li>
+      <li>
+        <Link
+          activeClassName="active"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/project/extension/securityreport/sans_top_25",
+              "query": Object {
+                "id": "foo",
+              },
+            }
+          }
+        >
+          securityreport.sansTop25.page
+        </Link>
+      </li>
+    </ul>
+  }
+  tagName="li"
+>
+  <Component />
+</Dropdown>
+`;
+
 exports[`should work for all qualifiers 1`] = `
 <NavBarTabs>
   <li>
@@ -38,68 +137,6 @@ exports[`should work for all qualifiers 1`] = `
       issues.page
     </Link>
   </li>
-  <Dropdown
-    overlay={
-      <ul
-        className="menu"
-      >
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sonarsource_security",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sonarsourceSecurity.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/owasp_top_10",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.owaspTop10.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sans_top_25",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sansTop25.page
-          </Link>
-        </li>
-      </ul>
-    }
-    tagName="li"
-  >
-    <Component />
-  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -272,68 +309,6 @@ exports[`should work for all qualifiers 2`] = `
       issues.page
     </Link>
   </li>
-  <Dropdown
-    overlay={
-      <ul
-        className="menu"
-      >
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sonarsource_security",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sonarsourceSecurity.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/owasp_top_10",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.owaspTop10.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sans_top_25",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sansTop25.page
-          </Link>
-        </li>
-      </ul>
-    }
-    tagName="li"
-  >
-    <Component />
-  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -455,68 +430,6 @@ exports[`should work for all qualifiers 3`] = `
       issues.page
     </Link>
   </li>
-  <Dropdown
-    overlay={
-      <ul
-        className="menu"
-      >
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sonarsource_security",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sonarsourceSecurity.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/owasp_top_10",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.owaspTop10.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sans_top_25",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sansTop25.page
-          </Link>
-        </li>
-      </ul>
-    }
-    tagName="li"
-  >
-    <Component />
-  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -609,68 +522,6 @@ exports[`should work for all qualifiers 4`] = `
       issues.page
     </Link>
   </li>
-  <Dropdown
-    overlay={
-      <ul
-        className="menu"
-      >
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sonarsource_security",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sonarsourceSecurity.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/owasp_top_10",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.owaspTop10.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sans_top_25",
-                "query": Object {
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sansTop25.page
-          </Link>
-        </li>
-      </ul>
-    }
-    tagName="li"
-  >
-    <Component />
-  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -794,71 +645,6 @@ exports[`should work for long-living branches 1`] = `
       issues.page
     </Link>
   </li>
-  <Dropdown
-    overlay={
-      <ul
-        className="menu"
-      >
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sonarsource_security",
-                "query": Object {
-                  "branch": "release",
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sonarsourceSecurity.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/owasp_top_10",
-                "query": Object {
-                  "branch": "release",
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.owaspTop10.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sans_top_25",
-                "query": Object {
-                  "branch": "release",
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sansTop25.page
-          </Link>
-        </li>
-      </ul>
-    }
-    tagName="li"
-  >
-    <Component />
-  </Dropdown>
   <li>
     <Link
       activeClassName="active"
@@ -956,71 +742,6 @@ exports[`should work for long-living branches 2`] = `
       issues.page
     </Link>
   </li>
-  <Dropdown
-    overlay={
-      <ul
-        className="menu"
-      >
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sonarsource_security",
-                "query": Object {
-                  "branch": "release",
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sonarsourceSecurity.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/owasp_top_10",
-                "query": Object {
-                  "branch": "release",
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.owaspTop10.page
-          </Link>
-        </li>
-        <li>
-          <Link
-            activeClassName="active"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/project/security_reports/sans_top_25",
-                "query": Object {
-                  "branch": "release",
-                  "id": "foo",
-                },
-              }
-            }
-          >
-            security_reports.sansTop25.page
-          </Link>
-        </li>
-      </ul>
-    }
-    tagName="li"
-  >
-    <Component />
-  </Dropdown>
   <li>
     <Link
       activeClassName="active"