recent_topics: Disable filter buttons for spectator.

Instead of setting `disable` attribute to the elements, we make
them look like disabled and remove interactions with them. This
helps us keep the hotkey handling logic for navigation easier
to manage.

Fixes #21279

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,
         });
     });
 

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();

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");

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 {

static/templates/recent_topics_filters.hbs

@@ -1,5 +1,5 @@
 <button data-filter="all" type="button" class="btn btn-default btn-recent-filters">{{t 'All' }}</button>
-<button data-filter="include_muted" type="button" class="btn btn-default btn-recent-filters" role="checkbox" aria-checked="false">
+<button data-filter="include_muted" type="button" class="btn btn-default btn-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false">
     {{#if filter_muted }}
     <i class="fa fa-check-square-o"></i>
     {{else}}
@@ -7,7 +7,7 @@
     {{/if}}
     {{t 'Include muted' }}
 </button>
-<button data-filter="unread" type="button" class="btn btn-default btn-recent-filters" role="checkbox" aria-checked="false">
+<button data-filter="unread" type="button" class="btn btn-default btn-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false">
     {{#if filter_unread}}
     <i class="fa fa-check-square-o"></i>
     {{else}}
@@ -15,7 +15,7 @@
     {{/if}}
     {{t 'Unread' }}
 </button>
-<button data-filter="participated" type="button" class="btn btn-default btn-recent-filters" role="checkbox" aria-checked="false">
+<button data-filter="participated" type="button" class="btn btn-default btn-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false">
     {{#if filter_participated}}
     <i class="fa fa-check-square-o"></i>
     {{else}}