diff --git a/frontend_tests/node_tests/recent_topics.js b/frontend_tests/node_tests/recent_topics.js
index 28db861237..f12462cefb 100644
--- a/frontend_tests/node_tests/recent_topics.js
+++ b/frontend_tests/node_tests/recent_topics.js
@@ -5,6 +5,7 @@ const {strict: assert} = require("assert");
const {mock_esm, zrequire} = require("../zjsunit/namespace");
const {run_test} = require("../zjsunit/test");
const $ = require("../zjsunit/zjquery");
+const {page_params} = require("../zjsunit/zpage_params");
const noop = () => {};
@@ -330,11 +331,13 @@ test("test_recent_topics_show", ({mock_template, override}) => {
// Note: unread count and urls are fake,
// since they are generated in external libraries
// and are not to be tested here.
+ page_params.is_spectator = false;
const expected = {
filter_participated: false,
filter_unread: false,
filter_muted: false,
search_val: "",
+ is_spectator: false,
};
mock_template("recent_topics_table.hbs", false, (data) => {
@@ -358,11 +361,13 @@ test("test_recent_topics_show", ({mock_template, override}) => {
test("test_filter_all", ({override_rewire, mock_template}) => {
// Just tests inplace rerender of a message
// in All topics filter.
+ page_params.is_spectator = true;
const expected = {
filter_participated: false,
filter_unread: false,
filter_muted: false,
search_val: "",
+ is_spectator: true,
};
let row_data;
let i;
@@ -408,6 +413,7 @@ test("test_filter_all", ({override_rewire, mock_template}) => {
test("test_filter_unread", ({override_rewire, mock_template}) => {
let expected_filter_unread = false;
+ page_params.is_spectator = false;
mock_template("recent_topics_table.hbs", false, (data) => {
assert.deepEqual(data, {
@@ -415,6 +421,7 @@ test("test_filter_unread", ({override_rewire, mock_template}) => {
filter_unread: expected_filter_unread,
filter_muted: false,
search_val: "",
+ is_spectator: false,
});
});
@@ -517,12 +524,14 @@ test("test_filter_unread", ({override_rewire, mock_template}) => {
test("test_filter_participated", ({override_rewire, mock_template}) => {
let expected_filter_participated;
+ page_params.is_spectator = false;
mock_template("recent_topics_table.hbs", false, (data) => {
assert.deepEqual(data, {
filter_participated: expected_filter_participated,
filter_unread: false,
filter_muted: false,
search_val: "",
+ is_spectator: false,
});
});
diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index b677cac009..cea5d0adc3 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -432,6 +432,11 @@ export function initialize() {
$("body").on("click", ".btn-recent-filters", (e) => {
e.stopPropagation();
+ if (page_params.is_spectator) {
+ // Filter buttons are disabled for spectator.
+ return;
+ }
+
recent_topics_ui.change_focused_element($(e.target), "click");
recent_topics_ui.set_filter(e.currentTarget.dataset.filter);
recent_topics_ui.update_filters_view();
diff --git a/static/js/recent_topics_ui.js b/static/js/recent_topics_ui.js
index 8e67aa0b83..938944d1c1 100644
--- a/static/js/recent_topics_ui.js
+++ b/static/js/recent_topics_ui.js
@@ -18,6 +18,7 @@ import * as muted_topics from "./muted_topics";
import * as narrow from "./narrow";
import * as narrow_state from "./narrow_state";
import * as navigate from "./navigate";
+import {page_params} from "./page_params";
import * as people from "./people";
import * as recent_senders from "./recent_senders";
import {get, process_message, topics} from "./recent_topics_data";
@@ -479,6 +480,7 @@ export function update_filters_view() {
filter_participated: filters.has("participated"),
filter_unread: filters.has("unread"),
filter_muted: filters.has("include_muted"),
+ is_spectator: page_params.is_spectator,
});
$("#recent_filters_group").html(rendered_filters);
show_selected_filters();
@@ -590,6 +592,7 @@ export function complete_rerender() {
filter_unread: filters.has("unread"),
filter_muted: filters.has("include_muted"),
search_val: $("#recent_topics_search").val() || "",
+ is_spectator: page_params.is_spectator,
});
$("#recent_topics_table").html(rendered_body);
const $container = $("#recent_topics_table table tbody");
diff --git a/static/styles/recent_topics.css b/static/styles/recent_topics.css
index e277c7f616..6bb7310739 100644
--- a/static/styles/recent_topics.css
+++ b/static/styles/recent_topics.css
@@ -120,6 +120,16 @@
background-color: hsl(0, 0%, 80%);
outline: 0;
}
+
+ &.fake_disabled_button {
+ cursor: not-allowed;
+ opacity: 0.5;
+
+ &:hover {
+ background-color: hsl(0, 0%, 100%);
+ border-color: hsl(0, 0%, 80%);
+ }
+ }
}
.btn-recent-selected {
diff --git a/static/templates/recent_topics_filters.hbs b/static/templates/recent_topics_filters.hbs
index c2adf74e39..c5df770c34 100644
--- a/static/templates/recent_topics_filters.hbs
+++ b/static/templates/recent_topics_filters.hbs
@@ -1,5 +1,5 @@
-