Bug 1472717 - Fix clear selected job when clicking away (#3753)

mozilla · Jul 3, 2018 · 1bf2e61 · 1bf2e61
1 parent b336528
commit 1bf2e61
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 18 deletions.
diff --git a/tests/ui/unit/react/revisions.tests.jsx b/tests/ui/unit/react/revisions.tests.jsx
@@ -161,11 +161,9 @@ describe('Revision item component', () => {
         revision={mockData.revision}
         linkifyBugsFilter={linkifyBugsFilter}
       />);
-    const escapedComment = _.escape(mockData.revision.comments.split('\n')[0]);
-    const linkifiedCommentText = linkifyBugsFilter(escapedComment);
 
     const comment = wrapper.find('.revision-comment em');
-    expect(comment.html()).toEqual(`<em>${linkifiedCommentText}</em>`);
+    expect(comment.html()).toEqual('<em data-job-clear-on-click="true">Bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1319926" data-bugid="1319926" title="bugzilla.mozilla.org">1319926</a> - Part 2: Collect telemetry about deprecated String generics methods. r=jandem</em>');
   });
 
   it('marks the revision as backed out if the words "Back/Backed out" appear in the comments', () => {
@@ -209,7 +207,7 @@ describe('initials filter', function () {
     const initials = mount(<Initials 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"></i></span><div class="icon-superscript user-push-initials">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" data-job-clear-on-click="true"></i></span><div class="icon-superscript user-push-initials" data-job-clear-on-click="true">S</div></span>');
   });
 
   it('initializes a two-word name', function () {
@@ -218,7 +216,7 @@ describe('initials filter', function () {
                                      author={name}
     />);
     const userPushInitials = initials.find('.user-push-initials');
-    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials">OP</div>');
+    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials" data-job-clear-on-click="true">OP</div>');
   });
 
   it('initializes a three-word name', function () {
@@ -227,7 +225,7 @@ describe('initials filter', function () {
                                      author={name}
     />);
     const userPushInitials = initials.find('.user-push-initials');
-    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials">ST</div>');
+    expect(userPushInitials.html()).toEqual('<div class="icon-superscript user-push-initials" data-job-clear-on-click="true">ST</div>');
   });
 });
 
diff --git a/ui/job-view/JobsAndGroups.jsx b/ui/job-view/JobsAndGroups.jsx
@@ -9,7 +9,7 @@ export default class JobsAndGroups extends React.Component {
     const { $injector, groups, repoName, platform, filterPlatformCb } = this.props;
 
     return (
-      <td className="job-row">
+      <td className="job-row" data-job-clear-on-click>
         {groups.map((group) => {
           if (group.tier !== 1 || group.symbol !== '?') {
             return (

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

diff --git a/ui/job-view/Push.jsx b/ui/job-view/Push.jsx
@@ -124,7 +124,7 @@ export default class Push extends React.Component {
     const { id, push_timestamp, revision, job_counts, author } = push;
 
     return (
-      <div className="push" ref={(ref) => { this.container = ref; }}>
+      <div className="push" ref={(ref) => { this.container = ref; }} data-job-clear-on-click>
         <PushHeader
           pushId={id}
           pushTimestamp={push_timestamp}

diff --git a/ui/job-view/PushHeader.jsx b/ui/job-view/PushHeader.jsx
@@ -37,6 +37,7 @@ 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>
@@ -178,8 +179,8 @@ export default class PushHeader extends React.PureComponent {
 
     return (
       <div className="push-header">
-        <div className="push-bar" key="push-header">
-          <span className="push-left">
+        <div className="push-bar" data-job-clear-on-click>
+          <span className="push-left" data-job-clear-on-click>
             <span className="push-title-left">
               <span>
                 <a

diff --git a/ui/job-view/PushJobs.jsx b/ui/job-view/PushJobs.jsx
@@ -214,7 +214,7 @@ export default class PushJobs extends React.Component {
     const { $injector, repoName } = this.props;
 
     return (
-      <table id={this.aggregateId} className="table-hover">
+      <table id={this.aggregateId} className="table-hover" data-job-clear-on-click>
         <tbody onMouseDown={this.onMouseDown}>
           {platforms ? Object.keys(platforms).map(id => (
           platforms[id].visible &&

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