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

@@ -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();
 

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 (

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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings' }}"></i>
-                        {{/unless}}
                     </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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#unless show_emoji_settings_lock}}style="display: none;"{{/unless}} data-tippy-content="{{t 'You do not have permission to add custom emoji.'}}"></i>
-                            <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'You do not have permission to add custom emoji.'}}"></i>
-                        {{/if}}
                     </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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#if can_create_new_bots}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
-                        {{/unless}}
                     </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" {{#if is_owner}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization owners can edit these settings.' }}"></i>
-                        <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization owners can edit these settings.' }}"></i>
-                        {{/unless}}
                     </li>
                     {{#if is_admin}}
                     <li tabindex="0" data-section="data-exports-admin">