From 941c5daf364ed28a0255bfd15ea0257022f0771b Mon Sep 17 00:00:00 2001 From: nimishmedatwal Date: Tue, 23 Apr 2024 23:21:19 +0530 Subject: [PATCH] navbar: Describe views in top navbar. Adds description in views styled like stream descriptions also adds a help center link to the appropriate page at the end of each description. Fixes #29769. --- web/src/filter.ts | 26 +++++++++++++++++- web/src/message_view_header.ts | 35 ++++++++++++++++++++++++- web/styles/message_view_header.css | 5 ++++ web/templates/navbar_icon_and_title.hbs | 9 +++++++ web/tests/filter.test.js | 19 ++++++++++++++ 5 files changed, 92 insertions(+), 2 deletions(-) diff --git a/web/src/filter.ts b/web/src/filter.ts index dda2d35c61..7c3df5dad5 100644 --- a/web/src/filter.ts +++ b/web/src/filter.ts @@ -912,7 +912,12 @@ export class Filter { return "#"; // redirect to All } - add_icon_data(context: {title: string; is_spectator: boolean}): IconData { + add_icon_data(context: { + title: string; + description?: string; + link?: string; + is_spectator: boolean; + }): IconData { // We have special icons for the simple narrows available for the via sidebars. const term_types = this.sorted_term_types(); let icon; @@ -1046,6 +1051,25 @@ export class Filter { return undefined; } + get_description(): {description: string; link: string} | undefined { + const term_types = this.sorted_term_types(); + switch (term_types[0]) { + case "is-mentioned": + return { + description: $t({defaultMessage: "Messages where you are mentioned."}), + link: "/help/view-your-mentions", + }; + case "is-starred": + return { + description: $t({ + defaultMessage: "Important messages, tasks, and other useful references.", + }), + link: "/help/star-a-message#view-your-starred-messages", + }; + } + return undefined; + } + allow_use_first_unread_when_narrowing(): boolean { return this.can_mark_messages_read() || this.has_operator("is"); } diff --git a/web/src/message_view_header.ts b/web/src/message_view_header.ts index 9d1e2632b7..450d0f175c 100644 --- a/web/src/message_view_header.ts +++ b/web/src/message_view_header.ts @@ -19,6 +19,8 @@ import type {StreamSubscription} from "./sub_store"; type MessageViewHeaderContext = { title: string; + description?: string; + link?: string; is_spectator?: boolean; sub_count?: string | number; formatted_sub_count?: string; @@ -39,27 +41,56 @@ function get_message_view_header_context(filter: Filter | undefined): MessageVie if (recent_view_util.is_visible()) { return { title: $t({defaultMessage: "Recent conversations"}), + description: $t({defaultMessage: "Overview of ongoing conversations."}), zulip_icon: "recent", + link: "/help/recent-conversations", }; } + if (inbox_util.is_visible()) { return { title: $t({defaultMessage: "Inbox"}), + description: $t({ + defaultMessage: "Overview of your conversations with unread messages.", + }), zulip_icon: "inbox", + link: "/help/inbox", }; } - if (filter === undefined) { + + // TODO: If we're not in the recent or inbox view, there should be + // a message feed with a declared filter in the center pane. But + // because of an initialization order bug, this function gets + // called with a filter of `undefined` when loading the web app + // with, say, inbox as the home view. + // + // TODO: Refactor this function to move the inbox/recent cases + // into the caller, and this function can always get a Filter object. + // + // TODO: This ideally doesn't need a special case, we can just use + // `filter.get_description` for it. + if (filter === undefined || filter.is_in_home()) { return { title: $t({defaultMessage: "Combined feed"}), + description: $t({ + defaultMessage: "All your messages except those in muted channels and topics.", + }), zulip_icon: "all-messages", + link: "/help/combined-feed", }; } + const title = filter.get_title(); + const description = filter.get_description()?.description; + const link = filter.get_description()?.link; assert(title !== undefined); const icon_data = filter.add_icon_data({ title, + description, + link, is_spectator: page_params.is_spectator, }); + if (filter.has_operator("channel") && !filter._sub) { return { ...icon_data, @@ -70,6 +101,7 @@ function get_message_view_header_context(filter: Filter | undefined): MessageVie }), }; } + if (filter._sub) { // We can now be certain that the narrow // involves a stream which exists and @@ -85,6 +117,7 @@ function get_message_view_header_context(filter: Filter | undefined): MessageVie stream_settings_link: hash_util.channels_settings_edit_url(current_stream, "general"), }; } + return icon_data; } diff --git a/web/styles/message_view_header.css b/web/styles/message_view_header.css index b01afe7a5b..6498db4573 100644 --- a/web/styles/message_view_header.css +++ b/web/styles/message_view_header.css @@ -94,6 +94,11 @@ padding-left: 10px; overflow: hidden; text-overflow: ellipsis; + + .help_link_widget, + .fa { + margin: 0; + } } /* The very last element in the navbar is the search icon, the second diff --git a/web/templates/navbar_icon_and_title.hbs b/web/templates/navbar_icon_and_title.hbs index 446416cad4..48471d9f77 100644 --- a/web/templates/navbar_icon_and_title.hbs +++ b/web/templates/navbar_icon_and_title.hbs @@ -4,3 +4,12 @@ {{/if}} {{title}} +{{#if description}} + {{description}} + {{#if link}} + + + + {{/if}} + +{{/if}} diff --git a/web/tests/filter.test.js b/web/tests/filter.test.js index 65d64049e6..8ad854037a 100644 --- a/web/tests/filter.test.js +++ b/web/tests/filter.test.js @@ -1628,11 +1628,26 @@ test("navbar_helpers", () => { assert.deepEqual(filter.get_title(), test_case.title); } + function test_get_description(test_case) { + const filter = new Filter(test_case.terms); + const description = filter.get_description(); + + if (test_case.description !== undefined && test_case.link !== undefined) { + assert.deepEqual(description, { + description: test_case.description, + link: test_case.link, + }); + } else { + assert.strictEqual(description, undefined); + } + } + function test_helpers(test_case) { // debugging tip: add a `console.log(test_case)` here test_common_narrow(test_case); test_add_icon_data(test_case); test_get_title(test_case); + test_get_description(test_case); test_redirect_url_with_search(test_case); } @@ -1703,6 +1718,8 @@ test("navbar_helpers", () => { zulip_icon: "star-filled", title: "translated: Starred messages", redirect_url_with_search: "/#narrow/is/starred", + description: "translated: Important messages, tasks, and other useful references.", + link: "/help/star-a-message#view-your-starred-messages", }, { terms: in_home, @@ -1731,6 +1748,8 @@ test("navbar_helpers", () => { zulip_icon: "at-sign", title: "translated: Mentions", redirect_url_with_search: "/#narrow/is/mentioned", + description: "translated: Messages where you are mentioned.", + link: "/help/view-your-mentions", }, { terms: is_resolved,