diff --git a/web/src/settings_user_topics.js b/web/src/settings_user_topics.js index 734bf3cf41..493c0aef5f 100644 --- a/web/src/settings_user_topics.js +++ b/web/src/settings_user_topics.js @@ -69,7 +69,14 @@ export function set_up() { e.stopPropagation(); - user_topics.set_user_topic_visibility_policy(stream_id, topic, visibility_policy); + user_topics.set_user_topic_visibility_policy( + stream_id, + topic, + visibility_policy, + false, + false, + $row.closest("#user-topic-settings").find(".alert-notification"), + ); }); populate_list(); diff --git a/web/src/user_topics.js b/web/src/user_topics.js index a6173444eb..3b451d3885 100644 --- a/web/src/user_topics.js +++ b/web/src/user_topics.js @@ -1,3 +1,5 @@ +import $ from "jquery"; + import render_topic_muted from "../templates/topic_muted.hbs"; import * as blueslip from "./blueslip"; @@ -6,9 +8,12 @@ import * as compose_banner from "./compose_banner"; import * as feedback_widget from "./feedback_widget"; import {FoldDict} from "./fold_dict"; import {$t} from "./i18n"; +import * as loading from "./loading"; import {page_params} from "./page_params"; +import * as settings_ui from "./settings_ui"; import * as sub_store from "./sub_store"; import * as timerender from "./timerender"; +import * as ui_report from "./ui_report"; import {get_time_from_date_muted} from "./util"; const all_user_topics = new Map(); @@ -86,6 +91,7 @@ export function set_user_topic_visibility_policy( visibility_policy, from_hotkey, from_banner, + status_element, ) { const data = { stream_id, @@ -93,10 +99,27 @@ export function set_user_topic_visibility_policy( visibility_policy, }; + let $spinner; + if (status_element) { + $spinner = $(status_element).expectOne(); + $spinner.fadeTo(0, 1); + loading.make_indicator($spinner, {text: settings_ui.strings.saving}); + } + channel.post({ url: "/json/user_topics", data, success() { + if (status_element) { + const remove_after = 1000; + const appear_after = 500; + setTimeout(() => { + ui_report.success(settings_ui.strings.success_html, $spinner, remove_after); + settings_ui.display_checkmark($spinner); + }, appear_after); + return; + } + if (visibility_policy === all_visibility_policies.INHERIT) { feedback_widget.dismiss(); return; diff --git a/web/templates/settings/user_topics_settings.hbs b/web/templates/settings/user_topics_settings.hbs index b0ace536bb..1144bfe5f4 100644 --- a/web/templates/settings/user_topics_settings.hbs +++ b/web/templates/settings/user_topics_settings.hbs @@ -22,6 +22,7 @@ {{else}}

{{t "Topic settings"}}

{{/if}} + {{> settings_save_discard_widget section_name="user-topics-settings" show_only_indicator=true }}
diff --git a/web/tests/settings_user_topics.test.js b/web/tests/settings_user_topics.test.js index 3070f696a9..078c3e7e53 100644 --- a/web/tests/settings_user_topics.test.js +++ b/web/tests/settings_user_topics.test.js @@ -67,6 +67,18 @@ run_test("settings", ({override, override_rewire}) => { assert.equal(opts, "tr"); return $topic_tr_html; }; + const $topics_panel_header = $.create("fake.topic_panel_header").attr( + "id", + "user-topic-settings", + ); + const $status_element = $.create("fake.topics_panel_status_element").addClass( + "alert-notification", + ); + $topics_panel_header.set_find_results(".alert-notification", $status_element); + $topic_tr_html.closest = (opts) => { + assert.equal(opts, "#user-topic-settings"); + return $topics_panel_header; + }; let topic_data_called = 0; $topic_tr_html.attr = (opts) => {