Revert "Revert "Bug 1434679 - Remove all usages of jquery from job-view""

This reverts commit 8c00fbe864.

package.json

@@ -36,9 +36,8 @@
     "d3": "5.11.0",
     "fuse.js": "3.4.5",
     "history": "4.9.0",
-    "jquery": "3.4.0",
+    "jquery": "3.4.1",
     "jquery.flot": "0.8.3",
-    "jquery.scrollto": "2.1.2",
     "js-cookie": "2.2.1",
     "js-yaml": "3.13.1",
     "json-e": "3.0.1",

ui/contribute.json

@@ -20,5 +20,5 @@
     "prod": "https://treeherder.mozilla.org/",
     "stage": "https://treeherder.allizom.org/"
   },
-  "keywords": ["css", "django", "jquery", "angular", "js", "python"]
+  "keywords": ["css", "django", "angular", "js", "python"]
 }

ui/helpers/job.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 import { thFailureResults, thPlatformMap } from './constants';
 import { getGroupMapKey } from './aggregateId';
 import { getAllUrlParams, getRepo } from './location';
@@ -107,48 +105,27 @@ export const findInstance = function findInstance(el) {
 
 // Fetch the React instance of the currently selected job.
 export const findSelectedInstance = function findSelectedInstance() {
-  const selectedEl = $('.th-view-content')
-    .find('.job-btn.selected-job')
-    .first();
-  if (selectedEl.length) {
-    return findInstance(selectedEl[0]);
+  const selectedEl = document.querySelector('#push-list .job-btn.selected-job');
+
+  if (selectedEl) {
+    return findInstance(selectedEl);
   }
 };
 
 // Check if the element is visible on screen or not.
 const isOnScreen = function isOnScreen(el) {
-  const viewport = {};
-  viewport.top =
-    $(window).scrollTop() + $('#global-navbar-container').height() + 30;
-  const filterbarheight = $('.active-filters-bar').height();
-  viewport.top =
-    filterbarheight > 0 ? viewport.top + filterbarheight : viewport.top;
-  const updatebarheight = $('.update-alert-panel').height();
-  viewport.top =
-    updatebarheight > 0 ? viewport.top + updatebarheight : viewport.top;
-  viewport.bottom = $(window).height() - $('#details-panel').height() - 20;
-  const bounds = {};
-  bounds.top = el.offset().top;
-  bounds.bottom = bounds.top + el.outerHeight();
-  return bounds.top <= viewport.bottom && bounds.bottom >= viewport.top;
+  const bounding = el.getBoundingClientRect();
+  const offset = el.getBoundingClientRect();
+  const top = offset.top + document.body.scrollTop;
+  const bottom = top + el.offsetHeight;
+
+  return top >= bounding.bottom && bottom <= bounding.top;
 };
 
 // Scroll the element into view.
-// TODO: see if Element.scrollIntoView() can be used here. (bug 1434679)
-export const scrollToElement = function scrollToElement(el, duration) {
-  if (duration === undefined) {
-    duration = 50;
-  }
-  if (el.position() !== undefined) {
-    let scrollOffset = -50;
-    if (window.innerHeight >= 500 && window.innerHeight < 1000) {
-      scrollOffset = -100;
-    } else if (window.innerHeight >= 1000) {
-      scrollOffset = -200;
-    }
-    if (!isOnScreen(el)) {
-      $('.th-global-content').scrollTo(el, duration, { offset: scrollOffset });
-    }
+export const scrollToElement = function scrollToElement(el) {
+  if (!isOnScreen(el)) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
 };
 
@@ -161,31 +138,30 @@ export const findGroupElement = function findGroupElement(job) {
     platform,
     platform_option,
   );
-  const viewContent = $('.th-view-content');
-
-  return viewContent.find(`span[data-group-key='${groupMapKey}']`).first();
+  return document.querySelector(
+    `#push-list span[data-group-key='${groupMapKey}']`,
+  );
 };
 
 export const findGroupInstance = function findGroupInstance(job) {
   const groupEl = findGroupElement(job);
 
-  if (groupEl.length) {
-    return findInstance(groupEl[0]);
+  if (groupEl) {
+    return findInstance(groupEl);
   }
 };
 
 // Fetch the React instance based on the jobId, and if scrollTo
 // is true, then scroll it into view.
 export const findJobInstance = function findJobInstance(jobId, scrollTo) {
-  const jobEl = $('#push-list')
-    .find(`button[data-job-id='${jobId}']`)
-    .first();
-
-  if (jobEl.length) {
+  const jobEl = document.querySelector(
+    `#push-list button[data-job-id='${jobId}']`,
+  );
+  if (jobEl) {
     if (scrollTo) {
       scrollToElement(jobEl);
     }
-    return findInstance(jobEl[0]);
+    return findInstance(jobEl);
   }
 };
 

ui/job-view/details/summary/ActionBar.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Button } from 'reactstrap';
-import $ from 'jquery';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChartBar } from '@fortawesome/free-regular-svg-icons';
 import {
@@ -66,7 +65,7 @@ class ActionBar extends React.PureComponent {
         notify('No logs available for this job', 'info');
         break;
       case 'parsed':
-        $('.logviewer-btn')[0].click();
+        document.querySelector('.logviewer-btn').click();
     }
   };
 
@@ -132,10 +131,14 @@ class ActionBar extends React.PureComponent {
     }
 
     // Spin the retrigger button when retriggers happen
-    $('#retrigger-btn > svg').removeClass('action-bar-spin');
+    document
+      .querySelector('#retrigger-btn > svg')
+      .classList.remove('action-bar-spin');
     window.requestAnimationFrame(() => {
       window.requestAnimationFrame(() => {
-        $('#retrigger-btn > svg').addClass('action-bar-spin');
+        document
+          .querySelector('#retrigger-btn > svg')
+          .classList.add('action-bar-spin');
       });
     });
 

ui/job-view/index.jsx

@@ -6,7 +6,6 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 // Vendor JS
 import 'bootstrap';
-import 'jquery.scrollto';
 
 // Treeherder Styles
 import '../css/treeherder.css';

ui/job-view/redux/stores/selectedJob.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 import {
   findGroupElement,
   findGroupInstance,
@@ -55,7 +53,7 @@ export const doSelectJob = (job, updateDetails) => {
 
   if (selected) selected.setSelected(false);
 
-  const newSelectedElement = findJobInstance(job.id, true);
+  const newSelectedElement = findJobInstance(job.id);
 
   if (newSelectedElement) {
     newSelectedElement.setSelected(true);
@@ -164,11 +162,6 @@ export const changeJob = (
       ? (idx, jobs) => (idx + 1 > jobs.length - 1 ? 0 : idx + 1)
       : (idx, jobs) => (idx - 1 < 0 ? jobs.length - 1 : idx - 1);
 
-  // TODO: (bug 1434679) Move from using jquery here to find the next/prev
-  // component.  This could perhaps be done either with:
-  // * Document functions like ``querySelectorAll``, etc.
-  // * ReactJS with ReactDOM and props.children
-
   // Filter the list of possible jobs down to ONLY ones in the .th-view-content
   // div (excluding pinBoard) and then to the specific selector passed
   // in.  And then to only VISIBLE (not filtered away) jobs.  The exception
@@ -182,18 +175,19 @@ export const changeJob = (
   // to false, but it is still showing to the user because it is still
   // selected.  This is very important to the sheriff workflow.  As soon as
   // selection changes away from it, the job will no longer be visible.
-  const jobs = $('.th-view-content')
-    .find(jobNavSelector.selector)
-    .filter(':visible, .selected-job, .selected-count');
+  const content = document.querySelector('#push-list');
+  const jobs = Array.prototype.slice.call(
+    content.querySelectorAll(jobNavSelector.selector),
+  );
 
   if (jobs.length) {
-    const selectedEl = jobs.filter('.selected-job, .selected-count').first();
-    const selIdx = jobs.index(selectedEl);
+    const selectedEl = content.querySelector('.selected-job, .selected-count');
+    const selIdx = jobs.indexOf(selectedEl);
     const idx = getIndex(selIdx, jobs);
-    const jobEl = $(jobs[idx]);
+    const jobEl = jobs[idx];
 
     if (selIdx !== idx) {
-      const jobId = jobEl.attr('data-job-id');
+      const jobId = jobEl.getAttribute('data-job-id');
       const jobInstance = findJobInstance(jobId, true);
 
       if (jobInstance) {

yarn.lock

@@ -5942,17 +5942,10 @@ jquery.flot@0.8.3:
   resolved "https://registry.yarnpkg.com/jquery.flot/-/jquery.flot-0.8.3.tgz#81d2ec4ffdf0dee729c8a442e8faa399e9b48207"
   integrity sha512-/tEE8J5NjwvStHDaCHkvTJpD7wDS4hE1OEL8xEmhgQfUe0gLUem923PIceNez1mz4yBNx6Hjv7pJcowLNd+nbg==
 
-jquery.scrollto@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/jquery.scrollto/-/jquery.scrollto-2.1.2.tgz#e7580d9c7ac46ef5bb25319483f6f45713fd7c6c"
-  integrity sha1-51gNnHrEbvW7JTGUg/b0VxP9fGw=
-  dependencies:
-    jquery ">=1.8"
-
-jquery@3.4.0, jquery@>=1.8:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.0.tgz#8de513fa0fa4b2c7d2e48a530e26f0596936efdf"
-  integrity sha512-ggRCXln9zEqv6OqAGXFEcshF5dSBvCkzj6Gm2gzuR5fWawaX8t7cxKVkkygKODrDAzKdoYw3l/e3pm3vlT4IbQ==
+jquery@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
 
 js-cookie@2.2.1, js-cookie@^2.2.0:
   version "2.2.1"