From f59133db424f907844cba3e300d043cbf813c0db Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <anders@zulip.com>
Date: Sat, 27 Feb 2021 16:00:36 -0800
Subject: [PATCH] js: Convert static/js/ui_util.js to ES6 module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
---
 .eslintrc.json                               |  1 -
 frontend_tests/node_tests/compose.js         |  4 +++-
 frontend_tests/node_tests/hashchange.js      |  3 ++-
 frontend_tests/node_tests/input_pill.js      |  7 +++++-
 frontend_tests/node_tests/narrow_activate.js |  3 ++-
 frontend_tests/node_tests/search.js          |  2 +-
 frontend_tests/node_tests/search_legacy.js   |  2 +-
 static/js/bundles/app.js                     |  1 -
 static/js/click_handlers.js                  |  1 +
 static/js/compose_actions.js                 |  1 +
 static/js/global.d.ts                        |  1 -
 static/js/hashchange.js                      |  1 +
 static/js/input_pill.js                      |  2 ++
 static/js/message_edit.js                    |  1 +
 static/js/narrow.js                          |  1 +
 static/js/search.js                          |  1 +
 static/js/stream_popover.js                  |  1 +
 static/js/ui_init.js                         |  1 +
 static/js/ui_util.js                         | 24 ++++++++------------
 19 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 5f3c657e39..2860c4bc11 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -213,7 +213,6 @@
                 "typing_events": false,
                 "ui": false,
                 "ui_init": false,
-                "ui_util": false,
                 "unread": false,
                 "unread_ops": false,
                 "upload_widget": false,
diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js
index 7ae44254d4..4cb103eabb 100644
--- a/frontend_tests/node_tests/compose.js
+++ b/frontend_tests/node_tests/compose.js
@@ -75,7 +75,9 @@ const page_params = set_global("page_params", {});
 const resize = {__esModule: true};
 rewiremock("../../static/js/resize").with(resize);
 const subs = set_global("subs", {});
-const ui_util = set_global("ui_util", {});
+const ui_util = {__esModule: true};
+
+rewiremock("../../static/js/ui_util").with(ui_util);
 
 // Setting these up so that we can test that links to uploads within messages are
 // automatically converted to server relative links.
diff --git a/frontend_tests/node_tests/hashchange.js b/frontend_tests/node_tests/hashchange.js
index c4b89a6f86..6b0e4d8106 100644
--- a/frontend_tests/node_tests/hashchange.js
+++ b/frontend_tests/node_tests/hashchange.js
@@ -35,7 +35,8 @@ const narrow = set_global("narrow", {});
 const overlays = set_global("overlays", {});
 const settings = set_global("settings", {});
 const subs = set_global("subs", {});
-const ui_util = set_global("ui_util", {});
+const ui_util = {__esModule: true};
+rewiremock("../../static/js/ui_util").with(ui_util);
 rewiremock("../../static/js/top_left_corner").with({
     handle_narrow_deactivated: () => {},
 });
diff --git a/frontend_tests/node_tests/input_pill.js b/frontend_tests/node_tests/input_pill.js
index 6ca604a12a..bb6c9e8821 100644
--- a/frontend_tests/node_tests/input_pill.js
+++ b/frontend_tests/node_tests/input_pill.js
@@ -2,6 +2,8 @@
 
 const {strict: assert} = require("assert");
 
+const rewiremock = require("rewiremock/node");
+
 const {set_global, zrequire} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
 const $ = require("../zjsunit/zjquery");
@@ -11,7 +13,7 @@ set_global("document", {});
 const noop = () => {};
 const example_img_link = "http://example.com/example.png";
 
