refactor: Extract stream_bar.decorate.

This makes input_pill no longer depend on
stream_data and stream_color, and it
probably reduces some other dependencies.

static/js/compose_actions.js

@@ -17,6 +17,7 @@ import * as narrow_state from "./narrow_state";
 import * as notifications from "./notifications";
 import * as people from "./people";
 import * as reload_state from "./reload_state";
+import * as stream_bar from "./stream_bar";
 import * as stream_data from "./stream_data";
 import * as ui_util from "./ui_util";
 import * as unread_ops from "./unread_ops";
@@ -134,7 +135,7 @@ export function complete_starting_tasks(msg_type, opts) {
     maybe_scroll_up_selected_message();
     ui_util.change_tab_to("#message_feed_container");
     compose_fade.start_compose(msg_type);
-    ui_util.decorate_stream_bar(opts.stream, $("#stream-message .message_header_stream"), true);
+    stream_bar.decorate(opts.stream, $("#stream-message .message_header_stream"), true);
     $(document).trigger(new $.Event("compose_started.zulip", opts));
     update_placeholder_text();
 }

static/js/message_edit.js

@@ -17,9 +17,9 @@ import * as message_store from "./message_store";
 import * as message_viewport from "./message_viewport";
 import * as resize from "./resize";
 import * as rows from "./rows";
+import * as stream_bar from "./stream_bar";
 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();
@@ -365,10 +365,10 @@ function edit_message(row, raw_content) {
     const message_edit_countdown_timer = row.find(".message_edit_countdown_timer");
     const copy_message = row.find(".copy_message");
 
-    ui_util.decorate_stream_bar(message.stream, stream_header_colorblock, false);
+    stream_bar.decorate(message.stream, stream_header_colorblock, false);
     message_edit_stream.on("change", function () {
         const stream_name = stream_data.maybe_get_stream_name(Number.parseInt(this.value, 10));
-        ui_util.decorate_stream_bar(stream_name, stream_header_colorblock, false);
+        stream_bar.decorate(stream_name, stream_header_colorblock, false);
     });
 
     if (editability === editability_types.NO) {

static/js/stream_bar.js

@@ -0,0 +1,34 @@
+import $ from "jquery";
+
+import * as stream_color from "./stream_color";
+import * as stream_data from "./stream_data";
+
+function update_lock_icon_for_stream(stream_name) {
+    const icon = $("#compose-lock-icon");
+    const streamfield = $("#stream_message_recipient_stream");
+    if (stream_data.get_invite_only(stream_name)) {
+        icon.show();
+        streamfield.addClass("lock-padding");
+    } else {
+        icon.hide();
+        streamfield.removeClass("lock-padding");
+    }
+}
+
+// In an attempt to decrease mixing, set stream bar
+// color look like the stream being used.
+// (In particular, if there's a color associated with it,
+//  have that color be reflected here too.)
+export function decorate(stream_name, element, is_compose) {
+    if (stream_name === undefined) {
+        return;
+    }
+    const color = stream_data.get_color(stream_name);
+    if (is_compose) {
+        update_lock_icon_for_stream(stream_name);
+    }
+    element
+        .css("background-color", color)
+        .removeClass(stream_color.color_classes)
+        .addClass(stream_color.get_color_class(color));
+}

static/js/stream_popover.js

@@ -20,10 +20,10 @@ import * as narrow from "./narrow";
 import * as popovers from "./popovers";
 import * as resize from "./resize";
 import * as starred_messages from "./starred_messages";
+import * as stream_bar from "./stream_bar";
 import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as subs from "./subs";
-import * as ui_util from "./ui_util";
 import * as unread_ops from "./unread_ops";
 
 // We handle stream popovers and topic popovers in this
@@ -343,10 +343,10 @@ function build_move_topic_to_stream_popover(e, current_stream_id, topic_name) {
     const stream_header_colorblock = $(".topic_stream_edit_header").find(
         ".stream_header_colorblock",
     );
-    ui_util.decorate_stream_bar(current_stream_name, stream_header_colorblock, false);
+    stream_bar.decorate(current_stream_name, stream_header_colorblock, false);
     $("#select_stream_id").on("change", function () {
         const stream_name = stream_data.maybe_get_stream_name(Number.parseInt(this.value, 10));
-        ui_util.decorate_stream_bar(stream_name, stream_header_colorblock, false);
+        stream_bar.decorate(stream_name, stream_header_colorblock, false);
     });
 
     $("#move_topic_modal").modal("show");

static/js/ui_init.js

@@ -55,6 +55,7 @@ import * as settings_sections from "./settings_sections";
 import * as settings_toggle from "./settings_toggle";
 import * as spoilers from "./spoilers";
 import * as starred_messages from "./starred_messages";
+import * as stream_bar from "./stream_bar";
 import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as stream_edit from "./stream_edit";
@@ -66,7 +67,6 @@ import * as topic_zoom from "./topic_zoom";
 import * as tutorial from "./tutorial";
 import * as typing from "./typing";
 import * as ui from "./ui";
-import * as ui_util from "./ui_util";
 import * as unread from "./unread";
 import * as unread_ui from "./unread_ui";
 import * as user_groups from "./user_groups";
@@ -253,7 +253,7 @@ export function initialize_kitchen_sink_stuff() {
     });
 
     $("#stream_message_recipient_stream").on("blur", function () {
-        ui_util.decorate_stream_bar(this.value, $("#stream-message .message_header_stream"), true);
+        stream_bar.decorate(this.value, $("#stream-message .message_header_stream"), true);
     });
 
     $(window).on("blur", () => {

static/js/ui_util.js

@@ -1,8 +1,5 @@
 import $ from "jquery";
 
-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.
 
@@ -33,33 +30,3 @@ 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");
-    const streamfield = $("#stream_message_recipient_stream");
-    if (stream_data.get_invite_only(stream_name)) {
-        icon.show();
-        streamfield.addClass("lock-padding");
-    } else {
-        icon.hide();
-        streamfield.removeClass("lock-padding");
-    }
-}
-
-// In an attempt to decrease mixing, set stream bar
-// color look like the stream being used.
-// (In particular, if there's a color associated with it,
-//  have that color be reflected here too.)
-export function decorate_stream_bar(stream_name, element, is_compose) {
-    if (stream_name === undefined) {
-        return;
-    }
-    const color = stream_data.get_color(stream_name);
-    if (is_compose) {
-        update_lock_icon_for_stream(stream_name);
-    }
-    element
-        .css("background-color", color)
-        .removeClass(stream_color.color_classes)
-        .addClass(stream_color.get_color_class(color));
-}

tools/test-js-with-node

@@ -132,6 +132,7 @@ EXEMPT_FILES = {
     "static/js/settings_users.js",
     "static/js/setup.js",
     "static/js/spoilers.js",
+    "static/js/stream_bar.js",
     "static/js/stream_color.js",
     "static/js/stream_create.js",
     "static/js/stream_edit.js",