deactivated_user: Show deactivated status for deactivated users.

Fixes: #26833.
zulip · Jan 5, 2025 · 22d5127 · 22d5127
1 parent 0188e5c
commit 22d5127
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 5 deletions.
diff --git a/web/src/buddy_data.ts b/web/src/buddy_data.ts
@@ -62,6 +62,8 @@ export function get_user_circle_class(user_id: number): string {
             return "user-circle-active";
         case "idle":
             return "user-circle-idle";
+        case "deactivated":
+            return "user-circle-deactivated";
         default:
             return "user-circle-offline";
     }
@@ -80,6 +82,8 @@ export function level(user_id: number): number {
             return 1;
         case "idle":
             return 2;
+        case "deactivated":
+            return 4;
         default:
             return 3;
     }

diff --git a/web/src/message_list_view.ts b/web/src/message_list_view.ts
@@ -63,6 +63,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;
@@ -654,6 +655,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;
@@ -726,6 +728,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,
         );
@@ -743,6 +746,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,

diff --git a/web/src/people.ts b/web/src/people.ts
@@ -766,6 +766,11 @@ export function sender_is_guest(message: Message): boolean {
     return false;
 }
 
+export function sender_is_deactivated(message: Message): boolean {
+    const sender_id = message.sender_id;
+    return sender_id ? get_non_active_human_ids().includes(sender_id) : 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;

diff --git a/web/src/presence.ts b/web/src/presence.ts
@@ -10,7 +10,7 @@ export type RawPresence = z.infer<typeof presence_schema> & {
 };
 
 export type PresenceStatus = {
-    status: "active" | "idle" | "offline";
+    status: "active" | "idle" | "offline" | "deactivated";
     last_active?: number | undefined;
 };
 
@@ -60,8 +60,15 @@ export function get_status(user_id: number): PresenceStatus["status"] {
         return "offline";
     }
     if (presence_info.has(user_id)) {
+        if (presence_info.get(user_id)!.status === undefined) {
+            return "offline";
+        }
         return presence_info.get(user_id)!.status;
     }
+    if (!people.is_person_active(user_id)) {
+        return "deactivated";
+    }
+
     return "offline";
 }
 

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
@@ -668,6 +668,7 @@
         hsl(240deg 10% 50%) 70%,
         hsl(0deg 0% 94%)
     );
+    --color-background-deactivated-user-circle: hsl(0deg 0% 100%);
     --color-background-unread-counter-dot: hsl(240deg 30% 40%);
     --color-border-unread-counter: var(--color-background-unread-counter);
     --color-border-unread-counter-popover-menu: inherit;
@@ -896,6 +897,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%);
     /* hsl(229deg 9% 36%) corresponds to --grey-600.
        We use the hsl() equivalent directly since postcss-color-mix-function
        cannot dynamically resolve var() arguments. */
@@ -1565,6 +1567,7 @@
         hsl(240deg 10% 50%) 35%,
         hsl(0deg 0% 11%)
     );
+    --color-background-deactivated-user-circle: hsl(0deg 0% 0%);
     --color-background-unread-counter-dot: hsl(240deg 35% 68%);
     --color-background-unread-counter-prominent: hsl(240deg 18.37% 34.42%);
     --color-background-unread-counter-normal: hsl(240deg 10% 50% / 35%);

diff --git a/web/styles/input_pill.css b/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
@@ -41,6 +42,7 @@
             height: var(--length-input-pill-image);
             width: var(--length-input-pill-image);
             border-radius: 4px 0 0 4px;
