[JENKINS-37023] fix js-extensions that was incorrectly merged

# Conflicts:
#	blueocean-dashboard/package.json
#	blueocean-personalization/package.json
#	blueocean-web/package.json

blueocean-dashboard/package.json

@@ -35,7 +35,7 @@
     "skin-deep": "^0.16.0"
   },
   "dependencies": {
-    "@jenkins-cd/design-language": "0.0.65",
+    "@jenkins-cd/design-language": "0.0.66",
     "@jenkins-cd/js-extensions": "0.0.20",
     "@jenkins-cd/js-modules": "0.0.5",
     "@jenkins-cd/sse-gateway": "0.0.7",

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

@@ -60,6 +60,7 @@ export default class Pipelines extends Component {
                         <Extensions.Renderer
                           extensionPoint="jenkins.pipeline.list.top"
                           store={this.context.store}
+                          router={this.context.router}
                         />
                         <Table
                           className="pipelines-table fixed"
@@ -88,4 +89,5 @@ Pipelines.contextTypes = {
     params: PropTypes.object,
     pipelines: array,
     store: PropTypes.object,
+    router: PropTypes.object,
 };

blueocean-personalization/package.json

@@ -34,7 +34,7 @@
     "react-addons-test-utils": "15.0.1"
   },
   "dependencies": {
-    "@jenkins-cd/design-language": "0.0.63",
+    "@jenkins-cd/design-language": "0.0.66",
     "@jenkins-cd/js-extensions": "0.0.20",
     "@jenkins-cd/js-modules": "0.0.5",
     "@jenkins-cd/sse-gateway": "0.0.7",

blueocean-personalization/src/main/js/components/DashboardCards.jsx

@@ -147,6 +147,7 @@ export class DashboardCards extends Component {
             return (
                 <div key={favorite._links.self.href}>
                     <PipelineCard
+                      router={this.props.router}
                       status={status}
                       startTime={startTime}
                       estimatedDuration={estimatedDuration}
@@ -186,6 +187,7 @@ export class DashboardCards extends Component {
 
 DashboardCards.propTypes = {
     store: PropTypes.object,
+    router: PropTypes.object,
     favorites: PropTypes.instanceOf(List),
     toggleFavorite: PropTypes.func,
 };

blueocean-personalization/src/main/js/components/PipelineCard.jsx

@@ -6,6 +6,8 @@ import { Link } from 'react-router';
 import { Icon } from 'react-material-icons-blue';
 import { Favorite, LiveStatusIndicator } from '@jenkins-cd/design-language';
 
+import { stopProp } from './StopPropagation';
+
 /**
  * PipelineCard displays an informational card about a Pipeline and its status.
  *
@@ -76,19 +78,28 @@ export class PipelineCard extends Component {
         const showRun = status && (status.toLowerCase() === 'failure' || status.toLowerCase() === 'aborted');
         const commitText = commitId ? commitId.substr(0, 7) : '';
 
-        const runUrl = `/organizations/${encodeURIComponent(this.props.organization)}/` +
-            `${encodeURIComponent(this.props.fullName)}/detail/` +
-            `${encodeURIComponent(this.props.branch || this.props.pipeline)}/${encodeURIComponent(this.props.runId)}/pipeline`;
+        const activityUrl = `/organizations/${encodeURIComponent(this.props.organization)}/` +
+        `${encodeURIComponent(this.props.fullName)}/activity`;
+
+        const navigateToRunDetails = () => {
+            const runUrl = `/organizations/${encodeURIComponent(this.props.organization)}/` +
+                `${encodeURIComponent(this.props.fullName)}/detail/` +
+                `${this.props.branch || this.props.pipeline}/${encodeURIComponent(this.props.runId)}/pipeline`;
+
+            this.props.router.push({
+                pathname: runUrl,
+            });
+        };
 
         return (
-            <div className={`pipeline-card ${bgClass}`}>
+            <div className={`pipeline-card ${bgClass}`} onClick={() => navigateToRunDetails()}>
                 <LiveStatusIndicator
                   result={status} startTime={startTime} estimatedDuration={estimatedDuration}
                   width={'24px'} height={'24px'} noBackground
                 />
 
                 <span className="name">
-                    <Link to={runUrl}>
+                    <Link to={activityUrl} onClick={(event) => stopProp(event)}>
                         {this.props.organization} / <span title={this.props.fullName}>{this.props.pipeline}</span>
                     </Link>
                 </span>
@@ -113,7 +124,7 @@ export class PipelineCard extends Component {
 
                 <span className="actions">
                     { showRun &&
-                    <a className="run" title="Run Again" onClick={() => this._onRunClick()}>
+                    <a className="run" title="Run Again" onClick={(event) => {stopProp(event); this._onRunClick();}}>
                         <Icon size={24} icon="replay" />
                     </a>
                     }
@@ -128,6 +139,7 @@ export class PipelineCard extends Component {
 }
 
 PipelineCard.propTypes = {
+    router: PropTypes.object,
     status: PropTypes.string,
     startTime: PropTypes.string,
     estimatedDuration: PropTypes.number,

blueocean-personalization/src/main/js/components/StopPropagation.js

@@ -0,0 +1,44 @@
+/**
+ * Created by cmeyers on 7/27/16.
+ */
+import React, { Component, PropTypes } from 'react';
+
+/**
+ * Stops propagation of click events inside this container.
+ * Useful for areas in UI where children should always handle the event, no matter what parent listeners are bound.
+ *
+ * This is a workaround for the following scenario:
+ * 1. Parent DOM element has a click listener,
+ * 2. Child DOM element added via an extension point calls event.stopPropagation() in its own click listener.
+ *
+ * This fails to work, even when calling stopProp and stopImmediateProp on the native event,
+ * probably beacuse there are two React trees each with their own document listener.
+ *
+ * see: http://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
+ */
+export class StopPropagation extends Component {
+
+    _suppressEvent(event) {
+        event.stopPropagation();
+    }
+
+    render() {
+        return (
+            <span
+              className={this.props.className}
+              onClick={(event) => this._suppressEvent(event)}
+            >
+                {this.props.children}
+            </span>
+        );
+    }
+}
+
+export const stopProp = (event) => {
+    event.stopPropagation();
+};
+
+StopPropagation.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};

blueocean-personalization/src/main/less/components/pipeline-card.less

@@ -5,9 +5,11 @@
     color: white;
     min-width: 400px;
     padding: 15px;
+    cursor: pointer;
 
     a {
         color: white;
+        cursor: pointer;
     }
 
     .name, .branch, .commit {

blueocean-web/package.json

@@ -25,7 +25,7 @@
     "zombie": "^4.2.1"
   },
   "dependencies": {
-    "@jenkins-cd/design-language": "0.0.65",
+    "@jenkins-cd/design-language": "0.0.66",
     "@jenkins-cd/js-extensions": "0.0.20",
     "@jenkins-cd/js-modules": "0.0.5",
     "history": "2.0.2",