popovers: Extract user_profile_modal functions in separate module.

We had a lot of functions and click handlers that were only
involved with user profile modal and were not related to
popovers logic in any way. So we extract these functions
into a separate module `user_profile.js`.

static/js/click_handlers.js

@@ -41,6 +41,7 @@ import * as stream_popover from "./stream_popover";
 import * as topic_list from "./topic_list";
 import * as ui_util from "./ui_util";
 import * as unread_ops from "./unread_ops";
+import * as user_profile from "./user_profile";
 import * as util from "./util";
 
 export function initialize() {
@@ -582,6 +583,7 @@ export function initialize() {
     }
 
     popovers.register_click_handlers();
+    user_profile.register_click_handlers();
     emoji_picker.register_click_handlers();
     stream_popover.register_click_handlers();
     notifications.register_click_handlers();

static/js/popovers.js

@@ -1,5 +1,5 @@
 import ClipboardJS from "clipboard";
-import {add, formatISO, parseISO, set} from "date-fns";
+import {add, formatISO, set} from "date-fns";
 import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
 import $ from "jquery";
 import {hideAll} from "tippy.js";
@@ -10,15 +10,11 @@ import render_playground_links_popover_content from "../templates/playground_lin
 import render_remind_me_popover_content from "../templates/remind_me_popover_content.hbs";
 import render_user_group_info_popover from "../templates/user_group_info_popover.hbs";
 import render_user_group_info_popover_content from "../templates/user_group_info_popover_content.hbs";
-import render_user_group_list_item from "../templates/user_group_list_item.hbs";
 import render_user_info_popover_content from "../templates/user_info_popover_content.hbs";
 import render_user_info_popover_title from "../templates/user_info_popover_title.hbs";
-import render_user_profile_modal from "../templates/user_profile_modal.hbs";
-import render_user_stream_list_item from "../templates/user_stream_list_item.hbs";
 
 import * as blueslip from "./blueslip";
 import * as buddy_data from "./buddy_data";
-import * as components from "./components";
 import * as compose_actions from "./compose_actions";
 import * as compose_state from "./compose_state";
 import * as compose_ui from "./compose_ui";
@@ -28,7 +24,6 @@ import * as feature_flags from "./feature_flags";
 import * as giphy from "./giphy";
 import * as hash_util from "./hash_util";
 import {$t} from "./i18n";
-import * as ListWidget from "./list_widget";
 import * as message_edit from "./message_edit";
 import * as message_edit_history from "./message_edit_history";
 import * as message_lists from "./message_lists";
@@ -45,10 +40,7 @@ import * as realm_playground from "./realm_playground";
 import * as reminder from "./reminder";
 import * as resize from "./resize";
 import * as rows from "./rows";
-import * as settings_account from "./settings_account";
 import * as settings_data from "./settings_data";
-import * as settings_profile_fields from "./settings_profile_fields";
-import * as stream_data from "./stream_data";
 import * as stream_popover from "./stream_popover";
 import * as user_groups from "./user_groups";
 import * as user_status from "./user_status";
@@ -80,7 +72,7 @@ export function clipboard_enable(arg) {
     return new ClipboardJS(arg);
 }
 
-function elem_to_user_id(elem) {
+export function elem_to_user_id(elem) {
     return Number.parseInt(elem.attr("data-user-id"), 10);
 }
 
@@ -169,53 +161,6 @@ function calculate_info_popover_placement(size, elt) {
     return undefined;
 }
 
-function get_custom_profile_field_data(user, field, field_types, dateFormat) {
-    const field_value = people.get_custom_profile_data(user.user_id, field.id);
-    const field_type = field.type;
-    const profile_field = {};
-
-    if (!field_value) {
-        return profile_field;
-    }
-    if (!field_value.value) {
-        return profile_field;
-    }
-    profile_field.name = field.name;
-    profile_field.is_user_field = false;
-    profile_field.is_link = field_type === field_types.URL.id;
-    profile_field.is_external_account = field_type === field_types.EXTERNAL_ACCOUNT.id;
-    profile_field.type = field_type;
-
-    switch (field_type) {
-        case field_types.DATE.id:
-            profile_field.value = dateFormat.format(parseISO(field_value.value));
-            break;
-        case field_types.USER.id:
-            profile_field.id = field.id;
-            profile_field.is_user_field = true;
-            profile_field.value = field_value.value;
-            break;
-        case field_types.SELECT.id: {
-            const field_choice_dict = JSON.parse(field.field_data);
-            profile_field.value = field_choice_dict[field_value.value].text;
-            break;
-        }
-        case field_types.SHORT_TEXT.id:
-        case field_types.LONG_TEXT.id:
-            profile_field.value = field_value.value;
-            profile_field.rendered_value = field_value.rendered_value;
-            break;
-        case field_types.EXTERNAL_ACCOUNT.id:
-            profile_field.value = field_value.value;
-            profile_field.field_data = JSON.parse(field.field_data);
-            profile_field.link = settings_profile_fields.get_external_account_link(profile_field);
-            break;
-        default:
-            profile_field.value = field_value.value;
-    }
-    return profile_field;
-}
-
 function render_user_info_popover(
     user,
     popover_element,
@@ -340,120 +285,6 @@ function show_user_info_popover_for_message(element, user, message) {
     }
 }
 
-export function hide_user_profile() {
-    overlays.close_modal("#user-profile-modal");
-}
-
-function compare_by_name(a, b) {
-    return util.strcmp(a.name, b.name);
-}
-
-function format_user_stream_list_item(stream) {
-    return render_user_stream_list_item({
-        name: stream.name,
-        stream_id: stream.stream_id,
-        stream_color: stream.color,
-        invite_only: stream.invite_only,
-        is_web_public: stream.is_web_public,
-        stream_edit_url: hash_util.stream_edit_uri(stream),
-    });
-}
-
-function format_user_group_list_item(group) {
-    return render_user_group_list_item({
-        group_id: group.id,
-        name: group.name,
-    });
-}
-
-function render_user_stream_list(streams, user) {
-    streams.sort(compare_by_name);
-    const container = $("#user-profile-modal .user-stream-list");
-    container.empty();
-    ListWidget.create(container, streams, {
-        name: `user-${user.user_id}-stream-list`,
-        modifier(item) {
-            return format_user_stream_list_item(item);
-        },
-        simplebar_container: $("#user-profile-modal .modal-body"),
-    });
-}
-
-function render_user_group_list(groups, user) {
-    groups.sort(compare_by_name);
-    const container = $("#user-profile-modal .user-group-list");
-    container.empty();
-    ListWidget.create(container, groups, {
-        name: `user-${user.user_id}-group-list`,
-        modifier(item) {
-            return format_user_group_list_item(item);
-        },
-        simplebar_container: $("#user-profile-modal .modal-body"),
-    });
-}
-
-export function show_user_profile(user) {
-    hide_all();
-
-    const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
-    const field_types = page_params.custom_profile_field_types;
-    const profile_data = page_params.custom_profile_fields
-        .map((f) => get_custom_profile_field_data(user, f, field_types, dateFormat))
-        .filter((f) => f.name !== undefined);
-    const user_streams = stream_data.get_subscribed_streams_for_user(user.user_id);
-    const groups_of_user = user_groups.get_user_groups_of_user(user.user_id);
-    const args = {
-        full_name: user.full_name,
-        email: people.get_visible_email(user),
-        profile_data,
-        user_avatar: "avatar/" + user.email + "/medium",
-        is_me: people.is_current_user(user.email),
-        date_joined: dateFormat.format(parseISO(user.date_joined)),
-        last_seen: buddy_data.user_last_seen_time_status(user.user_id),
-        show_email: settings_data.show_email(),
-        user_time: people.get_user_time(user.user_id),
-        user_type: people.get_user_type(user.user_id),
-        user_is_guest: user.is_guest,
-    };
-
-    $("#user-profile-modal-holder").html(render_user_profile_modal(args));
-    $("#user-profile-modal").modal("show");
-    $(".tabcontent").hide();
-    $("#profile-tab").show(); // Show general profile details by default.
-    const opts = {
-        selected: 0,
-        child_wants_focus: true,
-        values: [
-            {label: $t({defaultMessage: "Profile"}), key: "profile-tab"},
-            {label: $t({defaultMessage: "Streams"}), key: "streams-tab"},
-            {label: $t({defaultMessage: "User groups"}), key: "groups-tab"},
-        ],
-        callback(name, key) {
-            $(".tabcontent").hide();
-            $("#" + key).show();
-            switch (key) {
-                case "groups-tab":
-                    render_user_group_list(groups_of_user, user);
-                    break;
-                case "streams-tab":
-                    render_user_stream_list(user_streams, user);
-                    break;
-            }
-        },
-    };
-
-    const elem = components.toggle(opts).get();
-    elem.addClass("large allow-overflow");
-    $("#tab-toggle").append(elem);
-
-    settings_account.initialize_custom_user_type_fields(
-        "#user-profile-modal #content",
-        user.user_id,
-        false,
-        false,
-    );
-}
-
 export function show_user_info_popover(element, user) {
     const last_popover_elem = current_user_info_popover_elem;
     hide_all();
@@ -1060,14 +891,6 @@ export function register_click_handlers() {
         e.preventDefault();
     });
 
-    $("body").on("click", ".info_popover_actions .view_full_user_profile", (e) => {
-        const user_id = elem_to_user_id($(e.target).parents("ul"));
-        const user = people.get_by_user_id(user_id);
-        show_user_profile(user);
-        e.stopPropagation();
-        e.preventDefault();
-    });
-
     $("body").on("click", ".info_popover_actions .clear_status", (e) => {
         e.preventDefault();
         const me = elem_to_user_id($(e.target).parents("ul"));
@@ -1091,13 +914,6 @@ export function register_click_handlers() {
     /* These click handlers are implemented as just deep links to the
      * relevant part of the Zulip UI, so we don't want preventDefault,
      * but we do want to close the modal when you click them. */
-    $("body").on("click", "#user-profile-modal #name #edit-button", () => {
-        hide_user_profile();
-    });
-
-    $("body").on("click", "#user-profile-modal .stream_list_item", () => {
-        hide_user_profile();
-    });
 
     $("body").on("click", ".set_away_status", (e) => {
         hide_all();

static/js/settings_account.js

@@ -17,13 +17,13 @@ import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as pill_typeahead from "./pill_typeahead";
-import * as popovers from "./popovers";
 import * as settings_bots from "./settings_bots";
 import * as settings_data from "./settings_data";
 import * as settings_ui from "./settings_ui";
 import * as setup from "./setup";
 import * as ui_report from "./ui_report";
 import * as user_pill from "./user_pill";
+import * as user_profile from "./user_profile";
 
 let password_quality; // Loaded asynchronously
 
@@ -644,7 +644,7 @@ export function set_up() {
         overlays.close_overlay("settings");
         const user = people.get_by_user_id(people.my_current_user_id());
         setTimeout(() => {
-            popovers.show_user_profile(user);
+            user_profile.show_user_profile(user);
         }, 100);
 
         // If user opened the "preview profile" modal from user

static/js/user_profile.js

@@ -0,0 +1,204 @@
+import {parseISO} from "date-fns";
+import $ from "jquery";
+
+import render_user_group_list_item from "../templates/user_group_list_item.hbs";
+import render_user_profile_modal from "../templates/user_profile_modal.hbs";
+import render_user_stream_list_item from "../templates/user_stream_list_item.hbs";
+
+import * as buddy_data from "./buddy_data";
+import * as components from "./components";
+import * as hash_util from "./hash_util";
+import {$t} from "./i18n";
+import * as ListWidget from "./list_widget";
+import * as overlays from "./overlays";
+import {page_params} from "./page_params";
+import * as people from "./people";
+import * as popovers from "./popovers";
+import * as settings_account from "./settings_account";
+import * as settings_data from "./settings_data";
+import * as settings_profile_fields from "./settings_profile_fields";
+import * as stream_data from "./stream_data";
+import * as user_groups from "./user_groups";
+import * as util from "./util";
+
+function compare_by_name(a, b) {
+    return util.strcmp(a.name, b.name);
+}
+
+function format_user_stream_list_item(stream) {
+    return render_user_stream_list_item({
+        name: stream.name,
+        stream_id: stream.stream_id,
+        stream_color: stream.color,
+        invite_only: stream.invite_only,
+        is_web_public: stream.is_web_public,
+        stream_edit_url: hash_util.stream_edit_uri(stream),
+    });
+}
+
+function format_user_group_list_item(group) {
+    return render_user_group_list_item({
+        group_id: group.id,
+        name: group.name,
+    });
+}
+
+function render_user_stream_list(streams, user) {
+    streams.sort(compare_by_name);
+    const container = $("#user-profile-modal .user-stream-list");
+    container.empty();
+    ListWidget.create(container, streams, {
+        name: `user-${user.user_id}-stream-list`,
+        modifier(item) {
+            return format_user_stream_list_item(item);
+        },
+        simplebar_container: $("#user-profile-modal .modal-body"),
+    });
+}
+
+function render_user_group_list(groups, user) {
+    groups.sort(compare_by_name);
+    const container = $("#user-profile-modal .user-group-list");
+    container.empty();
+    ListWidget.create(container, groups, {
+        name: `user-${user.user_id}-group-list`,
+        modifier(item) {
+            return format_user_group_list_item(item);
+        },
+        simplebar_container: $("#user-profile-modal .modal-body"),
+    });
+}
+
+function get_custom_profile_field_data(user, field, field_types, dateFormat) {
+    const field_value = people.get_custom_profile_data(user.user_id, field.id);
+    const field_type = field.type;
+    const profile_field = {};
+
+    if (!field_value) {
+        return profile_field;
+    }
+    if (!field_value.value) {
+        return profile_field;
+    }
+    profile_field.name = field.name;
+    profile_field.is_user_field = false;
+    profile_field.is_link = field_type === field_types.URL.id;
+    profile_field.is_external_account = field_type === field_types.EXTERNAL_ACCOUNT.id;
+    profile_field.type = field_type;
+
+    switch (field_type) {
+        case field_types.DATE.id:
+            profile_field.value = dateFormat.format(parseISO(field_value.value));
+            break;
+        case field_types.USER.id:
+            profile_field.id = field.id;
+            profile_field.is_user_field = true;
+            profile_field.value = field_value.value;
+            break;
+        case field_types.SELECT.id: {
+            const field_choice_dict = JSON.parse(field.field_data);
+            profile_field.value = field_choice_dict[field_value.value].text;
+            break;
+        }
+        case field_types.SHORT_TEXT.id:
+        case field_types.LONG_TEXT.id:
+            profile_field.value = field_value.value;
+            profile_field.rendered_value = field_value.rendered_value;
+            break;
+        case field_types.EXTERNAL_ACCOUNT.id:
+            profile_field.value = field_value.value;
+            profile_field.field_data = JSON.parse(field.field_data);
+            profile_field.link = settings_profile_fields.get_external_account_link(profile_field);
+            break;
+        default:
+            profile_field.value = field_value.value;
+    }
+    return profile_field;
+}
+
+export function hide_user_profile() {
+    overlays.close_modal("#user-profile-modal");
+}
+
+export function show_user_profile(user) {
+    popovers.hide_all();
+
+    const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
+    const field_types = page_params.custom_profile_field_types;
+    const profile_data = page_params.custom_profile_fields
+        .map((f) => get_custom_profile_field_data(user, f, field_types, dateFormat))
+        .filter((f) => f.name !== undefined);
+    const user_streams = stream_data.get_subscribed_streams_for_user(user.user_id);
+    const groups_of_user = user_groups.get_user_groups_of_user(user.user_id);
+    const args = {
+        full_name: user.full_name,
+        email: people.get_visible_email(user),
+        profile_data,
+        user_avatar: "avatar/" + user.email + "/medium",
+        is_me: people.is_current_user(user.email),
+        date_joined: dateFormat.format(parseISO(user.date_joined)),
+        last_seen: buddy_data.user_last_seen_time_status(user.user_id),
+        show_email: settings_data.show_email(),
+        user_time: people.get_user_time(user.user_id),
+        user_type: people.get_user_type(user.user_id),
+        user_is_guest: user.is_guest,
+    };
+
+    $("#user-profile-modal-holder").html(render_user_profile_modal(args));
+    $("#user-profile-modal").modal("show");
+    $(".tabcontent").hide();
+    $("#profile-tab").show(); // Show general profile details by default.
+    const opts = {
+        selected: 0,
+        child_wants_focus: true,
+        values: [
+            {label: $t({defaultMessage: "Profile"}), key: "profile-tab"},
+            {label: $t({defaultMessage: "Streams"}), key: "streams-tab"},
+            {label: $t({defaultMessage: "User groups"}), key: "groups-tab"},
+        ],
+        callback(name, key) {
+            $(".tabcontent").hide();
+            $("#" + key).show();
+            switch (key) {
+                case "groups-tab":
+                    render_user_group_list(groups_of_user, user);
+                    break;
+                case "streams-tab":
+                    render_user_stream_list(user_streams, user);
+                    break;
+            }
+        },
+    };
+
+    const elem = components.toggle(opts).get();
+    elem.addClass("large allow-overflow");
+    $("#tab-toggle").append(elem);
+
+    settings_account.initialize_custom_user_type_fields(
+        "#user-profile-modal #content",
+        user.user_id,
+        false,
+        false,
+    );
+}
+
+export function register_click_handlers() {
+    $("body").on("click", ".info_popover_actions .view_full_user_profile", (e) => {
+        const user_id = popovers.elem_to_user_id($(e.target).parents("ul"));
+        const user = people.get_by_user_id(user_id);
+        show_user_profile(user);
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
+    /* These click handlers are implemented as just deep links to the
+     * relevant part of the Zulip UI, so we don't want preventDefault,
+     * but we do want to close the modal when you click them. */
+    $("body").on("click", "#user-profile-modal #name #edit-button", () => {
+        hide_user_profile();
+    });
+
+    $("body").on("click", "#user-profile-modal .stream_list_item", () => {
+        hide_user_profile();
+    });
+}

tools/test-js-with-node

@@ -169,6 +169,7 @@ EXEMPT_FILES = {
     "static/js/unread_ops.js",
     "static/js/unread_ui.js",
     "static/js/upload_widget.js",
+    "static/js/user_profile.js",
     "static/js/user_status_ui.js",
     "static/js/webpack_public_path.js",
     "static/js/zcommand.js",