Webpack all the things! Fixes #2135

This significantly speeds up loading of the application; in an average of 3 tests, v1.6
loaded in 11.5s in the runtime on a Mac, whilst the webpacked version of the code
loaded in 5.53s.

web/pgadmin/misc/file_manager/__init__.py

@@ -144,6 +144,19 @@ class FileManagerModule(PgAdminModule):
             'file_items': []
         }
 
+    def get_exposed_url_endpoints(self):
+        """
+        Returns:
+            list: a list of url endpoints exposed to the client.
+        """
+        return [
+            'file_manager.filemanager',
+            'file_manager.index',
+            'file_manager.get_trans_id',
+            'file_manager.delete_trans_id',
+            'file_manager.save_last_dir'
+        ]
+
     def get_file_size_preference(self):
         return self.file_upload_size
 
@@ -165,7 +178,7 @@ class FileManagerModule(PgAdminModule):
 blueprint = FileManagerModule(MODULE_NAME, __name__)
 
 
-@blueprint.route("/")
+@blueprint.route("/", endpoint='index')
 @login_required
 def index():
     """Render the preferences dialog."""
@@ -226,7 +239,9 @@ def file_manager_config(trans_id):
         mimetype="application/json")
 
 
-@blueprint.route("/get_trans_id", methods=["GET", "POST"])
+@blueprint.route(
+    "/get_trans_id", methods=["GET", "POST"], endpoint='get_trans_id'
+)
 @login_required
 def get_trans_id():
     if len(req.data) != 0:
@@ -239,7 +254,10 @@ def get_trans_id():
     )
 
 
-@blueprint.route("/del_trans_id/<int:trans_id>", methods=["GET", "POST"])
+@blueprint.route(
+    "/del_trans_id/<int:trans_id>",
+    methods=["GET", "POST"], endpoint='delete_trans_id'
+)
 @login_required
 def delete_trans_id(trans_id):
     Filemanager.release_transaction(trans_id)
@@ -248,7 +266,9 @@ def delete_trans_id(trans_id):
     )
 
 
-@blueprint.route("/save_last_dir/<int:trans_id>", methods=["POST"])
+@blueprint.route(
+    "/save_last_dir/<int:trans_id>", methods=["POST"], endpoint='save_last_dir'
+)
 @login_required
 def save_last_directory_visited(trans_id):
     blueprint.last_directory_visited.set(req.json['path'])
@@ -1126,7 +1146,10 @@ class Filemanager(object):
         return res
 
 
