stream settings: Include section for right panel in the URL.

Fixes #21017.

web/src/hash_parser.ts

@@ -15,6 +15,18 @@ export function get_hash_section(hash?: string): string {
     return parts[1] || "";
 }
 
+export function get_current_nth_hash_section(n: number): string {
+    const hash = window.location.hash;
+    // given "#settings/profile" and n=2, returns "profile"
+    // given '#streams/5/social" and n=3, returns "social"
+    const parts = hash.replace(/\/$/, "").split(/\//);
+    if (parts.length < n) {
+        return "";
+    }
+
+    return parts[n - 1] || "";
+}
+
 export function get_current_hash_category(): string {
     return get_hash_category(window.location.hash);
 }

web/src/hash_util.ts

@@ -140,9 +140,10 @@ export function by_conversation_and_time_url(message: Message): string {
     return absolute_url + people.pm_perma_link(message) + suffix;
 }
 
-export function stream_edit_url(sub: StreamSubscription): string {
+export function stream_edit_url(sub: StreamSubscription, right_side_tab: string): string {
-    const hash = `#streams/${sub.stream_id}/${internal_url.encodeHashComponent(sub.name)}`;
+    return `#streams/${sub.stream_id}/${internal_url.encodeHashComponent(
-    return hash;
+        sub.name,
+    )}/${right_side_tab}`;
 }
 
 export function group_edit_url(group: UserGroup): string {

web/src/hashchange.js

@@ -247,7 +247,9 @@ function do_hashchange_overlay(old_hash) {
     // the new overlay.
     if (coming_from_overlay && base === old_base) {
         if (base === "streams") {
-            stream_settings_ui.change_state(section);
+            // e.g. #streams/29/social/subscribers
+            const right_side_tab = hash_parser.get_current_nth_hash_section(4);
+            stream_settings_ui.change_state(section, right_side_tab);
             return;
         }
 
@@ -312,7 +314,9 @@ function do_hashchange_overlay(old_hash) {
     }
 
     if (base === "streams") {
-        stream_settings_ui.launch(section);
+        // e.g. #streams/29/social/subscribers
+        const right_side_tab = hash_parser.get_current_nth_hash_section(4);
+        stream_settings_ui.launch(section, right_side_tab);
         return;
     }
 

web/src/stream_edit.js

@@ -15,7 +15,6 @@ import * as confirm_dialog from "./confirm_dialog";
 import {show_copied_confirmation} from "./copied_tooltip";
 import * as dialog_widget from "./dialog_widget";
 import * as dropdown_widget from "./dropdown_widget";
-import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
 import * as keydown_util from "./keydown_util";
 import * as narrow_state from "./narrow_state";
@@ -39,11 +38,6 @@ import * as user_groups from "./user_groups";
 import {user_settings} from "./user_settings";
 import * as util from "./util";
 
-function setup_subscriptions_stream_hash(sub) {
-    const hash = hash_util.stream_edit_url(sub);
-    browser_history.update(hash);
-}
-
 export function setup_subscriptions_tab_hash(tab_key_value) {
     if ($("#subscription_overlay .right").hasClass("show")) {
         return;
@@ -90,13 +84,13 @@ function get_sub_for_target(target) {
     return sub;
 }
 
-export function open_edit_panel_for_row(stream_row) {
+export function open_edit_panel_for_row(stream_row, right_side_tab) {
     const sub = get_sub_for_target(stream_row);
 
     $(".stream-row.active").removeClass("active");
     stream_settings_components.show_subs_pane.settings(sub);
     $(stream_row).addClass("active");
-    setup_subscriptions_stream_hash(sub);
+    stream_edit_toggler.setup_subscriptions_stream_hash(sub, right_side_tab);
     setup_stream_settings(stream_row);
 }
 
@@ -570,7 +564,7 @@ export function initialize() {
         stream_settings_components.sub_or_unsub(sub, $stream_row);
 
         if (!sub.subscribed) {
-            open_edit_panel_for_row($stream_row);
+            open_edit_panel_for_row($stream_row, stream_edit_toggler.select_tab);
         }
         stream_ui_updates.update_regular_sub_settings(sub);
 
@@ -638,7 +632,7 @@ export function initialize() {
 
     $("#streams_overlay_container").on("click", ".stream-row", function (e) {
         if ($(e.target).closest(".check, .subscription_settings").length === 0) {
-            open_edit_panel_for_row(this);
+            open_edit_panel_for_row(this, stream_edit_toggler.select_tab);
         }
     });
 

web/src/stream_edit_toggler.ts

@@ -1,11 +1,23 @@
 import $ from "jquery";
 
+import * as browser_history from "./browser_history";
 import * as components from "./components";
+import * as hash_util from "./hash_util";
 import {$t} from "./i18n";
+import * as sub_store from "./sub_store";
+import type {StreamSubscription} from "./sub_store";
 
 export let toggler: components.Toggle;
 export let select_tab = "personal";
 
+export function setup_subscriptions_stream_hash(
+    sub: StreamSubscription,
+    right_side_tab: string,
+): void {
+    const hash = hash_util.stream_edit_url(sub, right_side_tab);
+    browser_history.update(hash);
+}
+
 export function setup_toggler(): void {
     toggler = components.toggle({
         child_wants_focus: true,
@@ -18,6 +30,12 @@ export function setup_toggler(): void {
             $(".stream_section").hide();
             $(`[data-stream-section="${CSS.escape(key)}"]`).show();
             select_tab = key;
+            const $stream_header = $("#streams_overlay_container .stream_settings_header");
+            const stream_id = Number.parseInt($stream_header.attr("data-stream-id") ?? "", 10);
+            const sub = sub_store.get(stream_id);
+            if (sub) {
+                setup_subscriptions_stream_hash(sub, select_tab);
+            }
         },
     });
 }

web/src/stream_popover.js

@@ -120,7 +120,7 @@ function build_stream_popover(opts) {
                 const sub = stream_popover_sub(e);
                 hide_stream_popover();
 
-                const stream_edit_hash = hash_util.stream_edit_url(sub);
+                const stream_edit_hash = hash_util.stream_edit_url(sub, "general");
                 browser_history.go_to_location(stream_edit_hash);
             });
 

web/src/stream_settings_ui.js

@@ -29,6 +29,7 @@ import * as stream_create from "./stream_create";
 import * as stream_data from "./stream_data";
 import * as stream_edit from "./stream_edit";
 import * as stream_edit_subscribers from "./stream_edit_subscribers";
+import * as stream_edit_toggler from "./stream_edit_toggler";
 import * as stream_list from "./stream_list";
 import * as stream_settings_api from "./stream_settings_api";
 import * as stream_settings_components from "./stream_settings_components";
@@ -679,7 +680,7 @@ export function setup_page(callback) {
     }
 }
 
-export function switch_to_stream_row(stream_id) {
+export function switch_to_stream_row(stream_id, right_side_tab) {
     const $stream_row = stream_ui_updates.row_for_stream_id(stream_id);
     const $container = $(".streams-list");
 
@@ -688,7 +689,8 @@ export function switch_to_stream_row(stream_id) {
 
     scroll_util.scroll_element_into_container($stream_row, $container);
 
-    stream_edit.open_edit_panel_for_row($stream_row);
+    stream_edit.open_edit_panel_for_row($stream_row, right_side_tab);
+    stream_edit_toggler.toggler.goto(right_side_tab);
 }
 
 function show_right_section() {
@@ -697,7 +699,7 @@ function show_right_section() {
     resize.resize_stream_subscribers_list();
 }
 
-export function change_state(section) {
+export function change_state(section, right_side_tab) {
     // if in #streams/new form.
     if (section === "new") {
         if (!page_params.is_guest) {
@@ -735,7 +737,7 @@ export function change_state(section) {
             toggler.goto("subscribed");
         } else {
             show_right_section();
-            switch_to_stream_row(stream_id);
+            switch_to_stream_row(stream_id, right_side_tab);
         }
         return;
     }
@@ -744,7 +746,7 @@ export function change_state(section) {
     toggler.goto("subscribed");
 }
 
-export function launch(section) {
+export function launch(section, right_side_tab) {
     setup_page(() => {
         overlays.open_overlay({
             name: "subscriptions",
@@ -754,7 +756,7 @@ export function launch(section) {
                 $(".colorpicker").spectrum("destroy");
             },
         });
-        change_state(section);
+        change_state(section, right_side_tab);
     });
     if (!stream_settings_components.get_active_data().id) {
         if (section === "new") {
@@ -792,7 +794,7 @@ export function switch_rows(event) {
     const row_data = get_row_data($switch_row);
     if (row_data) {
         const stream_id = row_data.id;
-        switch_to_stream_row(stream_id);
+        switch_to_stream_row(stream_id, "general");
     } else if (event === "up_arrow" && !row_data) {
         $("#search_stream_name").trigger("focus");
     }

web/src/user_profile.js

@@ -183,7 +183,7 @@ function format_user_stream_list_item_html(stream, user) {
         show_unsubscribe_button,
         show_private_stream_unsub_tooltip,
         show_last_user_in_private_stream_unsub_tooltip,
-        stream_edit_url: hash_util.stream_edit_url(stream),
+        stream_edit_url: hash_util.stream_edit_url(stream, "general"),
     });
 }
 
@@ -882,7 +882,7 @@ export function initialize() {
             (people.is_my_user_id(target_user_id) ||
                 peer_data.get_subscriber_count(stream_id) === 1)
         ) {
-            const new_hash = hash_util.stream_edit_url(sub);
+            const new_hash = hash_util.stream_edit_url(sub, "general");
             hide_user_profile();
             browser_history.go_to_location(new_hash);
             return;

web/tests/hash_util.test.js

@@ -75,6 +75,18 @@ run_test("test_get_hash_section", () => {
     assert.deepEqual(hash_parser.get_current_hash_section(), "profile");
 });
 
+run_test("get_current_nth_hash_section", () => {
+    window.location.hash = "#settings/profile";
+    assert.equal(hash_parser.get_current_nth_hash_section(1), "#settings");
+    assert.equal(hash_parser.get_current_nth_hash_section(2), "profile");
+
+    window.location.hash = "#settings/10/general";
+    assert.equal(hash_parser.get_current_nth_hash_section(1), "#settings");
+    assert.equal(hash_parser.get_current_nth_hash_section(2), "10");
+    assert.equal(hash_parser.get_current_nth_hash_section(3), "general");
+    assert.equal(hash_parser.get_current_nth_hash_section(4), "");
+});
+
 run_test("build_reload_url", () => {
     window.location.hash = "#settings/profile";
     assert.equal(hash_util.build_reload_url(), "+oldhash=settings%2Fprofile");
@@ -136,7 +148,10 @@ run_test("test_stream_edit_url", () => {
         name: "research & development",
         stream_id: 42,
     };
-    assert.equal(hash_util.stream_edit_url(sub), "#streams/42/research.20.26.20development");
+    assert.equal(
+        hash_util.stream_edit_url(sub, "general"),
+        "#streams/42/research.20.26.20development/general",
+    );
 });
 
 run_test("test_by_conversation_and_time_url", () => {