Bug 1497931 - Remove jquery and Bootstrap (#6035)

* refactor components using bootstrap elements with reactstrap * add template for cdn to access Bootstrap CSS * remove bootstrap, jquery and angular library * fixes to get tests passing and add bootstrap link to csp
2020-02-21 12:10:03 -08:00 · 2020-02-21 12:10:03 -08:00 · f83e08b69d
--- a/.neutrinorc.js
+++ b/.neutrinorc.js
@ -16,42 +16,51 @@ module.exports = {
        entry: 'job-view/index.jsx',
        favicon: 'ui/img/tree_open.png',
        title: 'Treeherder',
+        template: 'ui/index.html',
      },
      logviewer: {
        entry: 'logviewer/index.jsx',
        favicon: 'ui/img/logviewerIcon.png',
        title: 'Treeherder Logviewer',
+        template: 'ui/index.html',
      },
      userguide: {
        entry: 'userguide/index.jsx',
        favicon: 'ui/img/tree_open.png',
        title: 'Treeherder User Guide',
+        template: 'ui/index.html',
      },
      login: {
        entry: 'login-callback/index.jsx',
        title: 'Treeherder Login',
+        template: 'ui/index.html',
      },
      testview: {
        entry: 'test-view/index.jsx',
        title: 'Treeherder Test View',
+        template: 'ui/index.html',
      },
      pushhealth: {
        entry: 'push-health/index.jsx',
        title: 'Push Health',
+        template: 'ui/index.html',
      },
      perf: {
        entry: 'perfherder/index.jsx',
        favicon: 'ui/img/line_chart.png',
        title: 'Perfherder',
+        template: 'ui/index.html',
      },
      'intermittent-failures': {
        entry: 'intermittent-failures/index.jsx',
        favicon: 'ui/img/tree_open.png',
        title: 'Intermittent Failures View',
+        template: 'ui/index.html',
      },
      'taskcluster-auth': {
        entry: 'taskcluster-auth-callback/index.jsx',
        title: 'Taskcluster Authentication',
+        template: 'ui/index.html',
      },
    },
    output: '.build/',
--- a/package.json
+++ b/package.json
@ -23,10 +23,8 @@
    "@types/react-dom": "*",
    "ajv": "6.10.2",
    "auth0-js": "9.11.3",
-    "bootstrap": "4.3.1",
    "fuse.js": "3.4.6",
    "history": "4.10.1",
-    "jquery": "3.4.1",
    "js-cookie": "2.2.1",
    "js-yaml": "3.13.1",
    "json-e": "3.0.1",
@ -34,7 +32,6 @@
    "lodash": "4.17.15",
    "moment": "2.24.0",
    "neutrino": "9.0.0",
-    "ng-text-truncate-2": "1.0.1",
    "numeral": "2.0.6",
    "prop-types": "15.7.2",
    "query-string": "6.9.0",
