deactivated_user: Show deactivated status for deactivated users.

Fixes: #26833.

web/src/message_list_view.ts

@@ -65,6 +65,7 @@ export type MessageContainer = {
     msg: Message;
     sender_is_bot: boolean;
     sender_is_guest: boolean;
+    sender_is_deactivated: boolean;
     should_add_guest_indicator_for_sender: boolean;
     small_avatar_url: string;
     status_message: string | false;
@@ -662,6 +663,7 @@ export class MessageListView {
         small_avatar_url: string;
         sender_is_bot: boolean;
         sender_is_guest: boolean;
+        sender_is_deactivated: boolean;
         should_add_guest_indicator_for_sender: boolean;
         is_hidden: boolean;
         mention_classname: string | undefined;
@@ -743,6 +745,7 @@ export class MessageListView {
 
         const sender_is_bot = people.sender_is_bot(message);
         const sender_is_guest = people.sender_is_guest(message);
+        const sender_is_deactivated = people.sender_is_deactivated(message);
         const should_add_guest_indicator_for_sender = people.should_add_guest_user_indicator(
             message.sender_id,
         );
@@ -760,6 +763,7 @@ export class MessageListView {
             small_avatar_url,
             sender_is_bot,
             sender_is_guest,
+            sender_is_deactivated,
             should_add_guest_indicator_for_sender,
             is_hidden,
             mention_classname,

web/src/people.ts

@@ -778,6 +778,14 @@ export function sender_is_guest(message: Message): boolean {
     return false;
 }
 
+export function sender_is_deactivated(message: Message): boolean {
+    const sender_id = message.sender_id;
+    if (sender_id) {
+        return !is_active_user_for_popover(message.sender_id);
+    }
+    return false;
+}
+
 export function is_valid_bot_user(user_id: number): boolean {
     const user = maybe_get_user_by_id(user_id, true);
     return user?.is_bot ?? false;

web/src/pm_list_data.ts

@@ -47,6 +47,7 @@ type DisplayObject = {
     is_group: boolean;
     is_bot: boolean;
     has_unread_mention: boolean;
+    is_deactivated: boolean;
 };
 
 export function get_conversations(search_string = ""): DisplayObject[] {
@@ -86,6 +87,9 @@ export function get_conversations(search_string = ""): DisplayObject[] {
             unread.num_unread_mentions_for_user_ids_strings(user_ids_string) > 0;
         const is_group = user_ids_string.includes(",");
         const is_active = user_ids_string === active_user_ids_string;
+        const is_deactivated = !people.is_active_user_for_popover(
+            Number.parseInt(user_ids_string, 10) || 0,
+        );
 
         let user_circle_class;
         let status_emoji_info;
@@ -116,6 +120,7 @@ export function get_conversations(search_string = ""): DisplayObject[] {
             is_group,
             is_bot,
             has_unread_mention,
+            is_deactivated,
         };
         display_objects.push(display_object);
     }

web/styles/app_variables.css

@@ -1555,6 +1555,7 @@
     --color-user-circle-active: hsl(106deg 74% 44%);
     --color-user-circle-idle: hsl(29deg 84% 51%);
     --color-user-circle-offline: hsl(0deg 0% 50%);
+    --color-user-circle-deactivated: hsl(0deg 0% 50%);
     --color-copy-button: light-dark(
         /* hsl(229deg 9% 36%) corresponds to --grey-600.
            We use the hsl() equivalent directly since postcss-color-mix-function

web/styles/input_pill.css

@@ -16,6 +16,7 @@
         align-items: center;
         max-width: 100%;
         min-width: 0;
+        position: relative;
 
         height: var(--height-input-pill);
         /* Make sure the `height` property
@@ -109,6 +110,7 @@
 
         &.deactivated-pill {
             background-color: var(--color-background-deactivated-user-pill);
+            opacity: 0.7;
 
             &:focus {
                 border-color: var(--color-focus-outline-deactivated-user-pill);
@@ -124,9 +126,24 @@
                     --color-background-exit-hover-deactivated-user-pill
                 );
             }
+
+            > img {
+                opacity: 0.5;
+            }
         }
     }
 
+    .slashed-circle-icon {
+        position: absolute;
+        background-color: var(--color-background-deactivated-user-pill);
+        padding: 0.2em;
+        font-size: 0.7em;
+        border-radius: 0.625em;
+        bottom: -0.0625em;
+        left: 1.1em;
+        opacity: 1;
+    }
+
     &.not-editable {
         cursor: not-allowed;
         border: none;

web/styles/popovers.css

@@ -1010,6 +1010,12 @@ ul.popover-group-menu-member-list {
         background-color: var(--color-background-popover-menu);
         border: solid 1px var(--color-background-popover-menu);
         border-radius: 50%;
+
+        &.deactivated-user-icon {
+            font-size: 0.8em;
+            background-color: var(--color-background-popover-menu);
+            padding: 1px;
+        }
     }
 
     .popover-menu-user-info {

web/styles/zulip.css

@@ -2049,3 +2049,23 @@ body:not(.hide-left-sidebar) {
 .empty-topic-placeholder-display::placeholder {
     font-style: italic;
 }
+
+.popover-menu-user-avatar-container.deactivated,
+.inline_profile_picture.deactivated {
+    position: relative;
+
+    > img {
+        opacity: 0.5;
+    }
+
+    .deactivated-user-icon {
+        background-color: var(--color-background);
+        color: var(--color-user-circle-deactivated);
+        padding: 2px;
+        font-size: 0.8em;
+        position: absolute;
+        border-radius: 10px;
+        bottom: -2px;
+        right: -2px;
+    }
+}

web/templates/input_pill.hbs

@@ -1,6 +1,9 @@
 <div class='pill {{#if deactivated}} deactivated-pill {{/if}}'{{#if user_id}}data-user-id="{{user_id}}"{{/if}}{{#if group_id}}data-user-group-id="{{group_id}}"{{/if}}{{#if stream_id}}data-stream-id="{{stream_id}}"{{/if}} tabindex=0>
     {{#if has_image}}
     <img class="pill-image" src="{{img_src}}" />
+    {{#if deactivated}}
+        <span class="fa fa-ban slashed-circle-icon"></span>
+    {{/if}}
     {{/if}}
     <span class="pill-label">
         <span class="pill-value">
@@ -20,7 +23,6 @@
             {{/if}}
         </span>
         {{~#if should_add_guest_user_indicator}}&nbsp;<i>({{t 'guest'}})</i>{{~/if~}}
-        {{~#if deactivated}}&nbsp;({{t 'deactivated'}}){{~/if~}}
         {{~#if has_status~}}
             {{~> status_emoji status_emoji_info~}}
         {{~/if~}}

web/templates/message_avatar.hbs

@@ -1,6 +1,9 @@
 <div class="u-{{msg/sender_id}} message-avatar sender_info_hover view_user_card_tooltip no-select" aria-hidden="true" data-is-bot="{{sender_is_bot}}">
-    <div class="inline_profile_picture {{#if sender_is_guest}} guest-avatar{{/if}}">
+    <div class="inline_profile_picture {{#if sender_is_guest}} guest-avatar{{/if}} {{#if sender_is_deactivated}} deactivated {{/if}}">
         <img loading="lazy" src="{{small_avatar_url}}" alt="" class="no-drag"/>
+        {{#if sender_is_deactivated}}
+            <i class="fa fa-ban deactivated-user-icon"></i>
+        {{/if}}
     </div>
 </div>
 {{~! remove whitespace ~}}

web/templates/pm_list_item.hbs

@@ -4,8 +4,12 @@
         {{#if is_group}}
         <span class="conversation-partners-icon zulip-icon zulip-icon-dm-groups-3"></span>
         {{else}}
+        {{#if is_deactivated}}
+        <span class="conversation-partners-icon fa fa-ban {{user_circle_class}} user_circle"></span>
+        {{else}}
         <span class="conversation-partners-icon zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
         {{/if}}
+        {{/if}}
 
         <a href="{{url}}" class="conversation-partners">
             <span class="conversation-partners-list">{{recipients}}</span>

web/templates/popovers/user_card/user_card_popover.hbs

@@ -1,10 +1,13 @@
 <div class="popover-menu user-card-popover-actions no-auto-hide-right-sidebar-overlay" id="user_card_popover" data-simplebar data-simplebar-tab-index="-1">
     <div class="popover-menu-user-header">
-        <div class="popover-menu-user-avatar-container">
+        <div class="popover-menu-user-avatar-container {{#if (not is_active)}}deactivated{{/if}}">
             <img class="popover-menu-user-avatar{{#if user_is_guest}} guest-avatar{{/if}}" src="{{user_avatar}}" />
             {{#if (and is_active (not is_bot))}}
                 <div class="popover-menu-user-presence user-circle zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} hidden-for-spectators" data-presence-indicator-user-id="{{user_id}}"></div>
             {{/if}}
+            {{#if (not is_active)}}
+                <span class="popover-menu-user-presence conversation-partners-icon fa fa-ban fa-lg deactivated-user-icon user_circle"></span>
+            {{/if}}
         </div>
         <div class="popover-menu-user-info">
             <div class="popover-menu-user-full-name text-select" data-tippy-content="{{user_full_name}}">

web/templates/search_user_pill.hbs

@@ -6,10 +6,12 @@
     {{#each users}}
         <div class="pill{{#if deactivated}} deactivated-pill{{/if}}" data-user-id="{{this.user_id}}">
             <img class="pill-image" src="{{this.img_src}}" />
+            {{#if deactivated}}
+            <span class="fa fa-ban slashed-circle-icon"></span>
+            {{/if}}
             <span class="pill-label">
                 <span class="pill-value">{{ this.full_name }}</span>
                 {{~#if this.should_add_guest_user_indicator}}&nbsp;<i>({{t 'guest'}})</i>{{~/if~}}
-                {{~#if deactivated}}&nbsp;({{t 'deactivated'}}){{~/if~}}
                 {{~#if this.status_emoji_info~}}
                     {{~> status_emoji this.status_emoji_info~}}
                 {{~/if~}}

web/tests/message_list_view.test.cjs

@@ -23,6 +23,7 @@ mock_esm("../src/timerender", {
 mock_esm("../src/people", {
     sender_is_bot: () => false,
     sender_is_guest: () => false,
+    sender_is_deactivated: () => false,
     should_add_guest_user_indicator: () => false,
     small_avatar_url: () => "fake/small/avatar/url",
     maybe_get_user_by_id: noop,
@@ -374,6 +375,7 @@ test("muted_message_vars", () => {
 
         // sanity check on mocked values
         assert.equal(result[1].sender_is_bot, false);
+        assert.equal(result[1].sender_is_deactivated, false);
         assert.equal(result[1].sender_is_guest, false);
         assert.equal(result[1].small_avatar_url, "fake/small/avatar/url");
 

web/tests/people.test.cjs

@@ -1108,6 +1108,18 @@ test_people("message_methods", () => {
 
     message = {sender_id: undefined};
     assert.equal(people.sender_is_guest(message), false);
+
+    // Test sender_is_deactivated
+    people.deactivate(maria);
+
+    message = {sender_id: maria.user_id};
+    assert.equal(people.sender_is_deactivated(message), true);
+
+    message = {sender_id: charles.user_id};
+    assert.equal(people.sender_is_deactivated(message), false);
+
+    message = {sender_id: undefined};
+    assert.equal(people.sender_is_deactivated(message), false);
 });
 
 test_people("extract_people_from_message", () => {

web/tests/pm_list_data.test.cjs

@@ -120,6 +120,7 @@ test("get_conversations", ({override}) => {
         {
             is_bot: false,
             is_active: false,
+            is_deactivated: false,
             is_group: false,
             is_zero: false,
             recipients: "Me Myself",
@@ -138,6 +139,7 @@ test("get_conversations", ({override}) => {
             unread: 1,
             is_zero: false,
             is_active: false,
+            is_deactivated: false,
             url: "#narrow/dm/101,102-group",
             user_circle_class: undefined,
             is_group: true,
@@ -168,6 +170,7 @@ test("get_conversations", ({override}) => {
         unread: 0,
         is_zero: true,
         is_active: true,
+        is_deactivated: false,
         url: "#narrow/dm/106-Iago",
         status_emoji_info: {emoji_code: "20"},
         user_circle_class: "user-circle-offline",
@@ -208,6 +211,7 @@ test("get_conversations bot", ({override}) => {
             unread: 1,
             is_zero: false,
             is_active: false,
+            is_deactivated: false,
             url: "#narrow/dm/314-Outgoing-webhook",
             status_emoji_info: undefined,
             user_circle_class: "user-circle-offline",
@@ -221,6 +225,7 @@ test("get_conversations bot", ({override}) => {
             unread: 1,
             is_zero: false,
             is_active: false,
+            is_deactivated: false,
             url: "#narrow/dm/101,102-group",
             user_circle_class: undefined,
             status_emoji_info: undefined,