From 3d56f65df3d18c0ed211da96576a26a2224e68e6 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 18 Jan 2024 14:51:23 +0530
Subject: [PATCH] settings: Show the text about downloading config in "Active
 bots".

This commit moves the "Download config of all active outgoing
webhook bots in Zulip Botserver format." text to be shown in the
"Active bots" section since the text is relevant for active bots
only. This commit also updates the code to show the text only
if user has atleast one active outgoing webhook bot since the
text is relavant only for outgoing webhook bots.
---
 web/src/settings_bots.js                | 16 ++++++++++++----
 web/styles/settings.css                 |  5 ++++-
 web/templates/settings/bot_settings.hbs | 25 ++++++++++++++-----------
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/web/src/settings_bots.js b/web/src/settings_bots.js
index bc89504837..7e2a86b362 100644
--- a/web/src/settings_bots.js
+++ b/web/src/settings_bots.js
@@ -24,6 +24,7 @@ import * as user_profile from "./user_profile";
 
 const INCOMING_WEBHOOK_BOT_TYPE = 2;
 const OUTGOING_WEBHOOK_BOT_TYPE = "3";
+const OUTGOING_WEBHOOK_BOT_TYPE_INT = 3;
 const EMBEDDED_BOT_TYPE = "4";
 
 function add_bot_row(info) {
@@ -45,7 +46,7 @@ export function render_bots() {
     $("#inactive_bots_list").empty();
 
     const all_bots_for_current_user = bot_data.get_all_bots_for_current_user();
-    let user_owns_an_active_bot = false;
+    let user_owns_an_active_outgoing_webhook_bot = false;
 
     for (const elem of all_bots_for_current_user) {
         add_bot_row({
@@ -59,7 +60,15 @@ export function render_bots() {
             is_incoming_webhook_bot: elem.bot_type === INCOMING_WEBHOOK_BOT_TYPE,
             zuliprc: "zuliprc", // Most browsers do not allow filename starting with `.`
         });
-        user_owns_an_active_bot = user_owns_an_active_bot || elem.is_active;
+        user_owns_an_active_outgoing_webhook_bot =
+            user_owns_an_active_outgoing_webhook_bot ||
+            (elem.is_active && elem.bot_type === OUTGOING_WEBHOOK_BOT_TYPE_INT);
+    }
+
+    if (user_owns_an_active_outgoing_webhook_bot) {
+        $("#active_bots_list_container .config-download-text").show();
+    } else {
+        $("#active_bots_list_container .config-download-text").hide();
     }
 
     list_widget.render_empty_list_message_if_needed($("#active_bots_list"));
@@ -316,7 +325,6 @@ export function add_a_new_bot() {
 
 export function set_up() {
     $("#download_botserverrc").on("click", function () {
-        const OUTGOING_WEBHOOK_BOT_TYPE_INT = 3;
         let content = "";
 
         for (const bot of bot_data.get_all_bots_for_current_user()) {
@@ -339,7 +347,7 @@ export function set_up() {
             {label: $t({defaultMessage: "Inactive bots"}), key: "inactive-bots"},
         ],
         callback(_name, key) {
-            $(".bots_list").hide();
+            $(".bots_section").hide();
             $(`[data-bot-settings-section="${CSS.escape(key)}"]`).show();
         },
     });
diff --git a/web/styles/settings.css b/web/styles/settings.css
index d867d195db..def9a5c323 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -844,10 +844,13 @@ input[type="checkbox"] {
         margin: 10px 0;
         border-color: hsl(0deg 0% 85%);
     }
+
+    .config-download-text {
+        margin-left: 5px;
+    }
 }
 
 .bots_list {
-    display: none;
     list-style-type: none;
     margin-left: 0;
 
diff --git a/web/templates/settings/bot_settings.hbs b/web/templates/settings/bot_settings.hbs
index 3c6440b54e..711600c3db 100644
--- a/web/templates/settings/bot_settings.hbs
+++ b/web/templates/settings/bot_settings.hbs
@@ -13,23 +13,26 @@
         <div>
             <button class="button rounded sea-green add-a-new-bot {{#unless can_create_new_bots}}hide{{/unless}}">{{t "Add a new bot" }}</button>
         </div>
-        <div>
-            <span>{{t 'Download config of all active outgoing webhook bots in Zulip Botserver format.' }}</span>
-            <a type="submit" download="{{botserverrc}}" id= "download_botserverrc" class="btn" title="{{t 'Download botserverrc' }}">
-                <i class="fa fa-download sea-green" aria-hidden="true"></i>
-            </a>
-        </div>
         {{/unless}}
 
         <hr/>
 
         <div class="tab-container"></div>
 
-        <ol id="active_bots_list" class="bots_list" data-bot-settings-section="active-bots" data-empty="{{t 'You have no active bots.' }}">
-        </ol>
-
-        <ol id="inactive_bots_list" class="bots_list" data-bot-settings-section="inactive-bots" data-empty="{{t 'You have no inactive bots.' }}">
-        </ol>
+        <div id="active_bots_list_container" class="bots_section" data-bot-settings-section="active-bots">
+            <div class="config-download-text">
+                <span>{{t 'Download config of all active outgoing webhook bots in Zulip Botserver format.' }}</span>
+                <a type="submit" download="{{botserverrc}}" id= "download_botserverrc" class="btn" title="{{t 'Download botserverrc' }}">
+                    <i class="fa fa-download sea-green" aria-hidden="true"></i>
+                </a>
+            </div>
+            <ol id="active_bots_list" class="bots_list" data-empty="{{t 'You have no active bots.' }}">
+            </ol>
+        </div>
 
+        <div id="inactive_bots_list_container" class="bots_section" data-bot-settings-section="inactive-bots">
+            <ol id="inactive_bots_list" class="bots_list" data-empty="{{t 'You have no inactive bots.' }}">
+            </ol>
+        </div>
     </div>
 </div>