SONAR-11830 Don't show empty cell on projects and applications

There are no individual files on applications and portfolios. Hence,
they can never be pinned. Because of this, we can remove the empty cell
at the start of each row.

6 files changed, 44 insertions, 23 deletions

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 6391a622928..52b01fc1436 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
@@ -27,6 +27,7 @@ import { withScrollTo } from '../../../components/hoc/withScrollTo';
 
 interface Props {
   branchLike?: T.BranchLike;
+  canBePinned?: boolean;
   canBrowse?: boolean;
   component: T.ComponentMeasure;
   metrics: T.Metric[];
@@ -39,6 +40,7 @@ export class Component extends React.PureComponent<Props> {
   render() {
     const {
       branchLike,
+      canBePinned = true,
       canBrowse = false,
       component,
       metrics,
@@ -52,21 +54,23 @@ export class Component extends React.PureComponent<Props> {
     return (
       <tr className={classNames({ selected })}>
         <td className="blank" />
-        <td className="thin nowrap">
-          <span className="spacer-right">
+        {canBePinned && (
+          <td className="thin nowrap">
             {isFile && (
-              <WorkspaceContext.Consumer>
-                {({ openComponent }) => (
-                  <ComponentPin
-                    branchLike={branchLike}
-                    component={component}
-                    openComponent={openComponent}
-                  />
-                )}
-              </WorkspaceContext.Consumer>
+              <span className="spacer-right">
+                <WorkspaceContext.Consumer>
+                  {({ openComponent }) => (
+                    <ComponentPin
+                      branchLike={branchLike}
+                      component={component}
+                      openComponent={openComponent}
+                    />
+                  )}
+                </WorkspaceContext.Consumer>
+              </span>
             )}
-          </span>
-        </td>
+          </td>
+        )}
         <td className="code-name-cell">
           <ComponentName
             branchLike={branchLike}
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 171e36b9464..41125ef8c33 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
@@ -43,11 +43,14 @@ export class Components extends React.PureComponent<Props> {
     );
     const metrics = metricKeys.map(metric => this.props.metrics[metric]);
     const colSpan = metrics.length + 4;
+    const canBePinned = baseComponent && !['APP', 'VW', 'SVW'].includes(baseComponent.qualifier);
+
     return (
       <table className="data boxed-padding zebra">
         {baseComponent && (
           <ComponentsHeader
             baseComponent={baseComponent}
+            canBePinned={canBePinned}
             metrics={metricKeys}
             rootComponent={rootComponent}
           />
@@ -56,6 +59,7 @@ export class Components extends React.PureComponent<Props> {
           <tbody>
             <Component
               branchLike={branchLike}
+              canBePinned={canBePinned}
               component={baseComponent}
               key={baseComponent.key}
               metrics={metrics}
@@ -72,6 +76,7 @@ export class Components extends React.PureComponent<Props> {
             components.map((component, index, list) => (
               <Component
                 branchLike={branchLike}
+                canBePinned={canBePinned}
                 canBrowse={true}
                 component={component}
                 key={component.key}
@@ -82,7 +87,7 @@ export class Components extends React.PureComponent<Props> {
               />
             ))
           ) : (
-            <ComponentsEmpty />
+            <ComponentsEmpty canBePinned={canBePinned} />
           )}
 
           <tr className="blank">
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.tsx b/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.tsx
index 3c3e4fab144..6f314ebf25d 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentsEmpty.tsx
@@ -20,10 +20,14 @@
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
 
-export default function ComponentsEmpty() {
+interface Props {
+  canBePinned?: boolean;
+}
+
+export default function ComponentsEmpty({ canBePinned = true }: Props) {
   return (
     <tr>
-      <td />
+      {canBePinned && <td />}
       <td className="note" colSpan={2}>
         {translate('no_results')}
       </td>
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.tsx b/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.tsx
index 81de436c90f..ca8123fa5b8 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentsHeader.tsx
@@ -23,6 +23,7 @@ import { translate } from '../../../helpers/l10n';
 
 interface Props {
   baseComponent?: T.ComponentMeasure;
+  canBePinned?: boolean;
   metrics: string[];
   rootComponent: T.ComponentMeasure;
 }
@@ -34,7 +35,12 @@ const SHORT_NAME_METRICS = [
   'new_duplicated_lines_density'
 ];
 
-export default function ComponentsHeader({ baseComponent, metrics, rootComponent }: Props) {
+export default function ComponentsHeader({
+  baseComponent,
+  canBePinned = true,
+  metrics,
+  rootComponent
+}: Props) {
   const isPortfolio = ['VW', 'SVW'].includes(rootComponent.qualifier);
   let columns: string[] = [];
   if (isPortfolio) {
@@ -54,7 +60,7 @@ export default function ComponentsHeader({ baseComponent, metrics, rootComponent
   return (
     <thead>
       <tr className="code-components-header">
-        <th className="thin nowrap" colSpan={2} />
+        <th className="thin nowrap" colSpan={canBePinned ? 2 : 1} />
         <th />
         {baseComponent &&
           columns.map((column, index) => (
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 d7a9a10ec89..138b237b2e5 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
@@ -9,11 +9,7 @@ exports[`should render correctly 1`] = `
   />
   <td
     className="thin nowrap"
-  >
-    <span
-      className="spacer-right"
-    />
-  </td>
+  />
   <td
     className="code-name-cell"
   >
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 668294412ec..b7df151910c 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
@@ -12,6 +12,7 @@ exports[`renders correctly 1`] = `
         "qualifier": "TRK",
       }
     }
+    canBePinned={true}
     metrics={
       Array [
         "coverage",
@@ -27,6 +28,7 @@ exports[`renders correctly 1`] = `
   />
   <tbody>
     <withScrollTo(Component)
+      canBePinned={true}
       component={
         Object {
           "key": "foo",
@@ -70,6 +72,7 @@ exports[`renders correctly 1`] = `
   </tbody>
   <tbody>
     <withScrollTo(Component)
+      canBePinned={true}
       canBrowse={true}
       component={
         Object {
@@ -161,6 +164,7 @@ exports[`renders correctly for leak 1`] = `
         "qualifier": "TRK",
       }
     }
+    canBePinned={true}
     metrics={Array []}
     rootComponent={
       Object {
@@ -180,6 +184,7 @@ exports[`renders correctly for leak 1`] = `
           "type": "SHORT",
         }
       }
+      canBePinned={true}
       component={
         Object {
           "key": "foo",
@@ -222,6 +227,7 @@ exports[`renders correctly for leak 1`] = `
           "type": "SHORT",
         }
       }
+      canBePinned={true}
       canBrowse={true}
       component={
         Object {