SONAR-15471 Fix long file name on code page

3 files changed, 137 insertions, 109 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 eb96e015ee8..de6abf0e4ff 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
@@ -22,6 +22,8 @@ import * as React from 'react';
 import { withScrollTo } from '../../../components/hoc/withScrollTo';
 import { WorkspaceContext } from '../../../components/workspace/context';
 import { BranchLike } from '../../../types/branch-like';
+import { ComponentQualifier } from '../../../types/component';
+import { MetricType } from '../../../types/metrics';
 import ComponentMeasure from './ComponentMeasure';
 import ComponentName from './ComponentName';
 import ComponentPin from './ComponentPin';
@@ -52,7 +54,9 @@ export class Component extends React.PureComponent<Props> {
       selected = false
     } = this.props;
 
-    const isFile = component.qualifier === 'FIL' || component.qualifier === 'UTS';
+    const isFile =
+      component.qualifier === ComponentQualifier.File ||
+      component.qualifier === ComponentQualifier.TestFile;
 
     return (
       <tr className={classNames({ selected })}>
@@ -75,27 +79,29 @@ 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}
-            component={component}
-            previous={previous}
-            rootComponent={rootComponent}
-          />
+          <div className="display-flex-center">
+            {hasBaseComponent && <div className="code-child-component-icon" />}
+            <ComponentName
+              branchLike={branchLike}
+              canBrowse={canBrowse}
+              component={component}
+              previous={previous}
+              rootComponent={rootComponent}
+            />
+          </div>
         </td>
 
         {metrics.map(metric => (
           <td
             className={classNames('thin', {
-              'text-center': metric.type === 'RATING',
-              'nowrap text-right': metric.type !== 'RATING'
+              'text-center': metric.type === MetricType.Rating,
+              'nowrap text-right': metric.type !== MetricType.Rating
             })}
             key={metric.key}>
             <div
               className={classNames({
-                'code-components-rating-cell': metric.type === 'RATING',
-                'code-components-cell': metric.type !== 'RATING'
+                'code-components-rating-cell': metric.type === MetricType.Rating,
+                'code-components-cell': metric.type !== MetricType.Rating
               })}>
               <ComponentMeasure component={component} metric={metric} />
             </div>
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 176787f33f6..2d8e79a5529 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
@@ -13,40 +13,44 @@ exports[`should render correctly 1`] = `
   <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",
+    <div
+      className="display-flex-center"
+    >
+      <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",
+        rootComponent={
+          Object {
+            "key": "foo",
+            "measures": Array [
+              Object {
+                "bestValue": false,
+                "metric": "bugs",
+                "value": "12",
+              },
+            ],
+            "name": "Foo",
+            "qualifier": "TRK",
+          }
         }
-      }
-    />
+      />
+    </div>
   </td>
   <td
     className="thin nowrap text-right"
@@ -147,38 +151,42 @@ exports[`should render correctly for a file 1`] = `
   <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",
+    <div
+      className="display-flex-center"
+    >
+      <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",
+        rootComponent={
+          Object {
+            "key": "foo",
+            "measures": Array [
+              Object {
+                "bestValue": false,
+                "metric": "bugs",
+                "value": "12",
+              },
+            ],
+            "name": "Foo",
+            "qualifier": "TRK",
+          }
         }
-      }
-    />
+      />
+    </div>
   </td>
   <td
     className="thin nowrap text-right"
@@ -268,42 +276,46 @@ exports[`should render correctly: with base component 1`] = `
     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",
+      className="display-flex-center"
+    >
+      <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",
+        rootComponent={
+          Object {
+            "key": "foo",
+            "measures": Array [
+              Object {
+                "bestValue": false,
+                "metric": "bugs",
+                "value": "12",
+              },
+            ],
+            "name": "Foo",
+            "qualifier": "TRK",
+          }
         }
-      }
-    />
+      />
+    </div>
   </td>
   <td
     className="thin nowrap text-right"
diff --git a/server/sonar-web/src/main/js/types/metrics.ts b/server/sonar-web/src/main/js/types/metrics.ts
index 788f6a7722d..476d7db661a 100644
--- a/server/sonar-web/src/main/js/types/metrics.ts
+++ b/server/sonar-web/src/main/js/types/metrics.ts
@@ -146,6 +146,16 @@ export enum MetricKey {
   wont_fix_issues = 'wont_fix_issues'
 }
 
+export enum MetricType {
+  Rating = 'RATING',
+  Percent = 'PERCENT',
+  Integer = 'INT',
+  Level = 'LEVEL',
+  ShortInteger = 'SHORT_INT',
+  ShortWorkDuration = 'SHORT_WORK_DUR',
+  Data = 'DATA'
+}
+
 export function isMetricKey(key: string): key is MetricKey {
   return (Object.values(MetricKey) as string[]).includes(key);
 }