settings_bots: Open bots streams tab from personal settings > bots.

UI in settings for bot owners to unsubscribe their bots from streams,
Personal settings > Bots > Bot info card > hashtag icon.

Fixes: #22460

static/js/settings_bots.js

@@ -20,6 +20,7 @@ import {page_params} from "./page_params";
 import * as people from "./people";
 import * as settings_config from "./settings_config";
 import * as ui_report from "./ui_report";
+import * as user_profile from "./user_profile";
 
 const OUTGOING_WEBHOOK_BOT_TYPE = "3";
 const GENERIC_BOT_TYPE = "1";
@@ -582,6 +583,14 @@ export function set_up() {
         $(this).attr("href", generate_zuliprc_uri(bot_id));
     });
 
+    $("#active_bots_list").on("click", "button.open_bots_subscribed_streams", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const bot_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10);
+        const bot = people.get_by_user_id(bot_id);
+        user_profile.show_user_profile(bot, "user-profile-streams-tab");
+    });
+
     new ClipboardJS("#copy_zuliprc", {
         text(trigger) {
             const $bot_info = $(trigger).closest(".bot-information-box").find(".bot_info");

static/js/user_profile.js

@@ -160,7 +160,7 @@ export function hide_user_profile() {
     overlays.close_modal("user-profile-modal");
 }
 
-export function show_user_profile(user) {
+export function show_user_profile(user, default_tab_key = "profile-tab") {
     popovers.hide_all();
 
     const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
@@ -203,9 +203,16 @@ export function show_user_profile(user) {
     $("#user-profile-modal-holder").html(render_user_profile_modal(args));
     overlays.open_modal("user-profile-modal", {autoremove: true});
     $(".tabcontent").hide();
-    $("#profile-tab").show(); // Show general profile details by default.
+
+    let default_tab = 0;
+    // Only checking this tab key as currently we only open this tab directly
+    // other than profile-tab.
+    if (default_tab_key === "user-profile-streams-tab") {
+        default_tab = 1;
+    }
+
     const opts = {
-        selected: 0,
+        selected: default_tab,
         child_wants_focus: true,
         values: [
             {label: $t({defaultMessage: "Profile"}), key: "profile-tab"},

static/styles/settings.css

@@ -737,6 +737,10 @@ input[type="checkbox"] {
         .copy-gold {
             color: hsl(51, 90%, 50%);
         }
+
+        .purple {
+            color: hsl(278, 62%, 68%);
+        }
     }
 
     .bot-information-box {

static/templates/settings/bot_avatar_row.hbs

@@ -17,6 +17,9 @@
                 <button type="submit" class="btn deactivate_bot danger-red" title="{{t 'Deactivate bot' }}" data-user-id="{{user_id}}">
                     <i class="fa fa-user-times" aria-hidden="true"></i>
                 </button>
+                <button type="submit" class="btn open_bots_subscribed_streams" title="{{t 'Subscribed streams' }}" data-user-id="{{user_id}}">
+                    <i class="fa fa-hashtag purple" aria-hidden="true"></i>
+                </button>
             </div>
             {{/if}}
         </div>