From 95f2ead33d0544bcd392b5639484f6e7919400c5 Mon Sep 17 00:00:00 2001 From: brijsiyag Date: Sat, 25 Mar 2023 18:40:45 +0530 Subject: [PATCH] streams: Add an explanatory notice when left panel is empty. This commit adds a message and link to view or create streams on empty streams panel. It conditionally renders the message when there is no stream to show and also when any stream event (delete,create,subscribe) occurs. Co-authored-by: Tim Abbott Fixes #21870. --- web/src/stream_settings_ui.js | 29 ++++++++++++++++++- web/styles/subscriptions.css | 25 +++++++++------- .../stream_settings_overlay.hbs | 18 ++++++++++++ web/tests/stream_events.test.js | 11 +++++++ web/tests/stream_settings_ui.test.js | 1 + 5 files changed, 72 insertions(+), 12 deletions(-) diff --git a/web/src/stream_settings_ui.js b/web/src/stream_settings_ui.js index f7f03f771a..badaaa480f 100644 --- a/web/src/stream_settings_ui.js +++ b/web/src/stream_settings_ui.js @@ -299,6 +299,7 @@ export function add_sub_to_table(sub) { row_for_stream_id(sub.stream_id).trigger("click"); stream_create.reset_created_stream(); } + update_empty_left_panel_message(); } export function remove_stream(stream_id) { @@ -306,6 +307,7 @@ export function remove_stream(stream_id) { // stream, but we let jQuery silently handle that. const $row = row_for_stream_id(stream_id); $row.remove(); + update_empty_left_panel_message(); if (hash_util.is_editing_stream(stream_id)) { stream_edit.open_edit_panel_empty(); } @@ -335,6 +337,9 @@ export function update_settings_for_subscribed(slim_sub) { // Display the swatch and subscription stream_settings stream_ui_updates.update_regular_sub_settings(sub); stream_ui_updates.update_permissions_banner(sub); + + // Update whether there's any streams shown or not. + update_empty_left_panel_message(); } export function show_active_stream_in_left_panel() { @@ -367,6 +372,8 @@ export function update_settings_for_unsubscribed(slim_sub) { // Remove private streams from subscribed streams list. stream_ui_updates.update_stream_row_in_settings_tab(sub); stream_ui_updates.update_permissions_banner(sub); + + update_empty_left_panel_message(); } function triage_stream(left_panel_params, sub) { @@ -443,6 +450,25 @@ export function render_left_panel_superset() { ui.get_content_element($("#manage_streams_container .streams-list")).html(html); } +export function update_empty_left_panel_message() { + // Check if we have any subscribed streams to decide whether to + // display a notice. + const has_subscribed_streams = stream_data.subscribed_subs().length > 0; + + if (has_subscribed_streams) { + $(".no-streams-to-show").hide(); + return; + } + if (is_subscribed_stream_tab_active()) { + $(".all_streams_tab_empty_text").hide(); + $(".subscribed_streams_tab_empty_text").show(); + } else { + $(".subscribed_streams_tab_empty_text").hide(); + $(".all_streams_tab_empty_text").show(); + } + $(".no-streams-to-show").show(); +} + // LeftPanelParams { input: String, subscribed_only: Boolean, sort_order: String } export function redraw_left_panel(left_panel_params = get_left_panel_params()) { // We only get left_panel_params passed in from tests. Real @@ -495,6 +521,7 @@ export function redraw_left_panel(left_panel_params = get_left_panel_params()) { ); } maybe_reset_right_panel(); + update_empty_left_panel_message(); // return this for test convenience return [...buckets.name, ...buckets.desc]; @@ -649,7 +676,7 @@ export function setup_page(callback) { settings_data.user_can_create_private_streams() || settings_data.user_can_create_public_streams() || settings_data.user_can_create_web_public_streams(), - hide_all_streams: !should_list_all_streams(), + can_view_all_streams: !page_params.is_guest && should_list_all_streams(), max_stream_name_length: page_params.max_stream_name_length, max_stream_description_length: page_params.max_stream_description_length, is_owner: page_params.is_owner, diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index d661c6906d..3111930ff4 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -355,6 +355,20 @@ h4.user_group_setting_subsection_title { margin: 0 -2px; } + .left .no-streams-to-show, + .right .nothing-selected { + display: block; + margin-top: calc(45vh - 75px); + text-align: center; + font-size: 1em; + margin-left: 2em; + margin-right: 2em; + + & span { + color: hsl(0deg 0% 67%); + } + } + .left { border-right: 1px solid hsl(0deg 0% 87%); @@ -370,17 +384,6 @@ h4.user_group_setting_subsection_title { width: calc(50% + 1px); .nothing-selected { - display: block; - margin-top: calc(45vh - 75px); - text-align: center; - font-size: 1em; - margin-left: 2em; - margin-right: 2em; - - & span { - color: hsl(0deg 0% 67%); - } - & button { padding: 6px 10px 8px; display: block; diff --git a/web/templates/stream_settings/stream_settings_overlay.hbs b/web/templates/stream_settings/stream_settings_overlay.hbs index 8ad06a0648..dca2ef33d6 100644 --- a/web/templates/stream_settings/stream_settings_overlay.hbs +++ b/web/templates/stream_settings/stream_settings_overlay.hbs @@ -26,6 +26,24 @@ +
+
+ + {{t 'You are not subscribed to any streams.'}} + {{#if can_view_all_streams}} + {{t 'View all streams'}} + {{/if}} + +
+
+ + {{t 'There are no streams you can view in this organization.'}} + {{#if can_create_streams}} + {{t 'Create a stream'}} + {{/if}} + +
+
diff --git a/web/tests/stream_events.test.js b/web/tests/stream_events.test.js index 7062699707..be4366e930 100644 --- a/web/tests/stream_events.test.js +++ b/web/tests/stream_events.test.js @@ -16,6 +16,7 @@ const stream_list = mock_esm("../src/stream_list"); const stream_muting = mock_esm("../src/stream_muting"); const stream_settings_ui = mock_esm("../src/stream_settings_ui", { update_settings_for_subscribed: noop, + update_empty_left_panel_message: noop, }); const unread_ui = mock_esm("../src/unread_ui"); @@ -299,6 +300,8 @@ test("marked_subscribed (normal)", ({override}) => { list_updated = true; }); + $("#manage_streams_container .stream-row:not(.notdisplayed)").length = 0; + stream_events.mark_subscribed(sub, [], "blue"); const args = stream_list_stub.get_args("sub"); @@ -327,6 +330,8 @@ test("marked_subscribed (color)", ({override}) => { override(color_data, "pick_color", () => "green"); + $("#manage_streams_container .stream-row:not(.notdisplayed)").length = 0; + // narrow state is undefined { const stub = make_stub(); @@ -355,6 +360,8 @@ test("marked_subscribed (emails)", ({override}) => { const subs_stub = make_stub(); override(stream_settings_ui, "update_settings_for_subscribed", subs_stub.f); + $("#manage_streams_container .stream-row:not(.notdisplayed)").length = 0; + assert.ok(!stream_data.is_subscribed_by_name(sub.name)); const user_ids = [15, 20, 25, me.user_id]; @@ -379,6 +386,8 @@ test("mark_unsubscribed (update_settings_for_unsubscribed)", ({override}) => { override(stream_list, "update_subscribe_to_more_streams_link", noop); override(unread_ui, "update_unread_counts", noop); + $("#manage_streams_container .stream-row:not(.notdisplayed)").length = 0; + stream_events.mark_unsubscribed(sub); const args = stub.get_args("sub"); assert.deepEqual(args.sub, sub); @@ -403,6 +412,8 @@ test("mark_unsubscribed (render_title_area)", ({override}) => { override(unread_ui, "update_unread_counts", noop); override(unread_ui, "hide_mark_as_read_turned_off_banner", noop); + $("#manage_streams_container .stream-row:not(.notdisplayed)").length = 0; + stream_events.mark_unsubscribed(sub); assert.equal(message_view_header_stub.num_calls, 1); diff --git a/web/tests/stream_settings_ui.test.js b/web/tests/stream_settings_ui.test.js index 9ae918ac00..709f04aad9 100644 --- a/web/tests/stream_settings_ui.test.js +++ b/web/tests/stream_settings_ui.test.js @@ -129,6 +129,7 @@ run_test("redraw_left_panel", ({mock_template}) => { assert.ok(!$denmark_row.hasClass("active")); function test_filter(params, expected_streams) { + $("#manage_streams_container .stream-row:not(.notdisplayed)").length = 0; const stream_ids = stream_settings_ui.redraw_left_panel(params); assert.deepEqual( stream_ids,