messages: Show banner when message history is limited.

This communicates to users clearly about the situation when the
history_limited flag is set by the backend (because message history
was cutoff).

frontend_tests/node_tests/message_fetch.js

@@ -27,6 +27,9 @@ set_global('message_util', {});
 set_global('message_store', {});
 set_global('muting', {});
 set_global('narrow_state', {});
+set_global('notifications', {
+    hide_or_show_history_limit_message: () => {},
+});
 set_global('pm_list', {});
 set_global('resize', {});
 set_global('server_events', {});

frontend_tests/node_tests/narrow_activate.js

@@ -83,6 +83,8 @@ function test_helper() {
     stub('unread_ops', 'process_visible');
     stub('compose', 'update_stream_button_for_stream');
     stub('compose', 'update_stream_button_for_private');
+    stub('notifications', 'hide_history_limit_message');
+    stub('notifications', 'hide_or_show_history_limit_message');
 
     blueslip.debug = noop;
 
@@ -202,6 +204,7 @@ run_test('basics', () => {
     helper.assert_events([
         'notifications.clear_compose_notifications',
         'notifications.redraw_title',
+        'notifications.hide_history_limit_message',
         'ui_util.change_tab_to',
         'message_scroll.hide_indicators',
         'unread_ops.process_visible',
@@ -234,6 +237,7 @@ run_test('basics', () => {
     cont();
     helper.assert_events([
         'report narrow times',
+        'notifications.hide_or_show_history_limit_message',
     ]);
 
 });

static/js/message_fetch.js

@@ -72,6 +72,7 @@ function get_messages_success(data, opts) {
                 history_limited: data.history_limited,
             });
         }
+        notifications.hide_or_show_history_limit_message(opts.msg_list);
     }
 
     if (opts.num_after > 0) {

static/js/narrow.js

@@ -92,7 +92,7 @@ exports.activate = function (raw_operators, opts) {
     }
 
     notifications.redraw_title();
-
+    notifications.hide_history_limit_message();
     blueslip.debug("Narrowed", {operators: _.map(operators,
                                                  function (e) { return e.operator; }),
                                 trigger: opts ? opts.trigger : undefined,
@@ -658,6 +658,7 @@ function handle_post_narrow_deactivate_processes() {
     tab_bar.initialize();
     exports.narrow_title = "home";
     notifications.redraw_title();
+    notifications.hide_or_show_history_limit_message(home_msg_list);
 }
 
 exports.deactivate = function () {

static/js/notifications.js

@@ -181,6 +181,29 @@ exports.redraw_title = function () {
     }
 };
 
+exports.show_history_limit_message = function () {
+    $(".top-messages-logo").hide();
+    $(".history-limited-box").show();
+    narrow.hide_empty_narrow_message();
+};
+
+exports.hide_history_limit_message = function () {
+    $(".top-messages-logo").show();
+    $(".history-limited-box").hide();
+};
+
+exports.hide_or_show_history_limit_message = function (msg_list) {
+    if (msg_list !== current_msg_list) {
+        return;
+    }
+
+    if (msg_list.fetch_status.history_limited()) {
+        notifications.show_history_limit_message();
+    } else {
+        notifications.hide_history_limit_message();
+    }
+};
+
 function flash_pms() {
     // When you have unread PMs, toggle the favicon between the unread count and
     // a special icon indicating that you have unread PMs.

static/styles/night_mode.scss

@@ -460,6 +460,10 @@ on a dark background, and don't change the dark labels dark either. */
         stroke: hsl(0, 0%, 100%);
     }
 
+    .history-limited-box {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
     #unmute_muted_topic_notification,
     .message_content code,
     .message_edit_content code,

static/styles/zulip.scss

@@ -85,6 +85,20 @@ p.n-margin {
     z-index: 102;
 }
 
+.history-limited-box {
+    color: hsl(16, 60%, 45%);
+    border: 1px solid hsl(16, 60%, 45%);
+    box-shadow: 0 0 2px hsl(16, 60%, 45%);
+    display: none;
+    height: 28x;
+    font-size: 16px;
+    margin: 0 auto 12px;
+    padding: 5px;
+    p {
+        margin: 0;
+    }
+}
+
 .top-messages-logo {
     width: 24px;
     height: 24px;

templates/zerver/app/home.html

@@ -8,6 +8,16 @@
             </g>
         </svg>
     </div>
+    <div class="history-limited-box">
+        <p>
+            {% trans %}
+            Your organization has more than 10,000
+            messages in its archive, so you can't see some older
+            messages that would otherwise appear here.
+            <a href="/plans/">See plans and pricing.</a>
+            {% endtrans %}
+        </p>
+    </div>
     <div id="loading_more_messages_indicator"></div>
     <div id="page_loading_indicator"></div>
     <div id="first_run_message" class="empty_feed_notice">