user_profile: Redirect edit pencil to manage user tab.

This commit redirects the edit pencil in the user profile modal to
the 'manage user' tab whenever a user with permission to manage
other users via the user profile opens another user's profile.
However, we still want to redirect the edit pencil to
'settings/profile' if the user opens their own profile. The user
management permission is granted if the user is an admin or the
owner of the bot. However, we do not want system bots to have
access to the edit pencil or the 'manage user' tab. Therefore,
a new variable called 'can_manage_profile' has been introduced
to manage all these permissions, and the CSS has been updated
accordingly.

To redirect to the manage user tab without opening another modal,
I have extracted the toggler. This toggler will store the
component, and if the edit pencil button is clicked, we can use
the goto function to redirect to a different tab.

Changed the id names of both the edit pencil icons to explain
better of what they do.

web/src/user_profile.js

@@ -33,6 +33,7 @@ import * as util from "./util";
 
 let user_streams_list_widget;
 let user_profile_subscribe_widget;
+let toggler;
 
 function compare_by_name(a, b) {
     return util.strcmp(a.name, b.name);
@@ -265,6 +266,10 @@ export function hide_user_profile() {
     overlays.close_modal_if_open("user-profile-modal");
 }
 
+function show_manage_user_tab(target) {
+    toggler.goto(target);
+}
+
 function initialize_user_type_fields(user) {
     // Avoid duplicate pill fields, by removing existing ones.
     $("#user-profile-modal .pill").remove();
@@ -321,6 +326,7 @@ export function show_user_profile(user, default_tab_key = "profile-tab") {
         user_type: people.get_user_type(user.user_id),
         user_is_guest: user.is_guest,
         show_user_subscribe_widget,
+        can_manage_profile,
     };
 
     if (user.is_bot) {
@@ -394,7 +400,8 @@ export function show_user_profile(user, default_tab_key = "profile-tab") {
         opts.values.push(manage_profile_tab);
     }
 
-    const $elem = components.toggle(opts).get();
+    toggler = components.toggle(opts);
+    const $elem = toggler.get();
     $elem.addClass("large allow-overflow");
     $("#tab-toggle").append($elem);
     if (show_user_subscribe_widget) {
@@ -519,10 +526,20 @@ export function register_click_handlers() {
         e.stopPropagation();
         e.preventDefault();
     });
+
+    $("body").on(
+        "click",
+        "#user-profile-modal #name #user_profile_manage_others_edit_button",
+        (e) => {
+            show_manage_user_tab("manage-profile-tab");
+            e.stopPropagation();
+            e.preventDefault();
+        },
+    );
     /* These click handlers are implemented as just deep links to the
      * relevant part of the Zulip UI, so we don't want preventDefault,
      * but we do want to close the modal when you click them. */
-    $("body").on("click", "#user-profile-modal #name .user_profile_edit_button", () => {
+    $("body").on("click", "#user-profile-modal #name #user_profile_manage_own_edit_button", () => {
         hide_user_profile();
     });
 

web/styles/popovers.css

@@ -459,9 +459,11 @@ ul {
         }
     }
 
-    .user_profile_edit_button {
+    #user_profile_manage_own_edit_button,
+    #user_profile_manage_others_edit_button {
         width: 25px;
         text-align: center;
+        font-size: 18px;
     }
 
     .user_profile_name {
@@ -472,10 +474,6 @@ ul {
         padding: 3px 0 0;
     }
 
-    #user_profile_edit_button_icon {
-        font-size: 18px;
-    }
-
     #default-section {
         vertical-align: top;
 

web/templates/user_profile_modal.hbs

@@ -13,10 +13,13 @@
                         <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                     {{/if}}
                     {{#if is_me}}
-                    <a href="/#settings/profile" class="user_profile_edit_button">
-                        <i class="fa fa-edit" id="user_profile_edit_button_icon" aria-hidden="true"></i>
+                        <a href="/#settings/profile">
+                            <i class="fa fa-edit" id="user_profile_manage_own_edit_button" aria-hidden="true"></i>
                         </a>
                     {{/if}}
+                    {{#if can_manage_profile}}
+                        <i class="fa fa-edit" id="user_profile_manage_others_edit_button" aria-hidden="true"></i>
+                    {{/if}}
                 </h1>
                 <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
             </div>