right_sidebar: Add functionality to render empty user list message.

In order to eliminate the usage of `::after` pseudo-element for
rendering the empty list message, this commit introduces a new function
for displaying the empty user list message on the right sidebar.

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
 }
 

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;

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) => {

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() {},