From 0bd2d0b6a9ee899ce89627177fd4beb36021b01e Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Wed, 11 Oct 2023 16:46:55 +0530
Subject: [PATCH] settings: Add code to live-update lock icon on changing role.

This commit adds code to live-update the lock icon in settings
left sidebar when a user's role changes.
---
 web/src/settings.js                | 22 +++++++++++++++
 web/src/user_events.js             |  3 ++
 web/templates/settings_overlay.hbs | 44 ++++++++----------------------
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/web/src/settings.js b/web/src/settings.js
index f08a58237a..adba9980c8 100644
--- a/web/src/settings.js
+++ b/web/src/settings.js
@@ -80,6 +80,28 @@ function user_can_change_password() {
     return page_params.realm_email_auth_enabled;
 }
 
+export function update_lock_icon_in_sidebar() {
+    if (page_params.is_owner) {
+        $(".org-settings-list .locked").hide();
+        return;
+    }
+    if (page_params.is_admin) {
+        $(".org-settings-list .locked").hide();
+        $(".org-settings-list li[data-section='auth-methods'] .locked").show();
+        return;
+    }
+
+    $(".org-settings-list .locked").show();
+
+    if (settings_bots.can_create_new_bots()) {
+        $(".org-settings-list li[data-section='bot-list-admin'] .locked").hide();
+    }
+
+    if (settings_data.user_can_add_custom_emoji()) {
+        $(".org-settings-list li[data-section='emoji-settings'] .locked").hide();
+    }
+}
+
 export function build_page() {
     setup_settings_label();
 
diff --git a/web/src/user_events.js b/web/src/user_events.js
index bf519d45d7..a1e0a1bc08 100644
--- a/web/src/user_events.js
+++ b/web/src/user_events.js
@@ -12,6 +12,7 @@ import * as narrow_state from "./narrow_state";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as pm_list from "./pm_list";
+import * as settings from "./settings";
 import * as settings_account from "./settings_account";
 import * as settings_config from "./settings_config";
 import * as settings_linkifiers from "./settings_linkifiers";
@@ -78,6 +79,7 @@ export const update_person = function update(person) {
         if (people.is_my_user_id(person.user_id) && page_params.is_owner !== person_obj.is_owner) {
             page_params.is_owner = person_obj.is_owner;
             settings_org.maybe_disable_widgets();
+            settings.update_lock_icon_in_sidebar();
         }
 
         if (people.is_my_user_id(person.user_id) && page_params.is_admin !== person_obj.is_admin) {
@@ -88,6 +90,7 @@ export const update_person = function update(person) {
             settings_streams.maybe_disable_widgets();
             settings_realm_user_settings_defaults.maybe_disable_widgets();
             settings_account.update_account_settings_display();
+            settings.update_lock_icon_in_sidebar();
         }
 
         if (
diff --git a/web/templates/settings_overlay.hbs b/web/templates/settings_overlay.hbs
index e56181688b..cf1a1f3e1f 100644
--- a/web/templates/settings_overlay.hbs
+++ b/web/templates/settings_overlay.hbs
@@ -58,44 +58,32 @@
                     <li tabindex="0" data-section="organization-profile">
                         <i class="icon fa fa-id-card" aria-hidden="true"></i>
                         <div class="text">{{t "Organization profile" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     <li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-settings">
                         <i class="icon fa fa-sliders" aria-hidden="true"></i>
                         <div class="text">{{t "Organization settings" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings' }}"></i>
                     </li>
                     <li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-permissions">
                         <i class="icon fa fa-lock" aria-hidden="true"></i>
                         <div class="text">{{t "Organization permissions" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     <li tabindex="0" data-section="emoji-settings">
                         <i class="icon fa fa-smile-o" aria-hidden="true"></i>
                         <div class="text">{{t "Custom emoji" }}</div>
-                        {{#if show_emoji_settings_lock}}
-                            <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'You do not have permission to add custom emoji.'}}"></i>
-                        {{/if}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#unless show_emoji_settings_lock}}style="display: none;"{{/unless}} data-tippy-content="{{t 'You do not have permission to add custom emoji.'}}"></i>
                     </li>
                     <li tabindex="0" data-section="linkifier-settings">
                         <i class="icon fa fa-font" aria-hidden="true"></i>
                         <div class="text">{{t "Linkifiers" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     <li tabindex="0" data-section="playground-settings">
                         <i class="icon fa fa-external-link" aria-hidden="true"></i>
                         <div class="text">{{t "Code playgrounds" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     {{#unless is_guest}}
                     <li tabindex="0" data-section="user-groups-admin">
@@ -107,27 +95,21 @@
                     <li tabindex="0" data-section="user-list-admin">
                         <i class="icon fa fa-user" aria-hidden="true"></i>
                         <div class="text">{{t "Users" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     {{/unless}}
                     {{#unless is_guest}}
                     <li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="deactivated-users-admin">
                         <i class="icon fa fa-user-times" aria-hidden="true"></i>
                         <div class="text">{{t "Deactivated users" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     {{/unless}}
                     {{#unless is_guest}}
                     <li tabindex="0" data-section="bot-list-admin">
                         <i class="icon zulip-icon zulip-icon-smart-toy" aria-hidden="true"></i>
                         <div class="text">{{t "Bots" }}</div>
-                        {{#unless can_create_new_bots}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if can_create_new_bots}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     {{/unless}}
                     {{#unless is_guest}}
@@ -145,9 +127,7 @@
                     <li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-level-user-defaults">
                         <i class="icon fa fa-cog" aria-hidden="true"></i>
                         <div class="text">{{t "Default user settings" }}</div>
-                        {{#unless is_admin}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     </li>
                     {{#unless is_guest}}
                     <li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="default-streams-list">
@@ -161,9 +141,7 @@
                     <li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="auth-methods">
                         <i class="icon fa fa-key" aria-hidden="true"></i>
                         <div class="text">{{t "Authentication methods" }}</div>
-                        {{#unless is_owner}}
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization owners can edit these settings.' }}"></i>
-                        {{/unless}}
+                        <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_owner}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization owners can edit these settings.' }}"></i>
                     </li>
                     {{#if is_admin}}
                     <li tabindex="0" data-section="data-exports-admin">