Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 <tabbott@zulip.com>

Fixes #21870.
This commit is contained in:
brijsiyag 2023-03-25 18:40:45 +05:30 committed by Tim Abbott
parent f122516e7d
commit 95f2ead33d
5 changed files with 72 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/stream_settings_ui.js
View File

@ -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,

25
web/styles/subscriptions.css
View File

@ -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;

18
web/templates/stream_settings/stream_settings_overlay.hbs
View File

@ -26,6 +26,24 @@
<i class="fa fa-remove" aria-hidden="true"></i>
</button>
</div>
<div class="no-streams-to-show">
<div class="subscribed_streams_tab_empty_text">
<span>
{{t 'You are not subscribed to any streams.'}}
{{#if can_view_all_streams}}
<a href="#streams/all">{{t 'View all streams'}}</a>
{{/if}}
</span>
</div>
<div class="all_streams_tab_empty_text">
<span>
{{t 'There are no streams you can view in this organization.'}}
{{#if can_create_streams}}
<a href="#streams/new">{{t 'Create a stream'}}</a>
{{/if}}
</span>
</div>
</div>
<div class="streams-list" data-simplebar>
</div>
</div>

11
web/tests/stream_events.test.js
View File

@ -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);

1
web/tests/stream_settings_ui.test.js
View File

@ -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,