SONAR-13273 Improve folder exploration

6 files changed, 173 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/code/code.css b/server/sonar-web/src/main/js/apps/code/code.css
index ced158d3a9e..734b3128f51 100644
--- a/server/sonar-web/src/main/js/apps/code/code.css
+++ b/server/sonar-web/src/main/js/apps/code/code.css
@@ -88,3 +88,14 @@
 table > thead > tr.code-components-header > th {
   vertical-align: middle;
 }
+
+.code-child-component-icon {
+  display: inline-block;
+  border-left: 1px solid var(--secondFontColor);
+  border-bottom: 1px solid var(--secondFontColor);
+  margin-left: 8px;
+  margin-bottom: 8px;
+  margin-right: 4px;
+  height: 8px;
+  width: 4px;
+}
diff --git a/server/sonar-web/src/main/js/apps/code/components/Component.tsx b/server/sonar-web/src/main/js/apps/code/components/Component.tsx
index af3ec780240..d902d22e2c8 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Component.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/Component.tsx
@@ -31,6 +31,7 @@ interface Props {
   canBePinned?: boolean;
   canBrowse?: boolean;
   component: T.ComponentMeasure;
+  hasBaseComponent: boolean;
   metrics: T.Metric[];
   previous?: T.ComponentMeasure;
   rootComponent: T.ComponentMeasure;
@@ -44,6 +45,7 @@ export class Component extends React.PureComponent<Props> {
       canBePinned = true,
       canBrowse = false,
       component,
+      hasBaseComponent,
       metrics,
       previous,
       rootComponent,
@@ -73,6 +75,7 @@ export class Component extends React.PureComponent<Props> {
           </td>
         )}
         <td className="code-name-cell">
+          {hasBaseComponent && <div className="code-child-component-icon" />}
           <ComponentName
             branchLike={branchLike}
             canBrowse={canBrowse}
diff --git a/server/sonar-web/src/main/js/apps/code/components/Components.tsx b/server/sonar-web/src/main/js/apps/code/components/Components.tsx
index 61fa64c9828..5191e9d484a 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Components.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/Components.tsx
@@ -35,6 +35,8 @@ interface Props {
   selected?: T.ComponentMeasure;
 }
 
+const BASE_COLUMN_COUNT = 4;
+
 export class Components extends React.PureComponent<Props> {
   render() {
     const { baseComponent, branchLike, components, rootComponent, selected } = this.props;
@@ -43,7 +45,7 @@ export class Components extends React.PureComponent<Props> {
       Object.keys(this.props.metrics)
     );
     const metrics = metricKeys.map(metric => this.props.metrics[metric]);
-    const colSpan = metrics.length + 4;
+    const colSpan = metrics.length + BASE_COLUMN_COUNT;
     const canBePinned = baseComponent && !['APP', 'VW', 'SVW'].includes(baseComponent.qualifier);
 
     return (
@@ -63,13 +65,18 @@ export class Components extends React.PureComponent<Props> {
                 branchLike={branchLike}
                 canBePinned={canBePinned}
                 component={baseComponent}
+                hasBaseComponent={false}
                 key={baseComponent.key}
                 metrics={metrics}
                 rootComponent={rootComponent}
               />
               <tr className="blank">
-                <td colSpan={3}>&nbsp;</td>
-                <td colSpan={colSpan}>&nbsp;</td>
+                <td colSpan={3}>
+                  <hr className="null-spacer-top" />
+                </td>
+                <td colSpan={colSpan}>
+                  <hr className="null-spacer-top" />
+                </td>
               </tr>
             </>
           )}
@@ -81,6 +88,7 @@ export class Components extends React.PureComponent<Props> {
                 canBePinned={canBePinned}
                 canBrowse={true}
                 component={component}
+                hasBaseComponent={baseComponent !== undefined}
                 key={component.key}
                 metrics={metrics}
                 previous={index > 0 ? list[index - 1] : undefined}
diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/Component-test.tsx b/server/sonar-web/src/main/js/apps/code/components/__tests__/Component-test.tsx
index e9e7db22b99..42c7322c089 100644
--- a/server/sonar-web/src/main/js/apps/code/components/__tests__/Component-test.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/__tests__/Component-test.tsx
@@ -24,6 +24,7 @@ import { Component } from '../Component';
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ hasBaseComponent: true })).toMatchSnapshot('with base component');
 });
 
 it('should render correctly for a file', () => {
@@ -41,6 +42,7 @@ function shallowRender(props: Partial<Component['props']> = {}) {
           { metric: 'vulnerabilities', value: '1' }
         ]
       })}
+      hasBaseComponent={false}
       metrics={[mockMetric({ key: 'bugs' }), mockMetric({ key: 'vulnerabilities' })]}
       rootComponent={mockComponentMeasure()}
       {...props}
diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Component-test.tsx.snap b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Component-test.tsx.snap
index 2bfb8507609..176787f33f6 100644
--- a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Component-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Component-test.tsx.snap
@@ -253,3 +253,132 @@ exports[`should render correctly for a file 1`] = `
   />
 </tr>
 `;
+
+exports[`should render correctly: with base component 1`] = `
+<tr
+  className=""
+>
+  <td
+    className="blank"
+  />
+  <td
+    className="thin nowrap"
+  />
+  <td
+    className="code-name-cell"
+  >
+    <div
+      className="code-child-component-icon"
+    />
+    <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": "bugs",
+            "key": "bugs",
+            "name": "Bugs",
+            "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": "vulnerabilities",
+            "key": "vulnerabilities",
+            "name": "Vulnerabilities",
+            "type": "PERCENT",
+          }
+        }
+      />
+    </div>
+  </td>
+  <td
+    className="blank"
+  />
+</tr>
+`;
diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap
index e96434724f9..3a2adbdcace 100644
--- a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/Components-test.tsx.snap
@@ -36,6 +36,7 @@ exports[`renders correctly 1`] = `
           "qualifier": "TRK",
         }
       }
+      hasBaseComponent={false}
       key="foo"
       metrics={
         Array [
@@ -61,12 +62,16 @@ exports[`renders correctly 1`] = `
       <td
         colSpan={3}
       >
-         
+        <hr
+          className="null-spacer-top"
+        />
       </td>
       <td
         colSpan={5}
       >
-         
+        <hr
+          className="null-spacer-top"
+        />
       </td>
     </tr>
     <withScrollTo(Component)
@@ -79,6 +84,7 @@ exports[`renders correctly 1`] = `
           "qualifier": "TRK",
         }
       }
+      hasBaseComponent={true}
       key="foo"
       metrics={
         Array [
@@ -126,6 +132,7 @@ exports[`renders correctly for a search 1`] = `
           "qualifier": "TRK",
         }
       }
+      hasBaseComponent={false}
       key="foo"
       metrics={Array []}
       rootComponent={
@@ -194,6 +201,7 @@ exports[`renders correctly for leak 1`] = `
           "qualifier": "TRK",
         }
       }
+      hasBaseComponent={false}
       key="foo"
       metrics={
         Array [
@@ -219,12 +227,16 @@ exports[`renders correctly for leak 1`] = `
       <td
         colSpan={3}
       >
-         
+        <hr
+          className="null-spacer-top"
+        />
       </td>
       <td
         colSpan={5}
       >
-         
+        <hr
+          className="null-spacer-top"
+        />
       </td>
     </tr>
     <withScrollTo(Component)
@@ -245,6 +257,7 @@ exports[`renders correctly for leak 1`] = `
           "qualifier": "TRK",
         }
       }
+      hasBaseComponent={true}
       key="foo"
       metrics={
         Array [