From 1b24bfcc3130efd22f8a38fca84a6f5364b55fd5 Mon Sep 17 00:00:00 2001
From: evykassirer <evy.kassirer@gmail.com>
Date: Tue, 29 Mar 2022 12:50:43 -0700
Subject: [PATCH] mark as read: Fix banner not closing when x is clicked.

Previously, the X in the mark-as-read banner did nothing.
---
 frontend_tests/node_tests/narrow_activate.js |  3 ++
 frontend_tests/node_tests/recent_topics.js   |  2 ++
 static/js/narrow.js                          |  2 +-
 static/js/unread_ui.js                       | 29 ++++++++++++++------
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/frontend_tests/node_tests/narrow_activate.js b/frontend_tests/node_tests/narrow_activate.js
index 115fc36fc8..cb351818ca 100644
--- a/frontend_tests/node_tests/narrow_activate.js
+++ b/frontend_tests/node_tests/narrow_activate.js
@@ -4,6 +4,7 @@ const {strict: assert} = require("assert");
 
 const {mock_esm, set_global, zrequire} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
+const $ = require("../zjsunit/zjquery");
 
 mock_esm("../../static/js/resize", {
     resize_stream_filters_container: () => {},
@@ -93,6 +94,8 @@ function test_helper() {
     stub(unread_ops, "process_visible");
     stub(compose_closed_ui, "update_buttons_for_stream");
     stub(compose_closed_ui, "update_buttons_for_private");
+    // We don't test the css calls; we just skip over them.
+    $("#mark_as_read_turned_off_banner").toggleClass = () => {};
 
     return {
         clear: () => {
diff --git a/frontend_tests/node_tests/recent_topics.js b/frontend_tests/node_tests/recent_topics.js
index 067f425361..3ed46d4d26 100644
--- a/frontend_tests/node_tests/recent_topics.js
+++ b/frontend_tests/node_tests/recent_topics.js
@@ -351,6 +351,8 @@ test("test_recent_topics_show", ({mock_template, override}) => {
     mock_template("recent_topic_row.hbs", false, () => {});
 
     stub_out_filter_buttons();
+    // We don't test the css calls; we just skip over them.
+    $("#mark_as_read_turned_off_banner").toggleClass = () => {};
 
     rt.clear_for_tests();
     rt.process_messages(messages);
diff --git a/static/js/narrow.js b/static/js/narrow.js
index 8ae31ad064..f05409311f 100644
--- a/static/js/narrow.js
+++ b/static/js/narrow.js
@@ -162,7 +162,7 @@ export function reset_ui_state() {
     narrow_banner.hide_empty_narrow_message();
     message_scroll.hide_top_of_narrow_notices();
     message_scroll.hide_indicators();
-    unread_ui.hide_mark_as_read_turned_off_banner();
+    unread_ui.reset_mark_as_read_turned_off_banner();
 }
 
 export function handle_middle_pane_transition() {
diff --git a/static/js/unread_ui.js b/static/js/unread_ui.js
index dd2a657187..4e3b563047 100644
--- a/static/js/unread_ui.js
+++ b/static/js/unread_ui.js
@@ -14,9 +14,22 @@ import * as unread from "./unread";
 import {notify_server_messages_read} from "./unread_ops";
 
 let last_mention_count = 0;
-
+let user_closed_mark_as_read_turned_off_banner = false;
 export function hide_mark_as_read_turned_off_banner() {
-    $("#mark_as_read_turned_off_banner").hide();
+    // Use visibility instead of hide() to prevent messages on the screen from
+    // shifting vertically.
+    $("#mark_as_read_turned_off_banner").toggleClass("invisible", true);
+}
+
+export function reset_mark_as_read_turned_off_banner() {
+    hide_mark_as_read_turned_off_banner();
+    user_closed_mark_as_read_turned_off_banner = false;
+}
+
+export function notify_messages_remain_unread() {
+    if (!user_closed_mark_as_read_turned_off_banner) {
+        $("#mark_as_read_turned_off_banner").toggleClass("invisible", false);
+    }
 }
 
 function do_new_messages_animation($li) {
@@ -97,15 +110,11 @@ export function should_display_bankruptcy_banner() {
     return false;
 }
 
-export function notify_messages_remain_unread() {
-    $("#mark_as_read_turned_off_banner").show();
-}
-
 export function initialize() {
     update_unread_counts();
 
     $("#mark_as_read_turned_off_banner").html(render_mark_as_read_turned_off_banner());
-    $("#mark_as_read_turned_off_banner").hide();
+    hide_mark_as_read_turned_off_banner();
     $("#mark_view_read").on("click", () => {
         // Mark all messages in the current view as read.
         //
@@ -117,6 +126,10 @@ export function initialize() {
             .filter((message) => unread.message_unread(message));
         notify_server_messages_read(unread_messages);
 
-        $("#mark_as_read_turned_off_banner").hide();
+        hide_mark_as_read_turned_off_banner();
+    });
+    $("#mark_as_read_close").on("click", () => {
+        hide_mark_as_read_turned_off_banner();
+        user_closed_mark_as_read_turned_off_banner = true;
     });
 }