SONAR-12060: Fix for very long project names

5 files changed, 77 insertions, 40 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx
index 37931b99247..cda5802975f 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx
@@ -59,10 +59,9 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) {
 
   return (
     <span
-      className={classNames(
-        'big-spacer-left flex-shrink branch-like-navigation-toggler-container',
-        { dropdown: isMenuEnabled }
-      )}>
+      className={classNames('big-spacer-left flex-0 branch-like-navigation-toggler-container', {
+        dropdown: isMenuEnabled
+      })}>
       {isMenuEnabled ? (
         <Toggler
           onRequestClose={() => setIsMenuOpen(false)}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap
index fd5123a1825..8d17f19832a 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/__tests__/__snapshots__/BranchLikeNavigation-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <span
-  className="big-spacer-left flex-shrink branch-like-navigation-toggler-container"
+  className="big-spacer-left flex-0 branch-like-navigation-toggler-container"
 >
   <Memo(CurrentBranchLike)
     branchesEnabled={false}
@@ -44,7 +44,7 @@ exports[`should render correctly 1`] = `
 
 exports[`should render the menu trigger if branches are enabled 1`] = `
 <span
-  className="big-spacer-left flex-shrink branch-like-navigation-toggler-container dropdown"
+  className="big-spacer-left flex-0 branch-like-navigation-toggler-container dropdown"
 >
   <Toggler
     onRequestClose={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.css b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.css
new file mode 100644
index 00000000000..c5fbfacdf5a
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.css
@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 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.
+ */
+.project-row-text-cell {
+  max-width: 20em;
+}
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
index 311b94d8712..50a59d94a7c 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
@@ -20,10 +20,12 @@
 import * as React from 'react';
 import { Link } from 'react-router';
 import Checkbox from 'sonar-ui-common/components/controls/Checkbox';
+import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
 import { Project } from '../../api/components';
 import PrivacyBadgeContainer from '../../components/common/PrivacyBadgeContainer';
 import DateTooltipFormatter from '../../components/intl/DateTooltipFormatter';
+import './ProjectRow.css';
 import ProjectRowActions from './ProjectRowActions';
 
 interface Props {
@@ -48,11 +50,15 @@ export default class ProjectRow extends React.PureComponent<Props> {
           <Checkbox checked={selected} onCheck={this.handleProjectCheck} />
         </td>
 
-        <td className="nowrap">
+        <td className="nowrap hide-overflow project-row-text-cell">
           <Link
             className="link-with-icon"
             to={{ pathname: '/dashboard', query: { id: project.key } }}>
-            <QualifierIcon qualifier={project.qualifier} /> <span>{project.name}</span>
+            <QualifierIcon qualifier={project.qualifier} />
+
+            <Tooltip overlay={project.name} placement="left">
+              <span>{project.name}</span>
+            </Tooltip>
           </Link>
         </td>
 
@@ -65,8 +71,10 @@ export default class ProjectRow extends React.PureComponent<Props> {
           />
         </td>
 
-        <td className="nowrap hide-overflow" style={{ maxWidth: 400 }}>
-          <span className="note">{project.key}</span>
+        <td className="nowrap hide-overflow project-row-text-cell">
+          <Tooltip overlay={project.key} placement="left">
+            <span className="note">{project.key}</span>
+          </Tooltip>
         </td>
 
         <td className="thin nowrap text-right">
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap
index 7bd39b7f1f8..bae87bce87c 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`renders 1`] = `
     />
   </td>
   <td
-    className="nowrap"
+    className="nowrap hide-overflow project-row-text-cell"
   >
     <Link
       className="link-with-icon"
@@ -32,10 +32,14 @@ exports[`renders 1`] = `
       <QualifierIcon
         qualifier="TRK"
       />
-       
-      <span>
-        Project
-      </span>
+      <Tooltip
+        overlay="Project"
+        placement="left"
+      >
+        <span>
+          Project
+        </span>
+      </Tooltip>
     </Link>
   </td>
   <td
@@ -52,18 +56,18 @@ exports[`renders 1`] = `
     />
   </td>
   <td
-    className="nowrap hide-overflow"
-    style={
-      Object {
-        "maxWidth": 400,
-      }
-    }
+    className="nowrap hide-overflow project-row-text-cell"
   >
-    <span
-      className="note"
+    <Tooltip
+      overlay="project"
+      placement="left"
     >
-      project
-    </span>
+      <span
+        className="note"
+      >
+        project
+      </span>
+    </Tooltip>
   </td>
   <td
     className="thin nowrap text-right"
@@ -110,7 +114,7 @@ exports[`renders 2`] = `
     />
   </td>
   <td
-    className="nowrap"
+    className="nowrap hide-overflow project-row-text-cell"
   >
     <Link
       className="link-with-icon"
@@ -128,10 +132,14 @@ exports[`renders 2`] = `
       <QualifierIcon
         qualifier="TRK"
       />
-       
-      <span>
-        Project
-      </span>
+      <Tooltip
+        overlay="Project"
+        placement="left"
+      >
+        <span>
+          Project
+        </span>
+      </Tooltip>
     </Link>
   </td>
   <td
@@ -148,18 +156,18 @@ exports[`renders 2`] = `
     />
   </td>
   <td
-    className="nowrap hide-overflow"
-    style={
-      Object {
-        "maxWidth": 400,
-      }
-    }
+    className="nowrap hide-overflow project-row-text-cell"
   >
-    <span
-      className="note"
+    <Tooltip
+      overlay="project"
+      placement="left"
     >
-      project
-    </span>
+      <span
+        className="note"
+      >
+        project
+      </span>
+    </Tooltip>
   </td>
   <td
     className="thin nowrap text-right"