avoid displaying too long branch names

3 files changed, 191 insertions, 169 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
index 347ea1a3df7..72b8cbb1c27 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
@@ -30,6 +30,7 @@
 
 .navbar-context-meta-branch-menu-item-name {
   flex: 1;
+  max-width: 300px;
 }
 
 .navbar-context-meta-branch-menu-item-actions {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
index 46f9a02957e..4d07db53532 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
@@ -26,6 +26,7 @@ import BranchIcon from '../../../../components/icons-components/BranchIcon';
 import { isShortLivingBranch } from '../../../../helpers/branches';
 import { translate } from '../../../../helpers/l10n';
 import { getProjectBranchUrl } from '../../../../helpers/urls';
+import Tooltip from '../../../../components/controls/Tooltip';
 
 export interface Props {
   branch: Branch;
@@ -41,27 +42,29 @@ export default function ComponentNavBranchesMenuItem({ branch, ...props }: Props
 
   return (
     <li key={branch.name} onMouseEnter={handleMouseEnter}>
-      <Link
-        className={classNames('navbar-context-meta-branch-menu-item', {
-          active: props.selected
-        })}
-        to={getProjectBranchUrl(props.component.key, branch)}>
-        <div className="navbar-context-meta-branch-menu-item-name">
-          <BranchIcon
-            branch={branch}
-            className={classNames('little-spacer-right', {
-              'big-spacer-left': isShortLivingBranch(branch) && !branch.isOrphan
-            })}
-          />
-          {branch.name}
-          {branch.isMain && (
-            <div className="outline-badge spacer-left">{translate('branches.main_branch')}</div>
-          )}
-        </div>
-        <div className="big-spacer-left note">
-          <BranchStatus branch={branch} concise={true} />
-        </div>
-      </Link>
+      <Tooltip mouseEnterDelay={0.5} overlay={branch.name} placement="right">
+        <Link
+          className={classNames('navbar-context-meta-branch-menu-item', {
+            active: props.selected
+          })}
+          to={getProjectBranchUrl(props.component.key, branch)}>
+          <div className="navbar-context-meta-branch-menu-item-name text-ellipsis">
+            <BranchIcon
+              branch={branch}
+              className={classNames('little-spacer-right', {
+                'big-spacer-left': isShortLivingBranch(branch) && !branch.isOrphan
+              })}
+            />
+            {branch.name}
+            {branch.isMain && (
+              <div className="outline-badge spacer-left">{translate('branches.main_branch')}</div>
+            )}
+          </div>
+          <div className="big-spacer-left note">
+            <BranchStatus branch={branch} concise={true} />
+          </div>
+        </Link>
+      </Tooltip>
     </li>
   );
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
index ee665153336..1f6d81e9883 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
@@ -4,52 +4,58 @@ exports[`renders main branch 1`] = `
 <li
   onMouseEnter={[Function]}
 >
-  <Link
-    className="navbar-context-meta-branch-menu-item"
-    onlyActiveOnIndex={false}
-    style={Object {}}
-    to={
-      Object {
-        "pathname": "/dashboard",
-        "query": Object {
-          "id": "component",
-        },
-      }
-    }
+  <Tooltip
+    mouseEnterDelay={0.5}
+    overlay="master"
+    placement="right"
   >
-    <div
-      className="navbar-context-meta-branch-menu-item-name"
-    >
-      <BranchIcon
-        branch={
-          Object {
-            "isMain": true,
-            "name": "master",
-          }
+    <Link
+      className="navbar-context-meta-branch-menu-item"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/dashboard",
+          "query": Object {
+            "id": "component",
+          },
         }
-        className="little-spacer-right"
-      />
-      master
+      }
+    >
       <div
-        className="outline-badge spacer-left"
+        className="navbar-context-meta-branch-menu-item-name text-ellipsis"
       >
-        branches.main_branch
+        <BranchIcon
+          branch={
+            Object {
+              "isMain": true,
+              "name": "master",
+            }
+          }
+          className="little-spacer-right"
+        />
+        master
+        <div
+          className="outline-badge spacer-left"
+        >
+          branches.main_branch
+        </div>
       </div>
-    </div>
-    <div
-      className="big-spacer-left note"
-    >
-      <BranchStatus
-        branch={
-          Object {
-            "isMain": true,
-            "name": "master",
+      <div
+        className="big-spacer-left note"
+      >
+        <BranchStatus
+          branch={
+            Object {
+              "isMain": true,
+              "name": "master",
+            }
           }
-        }
-        concise={true}
-      />
-    </div>
-  </Link>
+          concise={true}
+        />
+      </div>
+    </Link>
+  </Tooltip>
 </li>
 `;
 
@@ -57,63 +63,69 @@ exports[`renders short-living branch 1`] = `
 <li
   onMouseEnter={[Function]}
 >
-  <Link
-    className="navbar-context-meta-branch-menu-item"
-    onlyActiveOnIndex={false}
-    style={Object {}}
-    to={
-      Object {
-        "pathname": "/project/issues",
-        "query": Object {
-          "branch": "foo",
-          "id": "component",
-          "resolved": "false",
-        },
-      }
-    }
+  <Tooltip
+    mouseEnterDelay={0.5}
+    overlay="foo"
+    placement="right"
   >
-    <div
-      className="navbar-context-meta-branch-menu-item-name"
-    >
-      <BranchIcon
-        branch={
-          Object {
-            "isMain": false,
-            "mergeBranch": "master",
-            "name": "foo",
-            "status": Object {
-              "bugs": 1,
-              "codeSmells": 2,
-              "vulnerabilities": 3,
-            },
-            "type": "SHORT",
-          }
+    <Link
+      className="navbar-context-meta-branch-menu-item"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/project/issues",
+          "query": Object {
+            "branch": "foo",
+            "id": "component",
+            "resolved": "false",
+          },
         }
-        className="little-spacer-right big-spacer-left"
-      />
-      foo
-    </div>
-    <div
-      className="big-spacer-left note"
+      }
     >
-      <BranchStatus
-        branch={
-          Object {
-            "isMain": false,
-            "mergeBranch": "master",
-            "name": "foo",
-            "status": Object {
-              "bugs": 1,
-              "codeSmells": 2,
-              "vulnerabilities": 3,
-            },
-            "type": "SHORT",
+      <div
+        className="navbar-context-meta-branch-menu-item-name text-ellipsis"
+      >
+        <BranchIcon
+          branch={
+            Object {
+              "isMain": false,
+              "mergeBranch": "master",
+              "name": "foo",
+              "status": Object {
+                "bugs": 1,
+                "codeSmells": 2,
+                "vulnerabilities": 3,
+              },
+              "type": "SHORT",
+            }
           }
-        }
-        concise={true}
-      />
-    </div>
-  </Link>
+          className="little-spacer-right big-spacer-left"
+        />
+        foo
+      </div>
+      <div
+        className="big-spacer-left note"
+      >
+        <BranchStatus
+          branch={
+            Object {
+              "isMain": false,
+              "mergeBranch": "master",
+              "name": "foo",
+              "status": Object {
+                "bugs": 1,
+                "codeSmells": 2,
+                "vulnerabilities": 3,
+              },
+              "type": "SHORT",
+            }
+          }
+          concise={true}
+        />
+      </div>
+    </Link>
+  </Tooltip>
 </li>
 `;
 
@@ -121,64 +133,70 @@ exports[`renders short-living orhpan branch 1`] = `
 <li
   onMouseEnter={[Function]}
 >
-  <Link
-    className="navbar-context-meta-branch-menu-item"
-    onlyActiveOnIndex={false}
-    style={Object {}}
-    to={
-      Object {
-        "pathname": "/project/issues",
-        "query": Object {
-          "branch": "foo",
-          "id": "component",
-          "resolved": "false",
-        },
-      }
-    }
+  <Tooltip
+    mouseEnterDelay={0.5}
+    overlay="foo"
+    placement="right"
   >
-    <div
-      className="navbar-context-meta-branch-menu-item-name"
-    >
-      <BranchIcon
-        branch={
-          Object {
-            "isMain": false,
-            "isOrphan": true,
-            "mergeBranch": "master",
-            "name": "foo",
-            "status": Object {
-              "bugs": 1,
-              "codeSmells": 2,
-              "vulnerabilities": 3,
-            },
-            "type": "SHORT",
-          }
+    <Link
+      className="navbar-context-meta-branch-menu-item"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/project/issues",
+          "query": Object {
+            "branch": "foo",
+            "id": "component",
+            "resolved": "false",
+          },
         }
-        className="little-spacer-right"
-      />
-      foo
-    </div>
-    <div
-      className="big-spacer-left note"
+      }
     >
-      <BranchStatus
-        branch={
-          Object {
-            "isMain": false,
-            "isOrphan": true,
-            "mergeBranch": "master",
-            "name": "foo",
-            "status": Object {
-              "bugs": 1,
-              "codeSmells": 2,
-              "vulnerabilities": 3,
-            },
-            "type": "SHORT",
+      <div
+        className="navbar-context-meta-branch-menu-item-name text-ellipsis"
+      >
+        <BranchIcon
+          branch={
+            Object {
+              "isMain": false,
+              "isOrphan": true,
+              "mergeBranch": "master",
+              "name": "foo",
+              "status": Object {
+                "bugs": 1,
+                "codeSmells": 2,
+                "vulnerabilities": 3,
+              },
+              "type": "SHORT",
+            }
           }
-        }
-        concise={true}
-      />
-    </div>
-  </Link>
+          className="little-spacer-right"
+        />
+        foo
+      </div>
+      <div
+        className="big-spacer-left note"
+      >
+        <BranchStatus
+          branch={
+            Object {
+              "isMain": false,
+              "isOrphan": true,
+              "mergeBranch": "master",
+              "name": "foo",
+              "status": Object {
+                "bugs": 1,
+                "codeSmells": 2,
+                "vulnerabilities": 3,
+              },
+              "type": "SHORT",
+            }
+          }
+          concise={true}
+        />
+      </div>
+    </Link>
+  </Tooltip>
 </li>
 `;