From b815ace63bf5ad05778734bcfab9a8191d164098 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Thu, 2 Feb 2017 10:24:30 +0100
Subject: [PATCH] fix display of organizations

---
 .../components/nav/component/ComponentNav.css | 16 -------
 .../components/nav/component/ComponentNav.js  |  1 -
 .../nav/component/ComponentNavBreadcrumbs.js  | 37 ++++++++++------
 .../ComponentNavBreadcrumbs-test.js.snap      | 40 ++++++++++--------
 .../nav/templates/nav-search-item.hbs         | 12 +++---
 .../components/TaskComponent.js               | 11 ++---
 .../issues-workspace-list-component.hbs       |  6 +--
 .../navigation/OrganizationNavigation.js      | 12 +++---
 .../OrganizationNavigation-test.js.snap       | 42 ++++++++++---------
 .../src/main/less/components/navbar.less      | 31 +++++++++++++-
 server/sonar-web/src/main/less/init/misc.less |  4 +-
 11 files changed, 121 insertions(+), 91 deletions(-)
 delete mode 100644 server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css

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
deleted file mode 100644
index 59d210c9534..00000000000
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.navbar-context {
-  position: static;
-  padding: 0;
-  height: 65px;
-}
-
-.navbar-context-inner {
-  position: fixed;
-  z-index: 420;
-  left: 0;
-  right: 0;
-  height: 65px;
-  padding-top: 5px;
-  box-sizing: border-box;
-  background-color: #f3f3f3;
-}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.js b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.js
index 303a45c6cc1..916dbe12726 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.js
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.js
@@ -26,7 +26,6 @@ import RecentHistory from './RecentHistory';
 import { TooltipsContainer } from '../../../../components/mixins/tooltips-mixin';
 import { getTasksForComponent } from '../../../../api/ce';
 import { STATUSES } from '../../../../apps/background-tasks/constants';
