From 81e7a1cfc8a3da2def4c76431601d1c0a7db4eb4 Mon Sep 17 00:00:00 2001
From: Alex Lubbock <code@alexlubbock.com>
Date: Wed, 4 Sep 2024 10:55:41 +0100
Subject: [PATCH] refactor: commonJS to ESM, fix Sentry export (#86)

---
 thunorweb/templates/base-inner.html           | 12 +----
 thunorweb/templates/plotly_plot.html          | 10 +---
 thunorweb/templates/sentry_init.html          | 10 ++++
 thunorweb/webpack/Dockerfile                  |  1 +
 thunorweb/webpack/sentry.js                   |  1 +
 thunorweb/webpack/thunorweb/js/dataset.js     | 28 ++++++-----
 .../thunorweb/js/dataset_permissions.js       | 14 ++----
 thunorweb/webpack/thunorweb/js/home.js        | 24 +++++-----
 .../webpack/thunorweb/js/modules/ajax.js      |  7 +--
 .../thunorweb/js/modules/dataset_table.js     | 12 ++---
 thunorweb/webpack/thunorweb/js/modules/ui.js  |  4 +-
 .../webpack/thunorweb/js/modules/util.js      |  5 +-
 .../webpack/thunorweb/js/plate_mapper.js      | 28 +++++------
 .../webpack/thunorweb/js/plate_upload.js      | 12 ++---
 thunorweb/webpack/thunorweb/js/plots.js       | 31 +++++++------
 thunorweb/webpack/thunorweb/js/pyhts.js       | 31 +++++++------
 thunorweb/webpack/thunorweb/js/tag_editor.js  | 46 +++++++++----------
 thunorweb/webpack/webpack.config.js           |  2 +-
 18 files changed, 130 insertions(+), 148 deletions(-)
 create mode 100644 thunorweb/templates/sentry_init.html
 create mode 100644 thunorweb/webpack/sentry.js

diff --git a/thunorweb/templates/base-inner.html b/thunorweb/templates/base-inner.html
index e6bde669..6a970bd5 100644
--- a/thunorweb/templates/base-inner.html
+++ b/thunorweb/templates/base-inner.html
@@ -112,16 +112,8 @@
 </div>
 <div class="powered-by">Powered by <i class="fa fa-bolt"></i> Thunor</div>
 
-{% load webpack_loader %}{% get_files 'sentry' 'js' as sentry_js %}
-<script src="{{ sentry_js.0.url }}" crossorigin="anonymous"></script>
-
-<script>{% load thunorweb_tags %}Sentry.init({
-    dsn: '{% sentry_public_dsn %}',
-    environment: '{% sentry_environment %}', release: '{% thunorweb_version %}'
-});
-{% if user.is_authenticated %}Sentry.setUser({email: '{{ user.email }}',
-    id: '{{ user.id }}'});{% endif %}</script>
-
+{% load webpack_loader %}
+{% include "sentry_init.html" %}
 {% render_bundle 'vendor' 'js' %}
 <script>$('.tt').tooltip();
 $('.help-link').click(function(e) {
diff --git a/thunorweb/templates/plotly_plot.html b/thunorweb/templates/plotly_plot.html
index 1712682a..14751c82 100644
--- a/thunorweb/templates/plotly_plot.html
+++ b/thunorweb/templates/plotly_plot.html
@@ -12,14 +12,8 @@
 </div>
 <div class="powered-by"><i class="fa fa-bolt"></i> Thunor</div>
 
-{% load webpack_loader %}{% get_files 'sentry' 'js' as sentry_js %}
-<script src="{{ sentry_js.0.url }}" crossorigin="anonymous"></script>
-<script>{% load thunorweb_tags %}Sentry.init({
-    dsn: '{% sentry_public_dsn %}',
-    environment: '{% sentry_environment %}', release: '{% thunorweb_version %}'
-});
-{% if user.is_authenticated %}Sentry.setUser({email: '{{ user.email }}',
-    id: '{{ user.id }}'});{% endif %}</script>
+{% load webpack_loader %}
+{% include "sentry_init.html" %}
 {% render_bundle 'vendor' 'js' %}
 {% render_bundle 'app' 'js' %}
 {% render_bundle 'plots' 'js' %}
diff --git a/thunorweb/templates/sentry_init.html b/thunorweb/templates/sentry_init.html
new file mode 100644
index 00000000..ecc3187d
--- /dev/null
+++ b/thunorweb/templates/sentry_init.html
@@ -0,0 +1,10 @@
+{% load webpack_loader %}
+{% get_files 'sentry' 'js' as sentry_js %}
+<script src="{{ sentry_js.0.url }}" crossorigin="anonymous"></script>
+
+<script>{% load thunorweb_tags %}Sentry.init({
+    dsn: '{% sentry_public_dsn %}',
+    environment: '{% sentry_environment %}', release: '{% thunorweb_version %}'
+});
+{% if user.is_authenticated %}Sentry.setUser({email: '{{ user.email }}',
+ id: '{{ user.id }}'});{% endif %}</script>
diff --git a/thunorweb/webpack/Dockerfile b/thunorweb/webpack/Dockerfile
index b153b217..ac90511e 100644
--- a/thunorweb/webpack/Dockerfile
+++ b/thunorweb/webpack/Dockerfile
@@ -11,6 +11,7 @@ COPY package.json $BUILD_DIR
 RUN npm install
 
 COPY webpack.config.js $BUILD_DIR
+COPY sentry.js $BUILD_DIR
 COPY plotly.js $BUILD_DIR
 COPY .bootstraprc $BUILD_DIR
 COPY bootstrap-customisations.scss $BUILD_DIR
diff --git a/thunorweb/webpack/sentry.js b/thunorweb/webpack/sentry.js
new file mode 100644
index 00000000..7f65d7d6
--- /dev/null
+++ b/thunorweb/webpack/sentry.js
@@ -0,0 +1 @@
+export * from "@sentry/browser"
diff --git a/thunorweb/webpack/thunorweb/js/dataset.js b/thunorweb/webpack/thunorweb/js/dataset.js
index 88ed79be..d97a7e31 100644
--- a/thunorweb/webpack/thunorweb/js/dataset.js
+++ b/thunorweb/webpack/thunorweb/js/dataset.js
@@ -1,9 +1,7 @@
-"use strict";
+import { ajax } from './modules/ajax'
+import { ui } from './modules/ui'
 
-var ui = require("./modules/ui"),
-    ajax = require("./modules/ajax");
-
-var delete_dataset = function() {
+const delete_dataset = function() {
     ui.loadingModal.show();
     $.ajax({type: 'POST',
             url: ajax.url("delete_dataset"),
@@ -19,7 +17,7 @@ var delete_dataset = function() {
             dataType: 'json'});
 };
 
-var accept_license = function() {
+const accept_license = function() {
     ui.loadingModal.show();
     $.ajax({type: 'POST',
             url: ajax.url("accept_license", $('#dataset-id').val()),
@@ -32,7 +30,7 @@ var accept_license = function() {
 };
 
 
-var dataset = function(showLicense) {
+const activate = function(showLicense) {
     $('#dataset-name-edit').click(function() {
         var datasetName = $('.dataset-name').first().text();
         $('#dataset-name').hide();
@@ -40,15 +38,15 @@ var dataset = function(showLicense) {
     });
 
     $('#dataset-rename-cancel').click(function() {
-       $('#dataset-rename').hide();
-       $('#dataset-name').show();
+    $('#dataset-rename').hide();
+    $('#dataset-name').show();
     });
 
     $('#dataset-rename-form').submit(function(e) {
-       e.preventDefault();
-       ui.loadingModal.show();
+    e.preventDefault();
+    ui.loadingModal.show();
 
-       $.ajax({type: 'POST',
+    $.ajax({type: 'POST',
         url: ajax.url("rename_dataset"),
         headers: { 'X-CSRFToken': ajax.getCsrfToken() },
         data: $(this).serialize(),
@@ -108,6 +106,6 @@ var dataset = function(showLicense) {
     }
 };
 
-module.exports = {
-    activate: dataset
-};
+export const dataset = {
+    activate: activate
+}
diff --git a/thunorweb/webpack/thunorweb/js/dataset_permissions.js b/thunorweb/webpack/thunorweb/js/dataset_permissions.js
index 6b12f1f0..53516195 100644
--- a/thunorweb/webpack/thunorweb/js/dataset_permissions.js
+++ b/thunorweb/webpack/thunorweb/js/dataset_permissions.js
@@ -1,9 +1,7 @@
-"use strict";
+import { ajax } from './modules/ajax'
+import { ui } from './modules/ui'
 
-var ui = require("./modules/ui"),
-    ajax = require("./modules/ajax");
-
-var set_dataset_group_permission = function(dataset_id, group_id, perm_id,
+const set_dataset_group_permission = function(dataset_id, group_id, perm_id,
                                             state, $caller) {
     ui.loadingModal.show();
     $.ajax({type: 'POST',
@@ -27,7 +25,7 @@ var set_dataset_group_permission = function(dataset_id, group_id, perm_id,
             dataType: 'json'});
 };
 
-var dataset_permissions = function() {
+export const dataset_permissions = function() {
     $("input[type=checkbox]").bootstrapSwitch({
         'onSwitchChange': function(event, state) {
             var $target = $(event.currentTarget);
@@ -41,7 +39,3 @@ var dataset_permissions = function() {
         }
     });
 };
-
-module.exports = {
-    activate: dataset_permissions
-};
diff --git a/thunorweb/webpack/thunorweb/js/home.js b/thunorweb/webpack/thunorweb/js/home.js
index f24e74e5..ff8d6c1e 100644
--- a/thunorweb/webpack/thunorweb/js/home.js
+++ b/thunorweb/webpack/thunorweb/js/home.js
@@ -1,14 +1,12 @@
-var ajax = require("./modules/ajax"),
-    datasetTable = require("./modules/dataset_table");
+import { ajax } from './modules/ajax'
+import { initDatasetTable } from './modules/dataset_table'
 
-var home = function() {
-    var callbackFn = function (data, type, full, meta) {
-        return "<a href=\"" + ajax.url("page_view_dataset",
-                full.id) +  "\">" + full.name + "</a>";
-    };
-    datasetTable.initDatasetTable(callbackFn);
-};
-
-module.exports = {
-    activate: home
-};
+export const home = {
+    activate: function() {
+        var callbackFn = function (data, type, full, meta) {
+            return "<a href=\"" + ajax.url("page_view_dataset",
+                    full.id) +  "\">" + full.name + "</a>";
+        };
+        initDatasetTable(callbackFn);
+    }
+}
diff --git a/thunorweb/webpack/thunorweb/js/modules/ajax.js b/thunorweb/webpack/thunorweb/js/modules/ajax.js
index a7344b9a..03e9e829 100644
--- a/thunorweb/webpack/thunorweb/js/modules/ajax.js
+++ b/thunorweb/webpack/thunorweb/js/modules/ajax.js
@@ -1,8 +1,6 @@
-"use strict";
+import { ui } from "./ui"
 
-var ui = require("./ui");
-
-var ajax = (function () {
+export const ajax = (function () {
     var csrfToken = null;
 
     var getCookie = function (name) {
@@ -174,4 +172,3 @@ var ajax = (function () {
         url: url
     }
 })();
-module.exports = ajax;
diff --git a/thunorweb/webpack/thunorweb/js/modules/dataset_table.js b/thunorweb/webpack/thunorweb/js/modules/dataset_table.js
index 57f33aaa..cabe9730 100644
--- a/thunorweb/webpack/thunorweb/js/modules/dataset_table.js
+++ b/thunorweb/webpack/thunorweb/js/modules/dataset_table.js
@@ -1,11 +1,11 @@
-var ajax = require("./ajax"),
-    util = require("./util");
+import { ajax } from './ajax'
+import { util } from './util'
 
-var formatISODate = function(data) {
+const formatISODate = function(data) {
     return data.replace('T', ' ').slice(0, -5) + ' UTC';
 };
 
-var initDatasetTable = function(tableRowCallbackFn, loadingCompleteCallbackFn) {
+export const initDatasetTable = function(tableRowCallbackFn, loadingCompleteCallbackFn) {
     var $tabContent = $(".tab-content");
     $tabContent.loadingOverlay("show");
 
@@ -63,7 +63,3 @@ var initDatasetTable = function(tableRowCallbackFn, loadingCompleteCallbackFn) {
         $this.addClass("active");
     });
 };
-
-module.exports = {
-    initDatasetTable: initDatasetTable
-};
diff --git a/thunorweb/webpack/thunorweb/js/modules/ui.js b/thunorweb/webpack/thunorweb/js/modules/ui.js
index a49c582f..781eefa0 100644
--- a/thunorweb/webpack/thunorweb/js/modules/ui.js
+++ b/thunorweb/webpack/thunorweb/js/modules/ui.js
@@ -1,5 +1,4 @@
-"use strict";
-var ui = (function() {
+export const ui = (function() {
     var modalBase = $(
         '<div class="modal fade" tabindex="-1" role="dialog"' +
         ' aria-hidden="true" data-success="false">' +
@@ -160,4 +159,3 @@ var ui = (function() {
         loadingModal: loadingModal
     }
 })();
-module.exports = ui;
diff --git a/thunorweb/webpack/thunorweb/js/modules/util.js b/thunorweb/webpack/thunorweb/js/modules/util.js
index 315a65c7..4a65dd0a 100644
--- a/thunorweb/webpack/thunorweb/js/modules/util.js
+++ b/thunorweb/webpack/thunorweb/js/modules/util.js
@@ -1,6 +1,4 @@
-"use strict";
-
-var util = (function() {
+export const util = (function() {
     var onlyUnique = function (value, index, self) {
         return self.indexOf(value) === index;
     };
@@ -197,4 +195,3 @@ var util = (function() {
         }
     }
 })();
-module.exports = util;
diff --git a/thunorweb/webpack/thunorweb/js/plate_mapper.js b/thunorweb/webpack/thunorweb/js/plate_mapper.js
index 8c7b5250..46cb4b58 100644
--- a/thunorweb/webpack/thunorweb/js/plate_mapper.js
+++ b/thunorweb/webpack/thunorweb/js/plate_mapper.js
@@ -1,8 +1,7 @@
-"use strict";
-
-var ui = require('./modules/ui'),
-    util = require('./modules/util'),
-    ajax = require('./modules/ajax');
+import { ui } from './modules/ui'
+import { util } from './modules/util'
+import { ajax } from './modules/ajax'
+import { tsvParse } from 'd3-dsv'
 
 var Well = function(well) {
     if(well === undefined) {
@@ -372,13 +371,15 @@ PlateMap.prototype = {
     }
 };
 
-var check_loading = function() {
+export { PlateMap }
+
+export const checkLoading = function() {
     if(pyHTS.state.plates.length > 0 && pyHTS.state.plates[0] !== "MASTER") {
         ui.loadingModal.show();
     }
 };
 
-var plate_mapper = function () {
+const activate = function () {
     var setWellSizes = function() {
         var numWells = pyHTS.state.plateMap.wells.length;
         var $plate = $('#hts-well-plate-inner');
@@ -1728,8 +1729,7 @@ var plate_mapper = function () {
     });
 
     var tsvToJson = function(tsv) {
-        var d3 = require("d3-dsv");
-        var rows = d3.tsvParse(tsv);
+        var rows = tsvParse(tsv);
         var rLen = rows.length;
         if(rLen !== pyHTS.state.plateMap.wells.length) {
             return upErr('File has '+rLen+' wells, but current plate map has '+pyHTS.state.plateMap.wells.length+' wells');
@@ -1980,8 +1980,10 @@ var plate_mapper = function () {
         }
     }
 };
-module.exports = {
-    activate: plate_mapper,
-    checkLoading: check_loading,
+
+export const plate_mapper = {
+    activate: activate,
+    checkLoading: checkLoading,
     PlateMap: PlateMap
-};
+}
+
diff --git a/thunorweb/webpack/thunorweb/js/plate_upload.js b/thunorweb/webpack/thunorweb/js/plate_upload.js
index 43125f31..c84c7628 100644
--- a/thunorweb/webpack/thunorweb/js/plate_upload.js
+++ b/thunorweb/webpack/thunorweb/js/plate_upload.js
@@ -1,9 +1,7 @@
-"use strict";
+import { ui } from './modules/ui'
+import { ajax } from './modules/ajax'
 
-var ui = require("./modules/ui"),
-    ajax = require("./modules/ajax");
-
-var plate_upload = function () {
+const activate = function () {
     var ajaxSettings = {
         headers: {"X-CSRFToken": ajax.getCsrfToken()}
     };
@@ -111,6 +109,6 @@ var plate_upload = function () {
     }
 };
 
-module.exports = {
-    activate: plate_upload
+export const plate_upload = {
+    activate: activate
 };
diff --git a/thunorweb/webpack/thunorweb/js/plots.js b/thunorweb/webpack/thunorweb/js/plots.js
index 977605c0..f6c8f870 100644
--- a/thunorweb/webpack/thunorweb/js/plots.js
+++ b/thunorweb/webpack/thunorweb/js/plots.js
@@ -1,8 +1,8 @@
-var ajax = require("./modules/ajax");
-var ui = require("./modules/ui");
-var datasetTable = require("./modules/dataset_table");
+import { ajax } from './modules/ajax'
+import { ui } from './modules/ui'
+import { initDatasetTable } from './modules/dataset_table'
 
-var getQueryStrings = function() {
+const getQueryStrings = function() {
     var sPageURL = window.location.search.substring(1),
         sURLVariables = sPageURL.split('&'),
         sParameterName,
@@ -30,7 +30,7 @@ var getQueryStrings = function() {
     return {plotStrings: plotStrings, colsLg: colsLg, colsMd: colsMd};
 };
 
-var updateURL = function() {
+const updateURL = function() {
     if (!window.history.replaceState) return;
 
     var $newPlotBtn = $(".new-plot-btn");
@@ -63,11 +63,11 @@ var updateURL = function() {
     );
 };
 
-var isDataset2active = function() {
+const isDataset2active = function() {
     return $("input[name=secondDataset]").is(":checked");
 };
 
-var downloadImage = function(gd, fmt) {
+const downloadImage = function(gd, fmt) {
     var $gd = $(gd);
     var filename = $gd.find(".gtitle").text();
     var width = $gd.width();
@@ -80,7 +80,7 @@ var downloadImage = function(gd, fmt) {
                              });
 };
 
-var selectPickerOptionsMultiple = {
+const selectPickerOptionsMultiple = {
   countSelectedText: function(n, N) {
     return n + " of " + N + " selected";
   },
@@ -88,12 +88,12 @@ var selectPickerOptionsMultiple = {
   maxOptions: false
 };
 
-var selectPickerOptionsSingle = {
+const selectPickerOptionsSingle = {
   actionsBox: true,
   maxOptions: 1
 };
 
-var selectPickerTagOptions = {
+const selectPickerTagOptions = {
   title: "Please select a tag",
   countSelectedText: function(n, N) {
     return n + " of " + N + " tags selected";
@@ -102,7 +102,7 @@ var selectPickerTagOptions = {
   actionsBox: true
 };
 
-var plots = function() {
+const activate = function() {
     var plotOptionsCache = {};
 
     var truncateDatasetName = function(datasetName) {
@@ -119,7 +119,7 @@ var plots = function() {
         $target.data("datasetChanged", false);
         if (!$target.data("initialised")) {
             $target.data("initialised", true);
-            datasetTable.initDatasetTable(function (data, type, full, meta) {
+            initDatasetTable(function (data, type, full, meta) {
                     return "<a class=\"select-dataset\" data-dataset-id=\""
                         + full.id + "\" data-dataset-name=\"" + full.name +
                         "\" href=\"\">" + full.name + "</a>";
@@ -1211,6 +1211,7 @@ var plots = function() {
         $("#quickstart").show();
     }
 };
-module.exports = {
-    activate: plots
-};
+
+export const plots = {
+    activate: activate
+}
diff --git a/thunorweb/webpack/thunorweb/js/pyhts.js b/thunorweb/webpack/thunorweb/js/pyhts.js
index 1b9481a7..8c5afeda 100644
--- a/thunorweb/webpack/thunorweb/js/pyhts.js
+++ b/thunorweb/webpack/thunorweb/js/pyhts.js
@@ -3,16 +3,21 @@
  * Thunor
  * Copyright (c) 2016-2018 Alex Lubbock
  */
-var pyHTS = {
-    views: {
-        home: require("./home"),
-        dataset: require("./dataset"),
-        dataset_permissions: require("./dataset_permissions"),
-        plots: require("./plots"),
-        plate_upload: require("./plate_upload"),
-        plate_mapper: require("./plate_mapper"),
-        tag_editor: require("./tag_editor")
-    },
-    state: {}
-};
-module.exports = pyHTS;
+import { home } from './home'
+import { dataset } from './dataset'
+import { dataset_permissions } from './dataset_permissions'
+import { plots } from './plots'
+import { plate_upload } from './plate_upload'
+import { plate_mapper } from './plate_mapper'
+import { tag_editor } from './tag_editor'
+
+export const views = {
+    home: home,
+    dataset: dataset,
+    dataset_permissions: dataset_permissions,
+    plots: plots,
+    plate_upload: plate_upload,
+    plate_mapper: plate_mapper,
+    tag_editor: tag_editor
+}
+export var state = {}
diff --git a/thunorweb/webpack/thunorweb/js/tag_editor.js b/thunorweb/webpack/thunorweb/js/tag_editor.js
index abfbe189..511d85a7 100644
--- a/thunorweb/webpack/thunorweb/js/tag_editor.js
+++ b/thunorweb/webpack/thunorweb/js/tag_editor.js
@@ -1,8 +1,8 @@
-var ui = require("./modules/ui"),
-    ajax = require("./modules/ajax"),
-    util = require("./modules/util");
+import { ui } from './modules/ui'
+import { ajax } from './modules/ajax'
+import { util } from './modules/util'
 
-var activateSelect = function($select, $modal) {
+const activateSelect = function($select, $modal) {
   $select.selectpicker({actionsBox: true, iconBase: "fa", tickIcon: "fa-check"});
   $select.on("show.bs.select", function() {
       // disable automatic modal closing when pressing ESC/clicking on background
@@ -16,7 +16,7 @@ var activateSelect = function($select, $modal) {
   });
 };
 
-var set_tag_group_permission = function(tag_id, group_id, state, $caller) {
+const set_tag_group_permission = function(tag_id, group_id, state, $caller) {
     $.ajax({type: 'POST',
             url: ajax.url("set_tag_group_permission"),
             headers: { 'X-CSRFToken': ajax.getCsrfToken() },
@@ -35,14 +35,14 @@ var set_tag_group_permission = function(tag_id, group_id, state, $caller) {
             dataType: 'json'});
 };
 
-var clearTagNameChange = function() {
+const clearTagNameChange = function() {
     $(".rename-tag-btn").show();
     $(".rename-tag-div").addClass("hidden");
     $(".tag-header").show();
     $("form.delete-tag").show();
 };
 
-var activate = function() {
+const activate = function() {
     var entityType = $('#entity-type').val();
     var $tabContent = $(".tab-content");
     $tabContent.loadingOverlay("show");
@@ -97,13 +97,13 @@ var activate = function() {
                     for (var t=0;t<numTags;t++) {
                         ajaxUrl += 'tagId=' + tagIds[t] + '&';
                     }
-                   var $modal = ui.okModal({
+                var $modal = ui.okModal({
                         title: 'Set tag permissions',
                         text: 'Loading...',
                         okLabel: 'Close'
                     });
 
-                     $.ajax({
+                    $.ajax({
                         type: "GET",
                         url: ajaxUrl,
                         success: function (data) {
@@ -255,8 +255,8 @@ var activate = function() {
         "drawCallback": function () {
             $('.tt').tooltip();
             $("#tag-table").find("a").unbind('click').click(function(e){
-               e.preventDefault();
-               editTag($(this).data('id'));
+                e.preventDefault();
+                editTag($(this).data('id'));
             });
         }
     });
@@ -288,7 +288,7 @@ var activate = function() {
             }
         });
 
-         $.ajax({
+        $.ajax({
             type: "GET",
             url: ajax.url("get_tag_targets", entityType) + tagId,
             success: function (data) {
@@ -388,9 +388,9 @@ var activate = function() {
         });
     });
     $("form.rename-tag-form").submit(function(e) {
-       e.preventDefault();
-       var $form = $(this);
-       var tagName = $form.find("input[name=tagsName]").val();
+    e.preventDefault();
+    var $form = $(this);
+    var tagName = $form.find("input[name=tagsName]").val();
         if (tagName === "") {
             ui.okModal({
                 title: "Tag name empty",
@@ -418,11 +418,11 @@ var activate = function() {
         });
     });
     $(".rename-tag-btn").click(function(e) {
-       e.preventDefault();
-       $(".rename-tag-btn").hide();
-       $(".rename-tag-div").removeClass("hidden");
-       $(".tag-header").hide();
-       $("form.delete-tag").hide();
+        e.preventDefault();
+        $(".rename-tag-btn").hide();
+        $(".rename-tag-div").removeClass("hidden");
+        $(".tag-header").hide();
+        $("form.delete-tag").hide();
     });
     $("form.set-tag-targets").submit(function (e) {
         e.preventDefault();
@@ -519,6 +519,6 @@ var activate = function() {
     });
 };
 
-module.exports = {
-  activate: activate
-};
+export const tag_editor = {
+    activate: activate
+}
diff --git a/thunorweb/webpack/webpack.config.js b/thunorweb/webpack/webpack.config.js
index e0f496a3..44c3c9d5 100644
--- a/thunorweb/webpack/webpack.config.js
+++ b/thunorweb/webpack/webpack.config.js
@@ -19,7 +19,7 @@ var config = {
 
         //TODO: Compile more modules from source, removing unneeded components
         plots:  ["expose-loader?exposes=Plotly!./plotly"],
-        sentry: ["expose-loader?exposes=Sentry!@sentry/browser"],
+        sentry: ["expose-loader?exposes=Sentry!./sentry"],
         vendor: ["expose-loader?exposes=jQuery!expose-loader?exposes=$!jquery",      // sitewide
                  // "bootstrap/dist/js/bootstrap",
                  // "bootstrap/dist/css/bootstrap.css",