OBS-247: Use ESBuild for JS and remove django-pipeline

.devcontainer/Dockerfile

@@ -36,7 +36,6 @@ RUN pip install --no-cache-dir --no-deps -r requirements.txt && \
 ENV PYTHONUNBUFFERED=1 \
     PYTHONDONTWRITEBYTECODE=1 \
     PYTHONPATH=/app \
-    UGLIFYJS_BINARY=/app/webapp/node_modules/.bin/uglifyjs \
     NPM_ROOT_PATH=/app/webapp/ \
     NODE_PATH=/app/webapp/node_modules/
 

.eslintrc.json

@@ -2,7 +2,8 @@
   "env": {
       "browser": true,
       "jquery": true,
-      "node": true
+      "node": true,
+      "es6": true
   },
   "extends": ["plugin:prettier/recommended", "eslint:recommended"],
   "parserOptions": {

docker/Dockerfile

@@ -33,7 +33,6 @@ RUN pip install --no-cache-dir --no-deps -r requirements.txt && \
 ENV PYTHONUNBUFFERED=1 \
     PYTHONDONTWRITEBYTECODE=1 \
     PYTHONPATH=/app \
-    UGLIFYJS_BINARY=/app/webapp/node_modules/.bin/uglifyjs \
     NPM_ROOT_PATH=/app/webapp/ \
     NODE_PATH=/app/webapp/node_modules/
 

docs/service/webapp.rst

@@ -41,18 +41,17 @@ To ease debugging, you can run a shell in the container:
 Then you can start and stop the webapp, adjust files, and debug.  The webapp
 runs ESBuild's watch mode and Django's StatReloader to reload static file
 changes automatically. This avoids needing to stop, rebuild, and restart the
-container/server on every change.
+container/server on every change to static files. 
+Note that changes to ``esbuild.js`` and other config files may still require stop/rebuild/restart.
 
 
 Static Assets
 =============
 
-At the time of this writing, JS files are collected and processed by
-collectstatic and django-pipeline. All other static assets (CSS, images,
-fonts, etc) are collected and processed by ESBuild. Migration of JS to ESBuild
-is currently in progress, with the intent to retire django-pipeline when
-complete. The collectstatic package will continue to be used in support of the
-internal Django admin pages.
+Static assets (JS, CSS, images, fonts) are collected and processed by ESBuild. 
+Because we host Django admin pages, we also rely on the collectstatic package
+for assets that belong to those internal admin pages. There is minor overlap between ESBuild and collectstatic, 
+particarly relating to images/fonts. However, main site development involves only ESBuild.
 
 Static asset builds are triggered by NPM scripts in ``webapp/package.json``.
 The assets are built into ``/app/webapp/static`` also known as ``STATIC_ROOT``.

webapp/crashstats/api/jinja2/api/documentation.html

@@ -7,7 +7,7 @@
 
 {% block site_js %}
 {{ super() }}
-{% javascript 'api_documentation' %}
+<script src="/static/api/js/api_documentation.min.js" type="module"></script>
 {% endblock %}
 
 {% block doc_title %}API Reference{% endblock %}

webapp/crashstats/api/static/api/js/testdrive.js

@@ -1,8 +1,10 @@
-/* global filesize */
+import { default as Qs } from 'qs';
+import fileSize from 'filesize';
 
 (function ($, document) {
   'use strict';
 
+  var filesize = fileSize;
   var _submission_locked = false;
 
   $.fn.serializeExclusive = function () {

webapp/crashstats/crashstats/jinja2/crashstats/report_index.html

@@ -26,12 +26,7 @@
 
 {% block site_js %}
   {{ super() }}
-  {% javascript 'jquery_ui' %}
-  {% javascript 'tablesorter' %}
-  {% javascript 'bugzilla' %}
-  {% javascript 'correlation' %}
-  {% javascript 'jsonview' %}
-  {% javascript 'report_index' %}
+  <script src="/static/crashstats/js/socorro/report_index.min.js" type="module"></script>
 {% endblock %}
 
 {% block page_title %}[@ {{ report.signature }}] - {{ report.product }} {{ report.version }} Crash Report - Report ID: {{ report.uuid }}{% endblock %}

webapp/crashstats/crashstats/jinja2/crashstats/report_index_pending.html

@@ -7,8 +7,8 @@
 
 {% block site_js %}
   {{ super() }}
-  {% javascript 'report_pending' %}
-{% endblock %}
+  <script src="/static/crashstats/js/socorro/report_pending.min.js" type="module"></script>
+  {% endblock %}
 
 {% block content %}
   <div id="mainbody">

webapp/crashstats/crashstats/jinja2/crashstats_base.html

@@ -17,8 +17,13 @@
     {% endblock %}
 
     {% block site_css %}
-      <link rel="stylesheet" href="/static/crashstats/css/crashstats-base.min.css" />
+      <link rel="stylesheet" href="/static/crashstats/css/crashstats.min.css">
     {% endblock %}
+
+    {% block site_js %}
+      <script src="/static/crashstats/js/crashstats.min.js" type="module"></script>
+    {% endblock %}
+
   </head>
 
   <body>
@@ -153,9 +158,5 @@ <h1>Product Navigation</h1>
 
       <br class="clear" />
     </div>
-
-    {% block site_js %}
-      {% javascript 'crashstats_base' %}
-    {% endblock %}
   </body>
 </html>

webapp/crashstats/crashstats/jinja2/error_base.html

@@ -3,7 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <title>{% block page_title %}Error{% endblock %}</title>
-    <link rel="stylesheet" href="/static/crashstats/css/crashstats-base.min.css" />
+    {% block site_css %}
+      <link rel="stylesheet" href="/static/crashstats/css/crashstats-base.min.css">
+    {% endblock %}
+
+    {% block site_js %}
+      <script src="/static/crashstats/js/error.min.js" type="module"></script>
+    {% endblock %}
   </head>
   <body>
     <div class="page-header">
@@ -13,8 +19,5 @@
     <div id="footer" class="page-footer">
       {% include "footer_nav.html" %}
     </div>
-    {% block site_js %}
-    {% javascript 'error' %}
-    {% endblock %}
   </body>
 </html>

webapp/crashstats/crashstats/static/crashstats/js/esm-shim-jquery.js

@@ -0,0 +1,12 @@
+// # This Source Code Form is subject to the terms of the Mozilla Public
+// # License, v. 2.0. If a copy of the MPL was not distributed with this
+// # file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+// This jQuery shim is necessary as a separate file because imports are hoisted/evaluated before we can assign the global var.
+// By encapsulating this here, this entire shim will process before subsequent imports.
+
+import $ from 'jquery';
+import 'tablesorter/dist/js/jquery.tablesorter.js';
+
+window.jQuery = window.$ = $;
+export { $ };

webapp/crashstats/crashstats/static/crashstats/js/socorro/bugzilla.js

@@ -2,9 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* exported BugLinks */
-
-var BugLinks = (function () {
+export const BugLinks = (function () {
   var NOT_DONE_STATUSES = ['UNCONFIRMED', 'NEW', 'ASSIGNED', 'REOPENED'];
   var URL = '/buginfo/bug'; // TODO move this outside
 

webapp/crashstats/crashstats/static/crashstats/js/socorro/correlation.js

@@ -1,4 +1,4 @@
-/* global Promise, jsSHA */
+import jsSHA from 'jssha';
 
 window.correlations = (function () {
   /**

webapp/crashstats/crashstats/static/crashstats/js/socorro/crashstats-base.js

@@ -0,0 +1,3 @@
+import '../esm-shim-jquery.js';
+import './timeutils.js';
+import './nav.js';

webapp/crashstats/crashstats/static/crashstats/js/socorro/report.js

@@ -1,4 +1,20 @@
-/* global BugLinks */
+import 'jquery-ui/ui/version.js';
+import 'jquery-ui/ui/widget.js';
+import 'jquery-ui/ui/safe-active-element.js';
+import 'jquery-ui/ui/unique-id.js';
+import 'jquery-ui/ui/keycode.js';
+import 'jquery-ui/ui/widgets/mouse.js';
+import 'jquery-ui/ui/widgets/sortable.js';
+import 'jquery-ui/ui/widgets/datepicker.js';
+import 'jquery-ui/ui/widgets/tabs.js';
+
+import 'tablesorter/dist/js/jquery.tablesorter.js';
+
+import 'jquery.json-viewer/json-viewer/jquery.json-viewer.js';
+
+import { BugLinks } from './bugzilla.js';
+import './reprocessing.js';
+import './correlation.js';
 
 $(document).ready(function () {
   /* Idempotent function to display the TelemetryEnvironment with

webapp/crashstats/crashstats/static/crashstats/js/socorro/timeutils.js

@@ -1,3 +1,5 @@
+import { default as moment } from 'moment';
+
 $(function () {
   function replaceTimeTag(inTheFuture) {
     return function () {