-import './ComponentNav.css';
 
 export default React.createClass({
   componentDidMount () {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBreadcrumbs.js b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBreadcrumbs.js
index c787efb5bca..3f09a2c637b 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBreadcrumbs.js
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBreadcrumbs.js
@@ -36,27 +36,40 @@ class ComponentNavBreadcrumbs extends React.Component {
       return null;
     }
 
-    const items = breadcrumbs.map(item => {
+    const lastItem = breadcrumbs[breadcrumbs.length - 1];
+
+    const items = breadcrumbs.map((item, index) => {
       return (
-          <li key={item.key}>
-            <Link to={{ pathname: '/dashboard', query: { id: item.key } }}>
-              <QualifierIcon qualifier={item.qualifier}/>
-              {' '}
-              <strong>{item.name}</strong>
+          <span key={item.key}>
+            <Link to={{ pathname: '/dashboard', query: { id: item.key } }} className="link-base-color">
+              {index === breadcrumbs.length - 1 ? (
+                  <strong>{item.name}</strong>
+              ) : (
+                  <span>{item.name}</span>
+              )}
             </Link>
-          </li>
+            {index < breadcrumbs.length - 1 && (
+                <span className="slash-separator"/>
+            )}
+          </span>
       );
     });
 
     return (
-        <ul className="nav navbar-nav nav-crumbs">
+        <h2 className="navbar-context-title">
           {organization != null && shouldOrganizationBeDisplayed && (
-              <li>
-                <OrganizationLink organization={organization}>{organization.name}</OrganizationLink>
-              </li>
+              <span>
+                <span className="navbar-context-title-qualifier little-spacer-right">
+                  <QualifierIcon qualifier={lastItem.qualifier}/>
+                </span>
+                <OrganizationLink organization={organization} className="link-base-color">
+                  {organization.name}
+                </OrganizationLink>
+                <span className="slash-separator"/>
+              </span>
           )}
           {items}
-        </ul>
+        </h2>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBreadcrumbs-test.js.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBreadcrumbs-test.js.snap
index 19ad1cd2856..40c7c51d3b3 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBreadcrumbs-test.js.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBreadcrumbs-test.js.snap
@@ -1,8 +1,9 @@
 exports[`test should not render breadcrumbs with one element 1`] = `
-<ul
-  className="nav navbar-nav nav-crumbs">
-  <li>
+<h2
+  className="navbar-context-title">
+  <span>
     <Link
+      className="link-base-color"
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -13,22 +14,25 @@ exports[`test should not render breadcrumbs with one element 1`] = `
           },
         }
       }>
-      <qualifier-icon
-        qualifier="TRK" />
-       
       <strong>
         My Project
       </strong>
     </Link>
-  </li>
-</ul>
+  </span>
+</h2>
 `;
 
 exports[`test should render organization 1`] = `
-<ul
-  className="nav navbar-nav nav-crumbs">
-  <li>
+<h2
+  className="navbar-context-title">
+  <span>
+    <span
+      className="navbar-context-title-qualifier little-spacer-right">
+      <qualifier-icon
+        qualifier="TRK" />
+    </span>
     <OrganizationLink
+      className="link-base-color"
       organization={
         Object {
           "key": "foo",
@@ -37,9 +41,12 @@ exports[`test should render organization 1`] = `
       }>
       The Foo Organization
     </OrganizationLink>
-  </li>
-  <li>
+    <span
+      className="slash-separator" />
+  </span>
+  <span>
     <Link
+      className="link-base-color"
       onlyActiveOnIndex={false}
       style={Object {}}
       to={
@@ -50,13 +57,10 @@ exports[`test should render organization 1`] = `
           },
         }
       }>
-      <qualifier-icon
-        qualifier="TRK" />
-       
       <strong>
         My Project
       </strong>
     </Link>
-  </li>
-</ul>
+  </span>
+</h2>
 `;
diff --git a/server/sonar-web/src/main/js/app/components/nav/templates/nav-search-item.hbs b/server/sonar-web/src/main/js/app/components/nav/templates/nav-search-item.hbs
index 890643d9237..185169fdbda 100644
--- a/server/sonar-web/src/main/js/app/components/nav/templates/nav-search-item.hbs
+++ b/server/sonar-web/src/main/js/app/components/nav/templates/nav-search-item.hbs
@@ -8,6 +8,12 @@
 {{/notNull}}
 
 <a href="{{this.url}}" data-title="{{name}}<br>{{key}}" data-toggle="tooltip">
+  {{#if organization}}
+    <div class="pull-right nowrap note">
+      {{organization.name}}
+    </div>
+  {{/if}}
+
   {{#if icon}}<i class="icon-{{icon}} text-text-bottom"></i>{{/if}}
   {{#if q}}{{qualifierIcon q}}{{/if}}
   {{#eq q 'FIL'}}
@@ -19,10 +25,4 @@
       {{name}}
     {{/eq}}
   {{/eq}}
-
-  {{#if organization}}
-    <div class="pull-right nowrap note">
-      {{organization.name}}
-    </div>
-  {{/if}}
 </a>
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.js b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.js
index c76ad724cbb..b72f02ed758 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.js
@@ -47,15 +47,16 @@ export default class TaskComponent extends React.Component {
 
     return (
         <td>
+          <span className="little-spacer-right">
+            <QualifierIcon qualifier={task.componentQualifier}/>
+          </span>
+
           {task.organization != null && (
               <Organization organizationKey={task.organization}/>
           )}
 
-          <Link to={{ pathname: '/dashboard', query: { id: task.componentKey } }} className="link-with-icon">
-            <span className="little-spacer-right">
-              <QualifierIcon qualifier={task.componentQualifier}/>
-            </span>
-            <span>{task.componentName}</span>
+          <Link to={{ pathname: '/dashboard', query: { id: task.componentKey } }}>
+            {task.componentName}
           </Link>
 
           {types.length > 1 && (
diff --git a/server/sonar-web/src/main/js/apps/issues/templates/issues-workspace-list-component.hbs b/server/sonar-web/src/main/js/apps/issues/templates/issues-workspace-list-component.hbs
index cd604d2a4a6..f1c12ffb491 100644
--- a/server/sonar-web/src/main/js/apps/issues/templates/issues-workspace-list-component.hbs
+++ b/server/sonar-web/src/main/js/apps/issues/templates/issues-workspace-list-component.hbs
@@ -7,18 +7,18 @@
   {{/notNull}}
 
   <a class="link-no-underline" href="{{dashboardUrl project}}">
-    <span class="little-spacer-right">{{qualifierIcon "TRK"}}</span>{{projectLongName}}
+    {{projectLongName}}
   </a>
 
   {{#if subProject}}
     <span class="slash-separator"></span>
     <a class="link-no-underline" href="{{dashboardUrl subProject}}">
-      <span class="little-spacer-right">{{qualifierIcon "TRK"}}</span>{{subProjectLongName}}
+      {{subProjectLongName}}
     </a>
   {{/if}}
 
   <span class="slash-separator"></span>
   <a class="link-no-underline" href="{{dashboardUrl component}}">
-    <span class="little-spacer-right">{{qualifierIcon componentQualifier}}</span>{{collapsePath componentLongName}}
+    {{collapsePath componentLongName}}
   </a>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
index a167596b06f..eff625b4fac 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.js
@@ -86,13 +86,11 @@ export default class OrganizationNavigation extends React.Component {
         <nav className="navbar navbar-context page-container" id="context-navigation">
           <div className="navbar-context-inner">
             <div className="container">
-              <ul className="nav navbar-nav nav-crumbs">
-                <li>
-                  <Link to={`/organizations/${organization.key}`}>
-                    {organization.name}
-                  </Link>
-                </li>
-              </ul>
+              <h2 className="navbar-context-title">
+                <Link to={`/organizations/${organization.key}`} className="link-base-color">
+                  <strong>{organization.name}</strong>
+                </Link>
+              </h2>
 
               <ul className="nav navbar-nav nav-tabs">
                 <li>
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
index 361c77f09cb..4d4d4d7d237 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.js.snap
@@ -6,17 +6,18 @@ exports[`test admin 1`] = `
     className="navbar-context-inner">
     <div
       className="container">
-      <ul
-        className="nav navbar-nav nav-crumbs">
-        <li>
-          <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to="/organizations/foo">
+      <h2
+        className="navbar-context-title">
+        <Link
+          className="link-base-color"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to="/organizations/foo">
+          <strong>
             Foo
-          </Link>
-        </li>
-      </ul>
+          </strong>
+        </Link>
+      </h2>
       <ul
         className="nav navbar-nav nav-tabs">
         <li>
@@ -93,17 +94,18 @@ exports[`test regular user 1`] = `
     className="navbar-context-inner">
     <div
       className="container">
-      <ul
-        className="nav navbar-nav nav-crumbs">
-        <li>
-          <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to="/organizations/foo">
+      <h2
+        className="navbar-context-title">
+        <Link
+          className="link-base-color"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to="/organizations/foo">
+          <strong>
             Foo
-          </Link>
-        </li>
-      </ul>
+          </strong>
+        </Link>
+      </h2>
       <ul
         className="nav navbar-nav nav-tabs">
         <li>
diff --git a/server/sonar-web/src/main/less/components/navbar.less b/server/sonar-web/src/main/less/components/navbar.less
index 7a14845b96a..29322fa0d47 100644
--- a/server/sonar-web/src/main/less/components/navbar.less
+++ b/server/sonar-web/src/main/less/components/navbar.less
@@ -206,10 +206,11 @@
 
 
 .navbar-context {
+  position: static;
   top: @navbarGlobalHeight;
   z-index: @navbar-context-z-index;
   height: @navbarContextHeight;
-  padding-top: 5px;
+  padding: 0;
   background-color: @navbarContextBackground;
 
   .nav-tabs {
@@ -239,6 +240,34 @@
   color: @secondFontColor;
   font-size: @smallFontSize;
 }
+.navbar-context-inner {
+  position: fixed;
+  z-index: 420;
+  left: 0;
+  right: 0;
+  height: 65px;
+  padding-top: 5px;
+  box-sizing: border-box;
+  background-color: #f3f3f3;
+}
+
+.navbar-context-title {
+  float: left;
+  padding: 2px 10px 0;
+}
+
+.navbar-context-title-qualifier {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 16px;
+  padding-top: 5px;
+  box-sizing: border-box;
+}
+
+.navbar-context-title-qualifier i {
+  vertical-align: top;
+}
+
 
 .navbar-side {
   padding: 10px;
diff --git a/server/sonar-web/src/main/less/init/misc.less b/server/sonar-web/src/main/less/init/misc.less
index 0a7b283cdea..472cc405189 100644
--- a/server/sonar-web/src/main/less/init/misc.less
+++ b/server/sonar-web/src/main/less/init/misc.less
@@ -130,8 +130,8 @@ td.big-spacer-top    { padding-top: 16px; }
 }
 
 .slash-separator {
-  margin-left: 4px;
-  margin-right: 4px;
+  margin-left: 5px;
+  margin-right: 5px;
 
   &:after {
     content: "/";
-- 
2.39.5