Bug 1506424 - Fix logic to unselect job by clicking open areas (#4269)

tests/ui/unit/react/revisions.tests.jsx

@@ -151,7 +151,7 @@ describe('Revision item component', () => {
       />);
 
     const comment = wrapper.find('.revision-comment em');
-    expect(comment.html()).toEqual('<em data-job-clear-on-click="true"><span class="Linkify"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1319926" target="_blank" rel="noopener noreferrer">Bug 1319926</a> - Part 2: Collect telemetry about deprecated String generics methods. r=jandem</span></em>');
+    expect(comment.html()).toEqual('<em><span class="Linkify"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1319926" target="_blank" rel="noopener noreferrer">Bug 1319926</a> - Part 2: Collect telemetry about deprecated String generics methods. r=jandem</span></em>');
   });
 
   it('marks the revision as backed out if the words "Back/Backed out" appear in the comments', () => {
@@ -196,7 +196,7 @@ describe('initials filter', () => {
         title={`${name}: ${email}`}
         author={name}
       />);
-    expect(initials.html()).toEqual('<span title="Starscream: foo@bar.baz"><span class="user-push-icon"><i class="fa fa-user-o" aria-hidden="true" data-job-clear-on-click="true"></i></span><div class="icon-superscript user-push-initials" data-job-clear-on-click="true">S</div></span>');
+    expect(initials.html()).toEqual('<span title="Starscream: foo@bar.baz"><span class="user-push-icon"><i class="fa fa-user-o" aria-hidden="true"></i></span><div class="icon-superscript user-push-initials">S</div></span>');
   });
 
   it('initializes a two-word name', () => {
@@ -207,7 +207,7 @@ describe('initials filter', () => {
         author={name}
       />);
     const userPushInitials = initials.find('.user-push-initials');
-    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials" data-job-clear-on-click="true">OP</div>');
+    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials">OP</div>');
   });
 
   it('initializes a three-word name', () => {
@@ -218,6 +218,6 @@ describe('initials filter', () => {
         author={name}
       />);
     const userPushInitials = initials.find('.user-push-initials');
-    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials" data-job-clear-on-click="true">ST</div>');
+    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials">ST</div>');
   });
 });

ui/job-view/App.jsx

@@ -269,7 +269,7 @@ class App extends React.Component {
                       {serverChangedDelayed && <UpdateAvailable
                         updateButtonClick={this.updateButtonClick}
                       />}
-                      <div id="th-global-content" className="th-global-content" data-job-clear-on-click>
+                      <div id="th-global-content" className="th-global-content">
                         <span className="th-view-content" tabIndex={-1}>
                           <PushList
                             user={user}

ui/job-view/context/SelectedJob.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import intersection from 'lodash/intersection';
 import $ from 'jquery';
 
 import { thEvents, thJobNavSelectors } from '../../helpers/constants';
@@ -251,7 +252,15 @@ class SelectedJobClass extends React.Component {
   }
 
   clearIfEligibleTarget(target) {
-    if (target.hasAttribute('data-job-clear-on-click')) {
+    // Target must be within the "push" area, but not be a dropdown-item or
+    // a btn.
+    // This will exclude the JobDetails and navbars.
+    const globalContent = document.getElementById('th-global-content');
+    const isEligible = globalContent.contains(target) &&
+      target.tagName !== 'A' &&
+      !intersection(target.classList, ['btn', 'dropdown-item']).length;
+
+    if (isEligible) {
       this.clearSelectedJob();
     }
   }

ui/job-view/pushes/JobsAndGroups.jsx

@@ -12,7 +12,7 @@ export default class JobsAndGroups extends React.Component {
     } = this.props;
 
     return (
-      <td className="job-row" data-job-clear-on-click>
+      <td className="job-row">
         {groups.map((group) => {
           if (group.tier !== 1 || group.symbol !== '') {
             return (

ui/job-view/pushes/Platform.jsx

@@ -5,8 +5,8 @@ import JobsAndGroups from './JobsAndGroups';
 function PlatformName(props) {
   const titleText = props.title;
   return (
-    <td className="platform" data-job-clear-on-click>
-      <span title={titleText} data-job-clear-on-click>{titleText}</span>
+    <td className="platform">
+      <span title={titleText}>{titleText}</span>
     </td>
   );
 }
@@ -23,7 +23,7 @@ export default function Platform(props) {
   const { title, groups, id } = platform;
 
   return (
-    <tr id={id} key={id} data-job-clear-on-click>
+    <tr id={id} key={id}>
       <PlatformName title={title} />
       <JobsAndGroups
         groups={groups}

ui/job-view/pushes/Push.jsx

@@ -333,7 +333,7 @@ class Push extends React.Component {
     }
 
     return (
-      <div className="push" ref={(ref) => { this.container = ref; }} data-job-clear-on-click>
+      <div className="push" ref={(ref) => { this.container = ref; }}>
         <PushHeader
           push={push}
           pushId={id}
@@ -362,7 +362,7 @@ class Push extends React.Component {
               repo={currentRepo}
             />
           }
-          <span className="job-list job-list-pad col-7" data-job-clear-on-click>
+          <span className="job-list job-list-pad col-7">
             <PushJobs
               push={push}
               platforms={platforms}

ui/job-view/pushes/PushHeader.jsx

@@ -47,7 +47,6 @@ function PushCounts(props) {
       {percentComplete < 100 && total > 0 &&
         <span
           title="Proportion of jobs that are complete"
-          data-job-clear-on-click
         >{percentComplete}% - {inProgress} in progress</span>
       }
     </span>
@@ -163,8 +162,8 @@ class PushHeader extends React.PureComponent {
 
     return (
       <div className="push-header">
-        <div className="push-bar" data-job-clear-on-click>
-          <span className="push-left" data-job-clear-on-click>
+        <div className="push-bar">
+          <span className="push-left">
             <span className="push-title-left">
               <span>
                 <a

ui/job-view/pushes/PushJobs.jsx

@@ -143,7 +143,7 @@ class PushJobs extends React.Component {
     } = this.props;
 
     return (
-      <table id={this.aggregateId} className="table-hover" data-job-clear-on-click>
+      <table id={this.aggregateId} className="table-hover">
         <tbody onMouseDown={this.onMouseDown}>
           {filteredPlatforms ? filteredPlatforms.map(platform => (
           platform.visible &&

ui/job-view/pushes/PushList.jsx

@@ -70,7 +70,7 @@ class PushList extends React.Component {
             revision={revision}
           />
         }
-        <div className="card card-body get-next" data-job-clear-on-click>
+        <div className="card card-body get-next">
           <span>get next:</span>
           <div className="btn-group">
             {[10, 20, 50].map(count => (

ui/job-view/pushes/Revision.jsx

@@ -22,9 +22,9 @@ export function Initials(props) {
   return (
     <span title={props.title}>
       <span className="user-push-icon">
-        <i className="fa fa-user-o" aria-hidden="true" data-job-clear-on-click />
+        <i className="fa fa-user-o" aria-hidden="true" />
       </span>
-      <div className="icon-superscript user-push-initials" data-job-clear-on-click>{initials}</div>
+      <div className="icon-superscript user-push-initials">{initials}</div>
     </span>
   );
 }
@@ -52,7 +52,7 @@ export class Revision extends React.PureComponent {
 
     return (<li className="clearfix">
       <span className="revision" data-tags={this.tags}>
-        <span className="revision-holder" data-job-clear-on-click>
+        <span className="revision-holder">
           <a
             title={`Open revision ${commitRevision} on ${repo.url}`}
             href={repo.getRevisionHref(commitRevision)}
@@ -65,7 +65,9 @@ export class Revision extends React.PureComponent {
         />
         <span title={this.comment}>
           <span className="revision-comment">
-            <em data-job-clear-on-click><BugLinkify>{this.comment}</BugLinkify></em>
+            <em>
+              <BugLinkify>{this.comment}</BugLinkify>
+            </em>
           </span>
         </span>
       </span>

ui/job-view/pushes/RevisionList.jsx

@@ -13,7 +13,7 @@ export class RevisionList extends React.PureComponent {
     const { push, repo } = this.props;
 
     return (
-      <span className="revision-list col-5" data-job-clear-on-click>
+      <span className="revision-list col-5">
         <ul className="list-unstyled">
           {push.revisions.map(revision =>
             (<Revision