diff --git a/web/src/activity_ui.js b/web/src/activity_ui.js index 03328d5ec0..4bf6b1e230 100644 --- a/web/src/activity_ui.js +++ b/web/src/activity_ui.js @@ -1,5 +1,7 @@ import _ from "lodash"; +import render_empty_list_widget_for_list from "../templates/empty_list_widget_for_list.hbs"; + import * as activity from "./activity"; import * as blueslip from "./blueslip"; import * as buddy_data from "./buddy_data"; @@ -72,6 +74,17 @@ export function searching() { return user_filter && user_filter.searching(); } +export function render_empty_user_list_message_if_needed($container) { + const empty_list_message = $container.data("empty"); + + if (!empty_list_message || $container.children().length) { + return; + } + + const empty_list_widget = render_empty_list_widget_for_list({empty_list_message}); + $container.append(empty_list_widget); +} + export function build_user_sidebar() { if (page_params.realm_presence_disabled) { return undefined; @@ -83,6 +96,8 @@ export function build_user_sidebar() { buddy_list.populate({keys: user_ids}); + render_empty_user_list_message_if_needed(buddy_list.$container); + return user_ids; // for testing } diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css index a8b514828d..d3a539582b 100644 --- a/web/styles/right_sidebar.css +++ b/web/styles/right_sidebar.css @@ -85,6 +85,14 @@ $user_status_emoji_width: 24px; display: block; } + #empty-list-message { + font-size: 1.2em; + + &:hover { + background-color: inherit; + } + } + & a { color: inherit; margin-left: 0; diff --git a/web/tests/activity.test.js b/web/tests/activity.test.js index 544b2251ec..4ed8fab250 100644 --- a/web/tests/activity.test.js +++ b/web/tests/activity.test.js @@ -449,6 +449,28 @@ test("first/prev/next", ({override, mock_template}) => { assert.ok(rendered_fred); }); +test("render_empty_user_list_message", ({override, mock_template}) => { + const empty_list_message = "No matching users."; + mock_template("empty_list_widget_for_list.hbs", false, (data) => { + assert.equal(data.empty_list_message, empty_list_message); + return empty_list_message; + }); + + let appended_data; + override(buddy_list, "$container", { + append(data) { + appended_data = data; + }, + data() { + return empty_list_message; + }, + children: () => [], + }); + + activity_ui.render_empty_user_list_message_if_needed(buddy_list.$container); + assert.equal(appended_data, empty_list_message); +}); + test("insert_one_user_into_empty_list", ({override, mock_template}) => { user_settings.user_list_style = 2; mock_template("presence_row.hbs", true, (data, html) => { diff --git a/web/tests/user_search.test.js b/web/tests/user_search.test.js index 3cca33db0e..440cd85f0d 100644 --- a/web/tests/user_search.test.js +++ b/web/tests/user_search.test.js @@ -9,6 +9,9 @@ const {page_params} = require("./lib/zpage_params"); const fake_buddy_list = { scroll_container_sel: "#whatever", + $container: { + data() {}, + }, find_li() {}, first_key() {}, prev_key() {},