--- a/tests/ui/job-view/Filtering_test.jsx
+++ b/tests/ui/job-view/Filtering_test.jsx
@ -20,6 +20,17 @@ import {
 import jobListFixtureOne from '../mock/job_list/job_1';
 import jobMap from '../mock/job_map';

+// solution to createRange is not a function error for popper (used by reactstrap)
+// https://github.com/mui-org/material-ui/issues/15726#issuecomment-493124813
+global.document.createRange = () => ({
+  setStart: () => {},
+  setEnd: () => {},
+  commonAncestorContainer: {
+    nodeName: 'BODY',
+    ownerDocument: document,
+  },
+});
+
 describe('Filtering', () => {
  const repoName = 'autoland';

--- a/tests/ui/job-view/PushList_test.jsx
+++ b/tests/ui/job-view/PushList_test.jsx
@ -24,6 +24,17 @@ import PushList from '../../../ui/job-view/pushes/PushList';
 import { getApiUrl } from '../../../ui/helpers/url';
 import { findJobInstance } from '../../../ui/helpers/job';

+// solution to createRange is not a function error for popper (used by reactstrap)
+// https://github.com/mui-org/material-ui/issues/15726#issuecomment-493124813
+global.document.createRange = () => ({
+  setStart: () => {},
+  setEnd: () => {},
+  commonAncestorContainer: {
+    nodeName: 'BODY',
+    ownerDocument: document,
+  },
+});
+
 describe('PushList', () => {
  const repoName = 'autoland';
  const currentRepo = {
@ -158,7 +169,7 @@ describe('PushList', () => {
    fireEvent.click(actionMenuButton);

    const setBottomLink = await waitForElement(() =>
-      push2.querySelector('.bottom-of-range-menu-item'),
+      push2.querySelector('[data-testid="bottom-of-range-menu-item"]'),
    );

    expect(setBottomLink.getAttribute('href')).toContain(
@ -184,7 +195,7 @@ describe('PushList', () => {
    fireEvent.click(actionMenuButton);

    const setTopLink = await waitForElement(() =>
-      push1.querySelector('.top-of-range-menu-item'),
+      push1.querySelector('[data-testid="top-of-range-menu-item"]'),
    );

    expect(setTopLink.getAttribute('href')).toContain(
--- a/tests/ui/push-health/TestFailure_test.jsx
+++ b/tests/ui/push-health/TestFailure_test.jsx
@ -1,6 +1,3 @@
-import fs from 'fs';
-import path from 'path';
-
 import React from 'react';
 import fetchMock from 'fetch-mock';
 import {
@ -17,22 +14,6 @@ import pushHealth from '../mock/push_health';
 const repoName = 'autoland';
 const crashFailure = pushHealth.metrics.tests.details.needInvestigation[0];
 const testFailure = pushHealth.metrics.tests.details.needInvestigation[2];
-const cssFile = fs.readFileSync(
-  path.resolve(
-    __dirname,
-    '../../../node_modules/bootstrap/dist/css/bootstrap.css',
-  ),
-);
-
-// Need to use this technique to add the CSS to the document since JSDOM doesn't
-// load the Reactstrap/Bootstrap CSS.
-// Credit: https://stackoverflow.com/questions/52813527/cannot-check-expectelm-not-tobevisible-for-semantic-ui-react-component
-const useStyles = container => {
-  const style = document.createElement('style');
-  style.type = 'text/css';
-  style.innerHTML = cssFile;
-  container.append(style);
-};

 beforeEach(() => {
  fetchMock.get('https://treestatus.mozilla-releng.net/trees/autoland', {
@ -77,28 +58,25 @@ describe('TestFailure', () => {
  });

  test('should not show details by default', async () => {
-    const { container, getByText } = render(testTestFailure(testFailure));
-    useStyles(container);
+    const { getByText, getByTestId } = render(testTestFailure(testFailure));
+    const logLineToggle = await waitForElement(() => getByTestId('log-lines'));

-    // Must use .toBeVisible() rather than .toBeInTheDocument because
-    // Collapse just hides elements, doesn't remove them.
-    expect(
-      await waitForElement(() =>
-        getByText('Transactions that explicitly commit ', {
-          exact: false,
-        }),
-      ),
-    ).not.toBeVisible();
+    // For collapsible components, you must check for 'collapse' (hidden) or 'collapse show' (visible)
+    // or aria-expanded attribute because collapse just hides elements, doesn't remove them.
+    expect(logLineToggle).toHaveClass('collapse');
+    expect(logLineToggle).toHaveAttribute(
+      'aria-expanded',
+      expect.stringMatching('false'),
+    );
    expect(
      await waitForElement(() => getByText('more...')),
    ).toBeInTheDocument();
  });

  test('should show details when click more...', async () => {
-    const { container, getByText } = render(testTestFailure(testFailure));
+    const { getByText } = render(testTestFailure(testFailure));
    const moreLink = getByText('more...');

-    useStyles(container);
    fireEvent.click(moreLink);

    expect(
@ -115,12 +93,9 @@ describe('TestFailure', () => {
  });

  test('should show crash stack and signature when click more...', async () => {
-    const { container, getByText, getAllByText } = render(
-      testTestFailure(crashFailure),
-    );
+    const { getByText, getAllByText } = render(testTestFailure(crashFailure));
    const moreLink = getByText('more...');

-    useStyles(container);
    fireEvent.click(moreLink);

    expect(
--- a/treeherder/middleware.py
+++ b/treeherder/middleware.py
@ -15,7 +15,7 @@ CSP_DIRECTIVES = [
    "script-src 'self' 'unsafe-eval' 'report-sample'",
    # The unsafe-inline is required for react-select's use of emotion (CSS in JS). See bug 1507903.
    # The Google entries are required for IFV's use of the Open Sans font from their CDN.
-    "style-src 'self' 'unsafe-inline' 'report-sample' https://fonts.googleapis.com",
+    "style-src 'self' 'unsafe-inline' 'report-sample' https://fonts.googleapis.com https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css",
    "font-src 'self' https://fonts.gstatic.com",
    # The `data:` is required for images that were inlined by webpack's url-loader (as an optimisation).
    "img-src 'self' data:",
--- a/ui/css/treeherder-details-panel.css
+++ b/ui/css/treeherder-details-panel.css
@ -106,6 +106,8 @@ div#details-panel-content .details-panel-navbar > ul.tab-headers > li {
 .details-panel-navbar .actionbar-nav > li > .btn {
  color: #9fa3a5;
  padding: 4px 15px;
+  margin-bottom: 4px;
+  display: inline-block;
 }

 div#details-panel-content .actionbar-nav > li > a:hover,
@ -186,21 +188,6 @@ div#details-panel-content .actionbar-nav > li > button:focus {
  }
 }

-#actionbar-menu-btn:focus {
-  box-shadow: none;
-  border: none;
-  outline: none;
-}
-
-/* Remove the caret from the ellipses */
-#actionbar-menu-btn.dropdown-toggle::after {
-  display: none;
-}
-
-#job-details-actionbar #actionbar-menu-btn + ul > li {
-  padding: 0;
-}
-
 /*
 * Job details panel (left side)
 */
--- a/ui/css/treeherder-global.css
+++ b/ui/css/treeherder-global.css
@ -89,13 +89,6 @@ input[type='checkbox'] {
  cursor: pointer;
 }

-/* For cases where the base Bootstrap 4 equivalent doesn't
-   work, due to our special uses.*/
-.nav-dropdown-menu-right {
-  left: auto;
-  right: 0;
-}
-
 .form-control:focus {
  border: 1px solid #ced4da;
  box-shadow: none;
--- a/ui/css/treeherder-navbar.css
+++ b/ui/css/treeherder-navbar.css
@ -120,20 +120,6 @@ secondary-nav-bar {
  color: lightgrey;
 }

-.watched-repo-info-btn {
-  padding-left: 6px;
-  padding-right: 9px;
-  border-right: 0;
-}
-
-.watched-repo-dropdown-item {
-  margin: 0 10px;
-}
-
-.watched-repo-dropdown-item > a {
-  white-space: normal;
-}
-
 .watched-repo-navbar {
  overflow: visible;
  flex-direction: row;
@ -323,8 +309,8 @@ fieldset[disabled] .btn-unclassified-failures.active {
 .btn-view-nav:focus,
 .btn-view-nav:active,
 .btn-view-nav.active {
-  background-color: #2c3133;
-  border-color: #1a1d20;
+  background-color: #2c3133 !important;
+  border-color: #1a1d20 !important;
  color: white;
 }
 .btn-view-nav.disabled:hover,
@ -395,7 +381,7 @@ fieldset[disabled] .btn-view-nav-closed.active {
 }

 #notification-dropdown {
-  min-width: 25em;
+  max-width: 25em;
  max-height: 20em;
  overflow-y: scroll;
  padding-left: 20px;
@ -408,8 +394,6 @@ fieldset[disabled] .btn-view-nav-closed.active {
 }

 .notification-dropdown-line {
-  padding-top: 3px;
-  padding-bottom: 3px;
  overflow-x: hidden;
  text-overflow: ellipsis;
 }
--- a/ui/css/treeherder-resultsets.css
+++ b/ui/css/treeherder-resultsets.css
@ -73,11 +73,7 @@
  background-color: transparent;
  padding-left: 9px;
  padding-right: 10px;
-}
-
-.btn-push.btn:focus {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  border: 0;
 }

 .btn-push:hover {
@ -97,11 +93,6 @@ fieldset[disabled] .btn-push:hover {
  color: white;
 }

-th-action-button .btn-push {
-  padding-left: 6px;
-  font-size: 14px;
-}
-
 .watch-commit-btn:not([data-watch-state='none']) {
  border: 1px solid;
  border-radius: 3px;
--- a/ui/index.html
+++ b/ui/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!-- we need Bootstrap CSS for reactstrap but this is the only way to obtain it without installing the entire library -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/ui/intermittent-failures/index.jsx
+++ b/ui/intermittent-failures/index.jsx
@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from 'react-dom';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-table/react-table.css';

 import '../css/treeherder-global.css';
--- a/ui/job-view/details/PinBoard.jsx
+++ b/ui/job-view/details/PinBoard.jsx
@ -3,7 +3,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Button, FormGroup, Input, FormFeedback } from 'reactstrap';
+import {
+  Button,
+  ButtonGroup,
+  FormGroup,
+  Input,
+  FormFeedback,
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlusSquare, faTimes } from '@fortawesome/free-solid-svg-icons';

@ -568,21 +578,25 @@ class PinBoard extends React.Component {
            className="btn-group-vertical"
            title={this.hasPinnedJobs() ? '' : 'No pinned jobs'}
          >
-            <div className="btn-group save-btn-group dropdown">
+            <ButtonGroup className="save-btn-group">
              <Button
-                className={`btn btn-light-bordered btn-xs save-btn ${
+                className={`btn-light-bordered save-btn ${
                  !isLoggedIn || !this.canSaveClassifications()
                    ? 'disabled'
                    : ''
                }`}
                outline
+                size="xs"
                title={this.saveUITitle('classification')}
                onClick={this.save}
              >
                save
              </Button>
-              <Button
-                className={`btn btn-light-bordered btn-xs dropdown-toggle save-btn-dropdown ${
+              <UncontrolledDropdown>
+                <DropdownToggle
+                  size="xs"
+                  caret
+                  className={`btn-light-bordered ${
                    !this.hasPinnedJobs() && !this.pinboardIsDirty()
                      ? 'disabled'
                      : ''
@ -593,46 +607,35 @@ class PinBoard extends React.Component {
                      : 'Additional pinboard functions'
                  }
                  outline
-                data-toggle="dropdown"
-              >
-                <span className="caret" />
-              </Button>
-              <ul className="dropdown-menu save-btn-dropdown-menu">
-                <li
+                />
+                <DropdownMenu className="save-btn-dropdown-menu">
+                  <DropdownItem
+                    tag="a"
                    title={
                      !isLoggedIn ? 'Not logged in' : 'Repeat the pinned jobs'
                    }
-                >
-                  <Button
-                    className={`${!isLoggedIn ? 'disabled' : ''} dropdown-item`}
+                    className={!isLoggedIn ? 'disabled' : ''}
                    onClick={() => !isLoggedIn || this.retriggerAllPinnedJobs()}
                  >
                    Retrigger all
-                  </Button>
-                </li>
-                <li title={this.cancelAllPinnedJobsTitle()}>
-                  <Button
-                    className={`${
-                      this.canCancelAllPinnedJobs() ? '' : 'disabled'
-                    } dropdown-item`}
+                  </DropdownItem>
+                  <DropdownItem
+                    tag="a"
+                    title={this.cancelAllPinnedJobsTitle()}
+                    className={this.canCancelAllPinnedJobs() ? '' : 'disabled'}
                    onClick={() =>
                      this.canCancelAllPinnedJobs() &&
                      this.cancelAllPinnedJobs()
                    }
                  >
                    Cancel all
-                  </Button>
-                </li>
-                <li>
-                  <Button
-                    className="dropdown-item"
-                    onClick={() => this.unPinAll()}
-                  >
+                  </DropdownItem>
+                  <DropdownItem tag="a" onClick={() => this.unPinAll()}>
                    Clear all
-                  </Button>
-                </li>
-              </ul>
-            </div>
+                  </DropdownItem>
+                </DropdownMenu>
+              </UncontrolledDropdown>
+            </ButtonGroup>
          </div>
        </div>
      </div>
--- a/ui/job-view/details/summary/ActionBar.jsx
+++ b/ui/job-view/details/summary/ActionBar.jsx
@ -1,9 +1,13 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Button } from 'reactstrap';
+import {
+  Button,
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChartBar } from '@fortawesome/free-regular-svg-icons';
 import {
@ -444,7 +448,7 @@ class ActionBar extends React.PureComponent {
              <Button
                id="pin-job-btn"
                title="Add this job to the pinboard"
-                className="actionbar-nav-btn btn icon-blue bg-transparent border-0"
+                className="actionbar-nav-btn icon-blue bg-transparent border-0"
                onClick={() => pinJob(selectedJobFull)}
              >
                <FontAwesomeIcon icon={faThumbtack} title="Pin job" />
@ -458,7 +462,7 @@ class ActionBar extends React.PureComponent {
                    ? 'Repeat the selected job'
                    : 'Must be logged in to retrigger a job'
                }
-                className={`actionbar-nav-btn btn bg-transparent border-0 ${
+                className={`actionbar-nav-btn bg-transparent border-0 ${
                  user.isLoggedIn ? 'icon-green' : 'disabled'
                }`}
                disabled={!user.isLoggedIn}
@ -488,7 +492,7 @@ class ActionBar extends React.PureComponent {
              <Button
                id="find-job-btn"
                title="Scroll to selection"
-                className="actionbar-nav-btn btn icon-blue bg-transparent border-0"
+                className="actionbar-nav-btn icon-blue bg-transparent border-0"
                onClick={() =>
                  findJobInstance(jobLogUrls[0] && jobLogUrls[0].job_id, true)
                }
@ -516,40 +520,34 @@ class ActionBar extends React.PureComponent {
                </Button>
              </li>
            )}
-            <li className="dropdown ml-auto">
-              <Button
-                id="actionbar-menu-btn"
+            <li className="ml-auto">
+              <UncontrolledDropdown>
+                <DropdownToggle className="bg-transparent text-light border-0 pr-2 py-2 m-0">
+                  <FontAwesomeIcon
+                    icon={faEllipsisH}
                    title="Other job actions"
-                aria-haspopup="true"
-                aria-expanded="false"
-                className="btn actionbar-nav-btn btn-sm dropdown-toggle bg-transparent text-light border-0 pr-2 py-2 m-0"
-                data-toggle="dropdown"
-              >
-                <FontAwesomeIcon icon={faEllipsisH} title="Other job actions" />
-              </Button>
-              <ul
-                className="dropdown-menu actionbar-menu dropdown-menu-right"
-                role="menu"
-              >
-                <li>
-                  <span
+                    className="align-baseline"
+                  />
+                </DropdownToggle>
+                <DropdownMenu className="actionbar-menu dropdown-menu-right">
+                  <DropdownItem
+                    tag="a"
                    id="backfill-btn"
-                    className={`btn dropdown-item ${
+                    className={`${
                      !user.isLoggedIn || !this.canBackfill() ? 'disabled' : ''
                    }`}
                    title={this.backfillButtonTitle()}
                    onClick={() => !this.canBackfill() || this.backfillJob()}
                  >
                    Backfill
-                  </span>
-                </li>
+                  </DropdownItem>
                  {selectedJobFull.task_id && (
                    <React.Fragment>
-                    <li>
-                      <a
+                      <DropdownItem
+                        tag="a"
                        target="_blank"
                        rel="noopener noreferrer"
-                        className="dropdown-item pl-4"
+                        className="pl-4"
                        href={getInspectTaskUrl(
                          selectedJobFull.task_id,
                          currentRepo.tc_root_url,
@ -557,47 +555,43 @@ class ActionBar extends React.PureComponent {
                        )}
                      >
                        Inspect Task
-                      </a>
-                    </li>
-                    <li>
-                      <Button
-                        className="dropdown-item py-2"
+                      </DropdownItem>
+                      <DropdownItem
+                        tag="a"
+                        className="py-2"
                        onClick={this.createInteractiveTask}
                      >
                        Create Interactive Task
-                      </Button>
-                    </li>
+                      </DropdownItem>
                      {isPerfTest(selectedJobFull) && (
-                      <li>
-                        <Button
-                          className="dropdown-item py-2"
+                        <DropdownItem
+                          tag="a"
+                          className="py-2"
                          onClick={this.createGeckoProfile}
                        >
                          Create Gecko Profile
-                        </Button>
-                      </li>
+                        </DropdownItem>
                      )}
                      {isTestIsolatable(selectedJobFull) && (
-                      <li>
-                        <Button
-                          className="dropdown-item py-2"
+                        <DropdownItem
+                          tag="a"
+                          className="py-2"
                          onClick={this.isolateJob}
                        >
                          Run Isolation Tests
-                        </Button>
-                      </li>
+                        </DropdownItem>
                      )}
-                    <li>
-                      <Button
+                      <DropdownItem
+                        tag="a"
                        onClick={this.toggleCustomJobActions}
                        className="dropdown-item"
                      >
                        Custom Action...
-                      </Button>
-                    </li>
+                      </DropdownItem>
                    </React.Fragment>
                  )}
-              </ul>
+                </DropdownMenu>
+              </UncontrolledDropdown>
            </li>
          </ul>
        </nav>
--- a/ui/job-view/details/summary/LogItem.jsx
+++ b/ui/job-view/details/summary/LogItem.jsx
@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Label } from 'reactstrap';
+import {
+  Button,
+  UncontrolledDropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+} from 'reactstrap';

 function getLogUrlProps(logKey, logUrl, logViewerUrl, logViewerFullUrl) {
  if (logKey === 'rawlog') {
@ -49,48 +55,37 @@ export default function LogItem(props) {
  } = props;

  return (
-    <React.Fragment>
+    <li key={logKey}>
      {/* Case 1: Two or more logurls - Display a dropdown */}
      {logUrls.length > 1 && (
-        <li key={logKey}>
-          <span className="dropdown">
-            <span
-              role="button"
+        <UncontrolledDropdown>
+          <DropdownToggle
            title={`Select a ${logDescription}`}
-              data-toggle="dropdown"
-              className="logviewer-btn btn-view-nav btn-sm nav-menu-btn dropdown-toggle"
+            className="logviewer-btn btn-view-nav"
          >
            {props.children}
-            </span>
-            <ul className="dropdown-menu checkbox-dropdown-menu" role="menu">
-              {logUrls.map(logUrl => {
-                return (
-                  <li key={`${logKey}-${logUrl.id}`}>
-                    <div>
-                      <Label className="dropdown-item">
-                        <a
+          </DropdownToggle>
+          <DropdownMenu>
+            {logUrls.map(logUrl => (
+              <DropdownItem
+                tag="a"
                {...getLogUrlProps(
                  logKey,
                  logUrl,
                  logViewerUrl,
                  logViewerFullUrl,
                )}
+                key={`${logKey}-${logUrl.id}`}
              >
                {logUrl.name} ({logUrl.id})
-                        </a>
-                      </Label>
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
-          </span>
-        </li>
+              </DropdownItem>
+            ))}
+          </DropdownMenu>
+        </UncontrolledDropdown>
      )}

      {/* Case 2: Only one logurl - Display a button */}
      {logUrls.length === 1 && (
-        <li key={logKey}>
        <a
          className="logviewer-btn"
          {...getLogUrlProps(
@ -102,12 +97,10 @@ export default function LogItem(props) {
        >
          {props.children}
        </a>
-        </li>
      )}

      {/* Case 3: No logurl - Display disabled button */}
      {!logUrls.length && (
-        <li key={logKey}>
        <Button
          className="logviewer-btn disabled bg-transparent border-0"
          title="No logs available for this job"
@ -115,9 +108,8 @@ export default function LogItem(props) {
        >
          {props.children}
        </Button>
-        </li>
      )}
-    </React.Fragment>
+    </li>
  );
 }

--- a/ui/job-view/headerbars/FiltersMenu.jsx
+++ b/ui/job-view/headerbars/FiltersMenu.jsx
@ -1,9 +1,14 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Label } from 'reactstrap';
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import { thAllResultStatuses } from '../../helpers/constants';
 import { getJobsUrl } from '../../helpers/url';
@ -38,92 +43,90 @@ function FiltersMenu(props) {
  const { email } = user;

  return (
-    <span>
-      <span className="dropdown">
-        <button
-          id="filterLabel"
-          type="button"
+    <UncontrolledDropdown>
+      <DropdownToggle
        title="Set filters"
-          data-toggle="dropdown"
-          className="btn btn-view-nav nav-menu-btn dropdown-toggle"
+        className="btn-view-nav nav-menu-btn"
+        nav
+        caret
      >
        Filters
-        </button>
-        <ul
-          id="filter-dropdown"
-          className="dropdown-menu nav-dropdown-menu-right checkbox-dropdown-menu"
-          role="menu"
-          aria-labelledby="filterLabel"
-        >
-          <li>
+      </DropdownToggle>
+      <DropdownMenu>
        {resultStatusMenuItems.map(filterName => (
-              <span key={filterName}>
-                <span>
-                  <Label className="dropdown-item">
-                    <input
-                      type="checkbox"
-                      className="mousetrap"
-                      id={filterName}
-                      checked={resultStatus.includes(filterName)}
-                      onChange={() =>
-                        filterModel.toggleResultStatuses([filterName])
-                      }
+          <DropdownItem
+            key={filterName}
+            tag="a"
+            onClick={() => filterModel.toggleResultStatuses([filterName])}
+          >
+            <FontAwesomeIcon
+              icon={faCheck}
+              className={`mr-1 ${
+                resultStatus.includes(filterName) ? '' : 'hide'
+              }`}
+              title={resultStatus.includes(filterName) ? 'Selected' : ''}
            />
            {filterName}
-                  </Label>
-                </span>
-              </span>
+          </DropdownItem>
        ))}
-          </li>
-          <li className="dropdown-divider separator" />
-          <Label className="dropdown-item">
-            <input
-              type="checkbox"
-              id="classified"
-              checked={classifiedState.includes('classified')}
-              onChange={() => filterModel.toggleClassifiedFilter('classified')}
+        <DropdownItem divider />
+        <DropdownItem
+          tag="a"
+          onClick={() => filterModel.toggleClassifiedFilter('classified')}
+        >
+          <FontAwesomeIcon
+            icon={faCheck}
+            className={`mr-1 ${
+              classifiedState.includes('classified') ? '' : 'hide'
+            }`}
+            title={classifiedState.includes('classified') ? 'Selected' : ''}
          />
          classified
-          </Label>
-          <Label className="dropdown-item">
-            <input
-              type="checkbox"
-              id="unclassified"
-              checked={classifiedState.includes('unclassified')}
-              onChange={() =>
-                filterModel.toggleClassifiedFilter('unclassified')
-              }
+        </DropdownItem>
+        <DropdownItem
+          tag="a"
+          onClick={() => filterModel.toggleClassifiedFilter('unclassified')}
+        >
+          <FontAwesomeIcon
+            icon={faCheck}
+            className={`mr-1 ${
+              classifiedState.includes('unclassified') ? '' : 'hide'
+            }`}
+            title={classifiedState.includes('unclassified') ? 'Selected' : ''}
          />
          unclassified
-          </Label>
-          <li className="dropdown-divider separator" />
-          <li
+        </DropdownItem>
+        <DropdownItem divider />
+        <DropdownItem
+          tag="a"
          title="Pin all jobs that pass the global filters"
-            className="dropdown-item"
          onClick={pinAllShownJobs}
        >
          Pin all showing
-          </li>
-          <li
+        </DropdownItem>
+        <DropdownItem
+          tag="a"
          title="Show only superseded jobs"
-            className="dropdown-item"
          onClick={filterModel.setOnlySuperseded}
        >
          Superseded only
-          </li>
-          <li title={`Show only pushes for ${email}`} className="dropdown-item">
-            <a href={getJobsUrl({ author: email })}>My pushes only</a>
-          </li>
-          <li
+        </DropdownItem>
+        <DropdownItem
+          tag="a"
+          title={`Show only pushes for ${email}`}
+          href={getJobsUrl({ author: email })}
+        >
+          My pushes only
+        </DropdownItem>
+        <DropdownItem
+          tag="a"
          title="Reset to default status filters"
-            className="dropdown-item"
          onClick={filterModel.resetNonFieldFilters}
        >
          Reset
-          </li>
-        </ul>
-      </span>
-    </span>
+        </DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
  );
 }

--- a/ui/job-view/headerbars/InfraMenu.jsx
+++ b/ui/job-view/headerbars/InfraMenu.jsx
@ -1,54 +1,46 @@
 import React from 'react';
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';

-export default function InfraMenu() {
-  return (
-    <span className="dropdown">
-      <button
-        id="infraLabel"
-        type="button"
+const InfraMenu = () => (
+  <UncontrolledDropdown>
+    <DropdownToggle
+      className="btn-view-nav nav-menu-btn"
      title="Infrastructure status"
-        data-toggle="dropdown"
-        className="btn btn-view-nav nav-menu-btn dropdown-toggle"
+      nav
+      caret
    >
      Infra
-      </button>
-      <ul
-        id="infra-dropdown"
-        className="dropdown-menu nav-dropdown-menu-right container"
-        role="menu"
-        aria-labelledby="infraLabel"
-      >
-        <li>
-          <a
-            className="dropdown-item"
+    </DropdownToggle>
+    <DropdownMenu right>
+      <DropdownItem
+        tag="a"
        href="https://wiki.mozilla.org/CIDuty"
        target="_blank"
        rel="noopener noreferrer"
      >
        CI Duty
-          </a>
-        </li>
-        <li>
-          <a
-            className="dropdown-item"
+      </DropdownItem>
+      <DropdownItem
        href="https://firefox-ci-tc.services.mozilla.com/provisioners"
        target="_blank"
        rel="noopener noreferrer"
      >
        Taskcluster Workers
-          </a>
-        </li>
-        <li>
-          <a
-            className="dropdown-item"
+      </DropdownItem>
+      <DropdownItem
        href="https://mozilla-releng.net/treestatus"
        target="_blank"
        rel="noopener noreferrer"
      >
        TreeStatus
-          </a>
-        </li>
-      </ul>
-    </span>
-  );
-}
+      </DropdownItem>
+    </DropdownMenu>
+  </UncontrolledDropdown>
+);
+
+export default InfraMenu;
--- a/ui/job-view/headerbars/NotificationsMenu.jsx
+++ b/ui/job-view/headerbars/NotificationsMenu.jsx
@ -9,6 +9,13 @@ import {
  faExclamationTriangle,
  faInfoCircle,
 } from '@fortawesome/free-solid-svg-icons';
+import {
+  Button,
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';

 import { shortDateFormat } from '../../helpers/display';
 import { clearStoredNotifications } from '../redux/stores/notifications';
@ -32,48 +39,34 @@ class NotificationsMenu extends React.Component {
    const { storedNotifications, clearStoredNotifications } = this.props;

    return (
-      <span className="dropdown">
-        <button
-          id="notificationLabel"
-          type="button"
-          title="Recent notifications"
-          aria-label="Recent notifications"
-          data-toggle="dropdown"
-          className="btn btn-view-nav nav-menu-btn"
-        >
+      <UncontrolledDropdown>
+        <DropdownToggle className="btn-view-nav nav-menu-btn">
          <FontAwesomeIcon
            icon={faBell}
            className="lightgray"
            title="Recent notifications"
          />
-        </button>
-        <ul
-          id="notification-dropdown"
-          className="dropdown-menu nav-dropdown-menu-right"
-          role="menu"
-          aria-labelledby="notificationLabel"
-        >
-          <li
-            role="presentation"
-            className="dropdown-header"
-            title="Notifications"
-          >
+        </DropdownToggle>
+        <DropdownMenu id="notification-dropdown" right>
+          <DropdownItem tag="a" title="Notifications" className="pl-0" header>
            Recent notifications
            {!!storedNotifications.length && (
-              <button
-                type="button"
-                className="btn btn-xs btn-light-bordered notification-dropdown-btn"
+              <Button
+                size="xs"
+                outline
+                className="notification-dropdown-btn"
                title="Clear all notifications"
                onClick={clearStoredNotifications}
              >
                Clear all
-              </button>
+              </Button>
            )}
-          </li>
+          </DropdownItem>
          {storedNotifications.length ? (
            storedNotifications.map(notification => (
-              <li
-                className="notification-dropdown-line"
+              <DropdownItem
+                tag="a"
+                className="pl-0 notification-dropdown-line"
                key={`${notification.created}${notification.message}`}
              >
                <span
@ -100,15 +93,15 @@ class NotificationsMenu extends React.Component {
                    {notification.linkText}
                  </a>
                </span>
-              </li>
+              </DropdownItem>
            ))
          ) : (
-            <li>
-              <span>No recent notifications</span>
-            </li>
+            <DropdownItem tag="a" className="pl-0">
+              No recent notifications
+            </DropdownItem>
          )}
-        </ul>
-      </span>
+        </DropdownMenu>
+      </UncontrolledDropdown>
    );
  }
 }
--- a/ui/job-view/headerbars/ReposMenu.jsx
+++ b/ui/job-view/headerbars/ReposMenu.jsx
@ -2,6 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';

 import { getRepoUrl } from '../../helpers/location';

@ -43,21 +49,17 @@ export default function ReposMenu(props) {
  }));

  return (
-    <span>
-      <span className="dropdown">
-        <button
+    <UncontrolledDropdown>
+      <DropdownToggle
        id="repoLabel"
-          type="button"
+        className="btn-view-nav nav-menu-btn"
+        nav
+        caret
        title="Watch a repo"
-          data-toggle="dropdown"
-          className="btn btn-view-nav nav-menu-btn dropdown-toggle"
      >
        Repos
-        </button>
-        <span
-          id="repo-dropdown"
-          className="dropdown-menu nav-dropdown-menu-right container"
-        >
+      </DropdownToggle>
+      <DropdownMenu right id="repo-dropdown">
        <ul
          className="checkbox-dropdown-menu row"
          role="menu"
@ -66,7 +68,10 @@ export default function ReposMenu(props) {
          aria-expanded="false"
        >
          {groupedRepos.map(group => (
-              <span className="repogroup dropdown-item col" key={group.name}>
+            <DropdownItem
+              className="repogroup dropdown-item col"
+              key={group.name}
+            >
              <li
                role="presentation"
                className="dropdown-header"
@ -87,12 +92,11 @@ export default function ReposMenu(props) {
                    </a>
                  </li>
                ))}
-              </span>
+            </DropdownItem>
          ))}
        </ul>
-        </span>
-      </span>
-    </span>
+      </DropdownMenu>
+    </UncontrolledDropdown>
  );
 }

--- a/ui/job-view/headerbars/TiersMenu.jsx
+++ b/ui/job-view/headerbars/TiersMenu.jsx
@ -1,24 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Label,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
+  DropdownItem,
 } from 'reactstrap';
-
-const TIERS = ['1', '2', '3'];
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';

 export default function TiersMenu(props) {
  const { filterModel } = props;
  const shownTiers = filterModel.urlParams.tier || [];
+  const TIERS = ['1', '2', '3'];

  return (
    <UncontrolledDropdown>
      <DropdownToggle
        id="tierLabel"
        title="Show/hide job tiers"
-        className="btn btn-view-nav btn-sm nav-menu-btn dropdown-toggle"
+        className="btn-view-nav nav-menu-btn"
+        caret
      >
        Tiers
      </DropdownToggle>
@ -26,29 +28,23 @@ export default function TiersMenu(props) {
        {TIERS.map(tier => {
          const isOnlyTier = shownTiers.length === 1 && tier === shownTiers[0];
          return (
-            <li key={tier}>
-              <div>
-                <Label
+            <DropdownItem
+              tag="a"
+              key={tier}
+              onClick={() => filterModel.toggleFilter('tier', tier)}
+              className={`dropdown-item ${isOnlyTier ? 'disabled' : ''}`}
+            >
+              <FontAwesomeIcon
+                icon={faCheck}
+                className={`mr-1 ${shownTiers.includes(tier) ? '' : 'hide'}`}
                title={
                  isOnlyTier
                    ? 'Must have at least one tier selected at all times'
                    : ''
                }
-                  className={`dropdown-item ${isOnlyTier ? 'disabled' : ''}`}
-                >
-                  <input
-                    style={{ pointerEvents: 'none' }}
-                    id="tier-checkbox"
-                    type="checkbox"
-                    className="mousetrap"
-                    disabled={isOnlyTier}
-                    checked={shownTiers.includes(tier)}
-                    onChange={() => filterModel.toggleFilter('tier', tier)}
              />
              tier {tier}
-                </Label>
-              </div>
-            </li>
+            </DropdownItem>
          );
        })}
      </DropdownMenu>
--- a/ui/job-view/headerbars/WatchedRepo.jsx
+++ b/ui/job-view/headerbars/WatchedRepo.jsx
@ -10,6 +10,14 @@ import {
  faTimes,
  faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons';
+import {
+  ButtonGroup,
+  Button,
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';

 import TreeStatusModel from '../../models/treeStatus';
 import BugLinkify from '../../shared/BugLinkify';
@ -126,11 +134,12 @@ export default class WatchedRepo extends React.Component {
    const changeRepoUrl = getRepoUrl(watchedRepo);

    return (
-      <span className="btn-group">
-        <a
+      <ButtonGroup>
+        <Button
          href={changeRepoUrl}
-          className={`watched-repo-main-btn btn btn-sm ${btnClass} ${activeClass}`}
+          className={`btn-view-nav ${btnClass} ${activeClass}`}
          title={status}
+          size="sm"
        >
          <FontAwesomeIcon
            icon={icon}
@ -139,86 +148,76 @@ export default class WatchedRepo extends React.Component {
            pulse={pulseIcon}
          />{' '}
          {watchedRepo}
-        </a>
-        <button
-          className={`watched-repo-info-btn btn btn-sm btn-view-nav ${activeClass}`}
-          type="button"
+        </Button>
+        <UncontrolledDropdown>
+          <DropdownToggle className={`btn-view-nav ${activeClass}`}>
+            <FontAwesomeIcon
+              icon={faInfoCircle}
              title={`${watchedRepo} info`}
-          aria-label={`${watchedRepo} info`}
-          data-toggle="dropdown"
-        >
-          <FontAwesomeIcon icon={faInfoCircle} title={`${watchedRepo} info`} />
-        </button>
+            />
+          </DropdownToggle>
          {watchedRepo !== repoName && (
-          <button
-            className={`watched-repo-unwatch-btn btn btn-sm btn-view-nav ${activeClass}`}
-            type="button"
+            <Button
+              className={`btn-view-nav ${activeClass}`}
              onClick={() => unwatchRepo(watchedRepo)}
-            title={`Unwatch ${watchedRepo}`}
-            aria-label={`Unwatch ${watchedRepo}`}
+              size="sm"
            >
-            <FontAwesomeIcon icon={faTimes} title="Unwatch" />
-          </button>
+              <FontAwesomeIcon
+                icon={faTimes}
+                title={`Unwatch ${watchedRepo}`}
+              />
+            </Button>
          )}
-
-        <ul className="dropdown-menu" role="menu">
+          <DropdownMenu>
            {status === 'unsupported' && (
              <React.Fragment>
-              <li className="watched-repo-dropdown-item">
-                <span>
-                  {watchedRepo} is not listed on{' '}
-                  <a
+                <DropdownItem
+                  tag="a"
                  href="https://mozilla-releng.net/treestatus"
                  target="_blank"
                  rel="noopener noreferrer"
                >
-                    Tree Status
-                  </a>
-                </span>
-              </li>
-              <li className="dropdown-divider" />
+                  {watchedRepo} is not listed on Tree Status
+                </DropdownItem>
+                <DropdownItem divider />
              </React.Fragment>
            )}
            {!!reason && (
-            <li className="watched-repo-dropdown-item">
-              <span>
+              <React.Fragment>
+                <DropdownItem tag="a">
                  <BugLinkify>{reason}</BugLinkify>
-              </span>
-            </li>
+                </DropdownItem>
+                <DropdownItem divider />
+              </React.Fragment>
            )}
-          {!!reason && !!messageOfTheDay && <li className="dropdown-divider" />}
+
            {!!messageOfTheDay && (
-            <li className="watched-repo-dropdown-item">
-              <span>
+              <React.Fragment>
+                <DropdownItem tag="a">
                  <BugLinkify>{messageOfTheDay}</BugLinkify>
-              </span>
-            </li>
+                </DropdownItem>
+                <DropdownItem divider />
+              </React.Fragment>
            )}
-          {(!!reason || !!messageOfTheDay) && (
-            <li className="dropdown-divider" />
-          )}
-          <li className="watched-repo-dropdown-item">
-            <a
+            <DropdownItem
+              tag="a"
              href={`https://treestatus.mozilla-releng.net/static/ui/treestatus/show/${treeStatusName}`}
-              className="dropdown-item"
              target="_blank"
              rel="noopener noreferrer"
            >
              Tree Status
-            </a>
-          </li>
-          <li className="watched-repo-dropdown-item">
-            <a
+            </DropdownItem>
+            <DropdownItem
+              tag="a"
              href={repo.pushLogUrl}
-              className="dropdown-item"
              target="_blank"
              rel="noopener noreferrer"
            >
              Pushlog
-            </a>
-          </li>
-        </ul>
-      </span>
+            </DropdownItem>
+          </DropdownMenu>
+        </UncontrolledDropdown>
+      </ButtonGroup>
    );
  }
 }
--- a/ui/job-view/index.jsx
+++ b/ui/job-view/index.jsx
@ -1,12 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';

-// Vendor Styles
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Vendor JS
-import 'bootstrap';
-
 // Treeherder Styles
 import '../css/treeherder.css';
 import '../css/treeherder-global.css';
--- a/ui/job-view/pushes/PushActionMenu.jsx
+++ b/ui/job-view/pushes/PushActionMenu.jsx
@ -1,8 +1,12 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import {
+  DropdownMenu,
+  DropdownItem,
+  DropdownToggle,
+  UncontrolledDropdown,
+} from 'reactstrap';

 import { getUrlParam } from '../../helpers/location';
 import { formatTaskclusterError } from '../../helpers/errorMessage';
@ -150,132 +154,116 @@ class PushActionMenu extends React.PureComponent {
    } = this.state;

    return (
-      <span className="btn-group dropdown" dropdown="true">
-        <button
-          dropdown-toggle="true"
-          className="btn btn-sm btn-push dropdown-toggle"
-          type="button"
+      <React.Fragment>
+        <UncontrolledDropdown className="btn-group">
+          <DropdownToggle
+            size="sm"
+            className="btn-push"
            title="Action menu"
-          data-hover="dropdown"
-          data-toggle="dropdown"
-          data-delay="1000"
            data-testid="push-action-menu-button"
-        >
-          <span className="caret" />
-        </button>
-
-        <ul className="dropdown-menu pull-right">
+            caret
+          />
+          <DropdownMenu>
            {runnableVisible ? (
-            <li
+              <DropdownItem
+                tag="a"
                title="Hide Runnable Jobs"
-              className="dropdown-item"
                onClick={hideRunnableJobs}
              >
                Hide Runnable Jobs
-            </li>
+              </DropdownItem>
            ) : (
-            <li
+              <DropdownItem
+                tag="a"
                title={
                  isLoggedIn ? 'Add new jobs to this push' : 'Must be logged in'
                }
-              className={
-                isLoggedIn ? 'dropdown-item' : 'dropdown-item disabled'
-              }
+                className={isLoggedIn ? '' : 'disabled'}
                onClick={showRunnableJobs}
              >
                Add new jobs
-            </li>
+              </DropdownItem>
            )}
-          {true && (
-            <li
+            <DropdownItem
+              tag="a"
              title={
                isLoggedIn
                  ? 'Add new jobs to this push via a fuzzy search'
                  : 'Must be logged in'
              }
-              className={
-                isLoggedIn ? 'dropdown-item' : 'dropdown-item disabled'
-              }
+              className={isLoggedIn ? '' : 'disabled'}
              onClick={showFuzzyJobs}
            >
              Add new jobs (Search)
-            </li>
-          )}
+            </DropdownItem>
            {triggerMissingRepos.includes(currentRepo.name) && (
-            <li
+              <DropdownItem
+                tag="a"
                title={
                  isLoggedIn
                    ? 'Trigger all jobs that were optimized away'
                    : 'Must be logged in'
                }
-              className={
-                isLoggedIn ? 'dropdown-item' : 'dropdown-item disabled'
-              }
+                className={isLoggedIn ? '' : 'disabled'}
                onClick={this.triggerMissingJobs}
              >
                Trigger missing jobs
-            </li>
+              </DropdownItem>
            )}
-          <li
+            <DropdownItem
+              tag="a"
              title={
                isLoggedIn
                  ? 'Trigger all talos performance tests'
                  : 'Must be logged in'
              }
-            className={isLoggedIn ? 'dropdown-item' : 'dropdown-item disabled'}
+              className={isLoggedIn ? '' : 'disabled'}
              onClick={() => this.triggerAllTalosJobs(revision)}
            >
              Trigger all Talos jobs
-          </li>
-          <li>
-            <a
+            </DropdownItem>
+            <DropdownItem
+              tag="a"
              target="_blank"
              rel="noopener noreferrer"
-              className="dropdown-item"
              href={`https://bugherder.mozilla.org/?cset=${revision}&tree=${currentRepo.name}`}
              title="Use Bugherder to mark the bugs in this push"
            >
              Mark with Bugherder
-            </a>
-          </li>
-          <li
-            className="dropdown-item"
+            </DropdownItem>
+            <DropdownItem
+              tag="a"
              onClick={this.toggleCustomJobActions}
              title="View/Edit/Submit Action tasks for this push"
            >
              Custom Push Action...
-          </li>
-          <li>
-            <a
-              className="dropdown-item top-of-range-menu-item"
+            </DropdownItem>
+            <DropdownItem
+              tag="a"
              href={topOfRangeUrl}
+              data-testid="top-of-range-menu-item"
            >
              Set as top of range
-            </a>
-          </li>
-          <li>
-            <a
-              className="dropdown-item bottom-of-range-menu-item"
+            </DropdownItem>
+            <DropdownItem
+              tag="a"
              href={bottomOfRangeUrl}
+              data-testid="bottom-of-range-menu-item"
            >
              Set as bottom of range
-            </a>
-          </li>
-          <li className="dropdown-divider" />
-          <li>
-            <a
-              className="dropdown-item"
+            </DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem
+              tag="a"
              href={getPushHealthUrl({ repo: currentRepo.name, revision })}
              target="_blank"
              rel="noopener noreferrer"
              title="Enable Health Badges in the Health menu"
            >
              Push Health
-            </a>
-          </li>
-          <li>
-            <a
-              className="dropdown-item"
+            </DropdownItem>
+            <DropdownItem
+              tag="a"
              href={getCompareChooserUrl({
                newProject: currentRepo.name,
                newRevision: revision,
@ -285,9 +273,9 @@ class PushActionMenu extends React.PureComponent {
              title="Compare performance against another revision"
            >
              Compare Performance
-            </a>
-          </li>
-        </ul>
+            </DropdownItem>
+          </DropdownMenu>
+        </UncontrolledDropdown>
        {customJobActionsShowing && (
          <CustomJobActions
            job={null}
@ -297,7 +285,7 @@ class PushActionMenu extends React.PureComponent {
            toggle={this.toggleCustomJobActions}
          />
        )}
-      </span>
+      </React.Fragment>
    );
  }
 }
--- a/ui/login-callback/index.jsx
+++ b/ui/login-callback/index.jsx
@ -2,6 +2,5 @@ import React from 'react';
 import { render } from 'react-dom';

 import LoginCallback from './LoginCallback';
-import 'bootstrap/dist/css/bootstrap.min.css';

 render(<LoginCallback />, document.getElementById('root'));
--- a/ui/logviewer/index.jsx
+++ b/ui/logviewer/index.jsx
@ -1,12 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';

-// Vendor Styles
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Vendor JS
-import 'bootstrap';
-
 // Treeherder Styles
 import '../css/treeherder-global.css';
 import '../css/treeherder-navbar.css';
--- a/ui/perfherder/compare/RetriggerButton.jsx
+++ b/ui/perfherder/compare/RetriggerButton.jsx
@ -11,7 +11,7 @@ export default function RetriggerButton(props) {

  return (
    <Button
-      className="retrigger-btn btn icon-green mr-1 py-0 px-1"
+      className="retrigger-btn icon-green mr-1 py-0 px-1"
      title={title}
      onClick={onClick}
    >
--- a/ui/perfherder/index.jsx
+++ b/ui/perfherder/index.jsx
@ -1,11 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-table/react-table.css';

-// TODO remove Vendor JS
-import 'bootstrap';
-
 import '../css/treeherder-global.css';
 import '../css/treeherder-navbar.css';
 import '../css/perf.css';
--- a/ui/push-health/TestFailure.jsx
+++ b/ui/push-health/TestFailure.jsx
@ -159,7 +159,7 @@ class TestFailure extends React.PureComponent {
              >
                {detailsShowing ? 'less...' : 'more...'}
              </Button>
-              <UncontrolledCollapse toggler={key}>
+              <UncontrolledCollapse toggler={key} data-testid="log-lines">
                {logLines.map(logLine => (
                  <Row className="small mt-2" key={logLine.line_number}>
                    <Container className="pre-wrap text-break">
--- a/ui/push-health/index.jsx
+++ b/ui/push-health/index.jsx
@ -1,9 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';

-// Vendor Styles
-import 'bootstrap/dist/css/bootstrap.min.css';
-
 // Treeherder Styles
 import '../css/treeherder-navbar.css';
 import '../css/treeherder-job-buttons.css';
--- a/ui/shared/DropdownMenuItems.jsx
+++ b/ui/shared/DropdownMenuItems.jsx
@ -14,7 +14,7 @@ const createDropdownItem = (item, namespace, updateData, selectedItem) => {
      <FontAwesomeIcon
        icon={faCheck}
        className={`mr-1 ${selectedItem === item ? '' : 'hide'}`}
-        title={selectedItem === item ? 'Checked' : ''}
+        title={selectedItem === item ? 'Selected' : ''}
      />
      {item}
    </DropdownItem>
@ -26,7 +26,7 @@ const DropdownMenuItems = ({
  updateData,
  options,
  pinned,
-  namespace = '',
+  namespace,
 }) => (
  <DropdownMenu className="overflow-auto dropdown-menu-height">
    {/* Items pinned to top of dropdown */}
@ -52,12 +52,14 @@ DropdownMenuItems.propTypes = {
  selectedItem: PropTypes.string,
  options: PropTypes.arrayOf(PropTypes.string).isRequired,
  pinned: PropTypes.arrayOf(PropTypes.string),
+  namespace: PropTypes.string,
 };

 DropdownMenuItems.defaultProps = {
  updateData: null,
  selectedItem: null,
  pinned: [],
+  namespace: '',
 };

 export default DropdownMenuItems;
--- a/ui/taskcluster-auth-callback/index.jsx
+++ b/ui/taskcluster-auth-callback/index.jsx
@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from 'react-dom';
-import 'bootstrap/dist/css/bootstrap.min.css';

 import TaskClusterCallback from './TaskclusterCallback';

--- a/ui/test-view/index.jsx
+++ b/ui/test-view/index.jsx
@ -1,7 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import 'bootstrap/dist/css/bootstrap.min.css';

 import '../css/treeherder-test-view.css';
 import { store, actions } from './redux/store';
--- a/ui/userguide/index.jsx
+++ b/ui/userguide/index.jsx
@ -1,8 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';

-import 'bootstrap/dist/css/bootstrap.min.css';
-
 import '../css/treeherder-global.css';
 import '../css/treeherder-userguide.css';
 import '../css/treeherder-job-buttons.css';
--- a/yarn.lock
+++ b/yarn.lock
@ -1566,11 +1566,6 @@ abab@^2.0.0:
  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
  integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==

-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
  version "1.3.7"
  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@ -1735,19 +1730,11 @@ anymatch@^2.0.0:
    micromatch "^3.1.4"
    normalize-path "^2.1.1"

-aproba@^1.0.3, aproba@^1.1.1:
+aproba@^1.1.1:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==

-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 argparse@^1.0.7, argparse@^1.0.9:
  version "1.0.10"
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@ -2156,11 +2143,6 @@ boom@7.x.x:
  dependencies:
    hoek "6.x.x"

-bootstrap@4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
-  integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
-
 bounce@1.x.x:
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/bounce/-/bounce-1.2.3.tgz#2b286d36eb21d5f08fe672dd8cd37a109baad121"
@ -2703,11 +2685,6 @@ console-browserify@^1.1.0:
  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==

-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
 "consolidated-events@^1.1.1 || ^2.0.0":
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-2.0.2.tgz#da8d8f8c2b232831413d9e190dc11669c79f4a91"
@ -3083,7 +3060,7 @@ debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
  dependencies:
    ms "^2.1.1"

-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
  version "3.2.6"
  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@ -3112,11 +3089,6 @@ deep-equal@^1.0.1, deep-equal@^1.1.1:
    object-keys "^1.1.1"
    regexp.prototype.flags "^1.2.0"

-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 deep-is@~0.1.3:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@ -3199,11 +3171,6 @@ delayed-stream@~1.0.0:
  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=

-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
 depd@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@ -3227,11 +3194,6 @@ detect-file@^1.0.0:
  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
  integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=

-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@ -4382,13 +4344,6 @@ fs-extra@^8.1.0:
    jsonfile "^4.0.0"
    universalify "^0.1.0"

-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-write-stream-atomic@^1.0.8:
  version "1.0.10"
  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@ -4411,7 +4366,6 @@ fsevents@^1.2.7:
  dependencies:
    bindings "^1.5.0"
    nan "^2.12.1"
-    node-pre-gyp "*"

 function-bind@^1.1.1:
  version "1.1.1"
@ -4442,20 +4396,6 @@ fuse.js@3.4.6:
  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.6.tgz#545c3411fed88bf2e27c457cab6e73e7af697a45"
  integrity sha512-H6aJY4UpLFwxj1+5nAvufom5b2BT2v45P1MkPvdGIK8fWjQx/7o6tTT1+ALV0yawQvbmvCF0ufl2et8eJ7v7Cg==

-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 gensync@^1.0.0-beta.1:
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
@ -4662,11 +4602,6 @@ has-symbols@^1.0.0, has-symbols@^1.0.1:
  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==

-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
 has-value@^0.3.1:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@ -4994,7 +4929,7 @@ https-proxy-agent@^4.0.0:
    agent-base "5"
    debug "4"

-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
  version "0.4.24"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@ -5030,7 +4965,7 @@ iferr@^0.1.5:
  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=

-ignore-walk@3.0.3, ignore-walk@^3.0.1:
+ignore-walk@3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
@ -5111,7 +5046,7 @@ inherits@2.0.3:
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=

-ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.4, ini@^1.3.5:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
@ -5918,11 +5853,6 @@ jest@24.9.0:
    import-local "^2.0.0"
    jest-cli "^24.9.0"

-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"
  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
@ -6550,21 +6480,6 @@ minimist@^1.1.1, minimist@^1.2.0:
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=

-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@ -6594,7 +6509,7 @@ mixin-deep@^1.2.0:
    for-in "^1.0.2"
    is-extendable "^1.0.1"

-mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1:
+mkdirp@0.5.1, mkdirp@^0.5.1:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@ -6699,15 +6614,6 @@ nearley@^2.7.10:
    randexp "0.4.6"
    semver "^5.4.1"

-needle@^2.2.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.2.tgz#3342dea100b7160960a450dc8c22160ac712a528"
-  integrity sha512-DUzITvPVDUy6vczKKYTnWc/pBZ0EnjMJnQ3y+Jo5zfKFimJs7S3HFCxCRZYB9FUZcrzUQr3WsmvZgddMEIZv6w==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@ -6728,11 +6634,6 @@ neutrino@9.0.0:
    webpack-chain "^6.1.0"
    yargs-parser "^16.1.0"

-ng-text-truncate-2@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ng-text-truncate-2/-/ng-text-truncate-2-1.0.1.tgz#167b92b04f092e940cc6d60a336fa604570392bd"
-  integrity sha1-FnuSsE8JLpQMxtYKM2+mBFcDkr0=
-
 nice-try@^1.0.4:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@ -6805,22 +6706,6 @@ node-notifier@^5.4.2:
    shellwords "^0.1.1"
    which "^1.3.0"

-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.49:
  version "1.1.49"
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.49.tgz#67ba5a3fac2319262675ef864ed56798bb33b93e"
@ -6828,14 +6713,6 @@ node-releases@^1.1.49:
  dependencies:
    semver "^6.3.0"

-nopt@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
-  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-package-data@^2.3.2:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@ -6868,27 +6745,6 @@ normalize-url@1.9.1:
    query-string "^4.1.0"
    sort-keys "^1.0.0"

-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
 npm-run-path@^2.0.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@ -6896,16 +6752,6 @@ npm-run-path@^2.0.0:
  dependencies:
    path-key "^2.0.0"

-npmlog@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nth-check@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@ -7098,11 +6944,6 @@ os-browserify@^0.3.0:
  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=

-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
 os-locale@^3.0.0, os-locale@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
@ -7112,19 +6953,11 @@ os-locale@^3.0.0, os-locale@^3.1.0:
    lcid "^2.0.0"
    mem "^4.0.0"

-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@~1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=

-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-defer@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@ -7802,16 +7635,6 @@ raw-body@2.4.0:
    iconv-lite "0.4.24"
    unpipe "1.0.0"

-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-dates@21.5.1:
  version "21.5.1"
  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.5.1.tgz#de8d7ff862f08bdf96cc9045721149b7199c21b4"
@ -8184,7 +8007,7 @@ read-pkg@^3.0.0:
    normalize-package-data "^2.3.2"
    path-type "^3.0.0"

-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
  version "2.3.7"
  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@ -8539,7 +8362,7 @@ rimraf@2.6.3:
  dependencies:
    glob "^7.1.3"

-rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
+rimraf@^2.5.4, rimraf@^2.6.3:
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@ -8667,7 +8490,7 @@ selfsigned@^1.10.7:
  dependencies:
    node-forge "0.9.0"

-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
  version "5.7.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@ -8729,7 +8552,7 @@ serve-static@1.14.1:
    parseurl "~1.3.3"
    send "0.17.1"

-set-blocking@^2.0.0, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
@ -9119,7 +8942,7 @@ string-width@^1.0.1:
    is-fullwidth-code-point "^1.0.0"
    strip-ansi "^3.0.0"

-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.1:
+string-width@^2.0.0, string-width@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@ -9246,11 +9069,6 @@ strip-json-comments@^3.0.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==

-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 stubs@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/stubs/-/stubs-3.0.0.tgz#e8d2ba1fa9c90570303c030b6900f7d5f89abe5b"
@ -9326,19 +9144,6 @@ tapable@^1.0.0, tapable@^1.1.3:
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==

-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 taskcluster-client-web@8.1.1:
  version "8.1.1"
  resolved "https://registry.yarnpkg.com/taskcluster-client-web/-/taskcluster-client-web-8.1.1.tgz#6f557f5e3c26d9305568860300e4e5f7c18d2632"
@ -10440,13 +10245,6 @@ which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
  dependencies:
    isexe "^2.0.0"

-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
 winchan@^0.2.2:
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/winchan/-/winchan-0.2.2.tgz#6766917b88e5e1cb75f455ffc7cc13f51e5c834e"
@ -10536,7 +10334,7 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==

-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==