SONAR-8723 Add links to organization space

server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css

@@ -4,12 +4,6 @@
   height: 65px;
 }
 
-.navbar-context .navbar-nav > li > span {
-  display: inline-block;
-  padding: 3px 10px;
-  line-height: 20px;
-}
-
 .navbar-context-inner {
   position: fixed;
   z-index: 420;

server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBreadcrumbs.js

@@ -22,6 +22,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import QualifierIcon from '../../../../components/shared/qualifier-icon';
 import { getOrganizationByKey, areThereCustomOrganizations } from '../../../../store/rootReducer';
+import OrganizationLink from '../../../../components/ui/OrganizationLink';
 
 class ComponentNavBreadcrumbs extends React.Component {
   static propTypes = {
@@ -41,7 +42,7 @@ class ComponentNavBreadcrumbs extends React.Component {
             <Link to={{ pathname: '/dashboard', query: { id: item.key } }}>
               <QualifierIcon qualifier={item.qualifier}/>
               {' '}
-              {item.name}
+              <strong>{item.name}</strong>
             </Link>
           </li>
       );
@@ -51,7 +52,7 @@ class ComponentNavBreadcrumbs extends React.Component {
         <ul className="nav navbar-nav nav-crumbs">
           {organization != null && shouldOrganizationBeDisplayed && (
               <li>
-                <span>{organization.name}</span>
+                <OrganizationLink organization={organization}>{organization.name}</OrganizationLink>
               </li>
           )}
           {items}

server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBreadcrumbs-test.js.snap

@@ -16,7 +16,9 @@ exports[`test should not render breadcrumbs with one element 1`] = `
       <qualifier-icon
         qualifier="TRK" />
        
-      My Project
+      <strong>
+        My Project
+      </strong>
     </Link>
   </li>
 </ul>
@@ -26,9 +28,15 @@ exports[`test should render organization 1`] = `
 <ul
   className="nav navbar-nav nav-crumbs">
   <li>
-    <span>
+    <OrganizationLink
+      organization={
+        Object {
+          "key": "foo",
+          "name": "The Foo Organization",
+        }
+      }>
       The Foo Organization
-    </span>
+    </OrganizationLink>
   </li>
   <li>
     <Link
@@ -45,7 +53,9 @@ exports[`test should render organization 1`] = `
       <qualifier-icon
         qualifier="TRK" />
        
-      My Project
+      <strong>
+        My Project
+      </strong>
     </Link>
   </li>
 </ul>

server/sonar-web/src/main/js/apps/background-tasks/components/TaskComponent.js

@@ -50,12 +50,14 @@ export default class TaskComponent extends React.Component {
           {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>
+
           {types.length > 1 && (
               <TaskType task={task}/>
           )}

server/sonar-web/src/main/js/apps/issues/templates/issues-workspace-list-component.hbs

@@ -1,18 +1,24 @@
 <div class="component-name issues-workspace-list-component">
   {{#notNull organization}}
-    <span class="component-name-parent">
+    <a class="link-no-underline" href="{{link '/organizations/' organization.key}}">
       {{organization.name}}
-    </span>
+    </a>
+    <span class="slash-separator"></span>
   {{/notNull}}
-  <a class="component-name-parent link-no-underline" href="{{dashboardUrl project}}">
-    {{qualifierIcon "TRK"}}&nbsp;{{projectLongName}}
+
+  <a class="link-no-underline" href="{{dashboardUrl project}}">
+    <span class="little-spacer-right">{{qualifierIcon "TRK"}}</span>{{projectLongName}}
   </a>
+
   {{#if subProject}}
-    <a class="component-name-parent link-no-underline" href="{{dashboardUrl subProject}}">
-      {{qualifierIcon "TRK"}}&nbsp;{{subProjectLongName}}
+    <span class="slash-separator"></span>
+    <a class="link-no-underline" href="{{dashboardUrl subProject}}">
+      <span class="little-spacer-right">{{qualifierIcon "TRK"}}</span>{{subProjectLongName}}
     </a>
   {{/if}}
-  <a class="component-name-file link-no-underline" href="{{dashboardUrl component}}">
-    {{qualifierIcon componentQualifier}}&nbsp;{{collapsePath componentLongName}}
+
+  <span class="slash-separator"></span>
+  <a class="link-no-underline" href="{{dashboardUrl component}}">
+    <span class="little-spacer-right">{{qualifierIcon componentQualifier}}</span>{{collapsePath componentLongName}}
   </a>
 </div>

server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js

@@ -58,11 +58,11 @@ export default class ProjectCard extends React.Component {
             )}
             <h2 className="project-card-name">
               {project.organization != null && (
-                <span className="small">
+                <span className="text-normal">
                   <Organization organizationKey={project.organization}/>
                 </span>
               )}
-              <Link to={{ pathname: '/dashboard', query: { id: project.key } }} className="link-base-color">
+              <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>
                 {project.name}
               </Link>
             </h2>

server/sonar-web/src/main/js/components/shared/Organization.js

@@ -21,6 +21,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { getOrganizationByKey, areThereCustomOrganizations } from '../../store/rootReducer';
+import OrganizationLink from '../ui/OrganizationLink';
 
 type OwnProps = {
   organizationKey: string,
@@ -47,8 +48,8 @@ class Organization extends React.Component {
 
     return (
         <span>
-          {organization.name}
-          <span>&nbsp;&#47;&nbsp;</span>
+          <OrganizationLink organization={organization}>{organization.name}</OrganizationLink>
+          <span className="slash-separator"/>
         </span>
     );
   }

server/sonar-web/src/main/js/components/shared/__tests__/__snapshots__/Organization-test.js.snap

@@ -1,9 +1,16 @@
 exports[`test should match snapshot 1`] = `
 <span>
-  foo
-  <span>
-     / 
-  </span>
+  <OrganizationLink
+    organization={
+      Object {
+        "key": "foo",
+        "name": "foo",
+      }
+    }>
+    foo
+  </OrganizationLink>
+  <span
+    className="slash-separator" />
 </span>
 `;
 

server/sonar-web/src/main/js/components/ui/OrganizationLink.js

@@ -0,0 +1,39 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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.
+ */
+// @flow
+import React from 'react';
+import { Link } from 'react-router';
+
+export default class OrganizationLink extends React.Component {
+  props: {
+    children?: Object,
+    organization: {
+      key: string
+    }
+  };
+
+  render () {
+    const { children, organization, ...other } = this.props;
+
+    return (
+        <Link to={`/organizations/${organization.key}`} {...other}>{children}</Link>
+    );
+  }
+}

server/sonar-web/src/main/less/components/ui.less

@@ -140,7 +140,7 @@
   }
 
   > li {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 400;
   }
 
@@ -153,7 +153,7 @@
 
   [class^="icon-"], [class*=" icon-"] {
     position: relative;
-    top: 2px;
+    top: 3px;
   }
 }
 

server/sonar-web/src/main/less/init/misc.less

@@ -129,6 +129,16 @@ td.big-spacer-top    { padding-top: 16px; }
   transition: opacity 0.5s ease;
 }
 
+.slash-separator {
+  margin-left: 4px;
+  margin-right: 4px;
+
+  &:after {
+    content: "/";
+    color: rgba(68, 68, 68, 0.3);
+  }
+}
+
 
 // Background Color
 

server/sonar-web/src/main/less/init/type.less

@@ -129,6 +129,8 @@ small,
 .text-lowercase    { text-transform: lowercase; }
 .text-no-transform { text-transform: none; }
 
+.text-normal { font-weight: normal; }
+
 
 // Color