read_receipts: Disable showing read receipts for Notification Bot msgs.

The implementation is simple, we just check if the
the message sender is a notification bot to decide if we
should show the read receipts list.

We also update the modal content styling to match the padding at the
top of the modal.

Fixes #22905
This commit is contained in:
Riken Shah
2022-09-09 18:22:28 +00:00
committed by Tim Abbott
parent ce9ceb7f9f
commit ff899e5c31
3 changed files with 67 additions and 46 deletions

View File

@@ -7,6 +7,7 @@ import render_read_receipts_modal from "../templates/read_receipts_modal.hbs";
import * as channel from "./channel"; import * as channel from "./channel";
import {$t, $t_html} from "./i18n"; import {$t, $t_html} from "./i18n";
import * as loading from "./loading"; import * as loading from "./loading";
import * as message_store from "./message_store";
import * as overlays from "./overlays"; import * as overlays from "./overlays";
import * as people from "./people"; import * as people from "./people";
import * as popovers from "./popovers"; import * as popovers from "./popovers";
@@ -17,53 +18,64 @@ export function show_user_list(message_id) {
overlays.open_modal("read_receipts_modal", { overlays.open_modal("read_receipts_modal", {
autoremove: true, autoremove: true,
on_show: () => { on_show: () => {
loading.make_indicator($("#read_receipts_modal .loading_indicator")); const message = message_store.get(message_id);
channel.get({ if (message.sender_email === "notification-bot@zulip.com") {
url: `/json/messages/${message_id}/read_receipts`, $("#read_receipts_modal .read_receipts_info").text(
success(data) { $t({
const users = data.user_ids.map((id) => { defaultMessage:
const user = people.get_by_user_id(id); "Read receipts are not available for Notification Bot messages.",
return { }),
user_id: user.user_id, );
full_name: user.full_name, $("#read_receipts_modal .modal__content").addClass("compact");
avatar_url: people.small_avatar_url_for_person(user), } else {
}; loading.make_indicator($("#read_receipts_modal .loading_indicator"));
}); channel.get({
users.sort(people.compare_by_name); url: `/json/messages/${message_id}/read_receipts`,
success(data) {
const users = data.user_ids.map((id) => {
const user = people.get_by_user_id(id);
return {
user_id: user.user_id,
full_name: user.full_name,
avatar_url: people.small_avatar_url_for_person(user),
};
});
users.sort(people.compare_by_name);
loading.destroy_indicator($("#read_receipts_modal .loading_indicator")); loading.destroy_indicator($("#read_receipts_modal .loading_indicator"));
if (users.length === 0) { if (users.length === 0) {
$("#read_receipts_modal .read_receipts_info").text( $("#read_receipts_modal .read_receipts_info").text(
$t({defaultMessage: "No one has read this message yet."}), $t({defaultMessage: "No one has read this message yet."}),
); );
} else { } else {
$("#read_receipts_modal .read_receipts_info").html( $("#read_receipts_modal .read_receipts_info").html(
$t_html( $t_html(
{ {
defaultMessage: defaultMessage:
"{num_of_people, plural, one {This message has been <z-link>read</z-link> by {num_of_people} person:} other {This message has been <z-link>read</z-link> by {num_of_people} people:}}", "{num_of_people, plural, one {This message has been <z-link>read</z-link> by {num_of_people} person:} other {This message has been <z-link>read</z-link> by {num_of_people} people:}}",
}, },
{ {
num_of_people: users.length, num_of_people: users.length,
"z-link": (content_html) => "z-link": (content_html) =>
`<a href="/help/read-receipts">${content_html}</a>`, `<a href="/help/read-receipts">${content_html}</a>`,
}, },
), ),
); );
$("#read_receipts_modal .modal__container").addClass( $("#read_receipts_modal .modal__container").addClass(
"showing_read_receipts_list", "showing_read_receipts_list",
); );
$("#read_receipts_modal .modal__content").append( $("#read_receipts_modal .modal__content").append(
render_read_receipts({users}), render_read_receipts({users}),
); );
new SimpleBar($("#read_receipts_modal .modal__content")[0]); new SimpleBar($("#read_receipts_modal .modal__content")[0]);
} }
}, },
error(xhr) { error(xhr) {
ui_report.error("", xhr, $("#read_receipts_error")); ui_report.error("", xhr, $("#read_receipts_error"));
loading.destroy_indicator($("#read_receipts_modal .loading_indicator")); loading.destroy_indicator($("#read_receipts_modal .loading_indicator"));
}, },
}); });
}
}, },
on_hide: () => { on_hide: () => {
// Ensure any user info popovers are closed // Ensure any user info popovers are closed

View File

@@ -668,6 +668,13 @@ strong {
/* Setting a maximum height is just for aesthetics; the modal looks /* Setting a maximum height is just for aesthetics; the modal looks
weird if its aspect ratio gets too stretched. */ weird if its aspect ratio gets too stretched. */
max-height: 480px; max-height: 480px;
/* For the notification bot error, we want to keep the modal clean and small.
The 16px padding is intended to match the padding at the top of the modal. */
&.compact {
min-height: unset;
padding-bottom: 16px;
}
} }
} }

View File

@@ -109,6 +109,8 @@ IGNORED_PHRASES = [
# Use in compose box. # Use in compose box.
r"to send", r"to send",
r"to add a new line", r"to add a new line",
# Used in showing Notification Bot read receipts message
"Notification Bot",
] ]
# Sort regexes in descending order of their lengths. As a result, the # Sort regexes in descending order of their lengths. As a result, the