-@blueprint.route("/filemanager/<int:trans_id>/", methods=["GET", "POST"])
+@blueprint.route(
+    "/filemanager/<int:trans_id>/",
+    methods=["GET", "POST"], endpoint='filemanager'
+)
 @login_required
 def file_manager(trans_id):
     """

web/pgadmin/misc/file_manager/static/css/file_manager.css

@@ -221,7 +221,7 @@ div.clip {
   background: -webkit-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* IE10+ */
-  background: linear-gradient(to bottom, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%)
+  background: linear-gradient(to bottom, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%);
   border-bottom: 1px solid #ccc;
   display: inline-block;
   width: 100%;
@@ -470,14 +470,18 @@ button.list span {
 }
 
 .file_manager .upload_file #multiple-uploads {
-  background: black;
-  color: white;
-  padding: 0px !important;
   height: calc(100% - 20px);
+  background: #000;
+  color: #fff;
+  padding: 0px !important;
   overflow: auto;
   width: 100%;
 }
 
+.file_manager .upload_file #multiple-uploads .dz-message {
+  text-align: center;
+}
+
 .fileinfo .prompt-info {
   text-align: center;
   color: #fff;
@@ -591,8 +595,9 @@ button.list span {
 }
 
 .file_upload_main .dz-progress {
+  float: left;
+  width: 100%;
   height: 21px !important;
-  top: 83px !important;
   border: 1px solid #8a6d3b;
   border-radius: 0 !important;
   -moz-border-radius: 0 !important;
@@ -606,6 +611,8 @@ button.list span {
 
 .file_upload_main .dz-progress .dz-upload.success {
   background: green !important;
+  float: left;
+  width: 100%;
 }
 
 a.dz-remove {

web/pgadmin/misc/file_manager/templates/file_manager/index.html

@@ -1,7 +1,6 @@
 <html>
 <head>
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery.dropzone/dropzone.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('file_manager.index') }}utility.js"></script>
+    <link type="text/css" rel="stylesheet" href="{{ url_for('file_manager.static', filename='css/file_manager.css')}}"/>
 </head>
 <body>
 <div class="file_manager">
@@ -55,6 +54,11 @@
         </div>
 
     </div>
+    <script>
+	require(['sources/generated/file_utils'], function() {
+	    pgAdmin.FileUtils.init();
+    });
+    </script>
 </div>
 </body>
 </html>

web/pgadmin/misc/file_manager/templates/file_manager/js/file_manager.js

@@ -1,8 +1,7 @@
-// This defines File Manager dialog
-define([
-  'sources/gettext', 'jquery', 'underscore', 'alertify',
-  'sources/alerts/alertify_wrapper',
-], function(gettext, $, _, alertify, AlertifyWrapper) {
+define('misc.file_manager', [
+      'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'alertify',
+      'sources/alerts/alertify_wrapper'
+], function(gettext, url_for, $, _, alertify, AlertifyWrapper) {
     pgAdmin = pgAdmin || window.pgAdmin || {};
 
     /*
@@ -21,45 +20,43 @@ define([
 
         this.initialized = true;
 
-        var module_url = "{{ url_for('file_manager.index') }}",
-            fileConnector = module_url + "filemanager/";
+        // send a request to get transaction id
+        var getTransId = function(configs) {
+          return $.ajax({
+            data: configs,
+            type: "POST",
+            async: false,
+            url: url_for('file_manager.get_trans_id'),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+          });
+        };
 
-          // send a request to get transaction id
-          var getTransId = function(configs) {
-            return $.ajax({
-              data: configs,
-              type: "POST",
-              async: false,
-              url: module_url + "get_trans_id",
-              dataType: "json",
-              contentType: "application/json; charset=utf-8",
-            });
-          };
+        // Function to remove trans id from session
+        var removeTransId = function(trans_id) {
+          return $.ajax({
+            type: "GET",
+            async: false,
+            url: url_for('file_manager.delete_trans_id', {'trans_id': trans_id}),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+          });
+        };
 
-          // Function to remove trans id from session
-          var removeTransId = function(trans_id) {
-            return $.ajax({
-              type: "GET",
-              async: false,
-              url: module_url + "del_trans_id/" + trans_id,
-              dataType: "json",
-              contentType: "application/json; charset=utf-8",
-            });
-          };
-
-          var set_last_traversed_dir = function(path, trans_id) {
-            return $.ajax({
-              url: "{{ url_for('file_manager.index') }}save_last_dir/" + trans_id,
-              type: 'POST',
-              data: JSON.stringify(path),
-              contentType: 'application/json'
-            });
-          };
+        var set_last_traversed_dir = function(path, trans_id) {
+          return $.ajax({
+            url: url_for('file_manager.save_last_dir', {'trans_id': trans_id}),
+            type: 'POST',
+            data: JSON.stringify(path),
+            contentType: 'application/json'
+          });
+        };
         // Declare the Storage dialog
         alertify.dialog('storageManagerDlg', function() {
           var controls = [], // Keep tracking of all the backform controls
               // Dialog containter
-              $container = $("<div class='storage_dialog'></div>");
+              $container = $("<div class='storage_dialog'></div>"),
+              trans_id;
 
           /*
            * Function: renderStoragePanel
@@ -73,12 +70,11 @@ define([
              */
             var content = $container.find('.storage_content');
             content.empty();
-
-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
               content.append(data);
             });
 
-            transId = getTransId(params);
+            var transId = getTransId(params);
             var t_res;
             if (transId.readyState == 4) {
               t_res = JSON.parse(transId.responseText);
@@ -181,6 +177,7 @@ define([
           var controls = [], // Keep tracking of all the backform controls
               // Dialog containter
               $container = $("<div class='storage_dialog file_selection_dlg'></div>");
+          var trans_id;
 
           // send a request to get transaction id
           /*
@@ -196,11 +193,11 @@ define([
             var content = $container.find('.storage_content');
             content.empty();
 
-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
               content.append(data);
             });
 
-            transId = getTransId(configs);
+            var transId = getTransId(configs);
             var t_res;
             if (transId.readyState == 4) {
               t_res = JSON.parse(transId.responseText);
@@ -305,7 +302,8 @@ define([
         alertify.dialog('folderSelectionDlg', function() {
           var controls = [], // Keep tracking of all the backform controls
               // Dialog containter
-              $container = $("<div class='storage_dialog folder_selection_dlg'></div>");
+              $container = $("<div class='storage_dialog folder_selection_dlg'></div>"),
+              trans_id;
 
           // send a request to get transaction id
           /*
@@ -321,11 +319,11 @@ define([
             var content = $container.find('.storage_content');
             content.empty();
 
-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
               content.append(data);
             });
 
-            transId = getTransId(params);
+            var transId = getTransId(params);
             var t_res;
             if (transId.readyState == 4) {
               t_res = JSON.parse(transId.responseText);
@@ -428,7 +426,8 @@ define([
         alertify.dialog('createModeDlg', function() {
           var controls = [], // Keep tracking of all the backform controls
               // Dialog containter
-              $container = $("<div class='storage_dialog create_mode_dlg'></div>");
+              $container = $("<div class='storage_dialog create_mode_dlg'></div>"),
+              trans_id;
 
           /*
            * Function: renderStoragePanel
@@ -443,11 +442,11 @@ define([
             var content = $container.find('.storage_content');
             content.empty();
 
-            $.get("{{ url_for('file_manager.index') }}", function(data) {
+            $.get(url_for('file_manager.index'), function(data) {
               content.append(data);
             });
 
-            transId = getTransId(params);
+            var transId = getTransId(params);
             var t_res;
             if (transId.readyState == 4) {
               t_res = JSON.parse(transId.responseText);
@@ -561,12 +560,12 @@ define([
               $.ajax({
                 type: 'POST',
                 data: JSON.stringify(file_data),
-                url: fileConnector + trans_id+'/',
+                url: url_for('file_manager.filemanager', {'trans_id': trans_id}),
                 dataType: 'json',
                 contentType: "application/x-download; charset=utf-8",
                 async: false,
                 success: function(resp) {
-                  data = resp.data.result;
+                  var data = resp.data.result;
                   if(data['Code'] === 1) {
                     is_exist = true;
                   } else {
@@ -586,7 +585,7 @@ define([
               $.ajax({
                 type: 'POST',
                 data: JSON.stringify(post_data),
-                url: fileConnector + trans_id+'/',
+                url: url_for('file_manager.filemanager', {'trans_id': trans_id}),
                 dataType: 'json',
                 contentType: "application/json; charset=utf-8",
                 async: false,