-set_global("ui_util", {
+rewiremock("../../static/js/ui_util").with({
     place_caret_at_end: noop,
 });
 
@@ -19,6 +21,8 @@ set_global("getSelection", () => ({
     anchorOffset: 0,
 }));
 
+rewiremock.enable();
+
 zrequire("templates");
 const input_pill = zrequire("input_pill");
 
@@ -595,3 +599,4 @@ run_test("clear", () => {
     assert.deepEqual(removed_colors, ["blue", "yellow", "red"]);
     assert.equal(pill_input[0].textContent, "");
 });
+rewiremock.disable();
diff --git a/frontend_tests/node_tests/narrow_activate.js b/frontend_tests/node_tests/narrow_activate.js
index 77b5e845eb..52f05af86a 100644
--- a/frontend_tests/node_tests/narrow_activate.js
+++ b/frontend_tests/node_tests/narrow_activate.js
@@ -36,7 +36,8 @@ const message_view_header = set_global("message_view_header", {});
 const top_left_corner = {__esModule: true};
 rewiremock("../../static/js/top_left_corner").with(top_left_corner);
 const typing_events = set_global("typing_events", {});
-const ui_util = set_global("ui_util", {});
+const ui_util = {__esModule: true};
+rewiremock("../../static/js/ui_util").with(ui_util);
 const unread_ops = set_global("unread_ops", {});
 set_global("search_pill_widget", {
     widget: {
diff --git a/frontend_tests/node_tests/search.js b/frontend_tests/node_tests/search.js
index ac68680e96..daec8c2101 100644
--- a/frontend_tests/node_tests/search.js
+++ b/frontend_tests/node_tests/search.js
@@ -20,7 +20,7 @@ const narrow_state = {
 };
 rewiremock("../../static/js/narrow_state").with(narrow_state);
 const search_suggestion = set_global("search_suggestion", {});
-set_global("ui_util", {
+rewiremock("../../static/js/ui_util").with({
     change_tab_to: noop,
     place_caret_at_end: noop,
 });
diff --git a/frontend_tests/node_tests/search_legacy.js b/frontend_tests/node_tests/search_legacy.js
index 29081b5fb8..f8193b1a29 100644
--- a/frontend_tests/node_tests/search_legacy.js
+++ b/frontend_tests/node_tests/search_legacy.js
@@ -17,7 +17,7 @@ const noop = () => {};
 const narrow_state = {__esModule: true};
 rewiremock("../../static/js/narrow_state").with(narrow_state);
 const search_suggestion = set_global("search_suggestion", {});
-set_global("ui_util", {
+rewiremock("../../static/js/ui_util").with({
     change_tab_to: noop,
 });
 const narrow = set_global("narrow", {});
diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
index e67fc38b46..117a4806f4 100644
--- a/static/js/bundles/app.js
+++ b/static/js/bundles/app.js
@@ -27,7 +27,6 @@ import "../reload";
 import "../compose_actions";
 import "../subs";
 import "../ui";
-import "../ui_util";
 import "../click_handlers";
 import "../settings_panel_menu";
 import "../settings_toggle";
diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 0202096c2c..cbd12cebdb 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -17,6 +17,7 @@ const muting_ui = require("./muting_ui");
 const rows = require("./rows");
 const settings_panel_menu = require("./settings_panel_menu");
 const stream_edit = require("./stream_edit");
+const ui_util = require("./ui_util");
 const user_status_ui = require("./user_status_ui");
 const util = require("./util");
 
diff --git a/static/js/compose_actions.js b/static/js/compose_actions.js
index 23e8d4da06..91da131cea 100644
--- a/static/js/compose_actions.js
+++ b/static/js/compose_actions.js
@@ -16,6 +16,7 @@ const narrow_state = require("./narrow_state");
 const people = require("./people");
 const reload_state = require("./reload_state");
 const stream_data = require("./stream_data");
+const ui_util = require("./ui_util");
 
 exports.blur_compose_inputs = function () {
     $(".message_comp").find("input, textarea, button, #private_message_recipient").trigger("blur");
diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index 688e11bbaa..59091b5acf 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -84,7 +84,6 @@ declare let timerender: any;
 declare let typeahead_helper: any;
 declare let typing_events: any;
 declare let ui: any;
-declare let ui_util: any;
 declare let unread: any;
 declare let unread_ops: any;
 declare let upload_widget: any;
diff --git a/static/js/hashchange.js b/static/js/hashchange.js
index b2e7ec3f84..f863ac9cce 100644
--- a/static/js/hashchange.js
+++ b/static/js/hashchange.js
@@ -6,6 +6,7 @@ const info_overlay = require("./info_overlay");
 const invite = require("./invite");
 const message_viewport = require("./message_viewport");
 const top_left_corner = require("./top_left_corner");
+const ui_util = require("./ui_util");
 
 // Read https://zulip.readthedocs.io/en/latest/subsystems/hashchange-system.html
 // or locally: docs/subsystems/hashchange-system.md
diff --git a/static/js/input_pill.js b/static/js/input_pill.js
index 43331a4a82..430efd8c5b 100644
--- a/static/js/input_pill.js
+++ b/static/js/input_pill.js
@@ -2,6 +2,8 @@
 
 const render_input_pill = require("../templates/input_pill.hbs");
 
+const ui_util = require("./ui_util");
+
 // See https://zulip.readthedocs.io/en/latest/subsystems/input-pills.html
 exports.random_id = function () {
     return Math.random().toString(16);
diff --git a/static/js/message_edit.js b/static/js/message_edit.js
index 38a7df2634..5587b15d18 100644
--- a/static/js/message_edit.js
+++ b/static/js/message_edit.js
@@ -14,6 +14,7 @@ import * as resize from "./resize";
 import * as rows from "./rows";
 import * as stream_data from "./stream_data";
 import * as ui_report from "./ui_report";
+import * as ui_util from "./ui_util";
 import * as upload from "./upload";
 
 const currently_editing_messages = new Map();
diff --git a/static/js/narrow.js b/static/js/narrow.js
index 6768c0a7f2..2837a5f774 100644
--- a/static/js/narrow.js
+++ b/static/js/narrow.js
@@ -17,6 +17,7 @@ const stream_data = require("./stream_data");
 const stream_topic_history = require("./stream_topic_history");
 const top_left_corner = require("./top_left_corner");
 const topic_generator = require("./topic_generator");
+const ui_util = require("./ui_util");
 const util = require("./util");
 
 let unnarrow_times;
diff --git a/static/js/search.js b/static/js/search.js
index 20ce554f05..42f60e793c 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -3,6 +3,7 @@
 const {Filter} = require("./filter");
 const narrow_state = require("./narrow_state");
 const search_pill = require("./search_pill");
+const ui_util = require("./ui_util");
 
 // Exported for unit testing
 exports.is_using_input_method = false;
diff --git a/static/js/stream_popover.js b/static/js/stream_popover.js
index bba182074c..a69645a0b0 100644
--- a/static/js/stream_popover.js
+++ b/static/js/stream_popover.js
@@ -15,6 +15,7 @@ const muting_ui = require("./muting_ui");
 const resize = require("./resize");
 const stream_color = require("./stream_color");
 const stream_data = require("./stream_data");
+const ui_util = require("./ui_util");
 
 // We handle stream popovers and topic popovers in this
 // module.  Both are popped up from the left sidebar.
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 999793ddac..7eacba0817 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -39,6 +39,7 @@ const topic_list = require("./topic_list");
 const topic_zoom = require("./topic_zoom");
 const tutorial = require("./tutorial");
 const typing = require("./typing");
+const ui_util = require("./ui_util");
 const unread_ui = require("./unread_ui");
 const user_groups = require("./user_groups");
 const user_status = require("./user_status");
diff --git a/static/js/ui_util.js b/static/js/ui_util.js
index 897a8d7862..2736704fd2 100644
--- a/static/js/ui_util.js
+++ b/static/js/ui_util.js
@@ -1,17 +1,15 @@
-"use strict";
-
-const stream_color = require("./stream_color");
-const stream_data = require("./stream_data");
+import * as stream_color from "./stream_color";
+import * as stream_data from "./stream_data";
 
 // Add functions to this that have no non-trivial
 // dependencies other than jQuery.
 
-exports.change_tab_to = function (tabname) {
+export function change_tab_to(tabname) {
     $(`#gear-menu a[href="${CSS.escape(tabname)}"]`).tab("show");
-};
+}
 
 // https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
-exports.place_caret_at_end = function (el) {
+export function place_caret_at_end(el) {
     el.focus();
 
     if (typeof window.getSelection !== "undefined" && typeof document.createRange !== "undefined") {
@@ -27,12 +25,12 @@ exports.place_caret_at_end = function (el) {
         textRange.collapse(false);
         textRange.select();
     }
-};
+}
 
-exports.blur_active_element = function () {
+export function blur_active_element() {
     // this blurs anything that may perhaps be actively focused on.
     document.activeElement.blur();
-};
+}
 
 function update_lock_icon_for_stream(stream_name) {
     const icon = $("#compose-lock-icon");
@@ -50,7 +48,7 @@ function update_lock_icon_for_stream(stream_name) {
 // color look like the stream being used.
 // (In particular, if there's a color associated with it,
 //  have that color be reflected here too.)
-exports.decorate_stream_bar = function (stream_name, element, is_compose) {
+export function decorate_stream_bar(stream_name, element, is_compose) {
     if (stream_name === undefined) {
         return;
     }
@@ -62,6 +60,4 @@ exports.decorate_stream_bar = function (stream_name, element, is_compose) {
         .css("background-color", color)
         .removeClass(stream_color.color_classes)
         .addClass(stream_color.get_color_class(color));
-};
-
-window.ui_util = exports;
+}