From 52c4bdd6ee65adb2ec42f768463684343d8566ec Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Tue, 27 Mar 2018 15:06:37 +0200
Subject: [PATCH] SONAR-10481 Fix text wrapping in breadcrumbs with branch

---
 .../components/nav/component/ComponentNav.css |  7 ++
 .../components/nav/component/ComponentNav.tsx | 26 +++----
 .../nav/component/ComponentNavBranch.tsx      |  6 +-
 .../nav/component/ComponentNavHeader.tsx      |  8 +--
 .../nav/component/ComponentNavMeta.tsx        |  2 +-
 .../__snapshots__/ComponentNav-test.tsx.snap  | 72 ++++++++++---------
 .../ComponentNavBranch-test.tsx.snap          |  8 +--
 .../ComponentNavHeader-test.tsx.snap          |  6 +-
 .../ComponentNavMeta-test.tsx.snap            |  6 +-
 .../src/main/js/app/styles/init/misc.css      |  5 ++
 .../main/js/components/nav/ContextNavBar.css  | 23 ++++--
 11 files changed, 101 insertions(+), 68 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 ac7ce95e3f3..6b87dcbcb6e 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
@@ -17,9 +17,16 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+.navbar-context-justified {
+  display: flex;
+  justify-content: space-between;
+}
+
 .navbar-context-branches {
   display: inline-flex;
   justify-content: center;
+  flex-shrink: 1 !important;
+  min-width: 0;
   line-height: calc(2 * var(--gridSize));
   margin-left: calc(2 * var(--gridSize));
   font-size: var(--baseFontSize);
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
index 38fbd68f644..366b240f357 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
@@ -81,20 +81,22 @@ export default class ComponentNav extends React.PureComponent<Props> {
     }
     return (
       <ContextNavBar
-        id="context-navigation"
         height={notifComponent ? theme.contextNavHeightRaw + 20 : theme.contextNavHeightRaw}
+        id="context-navigation"
         notif={notifComponent}>
-        <ComponentNavHeader
-          branchLikes={this.props.branchLikes}
-          component={this.props.component}
-          currentBranchLike={this.props.currentBranchLike}
-          // to close dropdown on any location change
-          location={this.props.location}
-        />
-        <ComponentNavMeta
-          branchLike={this.props.currentBranchLike}
-          component={this.props.component}
-        />
+        <div className="navbar-context-justified">
+          <ComponentNavHeader
+            branchLikes={this.props.branchLikes}
+            component={this.props.component}
+            currentBranchLike={this.props.currentBranchLike}
+            // to close dropdown on any location change
+            location={this.props.location}
+          />
+          <ComponentNavMeta
+            branchLike={this.props.currentBranchLike}
+            component={this.props.component}
+          />
+        </div>
         <ComponentNavMenu
           branchLike={this.props.currentBranchLike}
           component={this.props.component}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
index e640d448159..a369fd1412a 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
@@ -144,7 +144,7 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
     const { currentBranchLike } = this.props;
     if (isShortLivingBranch(currentBranchLike)) {
       return currentBranchLike.isOrphan ? (
-        <span className="note big-spacer-left">
+        <span className="note big-spacer-left text-ellipsis flex-shrink">
           {translate('branches.orphan_branch')}
           <Tooltip overlay={translate('branches.orphan_branches.tooltip')}>
             <i className="icon-help spacer-left" />
@@ -157,7 +157,7 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
       );
     } else if (isPullRequest(currentBranchLike)) {
       return (
-        <span className="note big-spacer-left">
+        <span className="note big-spacer-left text-ellipsis flex-shrink">
           <FormattedMessage
             defaultMessage={translate('branches.pull_request.for_merge_into_x_from_y')}
             id="branches.pull_request.for_merge_into_x_from_y"
@@ -239,7 +239,7 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
         className={classNames('navbar-context-branches', 'dropdown', {
           open: this.state.dropdownOpen
         })}>
-        <a className="link-base-color link-no-underline" href="#" onClick={this.handleClick}>
+        <a className="link-base-color link-no-underline nowrap" href="#" onClick={this.handleClick}>
           <BranchIcon branchLike={currentBranchLike} className="little-spacer-right" />
           <Tooltip mouseEnterDelay={1} overlay={displayName}>
             <span className="text-limited text-top">{displayName}</span>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx
index b0d387e4fa7..e6dae1fa20c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx
@@ -51,16 +51,16 @@ export function ComponentNavHeader(props: Props) {
   return (
     <header className="navbar-context-header">
       <OrganizationHelmet
-        title={component.name}
         organization={organization && shouldOrganizationBeDisplayed ? organization : undefined}
+        title={component.name}
       />
       {organization &&
         shouldOrganizationBeDisplayed && (
           <>
             <OrganizationAvatar organization={organization} />
             <OrganizationLink
-              organization={organization}
-              className="link-base-color link-no-underline spacer-left">
+              className="navbar-context-header-breadcrumb-link link-base-color link-no-underline spacer-left"
+              organization={organization}>
               {organization.name}
             </OrganizationLink>
             <span className="slash-separator" />
@@ -93,7 +93,7 @@ function renderBreadcrumbs(breadcrumbs: Breadcrumb[]) {
       <React.Fragment key={item.key}>
         {index === 0 && <QualifierIcon className="spacer-right" qualifier={lastItem.qualifier} />}
         <Link
-          className="link-base-color link-no-underline"
+          className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
           title={item.name}
           to={getProjectUrl(item.key)}>
           {itemName}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
index 57f41ffeb3d..d8a16d8066e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
@@ -59,7 +59,7 @@ export function ComponentNavMeta({ branchLike, component, currentUser }: Props)
   return (
     <div className="navbar-context-meta">
       {component.analysisDate && (
-        <div className="spacer-left">
+        <div className="spacer-left text-ellipsis">
           <DateTimeFormatter date={component.analysisDate} />
         </div>
       )}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap
index 2d5fe354989..b95d5c4732b 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap
@@ -5,42 +5,46 @@ exports[`renders 1`] = `
   height={72}
   id="context-navigation"
 >
-  <Connect(ComponentNavHeader)
-    branchLikes={Array []}
-    component={
-      Object {
-        "breadcrumbs": Array [
-          Object {
-            "key": "component",
-            "name": "component",
-            "qualifier": "TRK",
-          },
-        ],
-        "key": "component",
-        "name": "component",
-        "organization": "org",
-        "qualifier": "TRK",
+  <div
+    className="navbar-context-justified"
+  >
+    <Connect(ComponentNavHeader)
+      branchLikes={Array []}
+      component={
+        Object {
+          "breadcrumbs": Array [
+            Object {
+              "key": "component",
+              "name": "component",
+              "qualifier": "TRK",
+            },
+          ],
+          "key": "component",
+          "name": "component",
+          "organization": "org",
+          "qualifier": "TRK",
+        }
       }
-    }
-    location={Object {}}
-  />
-  <Connect(ComponentNavMeta)
-    component={
-      Object {
-        "breadcrumbs": Array [
-          Object {
-            "key": "component",
-            "name": "component",
-            "qualifier": "TRK",
-          },
-        ],
-        "key": "component",
-        "name": "component",
-        "organization": "org",
-        "qualifier": "TRK",
+      location={Object {}}
+    />
+    <Connect(ComponentNavMeta)
+      component={
+        Object {
+          "breadcrumbs": Array [
+            Object {
+              "key": "component",
+              "name": "component",
+              "qualifier": "TRK",
+            },
+          ],
+          "key": "component",
+          "name": "component",
+          "organization": "org",
+          "qualifier": "TRK",
+        }
       }
-    }
-  />
+    />
+  </div>
   <ComponentNavMenu
     component={
       Object {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
index 67e5dbf7ef4..498d9568f8c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders main branch 1`] = `
   className="navbar-context-branches dropdown"
 >
   <a
-    className="link-base-color link-no-underline"
+    className="link-base-color link-no-underline nowrap"
     href="#"
     onClick={[Function]}
   >
@@ -82,7 +82,7 @@ exports[`renders pull request 1`] = `
   className="navbar-context-branches dropdown"
 >
   <a
-    className="link-base-color link-no-underline"
+    className="link-base-color link-no-underline nowrap"
     href="#"
     onClick={[Function]}
   >
@@ -114,7 +114,7 @@ exports[`renders pull request 1`] = `
     />
   </a>
   <span
-    className="note big-spacer-left"
+    className="note big-spacer-left text-ellipsis flex-shrink"
   >
     <FormattedMessage
       defaultMessage="branches.pull_request.for_merge_into_x_from_y"
@@ -139,7 +139,7 @@ exports[`renders short-living branch 1`] = `
   className="navbar-context-branches dropdown"
 >
   <a
-    className="link-base-color link-no-underline"
+    className="link-base-color link-no-underline nowrap"
     href="#"
     onClick={[Function]}
   >
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavHeader-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavHeader-test.tsx.snap
index dd13db8a75c..4d85fb56b11 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavHeader-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`should not render breadcrumbs with one element 1`] = `
       qualifier="TRK"
     />
     <Link
-      className="link-base-color link-no-underline"
+      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
       onlyActiveOnIndex={false}
       style={Object {}}
       title="My Project"
@@ -59,7 +59,7 @@ exports[`should render organization 1`] = `
       }
     />
     <OrganizationLink
-      className="link-base-color link-no-underline spacer-left"
+      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline spacer-left"
       organization={
         Object {
           "key": "foo",
@@ -82,7 +82,7 @@ exports[`should render organization 1`] = `
       qualifier="TRK"
     />
     <Link
-      className="link-base-color link-no-underline"
+      className="navbar-context-header-breadcrumb-link link-base-color link-no-underline"
       onlyActiveOnIndex={false}
       style={Object {}}
       title="My Project"
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
index 06f96d32ee3..ca18e4d86d3 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders meta for long-living branch 1`] = `
   className="navbar-context-meta"
 >
   <div
-    className="spacer-left"
+    className="spacer-left text-ellipsis"
   >
     <DateTimeFormatter
       date="2017-01-02T00:00:00.000Z"
@@ -32,7 +32,7 @@ exports[`renders meta for pull request 1`] = `
   className="navbar-context-meta"
 >
   <div
-    className="spacer-left"
+    className="spacer-left text-ellipsis"
   >
     <DateTimeFormatter
       date="2017-01-02T00:00:00.000Z"
@@ -78,7 +78,7 @@ exports[`renders status of short-living branch 1`] = `
   className="navbar-context-meta"
 >
   <div
-    className="spacer-left"
+    className="spacer-left text-ellipsis"
   >
     <DateTimeFormatter
       date="2017-01-02T00:00:00.000Z"
diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index f87994be76e..cecd341e962 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -302,6 +302,11 @@ td.big-spacer-top {
   flex: 1;
 }
 
+.flex-shrink {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
 .space-between {
   justify-content: space-between !important;
 }
diff --git a/server/sonar-web/src/main/js/components/nav/ContextNavBar.css b/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
index 61b7c9756f6..8c9ff6a53bb 100644
--- a/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
+++ b/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
@@ -32,13 +32,28 @@
   border-bottom: none;
 }
 
+/* use `min-width: 0` to cut breadcrumb links (to end with "...") */
+/* https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout */
 .navbar-context-header {
   display: flex;
   align-items: center;
+  min-width: 0;
   height: calc(4 * var(--gridSize));
   font-size: var(--bigFontSize);
 }
 
+/* disallow icons and slash separators to shrink */
+.navbar-context-header > *:not(.navbar-context-header-breadcrumb-link) {
+  flex-shrink: 0;
+}
+
+.navbar-context-header-breadcrumb-link {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .navbar-context-header .slash-separator {
   margin-left: var(--gridSize);
   margin-right: var(--gridSize);
@@ -49,14 +64,14 @@
   color: rgba(68, 68, 68, 0.2);
 }
 
+/* set `min-width: 0` to allow flexbox item to shrink */
+/* https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout */
 .navbar-context-meta {
-  position: absolute;
-  top: 0;
-  right: 0;
   display: flex;
   align-items: center;
+  min-width: 0;
   height: calc(4 * var(--gridSize));
-  padding: 0 20px;
+  padding-left: 20px;
   color: var(--secondFontColor);
   font-size: var(--smallFontSize);
   text-align: right;
-- 
2.39.5