[UX-512] linkify org and name elements in the Run Details header; rework building of URLs to work off root-relative based on recent discussions

blueocean-dashboard/.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": "@jenkins-cd/jenkins/react",
   "rules": {
+    "react/jsx-no-bind": 0,
     "no-unused-vars": [2, {"varsIgnorePattern": "^React$"}]
   }
 }

blueocean-dashboard/src/main/js/PipelineRoutes.jsx

@@ -34,7 +34,7 @@ export default (
                     <Route path="artifacts" component={RunDetailsArtifacts} />
                 </Route>
 
-                <Redirect from=":pipeline/*" to=":pipeline/activity" />
+                <Redirect from=":pipeline(/*)" to=":pipeline/activity" />
             </Route>
         </Route>
         <Route path="/pipelines" component={OrganizationPipelines}>

blueocean-dashboard/src/main/js/components/PipelinePage.jsx

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
 import {
     Page,
     PageHeader,
@@ -15,6 +16,9 @@ const { object } = PropTypes;
 export default class PipelinePage extends Component {
     render() {
         const { pipeline } = this.context;
+        const { organization, name } = pipeline || {};
+        const orgUrl = `/organizations/${organization}`;
+        const activityUrl = `${orgUrl}/${name}/activity`;
 
         if (!pipeline) {
             return null; // Loading...
@@ -27,7 +31,11 @@ export default class PipelinePage extends Component {
                 <PageHeader>
                     <Title>
                         <WeatherIcon score={pipeline.weatherScore} size="large" />
-                        <h1>{pipeline.organization} / {pipeline.name}</h1>
+                        <h1>
+                            <Link to={orgUrl}>{organization}</Link>
+                            <span> / </span>
+                            <Link to={activityUrl}>{name}</Link>
+                        </h1>
                         <Favorite darkTheme />
                     </Title>
                     <PageTabs base={baseUrl}>

blueocean-dashboard/src/main/js/components/Pipelines.jsx

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
 import PipelineRowItem from './PipelineRowItem';
 import { PipelineRecord } from './records';
 
@@ -18,9 +19,10 @@ export default class Pipelines extends Component {
             return <div>No pipelines found.</div>;
         }
 
-        const dashboardText = !organization ?
-            'Dashboard' :
-            `Dashboard / ${organization}`;
+        const orgLink = organization ?
+            <Link to={`organizations/${organization}`} className="inverse">
+                {organization}
+            </Link> : '';
 
         const pipelineRecords = pipelines
             .map(data => new PipelineRecord(data))
@@ -42,7 +44,11 @@ export default class Pipelines extends Component {
             <Page>
                 <PageHeader>
                     <Title>
-                        <h1>{dashboardText}</h1>
+                        <h1>
+                            <Link to="/" className="inverse">Dashboard</Link>
+                            { organization && ' / ' }
+                            { organization && orgLink }
+                        </h1>
                         <a target="_blank" className="btn-secondary inverse" href={newJobUrl}>
                             New Pipeline
                         </a>

blueocean-dashboard/src/main/js/components/RunDetails.jsx

@@ -17,16 +17,9 @@ import {
     connect,
 } from '../redux';
 
-import { removeLastUrlSegment } from '../util/UrlUtils';
-
 const { func, object, array, any, string } = PropTypes;
 
 class RunDetails extends Component {
-    constructor(props) {
-        super(props);
-
-        this.navigateToChanges = this.navigateToChanges.bind(this);
-    }
     componentWillMount() {
         if (this.context.config && this.context.params) {
             const {
@@ -43,8 +36,28 @@ class RunDetails extends Component {
             this.opener = this.props.previous;
         }
     }
+    navigateToOrganization() {
+        const { organization } = this.props.pipeline;
+        const organizationUrl = `/organizations/${organization}`;
+        this.context.router.push(organizationUrl);
+    }
+    navigateToPipeline() {
+        const { organization, name } = this.props.pipeline;
+        const pipelineUrl = `/organizations/${organization}/${name}`;
+        this.context.router.push(pipelineUrl);
+    }
     navigateToChanges() {
-        const changesUrl = `${removeLastUrlSegment(this.context.location.pathname)}/changes`;
+        const {
+            params: {
+                organization,
+                pipeline: name,
+                branch,
+                runId,
+            },
+        } = this.context;
+
+        const changesUrl = `/organizations/${organization}/${name}` +
+            `/detail/${branch}/${runId}/changes`;
         this.context.router.push(changesUrl);
     }
     render() {
@@ -59,13 +72,15 @@ class RunDetails extends Component {
             router,
             location,
             params: {
+                organization,
                 branch,
                 runId,
                 pipeline: name,
             },
         } = this.context;
 
-        const baseUrl = removeLastUrlSegment(this.context.location.pathname);
+        const baseUrl = `/organizations/${organization}/${name}` +
+            `/detail/${branch}/${runId}`;
 
         const result = this.props.runs.filter(
             (run) => run.id === runId && decodeURIComponent(run.pipeline) === branch)[0];
@@ -73,7 +88,7 @@ class RunDetails extends Component {
         result.name = name;
 
         const afterClose = () => {
-            const fallback = `/pipelines/${name}/`;
+            const fallback = `/organizations/${organization}/${name}/`;
 
             location.pathname = this.opener || fallback;
             location.hash = `#${branch}-${runId}`;
@@ -92,7 +107,9 @@ class RunDetails extends Component {
                 <ModalHeader>
                     <div>
                         <PipelineResult data={result}
-                          onAuthorsClick={this.navigateToChanges}
+                          onOrganizationClick={() => this.navigateToOrganization()}
+                          onNameClick={() => this.navigateToPipeline()}
+                          onAuthorsClick={() => this.navigateToChanges()}
                         />
                         <PageTabs base={baseUrl}>
                             <TabLink to="/pipeline">Pipeline</TabLink>
@@ -124,6 +141,7 @@ RunDetails.contextTypes = {
 
 RunDetails.propTypes = {
     children: PropTypes.node,
+    pipeline: object,
     runs: array,
     isMultiBranch: any,
     fetchIfNeeded: func,