tooltip: Change tooltip info for default topic menu option.

Earlier tooltip info for the default topic menu notification option
had static string to display.

This commit changes the string info and includes channel name and its
corresponding privacy icon to display in the tooltip.

web/src/inbox_ui.ts

@@ -436,6 +436,7 @@ function format_topic(
         is_topic: true,
         stream_id,
         topic_name: topic,
+        stream_name: stream_data.get_stream_name_from_id(stream_id),
         unread_count: topic_unread_count,
         conversation_key: get_topic_key(stream_id, topic),
         topic_url: hash_util.by_stream_topic_url(stream_id, topic),

web/src/message_list_view.js

@@ -292,6 +292,7 @@ function populate_group_from_message_container(group, message_container) {
         } else {
             group.stream_id = sub.stream_id;
         }
+        group.stream_name = stream_data.get_stream_name_from_id(sub.stream_id);
         group.is_subscribed = stream_data.is_subscribed(group.stream_id);
         group.topic_is_resolved = resolved_topic.is_resolved(group.topic);
         group.visibility_policy = user_topics.get_topic_visibility_policy(

web/src/tippyjs.ts

@@ -11,6 +11,7 @@ import {$t} from "./i18n";
 import * as people from "./people";
 import * as popovers from "./popovers";
 import * as settings_config from "./settings_config";
+import * as stream_data from "./stream_data";
 import * as ui_util from "./ui_util";
 import {user_settings} from "./user_settings";
 
@@ -83,11 +84,27 @@ export const topic_visibility_policy_tooltip_props = {
     appendTo: () => document.body,
     onShow(instance: tippy.Instance) {
         const $elem = $(instance.reference);
-        const current_visibility_policy_str = $elem.attr("data-tippy-content");
+        let should_render_privacy_icon;
+        let current_visibility_policy_str;
+        if ($elem.hasClass("zulip-icon-inherit")) {
+            should_render_privacy_icon = true;
+        } else {
+            should_render_privacy_icon = false;
+            current_visibility_policy_str = $elem.attr("data-tippy-content");
+        }
+        let current_stream_obj;
+        if (should_render_privacy_icon) {
+            current_stream_obj = stream_data.get_sub_by_id(
+                Number($elem.parent().attr("data-stream-id")),
+            );
+        }
+        const tooltip_context = {
+            ...current_stream_obj,
+            current_visibility_policy_str,
+            should_render_privacy_icon,
+        };
         instance.setContent(
-            ui_util.parse_html(
-                render_change_visibility_policy_button_tooltip({current_visibility_policy_str}),
-            ),
+            ui_util.parse_html(render_change_visibility_policy_button_tooltip(tooltip_context)),
         );
     },
     onHidden(instance: tippy.Instance) {

web/styles/zulip.css

@@ -786,7 +786,25 @@ strong {
 }
 
 #change_visibility_policy_button_tooltip {
-    text-align: center;
+    text-align: left;
+
+    .tooltip-privacy-icon {
+        position: relative;
+        display: inline-block;
+    }
+
+    .tooltip-privacy-icon .zulip-icon-lock {
+        margin-top: -0.15em !important;
+    }
+
+    .tooltip-privacy-icon i {
+        position: absolute;
+        top: 0.1667em;
+    }
+
+    .tooltip-privacy-icon span {
+        margin-left: 1.25em;
+    }
 }
 
 .narrow-filter {

web/templates/change_visibility_policy_button_tooltip.hbs

@@ -1,4 +1,15 @@
 <div id="change_visibility_policy_button_tooltip">
     <strong>{{t 'Configure topic notifications' }}</strong>
-    <div class="tooltip-inner-content italic">{{current_visibility_policy_str}}</div>
+    <div class="tooltip-inner-content italic">
+        <span>
+            {{#if should_render_privacy_icon}}
+                {{#tr}}
+                    Notifications are based on your configuration for <z-stream-name></z-stream-name>.
+                    {{#*inline "z-stream-name"}}<span class="tooltip-privacy-icon">{{> stream_privacy }}<span>{{name}}</span></span>{{/inline}}
+                {{/tr}}
+            {{else}}
+                {{current_visibility_policy_str}}
+            {{/if}}
+        </span>
+    </div>
 </div>

web/templates/inbox_view/inbox_row.hbs

@@ -59,8 +59,8 @@
                                 <i class="zulip-icon zulip-icon-mute-new recipient_bar_icon" data-tippy-content="{{t 'You have muted this topic.'}}"
                                   role="button" aria-haspopup="true" aria-label="{{t 'You have muted this topic' }}"></i>
                             {{else if (eq visibility_policy all_visibility_policies.INHERIT)}}
-                                <i class="zulip-icon zulip-icon-inherit recipient_bar_icon" data-tippy-content="{{t 'You will get default notifications for this topic.'}}"
-                                  role="button" aria-haspopup="true" aria-label="{{t 'You will get default notifications for this topic' }}"></i>
+                                <i class="zulip-icon zulip-icon-inherit recipient_bar_icon"
+                                  role="button" aria-haspopup="true" aria-label="{{t 'Notifications are based on your configuration for #{stream_name}' }}"></i>
                             {{/if}}
                         </span>
                     {{/if}}

web/templates/recent_view_row.hbs

@@ -71,8 +71,8 @@
                                 <i class="zulip-icon zulip-icon-mute-new recipient_bar_icon" data-tippy-content="{{t 'You have muted this topic.'}}"
                                   role="button" tabindex="0" aria-haspopup="true" aria-label="{{t 'You have muted this topic' }}"></i>
                             {{else}}
-                                <i class="zulip-icon zulip-icon-inherit recipient_bar_icon" data-tippy-content="{{t 'You will get default notifications for this topic.'}}"
-                                  role="button" tabindex="0" aria-haspopup="true" aria-label="{{t 'You will get default notifications for this topic' }}"></i>
+                                <i class="zulip-icon zulip-icon-inherit recipient_bar_icon"
+                                  role="button" tabindex="0" aria-haspopup="true" aria-label="{{t 'Notifications are based on your configuration for #{stream_name}' }}"></i>
                             {{/if}}
                         </span>
                     </div>

web/templates/recipient_row.hbs

@@ -70,8 +70,8 @@
                         <i class="zulip-icon zulip-icon-mute-new recipient_bar_icon" data-tippy-content="{{t 'You have muted this topic.'}}"
                           role="button" tabindex="0" aria-haspopup="true" aria-label="{{t 'You have muted this topic' }}"></i>
                     {{else}}
-                        <i class="zulip-icon zulip-icon-inherit recipient_bar_icon" data-tippy-content="{{t 'You will get default notifications for this topic.'}}"
-                          role="button" tabindex="0" aria-haspopup="true" aria-label="{{t 'You will get default notifications for this topic' }}"></i>
+                        <i class="zulip-icon zulip-icon-inherit recipient_bar_icon"
+                          role="button" tabindex="0" aria-haspopup="true" aria-label="{{t 'Notifications are based on your configuration for #{stream_name}' }}"></i>
                     {{/if}}
                 </span>
             {{/if}}