admin/settings: Lazy-load Organization sections.

We now wait to load Organization sections until you
click on the section (or virtually click by using arrow
keys).

Some of the sections are coupled in terms of their setup,
so some sections will already be loaded if you had clicked
on a related section.

.eslintrc.json

@@ -96,6 +96,7 @@
         "stream_popover": false,
         "narrow": false,
         "narrow_state": false,
+        "admin_sections": false,
         "admin": false,
         "stream_data": false,
         "list_util": false,

static/js/admin.js

@@ -1,8 +1,5 @@
 var admin = (function () {
 
-var meta = {
-    loaded: false,
-};
 var exports = {};
 
 exports.show_or_hide_menu_item = function () {
@@ -54,6 +51,10 @@ function _setup_page() {
     $("#settings_content .organization-box").html(admin_tab);
     $("#settings_content .alert").removeClass("show");
 
+    // Since we just swapped in a whole new page, we need to
+    // tell admin_sections nothing is loaded.
+    admin_sections.reset_sections();
+
     var tab = (function () {
         var tab = false;
         var hash_sequence = window.location.hash.split(/\//);
@@ -70,16 +71,6 @@ function _setup_page() {
 
     $("#id_realm_default_language").val(page_params.realm_default_language);
 
-    // We set this flag before we're fully loaded so that the populate
-    // methods don't short-circuit.
-    meta.loaded = true;
-
-    settings_org.set_up();
-    settings_emoji.set_up();
-    settings_users.set_up();
-    settings_streams.set_up();
-    settings_filters.set_up();
-
     // Do this after calling the setup_up methods, so that we can
     // disable any dynamically rendered elements.
     exports.show_or_hide_menu_item();

static/js/admin_sections.js

@@ -0,0 +1,79 @@
+var admin_sections = (function () {
+
+var exports = {};
+
+var is_loaded = new Dict(); // section -> bool
+
+exports.load_admin_section = function (name) {
+    var section;
+
+    switch (name) {
+        case 'organization-settings':
+        case 'auth-methods':
+            section = 'org';
+            break;
+        case 'emoji-settings':
+            section = 'emoji';
+            break;
+        case 'bot-list-admin':
+        case 'user-list-admin':
+        case 'deactivated-users-admin':
+            section = 'users';
+            break;
+        case 'streams-list-admin':
+        case 'default-streams-list':
+            section = 'streams';
+            break;
+        case 'filter-settings':
+            section = 'filters';
+            break;
+        default:
+            blueslip.error('Unknown admin id ' + name);
+            return;
+    }
+
+    if (is_loaded.get(section)) {
+        // We only load sections once (unless somebody calls
+        // reset_sections).
+        return;
+    }
+
+    switch (section) {
+        case 'org':
+            settings_org.set_up();
+            break;
+        case 'emoji':
+            settings_emoji.set_up();
+            break;
+        case 'users':
+            settings_users.set_up();
+            break;
+        case 'streams':
+            settings_streams.set_up();
+            break;
+        case 'filters':
+            settings_filters.set_up();
+            break;
+        default:
+            blueslip.error('programming error for section ' + section);
+            return;
+    }
+
+    is_loaded.set(section, true);
+};
+
+exports.reset_sections = function () {
+    is_loaded.clear();
+    settings_org.reset();
+    settings_emoji.reset();
+    settings_users.reset();
+    settings_streams.reset();
+    settings_filters.reset();
+};
+
+return exports;
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = admin_sections;
+}

static/js/click_handlers.js

@@ -599,14 +599,22 @@ $(function () {
         $this.addClass("active");
         $this.prev().addClass("no-border");
 
-        if ($this.hasClass("admin")) {
+        var is_org_section = $this.hasClass("admin");
+
+        if (is_org_section) {
             window.location.hash = "organization/" + section;
         } else {
             window.location.hash = "settings/" + section;
         }
 
         $(".settings-section, .settings-wrapper").removeClass("show");
+
+        if (is_org_section) {
+            admin_sections.load_admin_section(section);
+        } else {
             settings_sections.load_settings_section(section);
+        }
+
         $(".settings-section" + sel + ", .settings-wrapper" + sel).addClass("show");
     });
 

static/js/settings_emoji.js

@@ -6,6 +6,10 @@ var meta = {
     loaded: false,
 };
 
+exports.reset = function () {
+    meta.loaded = false;
+};
+
 exports.populate_emoji = function (emoji_data) {
     if (!meta.loaded) {
         return;

static/js/settings_filters.js

@@ -6,6 +6,10 @@ var meta = {
     loaded: false,
 };
 
+exports.reset = function () {
+    meta.loaded = false;
+};
+
 exports.populate_filters = function (filters_data) {
     if (!meta.loaded) {
         return;

static/js/settings_org.js

@@ -6,6 +6,10 @@ var meta = {
     loaded: false,
 };
 
+exports.reset = function () {
+    meta.loaded = false;
+};
+
 exports.populate_realm_domains = function (realm_domains) {
     if (!meta.loaded) {
         return;

static/js/settings_sections.js

@@ -18,7 +18,7 @@ exports.initialize = function () {
 
 exports.load_settings_section = function (section) {
     if (!load_func_dict.has(section)) {
-        // admin sections don't have loaders yet, and that's ok
+        blueslip.error('Unknown section ' + section);
         return;
     }
 

static/js/settings_streams.js

@@ -6,6 +6,10 @@ var meta = {
     loaded: false,
 };
 
+exports.reset = function () {
+    meta.loaded = false;
+};
+
 var all_streams = [];
 
 function failed_listing_streams(xhr) {

static/js/settings_users.js

@@ -6,6 +6,10 @@ var meta = {
     loaded: false,
 };
 
+exports.reset = function () {
+    meta.loaded = false;
+};
+
 function get_user_info(user_id) {
     var self = {};
     self.user_row = $("tr.user_row[data-user-id='" + user_id + "']");

zproject/settings.py

@@ -923,6 +923,7 @@ JS_SPECS = {
             'js/settings_streams.js',
             'js/settings_filters.js',
             'js/settings.js',
+            'js/admin_sections.js',
             'js/admin.js',
             'js/tab_bar.js',
             'js/emoji.js',