SONAR-11944 Add security hotspots to Code page

server/sonar-web/src/main/js/apps/code/code.css

@@ -56,8 +56,7 @@
 }
 
 .code-components-cell {
-  min-width: 80px;
-  padding-left: 30px !important;
+  padding-left: calc(2 * var(--gridSize)) !important;
   box-sizing: border-box;
 }
 

server/sonar-web/src/main/js/apps/code/components/Components.tsx

@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { intersection } from 'lodash';
 import Component from './Component';
 import ComponentsEmpty from './ComponentsEmpty';
 import ComponentsHeader from './ComponentsHeader';
 import withKeyboardNavigation from '../../../components/hoc/withKeyboardNavigation';
 import { getCodeMetrics } from '../utils';
-import { isDefined } from '../../../helpers/types';
 
 interface Props {
   baseComponent?: T.ComponentMeasure;
@@ -37,8 +37,12 @@ interface Props {
 export class Components extends React.PureComponent<Props> {
   render() {
     const { baseComponent, branchLike, components, rootComponent, selected } = this.props;
-    const metricKeys = getCodeMetrics(rootComponent.qualifier, branchLike);
-    const metrics = metricKeys.map(metric => this.props.metrics[metric]).filter(isDefined);
+    const metricKeys = intersection(
+      getCodeMetrics(rootComponent.qualifier, branchLike),
+      Object.keys(this.props.metrics)
+    );
+    const metrics = metricKeys.map(metric => this.props.metrics[metric]);
+    const colSpan = metrics.length + 4;
     return (
       <table className="data boxed-padding zebra">
         {baseComponent && (
@@ -59,7 +63,7 @@ export class Components extends React.PureComponent<Props> {
             />
             <tr className="blank">
               <td colSpan={3}>&nbsp;</td>
-              <td colSpan={10}>&nbsp;</td>
+              <td colSpan={colSpan}>&nbsp;</td>
             </tr>
           </tbody>
         )}
@@ -83,7 +87,7 @@ export class Components extends React.PureComponent<Props> {
 
           <tr className="blank">
             <td colSpan={3} />
-            <td colSpan={10} />
+            <td colSpan={colSpan} />
           </tr>
         </tbody>
       </table>

server/sonar-web/src/main/js/apps/code/components/__tests__/Component-test.tsx

@@ -0,0 +1,46 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info 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 * as React from 'react';
+import { shallow } from 'enzyme';
+import { Component } from '../Component';
+import { mockComponentMeasure, mockMetric } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+it('should render correctly for a file', () => {
+  expect(shallowRender({ component: mockComponentMeasure(true) })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<Component['props']> = {}) {
+  return shallow(
+    <Component
+      component={mockComponentMeasure(false, {
+        key: 'bar',
+        name: 'Bar',
+        measures: [{ metric: 'bugs', value: '12' }, { metric: 'vulnerabilities', value: '1' }]
+      })}
+      metrics={[mockMetric({ key: 'bugs' }), mockMetric({ key: 'vulnerabilities' })]}
+      rootComponent={mockComponentMeasure()}
+      {...props}
+    />
+  );
+}

server/sonar-web/src/main/js/apps/code/components/__tests__/Components-test.tsx

@@ -46,7 +46,7 @@ it('renders correctly', () => {
 
 it('renders correctly for a search', () => {
   expect(
-    shallow(<Components components={[COMPONENT]} metrics={METRICS} rootComponent={COMPONENT} />)
+    shallow(<Components components={[COMPONENT]} metrics={{}} rootComponent={COMPONENT} />)
   ).toMatchSnapshot();
 });
 

server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Component-test.tsx.snap

@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<tr
+  className=""
+>
+  <td
+    className="blank"
+  />
+  <td
+    className="thin nowrap"
+  >
+    <span
+      className="spacer-right"
+    />
+  </td>
+  <td
+    className="code-name-cell"
+  >
+    <ComponentName
+      canBrowse={false}
+      component={
+        Object {
+          "key": "bar",
+          "measures": Array [
+            Object {
+              "metric": "bugs",
+              "value": "12",
+            },
+            Object {
+              "metric": "vulnerabilities",
+              "value": "1",
+            },
+          ],
+          "name": "Bar",
+          "qualifier": "TRK",
+        }
+      }
+      rootComponent={
+        Object {
+          "key": "foo",
+          "measures": Array [
+            Object {
+              "bestValue": false,
+              "metric": "bugs",
+              "value": "12",
+            },
+          ],
+          "name": "Foo",
+          "qualifier": "TRK",
+        }
+      }
+    />
+  </td>
+  <td
+    className="thin nowrap text-right"
+    key="bugs"
+  >
+    <div
+      className="code-components-cell"
+    >
+      <ComponentMeasure
+        component={
+          Object {
+            "key": "bar",
+            "measures": Array [
+              Object {
+                "metric": "bugs",
+                "value": "12",
+              },
+              Object {
+                "metric": "vulnerabilities",
+                "value": "1",
+              },
+            ],
+            "name": "Bar",
+            "qualifier": "TRK",
+          }
+        }
+        metric={
+          Object {
+            "id": "coverage",
+            "key": "bugs",
+            "name": "Coverage",
+            "type": "PERCENT",
+          }
+        }
+      />
+    </div>
+  </td>
+  <td
+    className="thin nowrap text-right"
+    key="vulnerabilities"
+  >
+    <div
+      className="code-components-cell"
+    >
+      <ComponentMeasure
+        component={
+          Object {
+            "key": "bar",
+            "measures": Array [
+              Object {
+                "metric": "bugs",
+                "value": "12",
+              },
+              Object {
+                "metric": "vulnerabilities",
+                "value": "1",
+              },
+            ],
+            "name": "Bar",
+            "qualifier": "TRK",
+          }
+        }
+        metric={
+          Object {
+            "id": "coverage",
+            "key": "vulnerabilities",
+            "name": "Coverage",
+            "type": "PERCENT",
+          }
+        }
+      />
+    </div>
+  </td>
+  <td
+    className="blank"
+  />
+</tr>
+`;
+
+exports[`should render correctly for a file 1`] = `
+<tr
+  className=""
+>
+  <td
+    className="blank"
+  />
+  <td
+    className="thin nowrap"
+  >
+    <span
+      className="spacer-right"
+    >
+      <ContextConsumer>
+        <Component />
+      </ContextConsumer>
+    </span>
+  </td>
+  <td
+    className="code-name-cell"
+  >
+    <ComponentName
+      canBrowse={false}
+      component={
+        Object {
+          "key": "foo:src/index.tsx",
+          "measures": Array [
+            Object {
+              "bestValue": false,
+              "metric": "bugs",
+              "value": "1",
+            },
+          ],
+          "name": "index.tsx",
+          "path": "src/index.tsx",
+          "qualifier": "FIL",
+        }
+      }
+      rootComponent={
+        Object {
+          "key": "foo",
+          "measures": Array [
+            Object {
+              "bestValue": false,
+              "metric": "bugs",
+              "value": "12",
+            },
+          ],
+          "name": "Foo",
+          "qualifier": "TRK",
+        }
+      }
+    />
+  </td>
+  <td
+    className="thin nowrap text-right"
+    key="bugs"
+  >
+    <div
+      className="code-components-cell"
+    >
+      <ComponentMeasure
+        component={
+          Object {
+            "key": "foo:src/index.tsx",
+            "measures": Array [
+              Object {
+                "bestValue": false,
+                "metric": "bugs",
+                "value": "1",
+              },
+            ],
+            "name": "index.tsx",
+            "path": "src/index.tsx",
+            "qualifier": "FIL",
+          }
+        }
+        metric={
+          Object {
+            "id": "coverage",
+            "key": "bugs",
+            "name": "Coverage",
+            "type": "PERCENT",
+          }
+        }
+      />
+    </div>
+  </td>
+  <td
+    className="thin nowrap text-right"
+    key="vulnerabilities"
+  >
+    <div
+      className="code-components-cell"
+    >
+      <ComponentMeasure
+        component={
+          Object {
+            "key": "foo:src/index.tsx",
+            "measures": Array [
+              Object {
+                "bestValue": false,
+                "metric": "bugs",
+                "value": "1",
+              },
+            ],
+            "name": "index.tsx",
+            "path": "src/index.tsx",
+            "qualifier": "FIL",
+          }
+        }
+        metric={
+          Object {
+            "id": "coverage",
+            "key": "vulnerabilities",
+            "name": "Coverage",
+            "type": "PERCENT",
+          }
+        }
+      />
+    </div>
+  </td>
+  <td
+    className="blank"
+  />
+</tr>
+`;

server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap

@@ -14,12 +14,7 @@ exports[`renders correctly 1`] = `
     }
     metrics={
       Array [
-        "ncloc",
-        "bugs",
-        "vulnerabilities",
-        "code_smells",
         "coverage",
-        "duplicated_lines_density",
       ]
     }
     rootComponent={
@@ -67,7 +62,7 @@ exports[`renders correctly 1`] = `
          
       </td>
       <td
-        colSpan={10}
+        colSpan={5}
       >
          
       </td>
@@ -109,7 +104,7 @@ exports[`renders correctly 1`] = `
         colSpan={3}
       />
       <td
-        colSpan={10}
+        colSpan={5}
       />
     </tr>
   </tbody>
@@ -131,16 +126,7 @@ exports[`renders correctly for a search 1`] = `
         }
       }
       key="foo"
-      metrics={
-        Array [
-          Object {
-            "id": "1",
-            "key": "coverage",
-            "name": "Coverage",
-            "type": "PERCENT",
-          },
-        ]
-      }
+      metrics={Array []}
       rootComponent={
         Object {
           "key": "foo",
@@ -156,7 +142,7 @@ exports[`renders correctly for a search 1`] = `
         colSpan={3}
       />
       <td
-        colSpan={10}
+        colSpan={4}
       />
     </tr>
   </tbody>
@@ -175,16 +161,7 @@ exports[`renders correctly for leak 1`] = `
         "qualifier": "TRK",
       }
     }
-    metrics={
-      Array [
-        "new_lines",
-        "bugs",
-        "vulnerabilities",
-        "code_smells",
-        "new_coverage",
-        "new_duplicated_lines_density",
-      ]
-    }
+    metrics={Array []}
     rootComponent={
       Object {
         "key": "foo",
@@ -229,7 +206,7 @@ exports[`renders correctly for leak 1`] = `
          
       </td>
       <td
-        colSpan={10}
+        colSpan={4}
       >
          
       </td>
@@ -270,7 +247,7 @@ exports[`renders correctly for leak 1`] = `
         colSpan={3}
       />
       <td
-        colSpan={10}
+        colSpan={4}
       />
     </tr>
   </tbody>

server/sonar-web/src/main/js/apps/code/utils.ts

@@ -33,6 +33,7 @@ const METRICS = [
   'bugs',
   'vulnerabilities',
   'code_smells',
+  'security_hotspots',
   'coverage',
   'duplicated_lines_density'
 ];
@@ -52,6 +53,7 @@ const LEAK_METRICS = [
   'bugs',
   'vulnerabilities',
   'code_smells',
+  'security_hotspots',
   'new_coverage',
   'new_duplicated_lines_density'
 ];