stream_settings: Fix stream row switching behavior.

Add a rule to the switch_rows(event) function to avoid
switching stream row when pressing up/down key by checking
the current URL hash and the add_subscribers_pill focus state.
Add a utility function to hash_parser to help implement new
switch_rows behavior mentioned above.

Fixes zulip#29690

web/src/hash_parser.ts

@@ -91,6 +91,20 @@ export function is_create_new_stream_narrow(): boolean {
     return window.location.hash === "#streams/new";
 }
 
+// This checks whether the user is in the stream settings menu
+// and is opening the 'Subscribers' tab on the right panel.
+export function is_on_stream_subscribers(): boolean {
+    const hash_components = window.location.hash.slice(1).split(/\//);
+
+    if (hash_components[0] !== "streams") {
+        return false;
+    }
+    if (!hash_components[3]) {
+        return false;
+    }
+    return hash_components[3] === "subscribers";
+}
+
 export const allowed_web_public_narrows = [
     "channels",
     "channel",

web/src/stream_settings_ui.js

@@ -796,10 +796,15 @@ export function launch(section, left_side_tab, right_side_tab) {
 
 export function switch_rows(event) {
     const active_data = stream_settings_components.get_active_data();
+    const $add_subscriber_pill = $(".add_subscribers_container > div > .input");
     let $switch_row;
+
     if (hash_parser.is_create_new_stream_narrow()) {
         // Prevent switching stream rows when creating a new stream
         return false;
+    } else if (hash_parser.is_on_stream_subscribers() && $add_subscriber_pill.is(":focus")) {
+        // Prevent switching stream rows when adding a subscriber
+        return false;
     } else if (!active_data.id || active_data.$row.hasClass("notdisplayed")) {
         $switch_row = $("div.stream-row:not(.notdisplayed)").first();
         if ($("#search_stream_name").is(":focus")) {

web/tests/hash_util.test.js

@@ -161,6 +161,20 @@ run_test("test_is_create_new_stream_narrow", () => {
     assert.equal(hash_parser.is_create_new_stream_narrow(), false);
 });
 
+run_test("test_is_on_stream_subscribers", () => {
+    window.location.hash = "#streams/1/Design/subscribers";
+    assert.equal(hash_parser.is_on_stream_subscribers(), true);
+
+    window.location.hash = "#streams/99/.EC.A1.B0.EB.A6.AC.EB.B2.95.20.F0.9F.98.8E/subscribers";
+    assert.equal(hash_parser.is_on_stream_subscribers(), true);
+
+    window.location.hash = "#streams/random/subscribers";
+    assert.equal(hash_parser.is_on_stream_subscribers(), false);
+
+    window.location.hash = "#some/random/place/subscribers";
+    assert.equal(hash_parser.is_on_stream_subscribers(), false);
+});
+
 run_test("test_parse_narrow", () => {
     assert.deepEqual(hash_util.parse_narrow(["narrow", "stream", "99-frontend"]), [
         {negated: false, operator: "stream", operand: "frontend"},