+            display: block;
         }
 
         .zulip-icon {
@@ -105,6 +107,8 @@
 
         &.deactivated-pill {
             background-color: var(--color-background-deactivated-user-pill);
+            opacity: 0.7;
+            overflow: hidden;
 
             &:focus {
                 border-color: var(--color-focus-outline-deactivated-user-pill);
@@ -120,9 +124,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: 10px;
+        bottom: -1px;
+        left: 1.1em;
+        opacity: 1;
+    }
+
     &.not-editable {
         cursor: not-allowed;
         border: none;

diff --git a/web/styles/popovers.css b/web/styles/popovers.css
@@ -1077,6 +1077,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 {

diff --git a/web/styles/user_circles.css b/web/styles/user_circles.css
@@ -9,3 +9,7 @@
 .user-circle-offline {
     color: var(--color-user-circle-offline);
 }
+
+.user-circle-deactivated {
+    color: var(--color-user-circle-deactivated);
+}
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
@@ -2111,3 +2111,23 @@ body:not(.hide-left-sidebar) {
         border: 1px solid var(--color-border-personal-menu-avatar);
     }
 }
+
+.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;
+    }
+}
diff --git a/web/templates/input_pill.hbs b/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">
@@ -16,7 +19,7 @@
             {{ display_value }}
         </span>
         {{~#if should_add_guest_user_indicator}}&nbsp;<i>({{t 'guest'}})</i>{{~/if~}}
-        {{~#if deactivated}}&nbsp;({{t 'deactivated'}}){{~/if~}}
+        {{~#if deactivated}}&nbsp;{{~/if~}}
         {{~#if has_status~}}
             {{~> status_emoji status_emoji_info~}}
         {{~/if~}}

diff --git a/web/templates/message_avatar.hbs b/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}}
+            <span class="fa fa-ban deactivated-user-icon"></span>
+        {{/if}}
     </div>
 </div>
 {{~! remove whitespace ~}}
diff --git a/web/templates/pm_list_item.hbs b/web/templates/pm_list_item.hbs
@@ -6,8 +6,12 @@
         {{else if is_bot}}
         <span class="conversation-partners-icon zulip-icon zulip-icon-bot" aria-hidden="true"></span>
         {{else}}
+        {{#if (eq user_circle_class "user-circle-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>

diff --git a/web/templates/popovers/user_card/user_card_popover.hbs b/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 (eq user_circle_class "user-circle-deactivated")}}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 (eq user_circle_class "user-circle-deactivated")}}
+                <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" data-tippy-content="{{user_full_name}}">

diff --git a/web/templates/search_user_pill.hbs b/web/templates/search_user_pill.hbs
@@ -6,10 +6,13 @@
     {{#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 deactivated}}&nbsp;{{~/if~}}
                 {{~#if this.status_emoji_info~}}
                     {{~> status_emoji this.status_emoji_info~}}
                 {{~/if~}}

diff --git a/web/tests/buddy_data.test.cjs b/web/tests/buddy_data.test.cjs
@@ -146,6 +146,10 @@ test("user_circle, level", ({override}) => {
     assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user-circle-idle");
     assert.equal(buddy_data.level(selma.user_id), 2);
 
+    set_presence(selma.user_id, "deactivated");
+    assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user-circle-deactivated");
+    assert.equal(buddy_data.level(selma.user_id), 4);
+
     set_presence(selma.user_id, "offline");
     assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user-circle-offline");
     assert.equal(buddy_data.level(selma.user_id), 3);
@@ -166,6 +170,10 @@ test("user_circle, level", ({override}) => {
     assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user-circle-idle");
     assert.equal(buddy_data.level(fred.user_id), 2);
 
+    set_presence(fred.user_id, "deactivated");
+    assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user-circle-deactivated");
+    assert.equal(buddy_data.level(fred.user_id), 4);
+
     set_presence(fred.user_id, undefined);
     assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user-circle-offline");
     assert.equal(buddy_data.level(fred.user_id), 3);
@@ -559,6 +567,7 @@ test("compare_function", () => {
 
 test("user_last_seen_time_status", ({override}) => {
     page_params.presence_history_limit_days_for_web_app = 365;
+    people.add_active_user(old_user);
     set_presence(selma.user_id, "active");
     set_presence(me.user_id, "active");
 

diff --git a/web/tests/message_list_view.test.cjs b/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");
 

diff --git a/web/tests/people.test.cjs b/web/tests/people.test.cjs
@@ -1054,6 +1054,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", () => {