[JENKINS-35781] fix a bug where clicking on a favorite on the Branches tab instead triggered the modal to open. React eventing is fun...

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

@@ -3,6 +3,7 @@ import { CommitHash, ReadableDate } from '@jenkins-cd/design-language';
 import { LiveStatusIndicator, WeatherIcon } from '@jenkins-cd/design-language';
 import Extensions from '@jenkins-cd/js-extensions';
 import RunPipeline from './RunPipeline.jsx';
+import { StopPropagation } from './StopPropagation';
 import { buildRunDetailsUrl } from '../util/UrlUtils';
 
 const { object } = PropTypes;
@@ -55,13 +56,15 @@ export default class Branches extends Component {
                 <td><CommitHash commitId={commitId} /></td>
                 <td>{msg || '-'}</td>
                 <td><ReadableDate date={endTime} liveUpdate /></td>
-                <td className="actions">
-                    <RunPipeline organization={organization} pipeline={fullName} branch={encodeURIComponent(branchName)} />
-                    <Extensions.Renderer
-                      extensionPoint="jenkins.pipeline.branches.list.action"
-                      pipeline={data}
-                      store={this.context.store}
-                    />
+                <td>
+                    <StopPropagation className="actions">
+                        <RunPipeline organization={organization} pipeline={fullName} branch={encodeURIComponent(branchName)} />
+                        <Extensions.Renderer
+                          extensionPoint="jenkins.pipeline.branches.list.action"
+                          pipeline={data}
+                          store={this.context.store}
+                        />
+                    </StopPropagation>
                 </td>
             </tr>
         );

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

@@ -0,0 +1,40 @@
+/**
+ * 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 (
+            <div
+              className={this.props.className}
+              onClick={(event) => this._suppressEvent(event)}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+StopPropagation.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};