From f937669ba137b2e139c4b0438cfbd5f2faaf24e9 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Tue, 16 Jul 2024 15:41:19 +0530
Subject: [PATCH] user_pill: Show deactivated icon in user_display_only_pill.

This commit adds code to show the deactivated icon for
deactivated users.
---
 web/src/stream_data.ts                                 |  7 +++++--
 web/styles/input_pill.css                              |  7 +++++++
 web/templates/settings/admin_invites_list.hbs          |  2 +-
 web/templates/stream_settings/new_stream_user.hbs      |  2 +-
 .../stream_settings/stream_member_list_entry.hbs       |  2 +-
 web/templates/stream_settings/stream_settings.hbs      |  3 ++-
 web/templates/user_display_only_pill.hbs               |  3 +++
 web/tests/stream_data.test.js                          | 10 +++++++++-
 8 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/web/src/stream_data.ts b/web/src/stream_data.ts
index 42ab41d5f4..8e5dc837e5 100644
--- a/web/src/stream_data.ts
+++ b/web/src/stream_data.ts
@@ -181,12 +181,15 @@ export function get_sub_by_id(stream_id: number): StreamSubscription | undefined
     return stream_info.get(stream_id);
 }
 
-export function maybe_get_creator_details(creator_id: number | null): User | undefined {
+export function maybe_get_creator_details(
+    creator_id: number | null,
+): (User & {is_active: boolean}) | undefined {
     if (creator_id === null) {
         return undefined;
     }
 
-    return people.get_user_by_id_assert_valid(creator_id);
+    const creator = people.get_user_by_id_assert_valid(creator_id);
+    return {...creator, is_active: people.is_person_active(creator_id)};
 }
 
 export function get_stream_id(name: string): number | undefined {
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 280997c2ba..f4993efa3d 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -205,6 +205,13 @@
 .panel_user_list > .pill-container,
 .stream_creator_details > .display_only_pill {
     background-color: hsl(0deg 0% 0% / 7%);
+    gap: 2px;
+    flex-wrap: nowrap;
+
+    &.inline_with_text_pill > .pill-deactivated {
+        font-size: 0.9em;
+        padding-right: 2px;
+    }
 
     &:hover {
         color: inherit;
diff --git a/web/templates/settings/admin_invites_list.hbs b/web/templates/settings/admin_invites_list.hbs
index 6e1639811c..78197a6bdc 100644
--- a/web/templates/settings/admin_invites_list.hbs
+++ b/web/templates/settings/admin_invites_list.hbs
@@ -14,7 +14,7 @@
     {{#if is_admin}}
     <td>
         <span class="referred_by panel_user_list">
-            {{> ../user_display_only_pill display_value=referrer_name user_id=invited_by_user_id}}
+            {{> ../user_display_only_pill display_value=referrer_name user_id=invited_by_user_id is_active=true}}
         </span>
     </td>
     {{/if}}
diff --git a/web/templates/stream_settings/new_stream_user.hbs b/web/templates/stream_settings/new_stream_user.hbs
index ef6ab654d6..e7d62edc6f 100644
--- a/web/templates/stream_settings/new_stream_user.hbs
+++ b/web/templates/stream_settings/new_stream_user.hbs
@@ -1,6 +1,6 @@
 <tr>
     <td class="panel_user_list">
-        {{> ../user_display_only_pill display_value=full_name strikethrough=soft_removed}}
+        {{> ../user_display_only_pill display_value=full_name strikethrough=soft_removed is_active=true}}
     </td>
     {{#if email}}
         <td class="subscriber-email {{#if soft_removed}} strikethrough {{/if}}">{{email}}</td>
diff --git a/web/templates/stream_settings/stream_member_list_entry.hbs b/web/templates/stream_settings/stream_member_list_entry.hbs
index 6a97940eac..af33d84846 100644
--- a/web/templates/stream_settings/stream_member_list_entry.hbs
+++ b/web/templates/stream_settings/stream_member_list_entry.hbs
@@ -1,6 +1,6 @@
 <tr data-subscriber-id="{{user_id}}">
     <td class="subscriber-name panel_user_list">
-        {{> ../user_display_only_pill display_value=name}}
+        {{> ../user_display_only_pill display_value=name is_active=true}}
     </td>
     {{#if email}}
     <td class="subscriber-email">{{email}}</td>
diff --git a/web/templates/stream_settings/stream_settings.hbs b/web/templates/stream_settings/stream_settings.hbs
index 3256def48e..c2131bf71a 100644
--- a/web/templates/stream_settings/stream_settings.hbs
+++ b/web/templates/stream_settings/stream_settings.hbs
@@ -84,7 +84,8 @@
                               user_id=creator.user_id
                               img_src=creator.avatar_url
                               display_value=creator.full_name
-                              is_current_user=is_creator }}
+                              is_current_user=is_creator
+                              is_active=creator.is_active }}
                         {{/inline}}
                         {{#*inline "z-stream-date-created"}}{{date_created_string}}{{/inline}}
                     {{/tr}}
diff --git a/web/templates/user_display_only_pill.hbs b/web/templates/user_display_only_pill.hbs
index a3b6abdd8b..cae9b86ea1 100644
--- a/web/templates/user_display_only_pill.hbs
+++ b/web/templates/user_display_only_pill.hbs
@@ -13,4 +13,7 @@
             {{~/if~}}
         </span>
     </a>
+    {{#unless is_active}}
+        <i class="fa fa-ban pill-deactivated deactivated-user-icon tippy-zulip-delayed-tooltip" data-tippy-content="{{#if is_bot}}{{t 'Bot is deactivated' }}{{else}}{{t 'User is deactivated' }}{{/if}}"></i>
+    {{/unless}}
 </span>
diff --git a/web/tests/stream_data.test.js b/web/tests/stream_data.test.js
index d7b14105a5..a6310f7c5f 100644
--- a/web/tests/stream_data.test.js
+++ b/web/tests/stream_data.test.js
@@ -841,7 +841,15 @@ test("creator_id", () => {
     // When there is no creator
     assert.equal(stream_data.maybe_get_creator_details(null), undefined);
 
-    const creator_details = people.get_by_user_id(test_user.user_id);
+    let creator_details = {...people.get_by_user_id(test_user.user_id), is_active: true};
+    assert.deepStrictEqual(
+        stream_data.maybe_get_creator_details(test_user.user_id),
+        creator_details,
+    );
+
+    // Check when creator is deactivated.
+    people.deactivate(test_user);
+    creator_details = {...people.get_by_user_id(test_user.user_id), is_active: false};
     assert.deepStrictEqual(
         stream_data.maybe_get_creator_details(test_user.user_id),
         creator_details,